loads energy management data on date changed.

1495-energy-consumption-per-device-api-integration.

lib/pages/analytics/modules/analytics/views/analytics_page.dart

@@ -16,7 +16,7 @@ import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_energy_management_analytics_devices_service.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_occupancy_analytics_devices_service.dart';
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart';
-import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/fake_energy_consumption_per_device_service.dart';
+import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/remote_energy_consumption_per_device_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupacy/fake_occupacy_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart';
@@ -62,7 +62,7 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
         ),
         BlocProvider(
           create: (context) => EnergyConsumptionPerDeviceBloc(
-            FakeEnergyConsumptionPerDeviceService(),
+            RemoteEnergyConsumptionPerDeviceService(_httpService),
           ),
         ),
         BlocProvider(

lib/pages/analytics/modules/analytics/widgets/analytics_page_tabs_and_children.dart

@@ -14,7 +14,6 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final spaceTreeState = context.read<SpaceTreeBloc>().state;
     return BlocBuilder<AnalyticsTabBloc, AnalyticsPageTab>(
       buildWhen: (previous, current) => previous != current,
       builder: (context, selectedTab) => Column(
@@ -68,7 +67,12 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
                             context.read<AnalyticsDatePickerBloc>().add(
                                   UpdateAnalyticsDatePickerEvent(montlyDate: value),
                                 );
-                            FetchEnergyManagementDataHelper.loadEnergyManagementData(
+
+                            final spaceTreeState =
+                                context.read<SpaceTreeBloc>().state;
+                            if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                              FetchEnergyManagementDataHelper
+                                  .loadEnergyManagementData(
                                 context,
                                 selectedDate: value,
                                 communityId:
@@ -77,6 +81,7 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
                                 spaceId:
                                     spaceTreeState.selectedSpaces.firstOrNull ?? '',
                               );
+                            }
                           },
                           selectedDate: context
                               .watch<AnalyticsDatePickerBloc>()

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

@@ -42,7 +42,12 @@ abstract final class FetchEnergyManagementDataHelper {
       spaceId: spaceId,
     );
     loadEnergyConsumptionByPhases(context, selectedDate: selectedDate);
-    loadEnergyConsumptionPerDevice(context);
+    loadEnergyConsumptionPerDevice(
+      context,
+      communityId: communityId,
+      spaceId: spaceId,
+      selectedDate: selectedDate0,
+    );
     loadRealtimeDeviceChanges(context);
     loadPowerClampInfo(context);
   }
@@ -76,10 +81,19 @@ abstract final class FetchEnergyManagementDataHelper {
         );
   }
 
-  static void loadEnergyConsumptionPerDevice(BuildContext context) {
-    const param = GetEnergyConsumptionPerDeviceParam();
+  static void loadEnergyConsumptionPerDevice(
+    BuildContext context, {
+    DateTime? selectedDate,
+    required String communityId,
+    required String spaceId,
+  }) {
+    final param = GetEnergyConsumptionPerDeviceParam(
+      spaceId: spaceId,
+      communityId: communityId,
+      monthDate: selectedDate,
+    );
     context.read<EnergyConsumptionPerDeviceBloc>().add(
-          const LoadEnergyConsumptionPerDeviceEvent(param),
+          LoadEnergyConsumptionPerDeviceEvent(param),
         );
   }
 

lib/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart

@@ -28,25 +28,13 @@ abstract final class FetchOccupancyDataHelper {
     loadAnalyticsDevices(context, communityUuid: communityId, spaceUuid: spaceId);
     final selectedDevice = context.read<AnalyticsDevicesBloc>().state.selectedDevice;
 
-    context.read<OccupancyBloc>().add(
-          LoadOccupancyEvent(
-            GetOccupancyParam(
-              monthDate:
-                  '${datePickerState.monthlyDate.year}-${datePickerState.monthlyDate.month}',
-              spaceUuid: spaceId,
+    loadOccupancyChartData(
+      context,
       communityUuid: communityId,
-            ),
-          ),
-        );
-
-    context.read<OccupancyHeatMapBloc>().add(
-          LoadOccupancyHeatMapEvent(
-            GetOccupancyHeatMapParam(
       spaceUuid: spaceId,
-              year: datePickerState.yearlyDate,
-            ),
-          ),
+      date: datePickerState.monthlyDate,
     );
+    loadHeatMapData(context, spaceUuid: spaceId, year: datePickerState.yearlyDate);
 
     if (selectedDevice case final AnalyticsDevice device) {
       context.read<RealtimeDeviceChangesBloc>()
@@ -57,6 +45,35 @@ abstract final class FetchOccupancyDataHelper {
     }
   }
 
+  static void loadHeatMapData(
+    BuildContext context, {
+    required String spaceUuid,
+    required DateTime year,
+  }) {
+    context.read<OccupancyHeatMapBloc>().add(
+          LoadOccupancyHeatMapEvent(
+            GetOccupancyHeatMapParam(spaceUuid: spaceUuid, year: year),
+          ),
+        );
+  }
+
+  static void loadOccupancyChartData(
+    BuildContext context, {
+    required String communityUuid,
+    required String spaceUuid,
+    required DateTime date,
+  }) {
+    context.read<OccupancyBloc>().add(
+          LoadOccupancyEvent(
+            GetOccupancyParam(
+              monthDate: '${date.year}-${date.month}',
+              spaceUuid: spaceUuid,
+              communityUuid: communityUuid,
+            ),
+          ),
+        );
+  }
+
   static void loadAnalyticsDevices(
     BuildContext context, {
     required String communityUuid,

lib/pages/analytics/modules/occupancy/widgets/heat_map_tooltip.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class HeatMapTooltip extends StatelessWidget {
+  const HeatMapTooltip({
+    required this.date,
+    required this.value,
+    super.key,
+  });
+
+  final DateTime date;
+  final int value;
+
+  @override
+  Widget build(BuildContext context) {
+    return FittedBox(
+      fit: BoxFit.scaleDown,
+      alignment: AlignmentDirectional.topStart,
+      child: Container(
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(
+          color: ColorsManager.grey700,
+          borderRadius: BorderRadius.circular(3),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Text(
+              DateFormat('MMM d, yyyy').format(date),
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.whiteColors,
+              ),
+            ),
+            const Divider(height: 2, thickness: 1),
+            Text(
+              '$value Occupants',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 10,
+                fontWeight: FontWeight.w500,
+                color: ColorsManager.whiteColors,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/analytics/modules/occupancy/widgets/interactive_heat_map.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/heat_map_tooltip.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart';
+
+class InteractiveHeatMap extends StatefulWidget {
+  const InteractiveHeatMap({
+    required this.items,
+    required this.maxValue,
+    required this.cellSize,
+    super.key,
+  });
+
+  final List<OccupancyPaintItem> items;
+  final int maxValue;
+  final double cellSize;
+
+  @override
+  State<InteractiveHeatMap> createState() => _InteractiveHeatMapState();
+}
+
+class _InteractiveHeatMapState extends State<InteractiveHeatMap> {
+  OccupancyPaintItem? _hoveredItem;
+  OverlayEntry? _overlayEntry;
+  final LayerLink _layerLink = LayerLink();
+
+  @override
+  void dispose() {
+    _removeOverlay();
+    _overlayEntry?.dispose();
+    super.dispose();
+  }
+
+  void _removeOverlay() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
+
+  void _showTooltip(OccupancyPaintItem item, Offset localPosition) {
+    _removeOverlay();
+
+    final column = item.index ~/ 7;
+    final row = item.index % 7;
+    final x = column * widget.cellSize;
+    final y = row * widget.cellSize;
+
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          offset: Offset(x + widget.cellSize, y),
+          child: Material(
+            color: Colors.transparent,
+            child: Transform.translate(
+              offset: Offset(-(widget.cellSize * 2.5), -50),
+              child: HeatMapTooltip(date: item.date, value: item.value),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: _layerLink,
+      child: MouseRegion(
+        onHover: (event) {
+          final column = event.localPosition.dx ~/ widget.cellSize;
+          final row = event.localPosition.dy ~/ widget.cellSize;
+          final index = column * 7 + row;
+
+          if (index >= 0 && index < widget.items.length) {
+            final item = widget.items[index];
+            if (_hoveredItem != item) {
+              setState(() => _hoveredItem = item);
+              _showTooltip(item, event.localPosition);
+            }
+          } else {
+            _removeOverlay();
+            setState(() => _hoveredItem = null);
+          }
+        },
+        onExit: (_) {
+          _removeOverlay();
+          setState(() => _hoveredItem = null);
+        },
+        child: CustomPaint(
+          isComplex: true,
+          size: _painterSize,
+          painter: OccupancyPainter(
+            items: widget.items,
+            maxValue: widget.maxValue,
+            hoveredItem: _hoveredItem,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Size get _painterSize {
+    final height = 7 * widget.cellSize;
+    final width = widget.items.length ~/ 7 * widget.cellSize;
+    return Size(width, height);
+  }
+}

lib/pages/analytics/modules/occupancy/widgets/occupancy_chart_box.dart

@@ -47,11 +47,17 @@ class OccupancyChartBox extends StatelessWidget {
                           context.read<AnalyticsDatePickerBloc>().add(
                                 UpdateAnalyticsDatePickerEvent(montlyDate: value),
                               );
-                          FetchOccupancyDataHelper.loadOccupancyData(
+                          if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                            FetchOccupancyDataHelper.loadOccupancyChartData(
                               context,
-                            communityId: spaceTreeState.selectedCommunities.firstOrNull ?? '',
-                            spaceId: spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              communityUuid:
+                                  spaceTreeState.selectedCommunities.firstOrNull ??
+                                      '',
+                              spaceUuid:
+                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              date: value,
                             );
+                          }
                         },
                         selectedDate: context
                             .watch<AnalyticsDatePickerBloc>()

lib/pages/analytics/modules/occupancy/widgets/occupancy_heat_map.dart

@@ -1,6 +1,7 @@
 import 'dart:math' as math show max;
 
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/interactive_heat_map.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_days.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_gradient.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_months.dart';
@@ -28,7 +29,7 @@ class OccupancyHeatMap extends StatelessWidget {
     return List.generate(_totalWeeks * 7, (index) {
       final date = startDate.add(Duration(days: index));
       final value = heatMapData[date] ?? 0;
-      return OccupancyPaintItem(index: index, value: value);
+      return OccupancyPaintItem(index: index, value: value, date: date);
     });
   }
 
@@ -58,15 +59,13 @@ class OccupancyHeatMap extends StatelessWidget {
                   child: Row(
                     children: [
                       const OccupancyHeatMapDays(cellSize: _cellSize),
-                      CustomPaint(
-                        size: const Size(_totalWeeks * _cellSize, 7 * _cellSize),
-                        child: CustomPaint(
-                          isComplex: true,
-                          size: const Size(_totalWeeks * _cellSize, 7 * _cellSize),
-                          painter: OccupancyPainter(
+                      SizedBox(
+                        width: _totalWeeks * _cellSize,
+                        height: 7 * _cellSize,
+                        child: InteractiveHeatMap(
                           items: paintItems,
                           maxValue: _maxValue,
-                          ),
+                          cellSize: _cellSize,
                         ),
                       ),
                     ],

lib/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_box.dart

@@ -47,12 +47,14 @@ class OccupancyHeatMapBox extends StatelessWidget {
                           context.read<AnalyticsDatePickerBloc>().add(
                                 UpdateAnalyticsDatePickerEvent(yearlyDate: value),
                               );
-                          FetchOccupancyDataHelper.loadOccupancyData(
+                          if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                            FetchOccupancyDataHelper.loadHeatMapData(
                               context,
-                            communityId:
-                                spaceTreeState.selectedCommunities.firstOrNull ?? '',
-                            spaceId: spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              spaceUuid:
+                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              year: value,
                             );
+                          }
                         },
                         datePickerType: DatePickerType.year,
                         selectedDate: context

lib/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart

@@ -4,18 +4,25 @@ import 'package:syncrow_web/utils/color_manager.dart';
 class OccupancyPaintItem {
   final int index;
   final int value;
+  final DateTime date;
 
-  const OccupancyPaintItem({required this.index, required this.value});
+  const OccupancyPaintItem({
+    required this.index,
+    required this.value,
+    required this.date,
+  });
 }
 
 class OccupancyPainter extends CustomPainter {
   OccupancyPainter({
     required this.items,
     required this.maxValue,
+    this.hoveredItem,
   });
 
   final List<OccupancyPaintItem> items;
   final int maxValue;
+  final OccupancyPaintItem? hoveredItem;
 
   static const double cellSize = 16.0;
 
@@ -25,6 +32,10 @@ class OccupancyPainter extends CustomPainter {
     final Paint borderPaint = Paint()
       ..color = ColorsManager.grayBorder.withValues(alpha: 0.4)
       ..style = PaintingStyle.stroke;
+    final Paint hoveredBorderPaint = Paint()
+      ..color = Colors.black
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1.5;
 
     for (final item in items) {
       final column = item.index ~/ 7;
@@ -37,6 +48,10 @@ class OccupancyPainter extends CustomPainter {
       final rect = Rect.fromLTWH(x, y, cellSize, cellSize);
       canvas.drawRect(rect, fillPaint);
 
+      // Highlight the hovered item
+      if (hoveredItem != null && hoveredItem!.index == item.index) {
+        canvas.drawRect(rect, hoveredBorderPaint);
+      } else {
         _drawDashedLine(
           canvas,
           Offset(x, y),
@@ -51,8 +66,9 @@ class OccupancyPainter extends CustomPainter {
         );
 
         canvas.drawLine(Offset(x, y), Offset(x, y + cellSize), borderPaint);
-      canvas.drawLine(
-          Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize), borderPaint);
+        canvas.drawLine(Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize),
+            borderPaint);
+      }
     }
   }
 
@@ -80,5 +96,6 @@ class OccupancyPainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+  bool shouldRepaint(covariant OccupancyPainter oldDelegate) =>
+      oldDelegate.hoveredItem != hoveredItem;
 }

lib/pages/analytics/params/get_energy_consumption_per_device_param.dart

@@ -1,3 +1,19 @@
 class GetEnergyConsumptionPerDeviceParam {
-  const GetEnergyConsumptionPerDeviceParam();
+  const GetEnergyConsumptionPerDeviceParam({
+    this.monthDate,
+    this.spaceId,
+    this.communityId,
+  });
+
+  final DateTime? monthDate;
+  final String? spaceId;
+  final String? communityId;
+
+  Map<String, dynamic> toJson() => {
+        'monthDate':
+            '${monthDate?.year}-${monthDate?.month.toString().padLeft(2, '0')}',
+        if (spaceId == null || spaceId == null) 'spaceUuid': spaceId,
+        'communityUuid': communityId,
+        'groupByDevice': true,
+      };
 }

lib/pages/analytics/params/get_total_energy_consumption_param.dart

@@ -13,7 +13,7 @@ class GetTotalEnergyConsumptionParam {
     return {
       'monthDate':
           '${monthDate?.year}-${monthDate?.month.toString().padLeft(2, '0')}',
-      if (communityId == null || communityId!.isEmpty) 'spaceUuid': spaceId,
+      if (spaceId == null || spaceId == null) 'spaceUuid': spaceId,
       'communityUuid': communityId,
       'groupByDevice': false,
     };

lib/pages/analytics/services/analytics_devices/remote_occupancy_analytics_devices_service.dart

@@ -39,7 +39,6 @@ class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService
         path:
             '/projects/$projectUuid/communities/${param.communityUuid}/spaces/${param.spaceUuid}/devices',
         queryParameters: {
-          'requestType': param.requestType.name,
           'communityUuid': param.communityUuid,
           'spaceUuid': param.spaceUuid,
           'productType': param.deviceTypes.first,

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

@@ -1,4 +1,6 @@
+import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
+import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_per_device_param.dart';
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/energy_consumption_per_device_service.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
@@ -15,16 +17,10 @@ class RemoteEnergyConsumptionPerDeviceService
   ) async {
     try {
       final response = await _httpService.get(
-        path: 'endpoint',
+        path: '/power-clamp/historical',
         showServerMessage: true,
-        expectedResponseModel: (data) {
-          final json = data as Map<String, dynamic>? ?? {};
-          final mappedData = json['data'] as List<dynamic>? ?? [];
-          return mappedData.map((e) {
-            final jsonData = e as Map<String, dynamic>;
-            return DeviceEnergyDataModel.fromJson(jsonData);
-          }).toList();
-        },
+        queryParameters: param.toJson(),
+        expectedResponseModel: _EnergyConsumptionPerDeviceMapper.map,
       );
       return response;
     } catch (e) {
@@ -32,3 +28,33 @@ class RemoteEnergyConsumptionPerDeviceService
     }
   }
 }
+
+abstract final class _EnergyConsumptionPerDeviceMapper {
+  const _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) {
+      final deviceData = e as Map<String, dynamic>;
+      final energyData = deviceData['data'] as List<dynamic>;
+
+      return DeviceEnergyDataModel(
+        deviceId: deviceData['deviceUuid'] as String,
+        deviceName: deviceData['deviceName'] as String,
+        color: Color((DateTime.now().microsecondsSinceEpoch +
+                deviceData['deviceUuid'].hashCode) |
+            0xFF000000),
+        energy: energyData.map((data) {
+          final energyJson = data as Map<String, dynamic>;
+          return EnergyDataModel(
+            date: DateTime.parse(energyJson['date'] as String),
+            value: double.parse(energyJson['total_energy_consumed_kw'] as String),
+          );
+        }).toList(),
+      );
+    }).toList();
+  }
+}