made charts based on states and not based on metrics.

This commit is contained in:
Faris Armoush
2025-06-01 12:36:09 +03:00
parent 7b31914e1c
commit ca1feb9600
3 changed files with 66 additions and 64 deletions

View File

@ -4,28 +4,28 @@ import 'package:syncrow_web/utils/color_manager.dart';
class AirQualityDataModel { class AirQualityDataModel {
const AirQualityDataModel({ const AirQualityDataModel({
required this.date, required this.date,
this.aqi, this.good,
this.pm25, this.moderate,
this.pm10, this.poor,
this.hcho, this.unhealthy,
this.tvoc, this.severe,
this.co2, this.hazardous,
}); });
final DateTime date; final DateTime date;
final double? aqi; final double? good;
final double? pm25; final double? moderate;
final double? pm10; final double? poor;
final double? hcho; final double? unhealthy;
final double? tvoc; final double? severe;
final double? co2; final double? hazardous;
static final Map<String, Color> metricColors = { static final Map<String, Color> metricColors = {
'aqi': ColorsManager.goodGreen.withValues(alpha: 0.7), 'good': ColorsManager.goodGreen.withValues(alpha: 0.7),
'pm25': ColorsManager.moderateYellow.withValues(alpha: 0.7), 'moderate': ColorsManager.moderateYellow.withValues(alpha: 0.7),
'pm10': ColorsManager.poorOrange.withValues(alpha: 0.7), 'poor': ColorsManager.poorOrange.withValues(alpha: 0.7),
'hcho': ColorsManager.unhealthyRed.withValues(alpha: 0.7), 'unhealthy': ColorsManager.unhealthyRed.withValues(alpha: 0.7),
'tvoc': ColorsManager.severePink.withValues(alpha: 0.7), 'severe': ColorsManager.severePink.withValues(alpha: 0.7),
'co2': ColorsManager.hazardousPurple.withValues(alpha: 0.7), 'hazardous': ColorsManager.hazardousPurple.withValues(alpha: 0.7),
}; };
} }

View File

@ -36,83 +36,84 @@ class AqiDistributionChart extends StatelessWidget {
final stackItems = <BarChartRodData>[]; final stackItems = <BarChartRodData>[];
double currentY = 0; double currentY = 0;
if (data.aqi != null) { if (data.good != null) {
stackItems.add( stackItems.add(
BarChartRodData( BarChartRodData(
fromY: currentY, fromY: currentY,
toY: currentY + data.aqi!, toY: currentY + data.good!,
color: AirQualityDataModel.metricColors['aqi']!, color: AirQualityDataModel.metricColors['good']!,
borderRadius: _barBorderRadius, borderRadius: _barBorderRadius,
width: _barWidth, width: _barWidth,
), ),
); );
currentY += data.aqi! + _rodStackItemsSpacing; currentY += data.good! + _rodStackItemsSpacing;
} }
if (data.pm25 != null) { if (data.moderate != null) {
stackItems.add( stackItems.add(
BarChartRodData( BarChartRodData(
fromY: currentY, fromY: currentY,
toY: currentY + data.pm25!, toY: currentY + data.moderate!,
color: AirQualityDataModel.metricColors['pm25']!, color: AirQualityDataModel.metricColors['moderate']!,
borderRadius: _barBorderRadius, borderRadius: _barBorderRadius,
width: _barWidth, width: _barWidth,
), ),
); );
currentY += data.pm25! + _rodStackItemsSpacing; currentY += data.moderate! + _rodStackItemsSpacing;
} }
if (data.pm10 != null) { if (data.poor != null) {
stackItems.add( stackItems.add(
BarChartRodData( BarChartRodData(
fromY: currentY, fromY: currentY,
toY: currentY + data.pm10!, toY: currentY + data.poor!,
color: AirQualityDataModel.metricColors['pm10']!, color: AirQualityDataModel.metricColors['poor']!,
borderRadius: _barBorderRadius, borderRadius: _barBorderRadius,
width: _barWidth, width: _barWidth,
), ),
); );
currentY += data.pm10! + _rodStackItemsSpacing; currentY += data.poor! + _rodStackItemsSpacing;
} }
if (data.hcho != null) { if (data.unhealthy != null) {
stackItems.add( stackItems.add(
BarChartRodData( BarChartRodData(
fromY: currentY, fromY: currentY,
toY: currentY + data.hcho!, toY: currentY + data.unhealthy!,
color: AirQualityDataModel.metricColors['hcho']!, color: AirQualityDataModel.metricColors['unhealthy']!,
borderRadius: _barBorderRadius, borderRadius: _barBorderRadius,
width: _barWidth, width: _barWidth,
), ),
); );
currentY += data.hcho! + _rodStackItemsSpacing; currentY += data.unhealthy! + _rodStackItemsSpacing;
} }
if (data.tvoc != null) { if (data.severe != null) {
stackItems.add( stackItems.add(
BarChartRodData( BarChartRodData(
fromY: currentY, fromY: currentY,
toY: currentY + data.tvoc!, toY: currentY + data.severe!,
color: AirQualityDataModel.metricColors['tvoc']!, color: AirQualityDataModel.metricColors['severe']!,
borderRadius: _barBorderRadius, borderRadius: _barBorderRadius,
width: _barWidth, width: _barWidth,
), ),
); );
currentY += data.tvoc! + _rodStackItemsSpacing; currentY += data.severe! + _rodStackItemsSpacing;
} }
if (data.co2 != null) { if (data.hazardous != null) {
stackItems.add( stackItems.add(
BarChartRodData( BarChartRodData(
fromY: currentY, fromY: currentY,
toY: currentY + data.co2!, toY: currentY + data.hazardous!,
color: AirQualityDataModel.metricColors['co2']!, color: AirQualityDataModel.metricColors['hazardous']!,
borderRadius: _barBorderRadius, borderRadius: _barBorderRadius,
width: _barWidth, width: _barWidth,
), ),
); );
currentY += data.co2! + _rodStackItemsSpacing; currentY += data.hazardous! + _rodStackItemsSpacing;
} }
return BarChartGroupData( return BarChartGroupData(
x: index, x: index,
barRods: stackItems, barRods: stackItems,
@ -146,7 +147,8 @@ class AqiDistributionChart extends StatelessWidget {
.key .key
.toLowerCase(); .toLowerCase();
return TextSpan( return TextSpan(
text: '$metricName: ${item.toY - item.fromY}\n', text:
'$metricName: ${(item.toY - item.fromY).toStringAsFixed(1)}%\n',
style: context.textTheme.bodySmall?.copyWith( style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.blackColor, color: ColorsManager.blackColor,
fontSize: 12, fontSize: 12,

View File

@ -26,31 +26,31 @@ class AqiDistributionChartBox extends StatelessWidget {
child: AqiDistributionChart( child: AqiDistributionChart(
chartData: [ chartData: [
AirQualityDataModel( AirQualityDataModel(
date: DateTime.now(), date: DateTime(2025, 5, 1),
aqi: 20, good: 30,
pm25: 10, moderate: 25,
pm10: 40, poor: 15,
co2: 10, unhealthy: 10,
hcho: 0, severe: 15,
tvoc: 20, hazardous: 5,
), ),
AirQualityDataModel( AirQualityDataModel(
date: DateTime.now(), date: DateTime(2025, 5, 2),
aqi: 20, good: 40,
pm25: 10, moderate: 20,
pm10: 40, poor: 20,
co2: 10, unhealthy: 10,
hcho: 0, severe: 5,
tvoc: 20, hazardous: 5,
), ),
AirQualityDataModel( AirQualityDataModel(
date: DateTime.now(), date: DateTime(2025, 5, 3),
aqi: 20, good: 35,
pm25: 10, moderate: 30,
pm10: 40, poor: 15,
co2: 10, unhealthy: 10,
hcho: 0, severe: 5,
tvoc: 20, hazardous: 5,
), ),
], ],
), ),