Refactor TotalEnergyConsumptionChart to TotalEnergyConsumptionChartBox for improved layout and encapsulation.

This commit is contained in:
Faris Armoush
2025-04-30 14:59:01 +03:00
parent 1f4e82d567
commit 63718185e7
3 changed files with 87 additions and 76 deletions

View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart';
import 'package:syncrow_web/utils/style.dart';
class AnalyticsEnergyManagementView extends StatelessWidget {
@ -20,7 +20,7 @@ class AnalyticsEnergyManagementView extends StatelessWidget {
child: Column(
spacing: 20,
children: [
Expanded(child: TotalEnergyConsumptionChart()),
Expanded(child: TotalEnergyConsumptionChartBox()),
Expanded(child: EnergyConsumptionPerDeviceChart()),
],
),

View File

@ -2,60 +2,70 @@ import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';
const _chartData = [
EnergyData('JAN', 18000),
EnergyData('FEB', 25000),
EnergyData('MAR', 22000),
EnergyData('APR', 21000),
EnergyData('MAY', 30000),
EnergyData('JUN', 23000),
EnergyData('JUL', 21000),
EnergyData('AUG', 25000),
EnergyData('SEP', 21100),
EnergyData('OCT', 22000),
EnergyData('NOV', 21000),
EnergyData('DEC', 27500),
];
class EnergyData {
const EnergyData(this.time, this.consumption);
final String time;
final double consumption;
}
// energy_consumption_chart will return id, name and consumption
final s = {
"1": {
"phaseOne": 1000,
"phaseTwo": 2000,
"phaseThree": 3000,
}
};
class TotalEnergyConsumptionChart extends StatelessWidget {
const TotalEnergyConsumptionChart({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsets.all(30),
child: Column(
spacing: 20,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Total Energy Consumption',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
),
return Expanded(
child: LineChart(
LineChartData(
titlesData: _titlesData(context),
lineBarsData: _lineBarsData,
gridData: FlGridData(
show: true,
drawVerticalLine: false,
drawHorizontalLine: true,
),
Expanded(
child: LineChart(
LineChartData(
titlesData: _titlesData(context),
lineBarsData: _lineBarsData,
gridData: FlGridData(
show: true,
drawVerticalLine: false,
drawHorizontalLine: true,
),
borderData: FlBorderData(
show: true,
border: const Border.symmetric(
horizontal: BorderSide(
color: ColorsManager.greyColor,
width: 1,
style: BorderStyle.solid,
),
),
),
lineTouchData: LineTouchData(
handleBuiltInTouches: true,
touchSpotThreshold: 2,
touchTooltipData: _lineTouchTooltipData(),
),
borderData: FlBorderData(
show: true,
border: const Border.symmetric(
horizontal: BorderSide(
color: ColorsManager.greyColor,
width: 1,
style: BorderStyle.solid,
),
duration: Durations.extralong1,
curve: Curves.easeIn,
),
),
],
lineTouchData: LineTouchData(
handleBuiltInTouches: true,
touchSpotThreshold: 2,
touchTooltipData: _lineTouchTooltipData(),
),
),
duration: Durations.extralong1,
curve: Curves.easeIn,
),
);
}
@ -205,33 +215,3 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
return values[month.toInt()] ?? 'N/A';
}
}
const _chartData = [
EnergyData('JAN', 18000),
EnergyData('FEB', 25000),
EnergyData('MAR', 22000),
EnergyData('APR', 21000),
EnergyData('MAY', 30000),
EnergyData('JUN', 23000),
EnergyData('JUL', 21000),
EnergyData('AUG', 25000),
EnergyData('SEP', 21100),
EnergyData('OCT', 22000),
EnergyData('NOV', 21000),
EnergyData('DEC', 27500),
];
class EnergyData {
const EnergyData(this.time, this.consumption);
final String time;
final double consumption;
}
// energy_consumption_chart will return id, name and consumption
final s = {
"1": {
"phaseOne": 1000,
"phaseTwo": 2000,
"phaseThree": 3000,
}
};

View File

@ -0,0 +1,31 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
import 'package:syncrow_web/utils/style.dart';
class TotalEnergyConsumptionChartBox extends StatelessWidget {
const TotalEnergyConsumptionChartBox({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsets.all(30),
child: Column(
spacing: 20,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Total Energy Consumption',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
),
),
const TotalEnergyConsumptionChart(),
],
),
);
}
}