Create EnergyConsumptionPerDeviceChartBox widget and update imports in AnalyticsEnergyManagementView

lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart';
-import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -21,7 +21,7 @@ class AnalyticsEnergyManagementView extends StatelessWidget {
               spacing: 20,
               children: [
                 Expanded(child: TotalEnergyConsumptionChartBox()),
-                Expanded(child: EnergyConsumptionPerDeviceChart()),
+                Expanded(child: EnergyConsumptionPerDeviceChartBox()),
               ],
             ),
           ),

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

@@ -1,29 +1,123 @@
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/utils/style.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class EnergyConsumptionPerDeviceChart extends StatelessWidget {
   const EnergyConsumptionPerDeviceChart({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return LineChart(
-      decoration: subSectionContainerDecoration.copyWith(
+      LineChartData(
-        borderRadius: BorderRadius.circular(30),
+        gridData: const FlGridData(
-      ),
+          show: true,
-      padding: const EdgeInsets.all(30),
+          drawVerticalLine: false,
-      child: const Column(
+          drawHorizontalLine: false,
-        crossAxisAlignment: CrossAxisAlignment.start,
+          verticalInterval: 1,
-        children: [
+        ),
-          Text(
+        titlesData: FlTitlesData(
-            'Energy Consumption per Device',
+          show: true,
-            style: TextStyle(
+          bottomTitles: AxisTitles(
-              fontSize: 22,
+            sideTitles: SideTitles(
-              fontWeight: FontWeight.w700,
+              showTitles: true,
+              reservedSize: 30,
+              interval: 4,
             ),
           ),
-          SizedBox(height: 20),
+          leftTitles: AxisTitles(
-          Expanded(
+            drawBelowEverything: true,
-            child: Placeholder(),
+            sideTitles: SideTitles(
+              interval: 2,
+              showTitles: true,
+              reservedSize: 40,
+            ),
+          ),
+          rightTitles: const AxisTitles(
+            sideTitles: SideTitles(showTitles: false),
+          ),
+          topTitles: const AxisTitles(
+            sideTitles: SideTitles(showTitles: false),
+          ),
+        ),
+        lineTouchData: LineTouchData(
+          getTouchLineEnd: (data, index) => double.infinity,
+          getTouchedSpotIndicator:
+              (LineChartBarData barData, List<int> spotIndexes) {
+            return spotIndexes.map((spotIndex) {
+              return TouchedSpotIndicatorData(
+                const FlLine(color: Colors.orange, strokeWidth: 3),
+                FlDotData(
+                  getDotPainter: (spot, percent, barData, index) =>
+                      FlDotCirclePainter(
+                    radius: 8,
+                    color: Colors.orange,
+                  ),
+                ),
+              );
+            }).toList();
+          },
+          touchTooltipData: LineTouchTooltipData(
+            getTooltipColor: (touchedSpot) => Colors.red,
+            getTooltipItems: (List<LineBarSpot> touchedSpots) => touchedSpots
+                .map(
+                  (touchedSpot) => LineTooltipItem(
+                    touchedSpot.y.toString(),
+                    const TextStyle(
+                      color: ColorsManager.whiteColors,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 16,
+                    ),
+                  ),
+                )
+                .toList(),
+          ),
+        ),
+        borderData: FlBorderData(
+          show: true,
+          border: Border.all(
+            color: Colors.grey,
+          ),
+        ),
+        minX: 0,
+        maxX: 11,
+        minY: 0,
+        maxY: 6,
+        lineBarsData: [
+          LineChartBarData(
+            spots: const [
+              FlSpot(0, 0),
+              FlSpot(2, 1),
+              FlSpot(4.9, 5),
+              FlSpot(6.8, 5),
+              FlSpot(8, 1),
+              FlSpot(10, 2),
+              FlSpot(11, 2.5),
+            ],
+            dashArray: [12, 18],
+            isCurved: true,
+            color: Colors.red,
+            barWidth: 4,
+            isStrokeCapRound: true,
+            dotData: const FlDotData(
+              show: false,
+            ),
+          ),
+          LineChartBarData(
+            spots: const [
+              FlSpot(0, 0),
+              FlSpot(3.9, 4),
+              FlSpot(5.8, 4),
+              FlSpot(7, 0),
+              FlSpot(9, 1),
+              FlSpot(10, 1),
+              FlSpot(11, 1.5),
+            ],
+            dashArray: [12, 18],
+            isCurved: true,
+            color: Colors.amber,
+            barWidth: 4,
+            isStrokeCapRound: true,
+            dotData: const FlDotData(show: false),
           ),
         ],
       ),

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

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
+  const EnergyConsumptionPerDeviceChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: subSectionContainerDecoration.copyWith(
+        borderRadius: BorderRadius.circular(30),
+      ),
+      padding: const EdgeInsets.all(30),
+      child: const Column(
+        spacing: 20,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Energy Consumption per Device',
+            style: TextStyle(
+              fontSize: 22,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+          Divider(height: 0),
+          Expanded(child: EnergyConsumptionPerDeviceChart()),
+        ],
+      ),
+    );
+  }
+}