Refactor energy consumption charts to enhance grid data configuration

Updated the grid data for EnergyConsumptionByPhasesChart, EnergyConsumptionPerDeviceChart, and TotalEnergyConsumptionChart to include horizontal line visibility and set a horizontal interval of 250. Removed unused phasesJson constant from TotalEnergyConsumptionChart for cleaner code.
2025-11-26 23:24:55 +00:00 · 2025-05-15 14:25:13 +03:00
11 changed files with 109 additions and 133 deletions
--- a/lib/pages/analytics/models/phases_energy_consumption.dart
+++ b/lib/pages/analytics/models/phases_energy_consumption.dart
@ -1,66 +1,27 @@
 import 'package:equatable/equatable.dart';

 class PhasesEnergyConsumption extends Equatable {
-  final String uuid;
-  final DateTime createdAt;
-  final DateTime updatedAt;
-  final String deviceUuid;
-  final DateTime date;
-  final double energyConsumedKw;
-  final double energyConsumedA;
-  final double energyConsumedB;
-  final double energyConsumedC;
+  final int month;
+  final double phaseA;
+  final double phaseB;
+  final double phaseC;

  const PhasesEnergyConsumption({
-    required this.uuid,
-    required this.createdAt,
-    required this.updatedAt,
-    required this.deviceUuid,
-    required this.date,
-    required this.energyConsumedKw,
-    required this.energyConsumedA,
-    required this.energyConsumedB,
-    required this.energyConsumedC,
+    required this.month,
+    required this.phaseA,
+    required this.phaseB,
+    required this.phaseC,
  });

  @override
-  List<Object?> get props => [
-        uuid,
-        createdAt,
-        updatedAt,
-        deviceUuid,
-        date,
-        energyConsumedKw,
-        energyConsumedA,
-        energyConsumedB,
-        energyConsumedC,
-      ];
+  List<Object?> get props => [month, phaseA, phaseB, phaseC];

  factory PhasesEnergyConsumption.fromJson(Map<String, dynamic> json) {
    return PhasesEnergyConsumption(
-      uuid: json['uuid'] as String,
-      createdAt: DateTime.parse(json['createdAt'] as String),
-      updatedAt: DateTime.parse(json['updatedAt'] as String),
-      deviceUuid: json['deviceUuid'] as String,
-      date: DateTime.parse(json['date'] as String),
-      energyConsumedKw: double.parse(json['energyConsumedKw']),
-      energyConsumedA: double.parse(json['energyConsumedA']),
-      energyConsumedB: double.parse(json['energyConsumedB']),
-      energyConsumedC: double.parse(json['energyConsumedC']),
+      month: json['month'] as int,
+      phaseA: (json['phaseA'] as num).toDouble(),
+      phaseB: (json['phaseB'] as num).toDouble(),
+      phaseC: (json['phaseC'] as num).toDouble(),
    );
  }
-
-  Map<String, dynamic> toJson() {
-    return {
-      'uuid': uuid,
-      'createdAt': createdAt.toIso8601String(),
-      'updatedAt': updatedAt.toIso8601String(),
-      'deviceUuid': deviceUuid,
-      'date': date.toIso8601String().split('T')[0],
-      'energyConsumedKw': energyConsumedKw.toString(),
-      'energyConsumedA': energyConsumedA.toString(),
-      'energyConsumedB': energyConsumedB.toString(),
-      'energyConsumedC': energyConsumedC.toString(),
-    };
-  }
 }
--- a/lib/pages/analytics/modules/analytics/views/analytics_page.dart
+++ b/lib/pages/analytics/modules/analytics/views/analytics_page.dart
@ -15,7 +15,7 @@ import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_he
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service_delagate.dart';
 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/remote_energy_consumption_by_phases_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/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';
@ -57,7 +57,7 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
        ),
        BlocProvider(
          create: (context) => EnergyConsumptionByPhasesBloc(
-            RemoteEnergyConsumptionByPhasesService(_httpService),
+            FakeEnergyConsumptionByPhasesService(),
          ),
        ),
        BlocProvider(
--- a/lib/pages/analytics/modules/energy_management/helpers/energy_consumption_by_phases_chart_helper.dart
+++ b/lib/pages/analytics/modules/energy_management/helpers/energy_consumption_by_phases_chart_helper.dart
@ -0,0 +1,20 @@
+import 'package:syncrow_web/pages/analytics/models/phases_energy_consumption.dart';
+
+abstract final class EnergyConsumptionByPhasesChartHelper {
+  const EnergyConsumptionByPhasesChartHelper._();
+
+  static const fakeData = <PhasesEnergyConsumption>[
+    PhasesEnergyConsumption(month: 1, phaseA: 200, phaseB: 300, phaseC: 400),
+    PhasesEnergyConsumption(month: 2, phaseA: 300, phaseB: 400, phaseC: 500),
+    PhasesEnergyConsumption(month: 3, phaseA: 400, phaseB: 500, phaseC: 600),
+    PhasesEnergyConsumption(month: 4, phaseA: 100, phaseB: 100, phaseC: 100),
+    PhasesEnergyConsumption(month: 5, phaseA: 300, phaseB: 400, phaseC: 500),
+    PhasesEnergyConsumption(month: 6, phaseA: 300, phaseB: 100, phaseC: 400),
+    PhasesEnergyConsumption(month: 7, phaseA: 300, phaseB: 100, phaseC: 400),
+    PhasesEnergyConsumption(month: 8, phaseA: 500, phaseB: 100, phaseC: 100),
+    PhasesEnergyConsumption(month: 9, phaseA: 500, phaseB: 100, phaseC: 200),
+    PhasesEnergyConsumption(month: 10, phaseA: 100, phaseB: 50, phaseC: 50),
+    PhasesEnergyConsumption(month: 11, phaseA: 600, phaseB: 750, phaseC: 130),
+    PhasesEnergyConsumption(month: 12, phaseA: 100, phaseB: 80, phaseC: 100),
+  ];
+}
--- a/lib/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart
+++ b/lib/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart
@ -34,26 +34,14 @@ abstract final class FetchEnergyManagementDataHelper {

    final datePickerState = context.read<AnalyticsDatePickerBloc>().state;
    final selectedDate0 = selectedDate ?? datePickerState.monthlyDate;
-    loadAnalyticsDevices(
-      context,
-      communityUuid: communityId,
-      spaceUuid: spaceId,
-      selectedDate: selectedDate0,
-    );
+    loadAnalyticsDevices(context, communityUuid: communityId, spaceUuid: spaceId);
    loadTotalEnergyConsumption(
      context,
      selectedDate: selectedDate0,
      communityId: communityId,
      spaceId: spaceId,
    );
-    final selectedDevice = getSelectedDevice(context);
-    if (selectedDevice case final AnalyticsDevice device) {
-      loadEnergyConsumptionByPhases(
-        context,
-        powerClampUuid: device.uuid,
-        selectedDate: selectedDate0,
-      );
-    }
+    loadEnergyConsumptionByPhases(context, selectedDate: selectedDate);
    loadEnergyConsumptionPerDevice(
      context,
      communityId: communityId,
@ -66,12 +54,11 @@ abstract final class FetchEnergyManagementDataHelper {

  static void loadEnergyConsumptionByPhases(
    BuildContext context, {
-    required String powerClampUuid,
    DateTime? selectedDate,
  }) {
    final param = GetEnergyConsumptionByPhasesParam(
-      date: selectedDate,
-      powerClampUuid: powerClampUuid,
+      startDate: selectedDate,
+      spaceId: '',
    );
    context.read<EnergyConsumptionByPhasesBloc>().add(
          LoadEnergyConsumptionByPhasesEvent(param: param),
@ -134,7 +121,6 @@ abstract final class FetchEnergyManagementDataHelper {
    BuildContext context, {
    required String communityUuid,
    required String spaceUuid,
-    required DateTime selectedDate,
  }) {
    context.read<AnalyticsDevicesBloc>().add(
          LoadAnalyticsDevicesEvent(
@ -142,11 +128,6 @@ abstract final class FetchEnergyManagementDataHelper {
              context.read<PowerClampInfoBloc>().add(
                    LoadPowerClampInfoEvent(device.uuid),
                  );
-              loadEnergyConsumptionByPhases(
-                context,
-                powerClampUuid: device.uuid,
-                selectedDate: selectedDate,
-              );
              context.read<RealtimeDeviceChangesBloc>().add(
                    RealtimeDeviceChangesStarted(device.uuid),
                  );
--- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart
@ -1,6 +1,6 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
+import 'package:syncrow_web/pages/analytics/helpers/get_month_name_from_int.dart';
 import 'package:syncrow_web/pages/analytics/models/phases_energy_consumption.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
@ -18,7 +18,10 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
  Widget build(BuildContext context) {
    return BarChart(
      BarChartData(
-        gridData: EnergyManagementChartsHelper.gridData(),
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
        borderData: EnergyManagementChartsHelper.borderData(),
        barTouchData: _barTouchData(context),
        titlesData: _titlesData(context),
@ -31,25 +34,21 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
            barRods: [
              BarChartRodData(
                color: ColorsManager.vividBlue.withValues(alpha: 0.1),
-                toY: data.energyConsumedA +
-                    data.energyConsumedB +
-                    data.energyConsumedC,
+                toY: data.phaseA + data.phaseB + data.phaseC,
                rodStackItems: [
                  BarChartRodStackItem(
                    0,
-                    data.energyConsumedA,
+                    data.phaseA,
                    ColorsManager.vividBlue.withValues(alpha: 0.8),
                  ),
                  BarChartRodStackItem(
-                    data.energyConsumedA,
-                    data.energyConsumedA + data.energyConsumedB,
+                    data.phaseA,
+                    data.phaseA + data.phaseB,
                    ColorsManager.vividBlue.withValues(alpha: 0.4),
                  ),
                  BarChartRodStackItem(
-                    data.energyConsumedA + data.energyConsumedB,
-                    data.energyConsumedA +
-                        data.energyConsumedB +
-                        data.energyConsumedC,
+                    data.phaseA + data.phaseB,
+                    data.phaseA + data.phaseB + data.phaseC,
                    ColorsManager.vividBlue.withValues(alpha: 0.15),
                  ),
                ],
@ -95,27 +94,18 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
  }) {
    final data = energyData;

-    final date = DateFormat('dd/MM/yyyy').format(data[group.x.toInt()].date);
-    final phaseA = data[group.x.toInt()].energyConsumedA;
-    final phaseB = data[group.x.toInt()].energyConsumedB;
-    final phaseC = data[group.x.toInt()].energyConsumedC;
-    final total = data[group.x.toInt()].energyConsumedKw;
+    final month = data[group.x.toInt()].month.getMonthName;
+    final phaseA = data[group.x.toInt()].phaseA;
+    final phaseB = data[group.x.toInt()].phaseB;
+    final phaseC = data[group.x.toInt()].phaseC;

    return BarTooltipItem(
-      '$date\n',
+      '$month\n',
      context.textTheme.bodyMedium!.copyWith(
        color: ColorsManager.blackColor,
        fontSize: 14,
      ),
-      textAlign: TextAlign.start,
      children: [
-        TextSpan(
-          text: 'Total: $total\n',
-          style: context.textTheme.bodySmall?.copyWith(
-            color: ColorsManager.blackColor,
-            fontSize: 12,
-          ),
-        ),
        TextSpan(
          text: 'Phase A: $phaseA\n',
          style: context.textTheme.bodySmall?.copyWith(
@ -157,7 +147,7 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
      sideTitles: SideTitles(
        showTitles: true,
        getTitlesWidget: (value, _) {
-          final month = DateFormat('dd/MM').format(energyData[value.toInt()].date);
+          final month = energyData[value.toInt()].month.getMonthName;
          return FittedBox(
            alignment: AlignmentDirectional.bottomCenter,
            fit: BoxFit.scaleDown,
--- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart
@ -16,7 +16,10 @@ class EnergyConsumptionPerDeviceChart extends StatelessWidget {
          context,
          leftTitlesInterval: 250,
        ),
-        gridData: EnergyManagementChartsHelper.gridData(),
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
        borderData: EnergyManagementChartsHelper.borderData(),
        lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
        lineBarsData: chartData.map((e) {
--- a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart
@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
-import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_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/power_clamp_info/power_clamp_info_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
@ -12,7 +11,6 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/po
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
@ -134,12 +132,6 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
            alignment: AlignmentDirectional.centerEnd,
            child: AnalyticsDeviceDropdown(
              onChanged: (value) {
-                FetchEnergyManagementDataHelper.loadEnergyConsumptionByPhases(
-                  context,
-                  powerClampUuid: value.uuid,
-                  selectedDate:
-                      context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
-                );
                FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
                  context,
                  deviceUuid: value.uuid,
--- a/lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart
@ -4,15 +4,6 @@ import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';

-// energy_consumption_chart will return id, name and consumption
-const phasesJson = {
-  "1": {
-    "phaseOne": 1000,
-    "phaseTwo": 2000,
-    "phaseThree": 3000,
-  }
-};
-
 class TotalEnergyConsumptionChart extends StatelessWidget {
  const TotalEnergyConsumptionChart({required this.chartData, super.key});

@ -23,8 +14,14 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
    return Expanded(
      child: LineChart(
        LineChartData(
-          titlesData: EnergyManagementChartsHelper.titlesData(context),
-          gridData: EnergyManagementChartsHelper.gridData(),
+          titlesData: EnergyManagementChartsHelper.titlesData(
+            context,
+            leftTitlesInterval: 250,
+          ),
+          gridData: EnergyManagementChartsHelper.gridData().copyWith(
+            checkToShowHorizontalLine: (value) => true,
+            horizontalInterval: 250,
+          ),
          borderData: EnergyManagementChartsHelper.borderData(),
          lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
          lineBarsData: _lineBarsData,
--- a/lib/pages/analytics/params/get_energy_consumption_by_phases_param.dart
+++ b/lib/pages/analytics/params/get_energy_consumption_by_phases_param.dart
@ -1,20 +1,24 @@
 import 'package:equatable/equatable.dart';

 class GetEnergyConsumptionByPhasesParam extends Equatable {
-  final String powerClampUuid;
-  final DateTime? date;
+  final DateTime? startDate;
+  final DateTime? endDate;
+  final String? spaceId;

  const GetEnergyConsumptionByPhasesParam({
-    required this.powerClampUuid,
-    this.date,
+    this.startDate,
+    this.endDate,
+    this.spaceId,
  });

  Map<String, dynamic> toJson() {
    return {
-      'monthDate': '${date?.year}-${date?.month.toString().padLeft(2, '0')}',
+      'startDate': startDate?.toIso8601String(),
+      'endDate': endDate?.toIso8601String(),
+      'spaceId': spaceId,
    };
  }

  @override
-  List<Object?> get props => [powerClampUuid, date];
+  List<Object?> get props => [startDate, endDate, spaceId];
 }
--- a/lib/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart
+++ b/lib/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart
@ -0,0 +1,29 @@
+import 'package:syncrow_web/pages/analytics/models/phases_energy_consumption.dart';
+import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_by_phases_param.dart';
+import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/energy_consumption_by_phases_service.dart';
+
+class FakeEnergyConsumptionByPhasesService
+    implements EnergyConsumptionByPhasesService {
+  @override
+  Future<List<PhasesEnergyConsumption>> load(
+    GetEnergyConsumptionByPhasesParam param,
+  ) {
+    return Future.delayed(
+      const Duration(milliseconds: 500),
+      () => const [
+        PhasesEnergyConsumption(month: 1, phaseA: 200, phaseB: 300, phaseC: 400),
+        PhasesEnergyConsumption(month: 2, phaseA: 300, phaseB: 400, phaseC: 500),
+        PhasesEnergyConsumption(month: 3, phaseA: 400, phaseB: 500, phaseC: 600),
+        PhasesEnergyConsumption(month: 4, phaseA: 100, phaseB: 100, phaseC: 100),
+        PhasesEnergyConsumption(month: 5, phaseA: 300, phaseB: 400, phaseC: 500),
+        PhasesEnergyConsumption(month: 6, phaseA: 300, phaseB: 100, phaseC: 400),
+        PhasesEnergyConsumption(month: 7, phaseA: 300, phaseB: 100, phaseC: 400),
+        PhasesEnergyConsumption(month: 8, phaseA: 500, phaseB: 100, phaseC: 100),
+        PhasesEnergyConsumption(month: 9, phaseA: 500, phaseB: 100, phaseC: 200),
+        PhasesEnergyConsumption(month: 10, phaseA: 100, phaseB: 50, phaseC: 50),
+        PhasesEnergyConsumption(month: 11, phaseA: 600, phaseB: 750, phaseC: 130),
+        PhasesEnergyConsumption(month: 12, phaseA: 100, phaseB: 100, phaseC: 100),
+      ],
+    );
+  }
+}
--- a/lib/pages/analytics/services/energy_consumption_by_phases/remote_energy_consumption_by_phases_service.dart
+++ b/lib/pages/analytics/services/energy_consumption_by_phases/remote_energy_consumption_by_phases_service.dart
@ -15,9 +15,8 @@ final class RemoteEnergyConsumptionByPhasesService
  ) async {
    try {
      final response = await _httpService.get(
-        path: '/power-clamp/${param.powerClampUuid}/historical',
+        path: 'endpoint',
        showServerMessage: true,
-        queryParameters: param.toJson(),
        expectedResponseModel: (data) {
          final json = data as Map<String, dynamic>? ?? {};
          final mappedData = json['data'] as List<dynamic>? ?? [];
@ -29,7 +28,7 @@ final class RemoteEnergyConsumptionByPhasesService
      );
      return response;
    } catch (e) {
-      throw Exception('Failed to load energy consumption per phase: $e');
+      throw Exception('Failed to load energy consumption per device: $e');
    }
  }
 }