SP-1495 reworks.

1. Overlapping line not removed.
2. The colors of the data on X axis and Y axis are not identical to design.
3. Day 1 and 2 are missing on the X axis.
4. When the chart loads, we see it coming from the top right corner (check the attached video).
5. Display all available devices even if they have no data and make the chart empty state.

lib/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart

@@ -38,7 +38,7 @@ abstract final class EnergyManagementChartsHelper {
         sideTitles: SideTitles(
           showTitles: true,
           maxIncluded: false,
-          minIncluded: false,
+          minIncluded: true,
           interval: leftTitlesInterval,
           reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
@@ -46,6 +47,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
                     flex: 2,
                     child: EnergyConsumptionPerDeviceDevicesList(
                       chartData: state.chartData,
+                      devices: context.watch<AnalyticsDevicesBloc>().state.devices,
                     ),
                   ),
                 ],

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

@@ -1,10 +1,16 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
 import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
-  const EnergyConsumptionPerDeviceDevicesList({required this.chartData, super.key});
+  const EnergyConsumptionPerDeviceDevicesList({
+    required this.chartData,
+    required this.devices,
+    super.key,
+  });
 
+  final List<AnalyticsDevice> devices;
   final List<DeviceEnergyDataModel> chartData;
 
   @override
@@ -16,45 +22,60 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisAlignment: MainAxisAlignment.end,
-        children: chartData.map((e) => _buildDeviceCell(context, e)).toList(),
+        children: devices.map((e) => _buildDeviceCell(context, e)).toList(),
       ),
     );
   }
 
-  Widget _buildDeviceCell(BuildContext context, DeviceEnergyDataModel device) {
-    return Container(
-      height: MediaQuery.sizeOf(context).height * 0.0365,
-      padding: const EdgeInsetsDirectional.symmetric(
-        vertical: 8,
-        horizontal: 12,
-      ),
-      decoration: BoxDecoration(
-        borderRadius: BorderRadiusDirectional.circular(8),
-        border: Border.all(
-          color: ColorsManager.greyColor,
-          width: 1,
+  Widget _buildDeviceCell(BuildContext context, AnalyticsDevice device) {
+    final deviceColor = chartData
+        .firstWhere(
+          (element) => element.deviceId == device.uuid,
+          orElse: () => const DeviceEnergyDataModel(
+            energy: [],
+            deviceName: '',
+            deviceId: '',
+            color: Colors.red,
+          ),
+        )
+        .color;
+
+    return Tooltip(
+      message: '${device.name}\n${device.productDevice.uuid}',
+      child: Container(
+        height: MediaQuery.sizeOf(context).height * 0.0365,
+        padding: const EdgeInsetsDirectional.symmetric(
+          vertical: 8,
+          horizontal: 12,
         ),
-      ),
-      child: FittedBox(
-        fit: BoxFit.scaleDown,
-        alignment: Alignment.center,
-        child: Row(
-          spacing: 6,
-          children: [
-            CircleAvatar(
-              radius: 4,
-              backgroundColor: device.color,
-            ),
-            Text(
-              device.deviceName,
-              textAlign: TextAlign.center,
-              style: const TextStyle(
-                color: ColorsManager.blackColor,
-                fontWeight: FontWeight.w400,
-                fontSize: 14,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadiusDirectional.circular(8),
+          border: Border.all(
+            color: ColorsManager.greyColor,
+            width: 1,
+          ),
+        ),
+        child: FittedBox(
+          fit: BoxFit.scaleDown,
+          alignment: Alignment.center,
+          child: Row(
+            spacing: 6,
+            children: [
+              CircleAvatar(
+                radius: 4,
+                backgroundColor: deviceColor,
               ),
-            ),
-          ],
+              Text(
+                device.name,
+                textAlign: TextAlign.center,
+                style: const TextStyle(
+                  color: ColorsManager.blackColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 14,
+                ),
+              ),
+            ],
+          ),
         ),
       ),
     );