Enhance TotalEnergyConsumptionChart layout and tooltip functionality.

lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart

@@ -15,6 +15,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
       ),
       padding: const EdgeInsets.all(30),
       child: Column(
+        spacing: 20,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
@@ -24,32 +25,34 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
               fontWeight: FontWeight.w700,
             ),
           ),
-          SizedBox(height: 20),
           Expanded(
             child: LineChart(
               LineChartData(
-                lineTouchData: LineTouchData(
-                  handleBuiltInTouches: true,
-                  touchSpotThreshold: 2,
-                  touchTooltipData: _lineTouchTooltipData(),
-                ),
-
                 titlesData: _titlesData(context),
                 lineBarsData: _lineBarsData,
-                gridData: const FlGridData(
+                gridData: FlGridData(
                   show: true,
                   drawVerticalLine: false,
                   drawHorizontalLine: true,
                 ),
                 borderData: FlBorderData(
-                  show: false,
+                  show: true,
-                  border: Border.all(
+                  border: const Border.symmetric(
-                    color: ColorsManager.vividBlue.withValues(alpha: 0.2),
+                    horizontal: BorderSide(
-                    width: 10,
+                      color: ColorsManager.greyColor,
+                      width: 1,
+                      style: BorderStyle.solid,
+                    ),
                   ),
                 ),
+                lineTouchData: LineTouchData(
+                  handleBuiltInTouches: true,
+                  touchSpotThreshold: 2,
+                  touchTooltipData: _lineTouchTooltipData(),
+                ),
               ),
-              
+              duration: Durations.extralong1,
+              curve: Curves.easeIn,
             ),
           ),
         ],
@@ -61,7 +64,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
     return [
       LineChartBarData(
         preventCurveOvershootingThreshold: 0.1,
-        curveSmoothness: 0.5,
+        curveSmoothness: 0.55,
         preventCurveOverShooting: true,
         spots: _chartData
             .asMap()
@@ -104,13 +107,20 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
         drawBelowEverything: true,
         sideTitles: SideTitles(
           interval: 1,
+          reservedSize: 32,
           showTitles: true,
           maxIncluded: true,
-          getTitlesWidget: (value, meta) => Text(
+          getTitlesWidget: (value, meta) => Padding(
-            _chartData[value.toInt()].time,
+            padding: const EdgeInsets.only(top: 20.0),
-            style: context.textTheme.bodySmall?.copyWith(
+            child: FittedBox(
-              fontSize: 12,
+              fit: BoxFit.scaleDown,
-              color: ColorsManager.greyColor,
+              child: Text(
+                _chartData[value.toInt()].time,
+                style: context.textTheme.bodySmall?.copyWith(
+                  fontSize: 12,
+                  color: ColorsManager.greyColor,
+                ),
+              ),
             ),
           ),
         ),
@@ -119,13 +129,13 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
         sideTitles: SideTitles(
           showTitles: true,
           maxIncluded: true,
-          reservedSize: 90,
+          reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(
             padding: const EdgeInsetsDirectional.only(end: 12),
             child: FittedBox(
               fit: BoxFit.scaleDown,
               child: Text(
-                '${value.toStringAsFixed(0).replaceAllMapped(RegExp(r'(\d)(?=(\d{3})+$)'), (match) => '${match[1]},')} kWh',
+                _formatNumberToKwh(value),
                 style: context.textTheme.bodySmall?.copyWith(
                   fontSize: 12,
                   color: ColorsManager.greyColor,
@@ -142,25 +152,58 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
 
   LineTouchTooltipData _lineTouchTooltipData() {
     return LineTouchTooltipData(
-      getTooltipColor: (touchTooltipItem) => Colors.white,
+      getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
-      tooltipRoundedRadius: 10.0,
+      tooltipBorder: const BorderSide(color: ColorsManager.semiTransparentBlack),
+      tooltipRoundedRadius: 16,
+      showOnTopOfTheChartBoxArea: false,
       tooltipPadding: const EdgeInsets.all(8.0),
-      tooltipBorder: BorderSide(color: Colors.grey, width: 1),
       getTooltipItems: _getTooltipItems,
     );
   }
 
-  List<LineTooltipItem?> _getTooltipItems(List<LineBarSpot> touchedSpots) =>
+  List<LineTooltipItem?> _getTooltipItems(List<LineBarSpot> touchedSpots) {
-      touchedSpots.map((spot) {
+    return touchedSpots.map((spot) {
-        return LineTooltipItem(
+      return LineTooltipItem(
-          '${spot.x},\n ${spot.y.toStringAsFixed(2)} kWh',
+        _getToolTipLabel(spot.x + 1, spot.y),
-          const TextStyle(
+        const TextStyle(
-            color: Colors.blue,
+          color: ColorsManager.textPrimaryColor,
-            fontWeight: FontWeight.bold,
+          fontWeight: FontWeight.w600,
-            fontSize: 12,
+          fontSize: 12,
-          ),
+        ),
-        );
+      );
-      }).toList();
+    }).toList();
+  }
+
+  String _getToolTipLabel(num month, double value) {
+    final monthLabel = _getMonthNameFrom(month);
+    final valueLabel = _formatNumberToKwh(value);
+    return [monthLabel, valueLabel]
+        .where((element) => element.isNotEmpty)
+        .join(', ');
+  }
+
+  String _formatNumberToKwh(double value) {
+    final regExp = RegExp(r'(\d)(?=(\d{3})+$)');
+    return '${value.toStringAsFixed(0).replaceAllMapped(regExp, (match) => '${match[1]},')} kWh';
+  }
+
+  String _getMonthNameFrom(num month) {
+    final values = {
+      1: 'JAN',
+      2: 'FEB',
+      3: 'MAR',
+      4: 'APR',
+      5: 'MAY',
+      6: 'JUN',
+      7: 'JUL',
+      8: 'AUG',
+      9: 'SEP',
+      10: 'OCT',
+      11: 'NOV',
+      12: 'DEC',
+    };
+    return values[month.toInt()] ?? 'N/A';
+  }
 }
 
 const _chartData = [
@@ -183,8 +226,8 @@ class EnergyData {
   final String time;
   final double consumption;
 }
-// energy_consumption_chart will return id, name and consumption
 
+// energy_consumption_chart will return id, name and consumption
 final s = {
   "1": {
     "phaseOne": 1000,