ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 15:17:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create EnergyConsumptionPerDeviceChartBox widget and update imports in AnalyticsEnergyManagementView

Browse Source
This commit is contained in:
Faris Armoush
2025-04-30 16:54:11 +03:00
parent 6e527503c1
commit 97f8c6c8c9
3 changed files with 145 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart
View File

@ -1,6 +1,6 @@
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/energy_consumption_per_device_chart_box.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_box.dart';
import 'package:syncrow_web/utils/style.dart';
@ -21,7 +21,7 @@ class AnalyticsEnergyManagementView extends StatelessWidget {
spacing: 20,
children: [
Expanded(child: TotalEnergyConsumptionChartBox()),
Expanded(child: EnergyConsumptionPerDeviceChart()),
Expanded(child: EnergyConsumptionPerDeviceChartBox()),
],
),
),

128
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart
View File

@ -1,29 +1,123 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class EnergyConsumptionPerDeviceChart extends StatelessWidget {
const EnergyConsumptionPerDeviceChart({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsets.all(30),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Energy Consumption per Device',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
return LineChart(
LineChartData(
gridData: const FlGridData(
show: true,
drawVerticalLine: false,
drawHorizontalLine: false,
verticalInterval: 1,
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
interval: 4,
),
),
SizedBox(height: 20),
Expanded(
child: Placeholder(),
leftTitles: AxisTitles(
drawBelowEverything: true,
sideTitles: SideTitles(
interval: 2,
showTitles: true,
reservedSize: 40,
),
),
rightTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
),
lineTouchData: LineTouchData(
getTouchLineEnd: (data, index) => double.infinity,
getTouchedSpotIndicator:
(LineChartBarData barData, List<int> spotIndexes) {
return spotIndexes.map((spotIndex) {
return TouchedSpotIndicatorData(
const FlLine(color: Colors.orange, strokeWidth: 3),
FlDotData(
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 8,
color: Colors.orange,
),
),
);
}).toList();
},
touchTooltipData: LineTouchTooltipData(
getTooltipColor: (touchedSpot) => Colors.red,
getTooltipItems: (List<LineBarSpot> touchedSpots) => touchedSpots
.map(
(touchedSpot) => LineTooltipItem(
touchedSpot.y.toString(),
const TextStyle(
color: ColorsManager.whiteColors,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
)
.toList(),
),
),
borderData: FlBorderData(
show: true,
border: Border.all(
color: Colors.grey,
),
),
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
lineBarsData: [
LineChartBarData(
spots: const [
FlSpot(0, 0),
FlSpot(2, 1),
FlSpot(4.9, 5),
FlSpot(6.8, 5),
FlSpot(8, 1),
FlSpot(10, 2),
FlSpot(11, 2.5),
],
dashArray: [12, 18],
isCurved: true,
color: Colors.red,
barWidth: 4,
isStrokeCapRound: true,
dotData: const FlDotData(
show: false,
),
),
LineChartBarData(
spots: const [
FlSpot(0, 0),
FlSpot(3.9, 4),
FlSpot(5.8, 4),
FlSpot(7, 0),
FlSpot(9, 1),
FlSpot(10, 1),
FlSpot(11, 1.5),
],
dashArray: [12, 18],
isCurved: true,
color: Colors.amber,
barWidth: 4,
isStrokeCapRound: true,
dotData: const FlDotData(show: false),
),
],
),

32
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart Normal file
View File

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