diff --git a/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart b/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart index 483f51cd..b40da002 100644 --- a/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart +++ b/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart @@ -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()), ], ), ), diff --git 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 index 9df4e45d..9d2f7066 100644 --- 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 @@ -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 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 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), ), ], ), diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart new file mode 100644 index 00000000..2aba8cea --- /dev/null +++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart @@ -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()), + ], + ), + ); + } +}