Implemented new gauge design.

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

@@ -1,18 +1,25 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_humidity_and_temperature.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
   const AirQualityEndSideGaugeAndInfo({
     super.key,
     required this.temperature,
     required this.humidity,
+    required this.aqiLevel,
   });
 
   final int temperature;
   final int humidity;
+  final String aqiLevel;
+
+  double get aqi => switch (aqiLevel) {
+        'level_1' => 25.0,
+        'level_2' => 75.0,
+        'level_3' => 125.0,
+        _ => 0.0,
+      };
 
   @override
   Widget build(BuildContext context) {
@@ -20,12 +27,12 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
       flex: 2,
       child: Row(
         children: [
-          const Expanded(
+          Expanded(
             flex: 2,
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisAlignment: MainAxisAlignment.start,
-              children: [Expanded(child: AqiGauge(aqi: 200))],
+              children: [Expanded(child: AqiGauge(aqi: aqi))],
             ),
           ),
           const Spacer(),
@@ -33,34 +40,10 @@ class AirQualityEndSideGaugeAndInfo extends StatelessWidget {
             child: Padding(
               padding: const EdgeInsetsDirectional.only(end: 20),
               child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
+                // crossAxisAlignment: CrossAxisAlignment.stretch,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  const Spacer(),
-                  FittedBox(
-                    fit: BoxFit.contain,
-                    alignment: AlignmentDirectional.centerStart,
-                    child: Text(
-                      'Air Quality:',
-                      style: context.textTheme.bodySmall?.copyWith(
-                        color: ColorsManager.textPrimaryColor,
-                        fontWeight: FontWeight.w400,
-                        fontSize: 14,
-                      ),
-                    ),
-                  ),
-                  FittedBox(
-                    fit: BoxFit.contain,
-                    alignment: AlignmentDirectional.centerStart,
-                    child: Text(
-                      'Perfect',
-                      style: context.textTheme.bodySmall?.copyWith(
-                        color: ColorsManager.green,
-                        fontWeight: FontWeight.w400,
-                        fontSize: 30,
-                      ),
-                    ),
-                  ),
-                  const Spacer(),
                   AqiHumidityAndTemperature(
                     temperature: temperature,
                     humidity: humidity,

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

@@ -41,7 +41,7 @@ class AqiDeviceInfo extends StatelessWidget {
         final tempValue = _getValueForStatus(
           status,
           'temp_current',
-          formatter: (value) => value.toStringAsFixed(0),
+          formatter: (value) => (value / 10).toStringAsFixed(0),
         );
         final pm25Value = _getValueForStatus(
           status,
@@ -78,6 +78,13 @@ class AqiDeviceInfo extends StatelessWidget {
               children: [
                 const AirQualityEndSideLiveIndicator(),
                 AirQualityEndSideGaugeAndInfo(
+                  aqiLevel: status
+                      .firstWhere(
+                        (e) => e.code == 'air_quality_index',
+                        orElse: () => Status(code: 'air_quality_index', value: ''),
+                      )
+                      .value
+                      .toString(),
                   temperature: int.parse(tempValue),
                   humidity: int.parse(humidityValue),
                 ),

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

@@ -10,41 +10,32 @@ class AqiGauge extends StatelessWidget {
   static const _minRange = 0.0;
   static const _goodRange = 50.0;
   static const _moderateRange = 100.0;
-  static const _poorRange = 150.0;
+  static const _maxRange = 150.0;
-  static const _unhealthyToSevereRange = 225.0;
-  static const _maxRange = 300.0;
 
-  Color _getPointerColor(double value) {
+  String _getStatusText(double value) {
-    if (value <= _goodRange) {
+    return switch (value) {
-      return ColorsManager.goodGreen;
+      <= _goodRange => 'Good',
-    } else if (value <= _moderateRange) {
+      <= _moderateRange => 'Moderate',
-      return ColorsManager.moderateYellow;
+      _ => 'Poor',
-    } else if (value <= _poorRange) {
+    };
-      return ColorsManager.poorOrange;
-    } else {
-      const unhealthyStart = _poorRange + 1;
-      if (value <= _unhealthyToSevereRange) {
-        final t =
-            (value - unhealthyStart) / (_unhealthyToSevereRange - unhealthyStart);
-        return Color.lerp(
-          ColorsManager.unhealthyRed,
-          ColorsManager.severePink,
-          t,
-        )!;
-      } else {
-        const severeStart = _unhealthyToSevereRange + 1;
-        final t = (value - severeStart) / (_maxRange - severeStart);
-        return Color.lerp(
-          ColorsManager.severePink,
-          ColorsManager.hazardousPurple,
-          t,
-        )!;
-      }
-    }
   }
 
+  Color _darkenColor(Color color) => Color.lerp(
+        color,
+        Colors.black.withValues(alpha: 0.8),
+        0.4,
+      )!;
+
+  Color _getStatusColor(double value) => switch (value) {
+        <= _goodRange => ColorsManager.goodGreen,
+        <= _moderateRange => ColorsManager.moderateYellow,
+        _ => ColorsManager.poorOrange,
+      };
+
   @override
   Widget build(BuildContext context) {
+    final status = _getStatusText(aqi);
+    final statusColor = _getStatusColor(aqi);
     return AnimatedRadialGauge(
       value: aqi,
       debug: false,
@@ -60,24 +51,23 @@ class AqiGauge extends StatelessWidget {
             alignment: AlignmentDirectional.bottomCenter,
             child: Text.rich(
               TextSpan(
-                text: value.toStringAsFixed(0),
+                text: 'Air Quality\n',
                 style: context.textTheme.bodySmall?.copyWith(
                   color: ColorsManager.textPrimaryColor,
-                  fontWeight: FontWeight.w700,
+                  fontWeight: FontWeight.w400,
-                  fontSize: 30,
+                  fontSize: 12,
                 ),
                 children: [
-                  const TextSpan(
+                  TextSpan(
-                    text: 'AQI',
+                    text: status,
-                    style: TextStyle(
+                    style: context.textTheme.bodySmall?.copyWith(
-                      color: ColorsManager.textPrimaryColor,
+                      color: _darkenColor(statusColor),
                       fontWeight: FontWeight.w400,
-                      fontSize: 12,
+                      fontSize: 30,
                     ),
                   ),
                 ],
               ),
-              overflow: TextOverflow.ellipsis,
               textAlign: TextAlign.center,
             ),
           ),
@@ -98,7 +88,7 @@ class AqiGauge extends StatelessWidget {
           color: ColorsManager.whiteColors,
           border: GaugePointerBorder(
             width: 6,
-            color: _getPointerColor(aqi),
+            color: statusColor,
           ),
           shadow: const BoxShadow(
             color: ColorsManager.blackColor,
@@ -106,41 +96,24 @@ class AqiGauge extends StatelessWidget {
             offset: Offset(0, 2),
           ),
         ),
-        transformer: const GaugeAxisTransformer.colorFadeIn(
+        segments: const [
-          background: ColorsManager.transparentColor,
+          GaugeSegment(
-          interval: Interval(0, 0),
-        ),
-        segments: [
-          const GaugeSegment(
             from: _minRange,
             to: _goodRange,
             cornerRadius: Radius.circular(16),
             color: ColorsManager.goodGreen,
           ),
-          const GaugeSegment(
+          GaugeSegment(
             from: _goodRange + 1,
             to: _moderateRange,
             cornerRadius: Radius.circular(16),
             color: ColorsManager.moderateYellow,
           ),
-          const GaugeSegment(
+          GaugeSegment(
             from: _moderateRange + 1,
-            to: _poorRange,
-            cornerRadius: Radius.circular(16),
-            color: ColorsManager.poorOrange,
-          ),
-          const GaugeSegment(
-            from: _poorRange + 1,
             to: _maxRange,
             cornerRadius: Radius.circular(16),
-            gradient: GaugeAxisGradient(
+            color: ColorsManager.poorOrange,
-              colorStops: [0.0, 0.5, 1.0],
-              colors: [
-                ColorsManager.unhealthyRed,
-                ColorsManager.severePink,
-                ColorsManager.hazardousPurple,
-              ],
-            ),
           ),
         ],
       ),

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

@@ -19,7 +19,6 @@ class AqiHumidityAndTemperature extends StatelessWidget {
     BlendMode.srcIn,
   );
 
-
   @override
   Widget build(BuildContext context) {
     return FittedBox(
@@ -29,30 +28,32 @@ class AqiHumidityAndTemperature extends StatelessWidget {
         style: context.textTheme.bodySmall!.copyWith(
           color: ColorsManager.textPrimaryColor,
           fontWeight: FontWeight.w400,
-          fontSize: 12,
+          fontSize: 16,
         ),
-        child: Row(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            SvgPicture.asset(
+            _buildIconAndValue(Assets.temperatureAqiSidebar, '$temperature°C'),
-              Assets.temperatureAqiSidebar,
+            const SizedBox(height: 10),
-              height: iconSize,
+            _buildIconAndValue(Assets.humidityAqiSidebar, '$humidity%'),
-              width: iconSize,
-              colorFilter: colorFilter,
-            ),
-            const SizedBox(width: 4),
-            Text('$temperature°C'),
-            const SizedBox(width: 10),
-            SvgPicture.asset(
-              Assets.humidityAqiSidebar,
-              height: iconSize,
-              width: iconSize,
-              colorFilter: colorFilter,
-            ),
-            const SizedBox(width: 4),
-            Text('$humidity%'),
           ],
         ),
       ),
     );
   }
+
+  Widget _buildIconAndValue(String icon, String value) {
+    return Row(
+      children: [
+        SvgPicture.asset(
+          icon,
+          height: iconSize,
+          width: iconSize,
+          colorFilter: colorFilter,
+        ),
+        const SizedBox(width: 4),
+        Text(value),
+      ],
+    );
+  }
 }