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,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) {
+  Widget _buildDeviceCell(BuildContext context, AnalyticsDevice device) {
-    return Container(
+    final deviceColor = chartData
-      height: MediaQuery.sizeOf(context).height * 0.0365,
+        .firstWhere(
-      padding: const EdgeInsetsDirectional.symmetric(
+          (element) => element.deviceId == device.uuid,
-        vertical: 8,
+          orElse: () => const DeviceEnergyDataModel(
-        horizontal: 12,
+            energy: [],
-      ),
+            deviceName: '',
-      decoration: BoxDecoration(
+            deviceId: '',
-        borderRadius: BorderRadiusDirectional.circular(8),
+            color: Colors.red,
-        border: Border.all(
+          ),
-          color: ColorsManager.greyColor,
+        )
-          width: 1,
+        .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,
         ),
-      ),
+        decoration: BoxDecoration(
-      child: FittedBox(
+          borderRadius: BorderRadiusDirectional.circular(8),
-        fit: BoxFit.scaleDown,
+          border: Border.all(
-        alignment: Alignment.center,
+            color: ColorsManager.greyColor,
-        child: Row(
+            width: 1,
-          spacing: 6,
+          ),
-          children: [
+        ),
-            CircleAvatar(
+        child: FittedBox(
-              radius: 4,
+          fit: BoxFit.scaleDown,
-              backgroundColor: device.color,
+          alignment: Alignment.center,
-            ),
+          child: Row(
-            Text(
+            spacing: 6,
-              device.deviceName,
+            children: [
-              textAlign: TextAlign.center,
+              CircleAvatar(
-              style: const TextStyle(
+                radius: 4,
-                color: ColorsManager.blackColor,
+                backgroundColor: deviceColor,
-                fontWeight: FontWeight.w400,
-                fontSize: 14,
               ),
-            ),
+              Text(
-          ],
+                device.name,
+                textAlign: TextAlign.center,
+                style: const TextStyle(
+                  color: ColorsManager.blackColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 14,
+                ),
+              ),
+            ],
+          ),
         ),
       ),
     );

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) {
+    return mappedData.map((e) {
-      final deviceData = (e as Map<String, dynamic>)['data'] as List<dynamic>? ?? [];
-      return deviceData.isNotEmpty;
-    }).map((e) {
       final deviceData = e as Map<String, dynamic>;
       final energyData = deviceData['data'] as List<dynamic>;