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/models/analytics_device.dart

@@ -1,13 +1,65 @@
 class AnalyticsDevice {
-  const AnalyticsDevice({required this.name, required this.uuid});
+  const AnalyticsDevice({
+    required this.uuid,
+    required this.name,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.deviceTuyaUuid,
+    required this.isActive,
+    required this.productDevice,
+  });
 
   final String uuid;
   final String name;
+  final DateTime createdAt;
+  final DateTime updatedAt;
+  final String deviceTuyaUuid;
+  final bool isActive;
+  final ProductDevice productDevice;
 
   factory AnalyticsDevice.fromJson(Map<String, dynamic> json) {
     return AnalyticsDevice(
       uuid: json['uuid'] as String? ?? '',
       name: json['name'] as String? ?? '',
+      createdAt: DateTime.parse(json['createdAt'] as String? ?? ''),
+      updatedAt: DateTime.parse(json['updatedAt'] as String? ?? ''),
+      deviceTuyaUuid: json['deviceTuyaUuid'] as String? ?? '',
+      isActive: json['isActive'] as bool? ?? false,
+      productDevice: ProductDevice.fromJson(
+        json['productDevice'] as Map<String, dynamic>? ?? {},
+      ),
+    );
+  }
+}
+
+class ProductDevice {
+  const ProductDevice({
+    required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.catName,
+    required this.prodId,
+    required this.name,
+    required this.prodType,
+  });
+
+  final String uuid;
+  final DateTime createdAt;
+  final DateTime updatedAt;
+  final String catName;
+  final String prodId;
+  final String name;
+  final String prodType;
+
+  factory ProductDevice.fromJson(Map<String, dynamic> json) {
+    return ProductDevice(
+      uuid: json['uuid'] as String? ?? '',
+      createdAt: DateTime.parse(json['createdAt'] as String? ?? ''),
+      updatedAt: DateTime.parse(json['updatedAt'] as String? ?? ''),
+      catName: json['catName'] as String? ?? '',
+      prodId: json['prodId'] as String? ?? '',
+      name: json['name'] as String? ?? '',
+      prodType: json['prodType'] as String? ?? '',
     );
   }
 }

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,13 +22,27 @@ 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(
+  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,
@@ -43,10 +63,10 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
             children: [
               CircleAvatar(
                 radius: 4,
-              backgroundColor: device.color,
+                backgroundColor: deviceColor,
               ),
               Text(
-              device.deviceName,
+                device.name,
                 textAlign: TextAlign.center,
                 style: const TextStyle(
                   color: ColorsManager.blackColor,
@@ -57,6 +77,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }

lib/pages/analytics/services/energy_consumption_per_device/remote_energy_consumption_per_device_service.dart

@@ -34,10 +34,7 @@ abstract final class _EnergyConsumptionPerDeviceMapper {
   static List<DeviceEnergyDataModel> map(dynamic data) {
     final json = data as Map<String, dynamic>? ?? {};
     final mappedData = json['data'] as List<dynamic>? ?? [];
-    return mappedData.where((e) {
-      final deviceData = (e as Map<String, dynamic>)['data'] as List<dynamic>? ?? [];
-      return deviceData.isNotEmpty;
-    }).map((e) {
+    return mappedData.map((e) {
       final deviceData = e as Map<String, dynamic>;
       final energyData = deviceData['data'] as List<dynamic>;