gave range of aqi chart a tooltip that shows the necessary data.

This commit is contained in:
Faris Armoush
2025-05-27 13:17:05 +03:00
parent 1aa7bf2162
commit a1142eb38c
2 changed files with 55 additions and 3 deletions

View File

@ -1,5 +1,6 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
import 'package:syncrow_web/utils/color_manager.dart';
@ -60,4 +61,55 @@ abstract final class RangeOfAqiChartsHelper {
),
);
}
static List<LineTooltipItem?> getTooltipItems(
List<LineBarSpot> touchedSpots,
List<RangeOfAqi> chartData,
) {
return touchedSpots.asMap().entries.map((entry) {
final index = entry.key;
final spot = entry.value;
final label = switch (spot.barIndex) {
0 => 'Max',
1 => 'Avg',
2 => 'Min',
_ => '',
};
final date = DateFormat('dd/MM').format(chartData[spot.x.toInt()].date);
return LineTooltipItem(
index == 0 ? '$date\n' : '',
const TextStyle(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w600,
fontSize: 12,
),
children: [
TextSpan(text: '$label: ${spot.y.toStringAsFixed(0)}'),
],
);
}).toList();
}
static LineTouchData lineTouchData(
List<RangeOfAqi> chartData,
) {
return LineTouchData(
touchTooltipData: LineTouchTooltipData(
getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
tooltipBorder: const BorderSide(
color: ColorsManager.semiTransparentBlack,
),
tooltipRoundedRadius: 16,
showOnTopOfTheChartBoxArea: false,
tooltipPadding: const EdgeInsets.all(8),
getTooltipItems: (touchedSpots) => RangeOfAqiChartsHelper.getTooltipItems(
touchedSpots,
chartData,
),
),
);
}
}

View File

@ -17,7 +17,7 @@ class RangeOfAqiChart extends StatelessWidget {
(
chartData.map((e) => e.max).toList(),
const Color(0xFF962DFF),
const Color(0xFF5F00BD)
const Color(0xFF5F00BD),
),
(
chartData.map((e) => e.avg).toList(),
@ -27,7 +27,7 @@ class RangeOfAqiChart extends StatelessWidget {
(
chartData.map((e) => e.min).toList(),
const Color(0xFF93AAFD),
const Color(0xFF023DFE)
const Color(0xFF023DFE),
),
];
@ -41,7 +41,7 @@ class RangeOfAqiChart extends StatelessWidget {
gridData: EnergyManagementChartsHelper.gridData(horizontalInterval: 50),
titlesData: RangeOfAqiChartsHelper.titlesData(context, chartData),
borderData: EnergyManagementChartsHelper.borderData(),
lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
lineTouchData: RangeOfAqiChartsHelper.lineTouchData(chartData),
betweenBarsData: [
BetweenBarsData(
fromIndex: 0,