From 1f4e82d567b40b15cdcfbf8f5e236ec376c02bdb Mon Sep 17 00:00:00 2001 From: Faris Armoush Date: Wed, 30 Apr 2025 14:56:01 +0300 Subject: [PATCH] Enhance `TotalEnergyConsumptionChart` layout and tooltip functionality. --- .../total_energy_consumption_chart.dart | 115 ++++++++++++------ 1 file changed, 79 insertions(+), 36 deletions(-) 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 c0d32c9d..b83619a8 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 @@ -15,6 +15,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget { ), padding: const EdgeInsets.all(30), child: Column( + spacing: 20, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( @@ -24,32 +25,34 @@ class TotalEnergyConsumptionChart extends StatelessWidget { fontWeight: FontWeight.w700, ), ), - SizedBox(height: 20), Expanded( child: LineChart( LineChartData( - lineTouchData: LineTouchData( - handleBuiltInTouches: true, - touchSpotThreshold: 2, - touchTooltipData: _lineTouchTooltipData(), - ), - titlesData: _titlesData(context), lineBarsData: _lineBarsData, - gridData: const FlGridData( + gridData: FlGridData( show: true, drawVerticalLine: false, drawHorizontalLine: true, ), borderData: FlBorderData( - show: false, - border: Border.all( - color: ColorsManager.vividBlue.withValues(alpha: 0.2), - width: 10, + show: true, + border: const Border.symmetric( + horizontal: BorderSide( + color: ColorsManager.greyColor, + width: 1, + style: BorderStyle.solid, + ), ), ), + lineTouchData: LineTouchData( + handleBuiltInTouches: true, + touchSpotThreshold: 2, + touchTooltipData: _lineTouchTooltipData(), + ), ), - + duration: Durations.extralong1, + curve: Curves.easeIn, ), ), ], @@ -61,7 +64,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget { return [ LineChartBarData( preventCurveOvershootingThreshold: 0.1, - curveSmoothness: 0.5, + curveSmoothness: 0.55, preventCurveOverShooting: true, spots: _chartData .asMap() @@ -104,13 +107,20 @@ class TotalEnergyConsumptionChart extends StatelessWidget { drawBelowEverything: true, sideTitles: SideTitles( interval: 1, + reservedSize: 32, showTitles: true, maxIncluded: true, - getTitlesWidget: (value, meta) => Text( - _chartData[value.toInt()].time, - style: context.textTheme.bodySmall?.copyWith( - fontSize: 12, - color: ColorsManager.greyColor, + getTitlesWidget: (value, meta) => Padding( + padding: const EdgeInsets.only(top: 20.0), + child: FittedBox( + fit: BoxFit.scaleDown, + child: Text( + _chartData[value.toInt()].time, + style: context.textTheme.bodySmall?.copyWith( + fontSize: 12, + color: ColorsManager.greyColor, + ), + ), ), ), ), @@ -119,13 +129,13 @@ class TotalEnergyConsumptionChart extends StatelessWidget { sideTitles: SideTitles( showTitles: true, maxIncluded: true, - reservedSize: 90, + reservedSize: 110, 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', + _formatNumberToKwh(value), style: context.textTheme.bodySmall?.copyWith( fontSize: 12, color: ColorsManager.greyColor, @@ -142,25 +152,58 @@ class TotalEnergyConsumptionChart extends StatelessWidget { LineTouchTooltipData _lineTouchTooltipData() { return LineTouchTooltipData( - getTooltipColor: (touchTooltipItem) => Colors.white, - tooltipRoundedRadius: 10.0, + getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors, + tooltipBorder: const BorderSide(color: ColorsManager.semiTransparentBlack), + tooltipRoundedRadius: 16, + showOnTopOfTheChartBoxArea: false, 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(); + List _getTooltipItems(List touchedSpots) { + return touchedSpots.map((spot) { + return LineTooltipItem( + _getToolTipLabel(spot.x + 1, spot.y), + const TextStyle( + color: ColorsManager.textPrimaryColor, + fontWeight: FontWeight.w600, + fontSize: 12, + ), + ); + }).toList(); + } + + String _getToolTipLabel(num month, double value) { + final monthLabel = _getMonthNameFrom(month); + final valueLabel = _formatNumberToKwh(value); + return [monthLabel, valueLabel] + .where((element) => element.isNotEmpty) + .join(', '); + } + + String _formatNumberToKwh(double value) { + final regExp = RegExp(r'(\d)(?=(\d{3})+$)'); + return '${value.toStringAsFixed(0).replaceAllMapped(regExp, (match) => '${match[1]},')} kWh'; + } + + String _getMonthNameFrom(num month) { + final values = { + 1: 'JAN', + 2: 'FEB', + 3: 'MAR', + 4: 'APR', + 5: 'MAY', + 6: 'JUN', + 7: 'JUL', + 8: 'AUG', + 9: 'SEP', + 10: 'OCT', + 11: 'NOV', + 12: 'DEC', + }; + return values[month.toInt()] ?? 'N/A'; + } } const _chartData = [ @@ -183,8 +226,8 @@ class EnergyData { final String time; final double consumption; } -// energy_consumption_chart will return id, name and consumption +// energy_consumption_chart will return id, name and consumption final s = { "1": { "phaseOne": 1000,