diff --git 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 index 1ce28d45..c0d32c9d 100644 --- 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 @@ -1,4 +1,7 @@ +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'; class TotalEnergyConsumptionChart extends StatelessWidget { @@ -11,7 +14,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget { borderRadius: BorderRadius.circular(30), ), padding: const EdgeInsets.all(30), - child: const Column( + child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( @@ -23,10 +26,169 @@ class TotalEnergyConsumptionChart extends StatelessWidget { ), SizedBox(height: 20), Expanded( - child: Placeholder(), + child: LineChart( + LineChartData( + lineTouchData: LineTouchData( + handleBuiltInTouches: true, + touchSpotThreshold: 2, + touchTooltipData: _lineTouchTooltipData(), + ), + + titlesData: _titlesData(context), + lineBarsData: _lineBarsData, + gridData: const FlGridData( + show: true, + drawVerticalLine: false, + drawHorizontalLine: true, + ), + borderData: FlBorderData( + show: false, + border: Border.all( + color: ColorsManager.vividBlue.withValues(alpha: 0.2), + width: 10, + ), + ), + ), + + ), ), ], ), ); } + + List get _lineBarsData { + return [ + LineChartBarData( + preventCurveOvershootingThreshold: 0.1, + curveSmoothness: 0.5, + preventCurveOverShooting: true, + spots: _chartData + .asMap() + .entries + .map( + (entry) => FlSpot( + entry.key.toDouble(), + entry.value.consumption, + ), + ) + .toList(), + color: ColorsManager.blueColor.withValues(alpha: 0.6), + shadow: Shadow(color: Colors.black12), + show: true, + isCurved: true, + belowBarData: BarAreaData( + show: true, + gradient: LinearGradient( + colors: [ + ColorsManager.vividBlue.withValues(alpha: 0.3), + ColorsManager.vividBlue.withValues(alpha: 0.2), + ColorsManager.vividBlue.withValues(alpha: 0.1), + Colors.transparent, + ], + begin: Alignment.center, + end: Alignment.bottomCenter, + ), + ), + dotData: FlDotData(show: false), + isStrokeCapRound: true, + barWidth: 3, + ), + ]; + } + + FlTitlesData _titlesData(BuildContext context) { + return FlTitlesData( + show: true, + bottomTitles: AxisTitles( + drawBelowEverything: true, + sideTitles: SideTitles( + interval: 1, + showTitles: true, + maxIncluded: true, + getTitlesWidget: (value, meta) => Text( + _chartData[value.toInt()].time, + style: context.textTheme.bodySmall?.copyWith( + fontSize: 12, + color: ColorsManager.greyColor, + ), + ), + ), + ), + leftTitles: AxisTitles( + sideTitles: SideTitles( + showTitles: true, + maxIncluded: true, + reservedSize: 90, + getTitlesWidget: (value, meta) => Padding( + padding: const EdgeInsetsDirectional.only(end: 12), + child: FittedBox( + fit: BoxFit.scaleDown, + child: Text( + '${value.toStringAsFixed(0).replaceAllMapped(RegExp(r'(\d)(?=(\d{3})+$)'), (match) => '${match[1]},')} kWh', + style: context.textTheme.bodySmall?.copyWith( + fontSize: 12, + color: ColorsManager.greyColor, + ), + ), + ), + ), + ), + ), + rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)), + topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)), + ); + } + + LineTouchTooltipData _lineTouchTooltipData() { + return LineTouchTooltipData( + getTooltipColor: (touchTooltipItem) => Colors.white, + tooltipRoundedRadius: 10.0, + tooltipPadding: const EdgeInsets.all(8.0), + tooltipBorder: BorderSide(color: Colors.grey, width: 1), + getTooltipItems: _getTooltipItems, + ); + } + + List _getTooltipItems(List touchedSpots) => + touchedSpots.map((spot) { + return LineTooltipItem( + '${spot.x},\n ${spot.y.toStringAsFixed(2)} kWh', + const TextStyle( + color: Colors.blue, + fontWeight: FontWeight.bold, + fontSize: 12, + ), + ); + }).toList(); } + +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, + } +};