progress towards making TotalEnergyConsumptionChart functional and look like the design.

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

@@ -1,4 +1,7 @@
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class TotalEnergyConsumptionChart extends StatelessWidget {
@@ -11,7 +14,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
         borderRadius: BorderRadius.circular(30),
       ),
       padding: const EdgeInsets.all(30),
-      child: const Column(
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
@@ -23,10 +26,169 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
           ),
           SizedBox(height: 20),
           Expanded(
-            child: Placeholder(),
+            child: LineChart(
+              LineChartData(
+                lineTouchData: LineTouchData(
+                  handleBuiltInTouches: true,
+                  touchSpotThreshold: 2,
+                  touchTooltipData: _lineTouchTooltipData(),
+                ),
+
+                titlesData: _titlesData(context),
+                lineBarsData: _lineBarsData,
+                gridData: const FlGridData(
+                  show: true,
+                  drawVerticalLine: false,
+                  drawHorizontalLine: true,
+                ),
+                borderData: FlBorderData(
+                  show: false,
+                  border: Border.all(
+                    color: ColorsManager.vividBlue.withValues(alpha: 0.2),
+                    width: 10,
+                  ),
+                ),
+              ),
+              
+            ),
           ),
         ],
       ),
     );
   }
+
+  List<LineChartBarData> get _lineBarsData {
+    return [
+      LineChartBarData(
+        preventCurveOvershootingThreshold: 0.1,
+        curveSmoothness: 0.5,
+        preventCurveOverShooting: true,
+        spots: _chartData
+            .asMap()
+            .entries
+            .map(
+              (entry) => FlSpot(
+                entry.key.toDouble(),
+                entry.value.consumption,
+              ),
+            )
+            .toList(),
+        color: ColorsManager.blueColor.withValues(alpha: 0.6),
+        shadow: Shadow(color: Colors.black12),
+        show: true,
+        isCurved: true,
+        belowBarData: BarAreaData(
+          show: true,
+          gradient: LinearGradient(
+            colors: [
+              ColorsManager.vividBlue.withValues(alpha: 0.3),
+              ColorsManager.vividBlue.withValues(alpha: 0.2),
+              ColorsManager.vividBlue.withValues(alpha: 0.1),
+              Colors.transparent,
+            ],
+            begin: Alignment.center,
+            end: Alignment.bottomCenter,
+          ),
+        ),
+        dotData: FlDotData(show: false),
+        isStrokeCapRound: true,
+        barWidth: 3,
+      ),
+    ];
+  }
+
+  FlTitlesData _titlesData(BuildContext context) {
+    return FlTitlesData(
+      show: true,
+      bottomTitles: AxisTitles(
+        drawBelowEverything: true,
+        sideTitles: SideTitles(
+          interval: 1,
+          showTitles: true,
+          maxIncluded: true,
+          getTitlesWidget: (value, meta) => Text(
+            _chartData[value.toInt()].time,
+            style: context.textTheme.bodySmall?.copyWith(
+              fontSize: 12,
+              color: ColorsManager.greyColor,
+            ),
+          ),
+        ),
+      ),
+      leftTitles: AxisTitles(
+        sideTitles: SideTitles(
+          showTitles: true,
+          maxIncluded: true,
+          reservedSize: 90,
+          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',
+                style: context.textTheme.bodySmall?.copyWith(
+                  fontSize: 12,
+                  color: ColorsManager.greyColor,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+      rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
+      topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
+    );
+  }
+
+  LineTouchTooltipData _lineTouchTooltipData() {
+    return LineTouchTooltipData(
+      getTooltipColor: (touchTooltipItem) => Colors.white,
+      tooltipRoundedRadius: 10.0,
+      tooltipPadding: const EdgeInsets.all(8.0),
+      tooltipBorder: BorderSide(color: Colors.grey, width: 1),
+      getTooltipItems: _getTooltipItems,
+    );
+  }
+
+  List<LineTooltipItem?> _getTooltipItems(List<LineBarSpot> touchedSpots) =>
+      touchedSpots.map((spot) {
+        return LineTooltipItem(
+          '${spot.x},\n ${spot.y.toStringAsFixed(2)} kWh',
+          const TextStyle(
+            color: Colors.blue,
+            fontWeight: FontWeight.bold,
+            fontSize: 12,
+          ),
+        );
+      }).toList();
 }
+
+const _chartData = [
+  EnergyData('JAN', 18000),
+  EnergyData('FEB', 25000),
+  EnergyData('MAR', 22000),
+  EnergyData('APR', 21000),
+  EnergyData('MAY', 30000),
+  EnergyData('JUN', 23000),
+  EnergyData('JUL', 21000),
+  EnergyData('AUG', 25000),
+  EnergyData('SEP', 21100),
+  EnergyData('OCT', 22000),
+  EnergyData('NOV', 21000),
+  EnergyData('DEC', 27500),
+];
+
+class EnergyData {
+  const EnergyData(this.time, this.consumption);
+  final String time;
+  final double consumption;
+}
+// energy_consumption_chart will return id, name and consumption
+
+final s = {
+  "1": {
+    "phaseOne": 1000,
+    "phaseTwo": 2000,
+    "phaseThree": 3000,
+  }
+};