diff --git a/lib/pages/analytics/modules/air_quality/widgets/air_quality_end_side_gauge_and_info.dart b/lib/pages/analytics/modules/air_quality/widgets/air_quality_end_side_gauge_and_info.dart index 8722ec68..fb0cac9e 100644 --- a/lib/pages/analytics/modules/air_quality/widgets/air_quality_end_side_gauge_and_info.dart +++ b/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, diff --git a/lib/pages/analytics/modules/air_quality/widgets/aqi_device_info.dart b/lib/pages/analytics/modules/air_quality/widgets/aqi_device_info.dart index d9a874bb..f3773c29 100644 --- a/lib/pages/analytics/modules/air_quality/widgets/aqi_device_info.dart +++ b/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), ), diff --git a/lib/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart b/lib/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart index 0061f7e8..a94d8cd4 100644 --- a/lib/pages/analytics/modules/air_quality/widgets/aqi_gauge.dart +++ b/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 _unhealthyToSevereRange = 225.0; - static const _maxRange = 300.0; + static const _maxRange = 150.0; - Color _getPointerColor(double value) { - if (value <= _goodRange) { - return ColorsManager.goodGreen; - } else if (value <= _moderateRange) { - return ColorsManager.moderateYellow; - } 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, - )!; - } - } + String _getStatusText(double value) { + return switch (value) { + <= _goodRange => 'Good', + <= _moderateRange => 'Moderate', + _ => 'Poor', + }; } + 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, - fontSize: 30, + fontWeight: FontWeight.w400, + fontSize: 12, ), children: [ - const TextSpan( - text: 'AQI', - style: TextStyle( - color: ColorsManager.textPrimaryColor, + TextSpan( + text: status, + style: context.textTheme.bodySmall?.copyWith( + 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( - background: ColorsManager.transparentColor, - interval: Interval(0, 0), - ), - segments: [ - const GaugeSegment( + 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( - colorStops: [0.0, 0.5, 1.0], - colors: [ - ColorsManager.unhealthyRed, - ColorsManager.severePink, - ColorsManager.hazardousPurple, - ], - ), + color: ColorsManager.poorOrange, ), ], ), diff --git a/lib/pages/analytics/modules/air_quality/widgets/aqi_humidity_and_temperature.dart b/lib/pages/analytics/modules/air_quality/widgets/aqi_humidity_and_temperature.dart index 6bea1db9..0d6f4ebf 100644 --- a/lib/pages/analytics/modules/air_quality/widgets/aqi_humidity_and_temperature.dart +++ b/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( - Assets.temperatureAqiSidebar, - height: iconSize, - 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%'), + _buildIconAndValue(Assets.temperatureAqiSidebar, '$temperature°C'), + const SizedBox(height: 10), + _buildIconAndValue(Assets.humidityAqiSidebar, '$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), + ], + ); + } }