fix layout of axis label of chart widgets

OPTIMISE-Platform · Apr 12, 2024 · 4543396 · 4543396
1 parent 830bd83
commit 4543396
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/lib/widgets/tabs/dashboard/smart_service_widgets/bar_chart.dart b/lib/widgets/tabs/dashboard/smart_service_widgets/bar_chart.dart
@@ -72,8 +72,17 @@ class SmSeBarChart extends SmSeLineChart {
                           ),
                         ),
                         bottomTitles: AxisTitles(
-                          sideTitles: BaseChartFormatter.getBottomTitles(
-                              context, dateFormat),
+                          sideTitles: (rawTimestamps.length < 10 &&
+                                      MediaQuery.of(context).orientation ==
+                                          Orientation.portrait) ||
+                                  (rawTimestamps.length < 21 &&
+                                      MediaQuery.of(context).orientation ==
+                                          Orientation.landscape)
+                              ? BaseChartFormatter.getBottomTitles(
+                                  context, dateFormat)
+                              : BaseChartFormatter.getBottomTitles(
+                                  context, dateFormat,
+                                  rotated: true, reservedSize: 50),
                         ),
                         leftTitles: AxisTitles(
                             sideTitles:

diff --git a/lib/widgets/tabs/dashboard/smart_service_widgets/line_chart.dart b/lib/widgets/tabs/dashboard/smart_service_widgets/line_chart.dart
@@ -73,7 +73,6 @@ class SmSeLineChart extends SmSeRequest {
 
   @override
   Widget buildInternal(BuildContext context, bool parentFlexible) {
-
     final Widget w = _lines.isEmpty
         ? const Center(child: Text("No Data"))
         : Container(
@@ -103,7 +102,15 @@ class SmSeLineChart extends SmSeRequest {
                         ),
                       ),
                       bottomTitles: AxisTitles(
-                        sideTitles: BaseChartFormatter.getBottomTitles(context, dateFormat),
+                        sideTitles:
+                                (rawTimestamps.length > 100 &&
+                                    MediaQuery.of(context).orientation ==
+                                        Orientation.landscape)
+                            ? BaseChartFormatter.getBottomTitles(
+                                    context, dateFormat,
+                                    rotated: true, reservedSize: 50)
+                            : BaseChartFormatter.getBottomTitles(
+                                context, dateFormat),
                       ),
                       leftTitles: AxisTitles(
                         sideTitles: BaseChartFormatter.getLeftTitles(context),
@@ -314,7 +321,9 @@ class SmSeLineChart extends SmSeRequest {
 
   Future<void> addFromRequest(Request request) async {
     final resp = await request.perform<List<dynamic>>();
-    if (resp.statusCode == null || resp.statusCode! > 299 || resp.data == null) {
+    if (resp.statusCode == null ||
+        resp.statusCode! > 299 ||
+        resp.data == null) {
       return;
     } else {
       final respArr = resp.data!;

diff --git a/lib/widgets/tabs/dashboard/smart_service_widgets/shared/chart.dart b/lib/widgets/tabs/dashboard/smart_service_widgets/shared/chart.dart
@@ -19,8 +19,11 @@ import 'package:flutter/cupertino.dart';
 import 'package:intl/intl.dart';
 
 class BaseChartFormatter {
-
-  static SideTitles getBottomTitles(BuildContext context, DateFormat dtFormat, {double reservedSize = 20, bool isUtc = true, double? interval, }) {
+  static SideTitles getBottomTitles(BuildContext context, DateFormat dtFormat,
+      {double reservedSize = 20,
+      bool isUtc = true,
+      double? interval,
+      bool rotated = false}) {
     return SideTitles(
         showTitles: true,
         reservedSize: reservedSize,
@@ -32,26 +35,39 @@ class BaseChartFormatter {
           final dt =
               DateTime.fromMillisecondsSinceEpoch(val.floor(), isUtc: isUtc)
                   .toLocal();
-          debugPrint(dt.toString());
           final formatted = dtFormat.format(dt);
-          debugPrint(formatted);
+          if (rotated) {
+            return Container(
+                padding: const EdgeInsets.only(top: 3),
+                child: RotatedBox(
+                    quarterTurns: -1,
+                    child: Text(formatted,
+                        style: TextStyle(
+                            fontSize:
+                            MediaQuery.textScalerOf(context).scale(12)))));
+          }
           return Container(
               padding: const EdgeInsets.only(top: 3),
               child: Text(formatted,
-                  style: TextStyle(
-                      fontSize: MediaQuery.textScalerOf(context).scale(12))));
+                      style: TextStyle(
+                          fontSize:
+                              MediaQuery.textScalerOf(context).scale(12))));
         });
   }
 
-  static SideTitles getLeftTitles(BuildContext context, {double reservedSize = 30, String? suffix}) {
+  static SideTitles getLeftTitles(BuildContext context,
+      {double reservedSize = 30, String? suffix}) {
     return SideTitles(
         showTitles: true,
         reservedSize: reservedSize,
         getTitlesWidget: (val, meta) {
           if (val == meta.max || val == meta.min) {
             return const SizedBox.shrink();
           }
-          return Text(suffix == null ? meta.formattedValue : "${meta.formattedValue} $suffix",
+          return Text(
+              suffix == null
+                  ? meta.formattedValue
+                  : "${meta.formattedValue} $suffix",
               style: TextStyle(
                   fontSize: MediaQuery.textScalerOf(context).scale(12)));
         });