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

Enhance TotalEnergyConsumptionChart layout and tooltip functionality.

Browse Source
This commit is contained in:
Faris Armoush
2025-04-30 14:56:01 +03:00
parent 9f68d171ff
commit 1f4e82d567
1 changed files with 79 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart
View File

@ -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<LineTooltipItem?> _getTooltipItems(List<LineBarSpot> 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<LineTooltipItem?> _getTooltipItems(List<LineBarSpot> 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,