made charts based on states and not based on metrics.

lib/pages/analytics/models/air_quality_data_model.dart

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

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart

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

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_box.dart

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