finished integrating realtime data.

lib/pages/analytics/modules/air_quality/views/air_quality_view.dart

@@ -1,12 +1,27 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_widget.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
 
-class AirQualityView extends StatelessWidget {
+class AirQualityView extends StatefulWidget {
   const AirQualityView({super.key});
 
   static const _padding = EdgeInsetsDirectional.all(32);
 
+  @override
+  State<AirQualityView> createState() => _AirQualityViewState();
+}
+
+class _AirQualityViewState extends State<AirQualityView> {
+  @override
+  void initState() {
+    context.read<RealtimeDeviceChangesBloc>().add(
+          const RealtimeDeviceChangesStarted('078e4ed4-8f85-47b8-8c78-5a766549135d'),
+        );
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(
@@ -15,7 +30,7 @@ class AirQualityView extends StatelessWidget {
         final height = MediaQuery.sizeOf(context).height;
         if (isMediumOrLess) {
           return SingleChildScrollView(
-            padding: _padding,
+            padding: AirQualityView._padding,
             child: Column(
               spacing: 32,
               children: [
@@ -32,7 +47,7 @@ class AirQualityView extends StatelessWidget {
 
         return SingleChildScrollView(
           child: Container(
-            padding: _padding,
+            padding: AirQualityView._padding,
             height: height * 1.1,
             child: const Column(
               children: [

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

@@ -11,16 +11,19 @@ import 'package:syncrow_web/utils/style.dart';
 class AqiDeviceInfo extends StatelessWidget {
   const AqiDeviceInfo({super.key});
 
-  double _getValueForStatus(
+  String _getValueForStatus(
     List<Status> deviceStatusList,
     String code, {
     double defaultValue = 0,
+    String Function(int value)? formatter,
   }) {
     try {
       final foundStatus = deviceStatusList.firstWhere((e) => e.code == code);
-      return double.parse(foundStatus.value.toString());
+      final value = foundStatus.value.toString();
-    } catch (_) {
+      final intValue = int.parse(value);
-      return defaultValue;
+      return formatter != null ? formatter(intValue) : intValue.toString();
+    } catch (e) {
+      return defaultValue.toString();
     }
   }
 
@@ -29,13 +32,42 @@ class AqiDeviceInfo extends StatelessWidget {
     return BlocBuilder<RealtimeDeviceChangesBloc, RealtimeDeviceChangesState>(
       builder: (context, state) {
         final status = state.deviceStatusList;
-        final humidityValue = _getValueForStatus(status, 'humidity_value');
+        final humidityValue = _getValueForStatus(
-        final tempValue = _getValueForStatus(status, 'temp_current');
+          status,
-        final pm25Value = _getValueForStatus(status, 'pm25_value');
+          'humidity_value',
-        final pm10Value = _getValueForStatus(status, 'pm10');
+          formatter: (value) => value.toStringAsFixed(0),
-        final co2Value = _getValueForStatus(status, 'co2_value');
+        );
-        final ch2oValue = _getValueForStatus(status, 'ch2o_value');
+
-        final tvocValue = _getValueForStatus(status, 'tvoc_value');
+        final tempValue = _getValueForStatus(
+          status,
+          'temp_current',
+          formatter: (value) => value.toStringAsFixed(0),
+        );
+        final pm25Value = _getValueForStatus(
+          status,
+          'pm25_value',
+          formatter: (value) => value.toString().padLeft(3, '0'),
+        );
+        final pm10Value = _getValueForStatus(
+          status,
+          'pm10',
+          formatter: (value) => value.toString().padLeft(3, '0'),
+        );
+        final co2Value = _getValueForStatus(
+          status,
+          'co2_value',
+          formatter: (value) => value.toString().padLeft(4, '0'),
+        );
+        final ch2oValue = _getValueForStatus(
+          status,
+          'ch2o_value',
+          formatter: (value) => (value / 100).toStringAsFixed(2),
+        );
+        final tvocValue = _getValueForStatus(
+          status,
+          'tvoc_value',
+          formatter: (value) => (value / 100).toStringAsFixed(2),
+        );
 
         return Container(
           decoration: secondarySection.copyWith(boxShadow: const []),
@@ -46,34 +78,30 @@ class AqiDeviceInfo extends StatelessWidget {
               children: [
                 const AirQualityEndSideLiveIndicator(),
                 AirQualityEndSideGaugeAndInfo(
-                  temperature: humidityValue.toInt(),
+                  temperature: int.parse(tempValue),
-                  humidity: tempValue.toInt(),
+                  humidity: int.parse(humidityValue),
                 ),
                 const SizedBox(height: 20),
                 AqiSubValueWidget(
                   range: (0, 999),
                   label: AqiType.pm25.value,
-                  value: pm25Value < 100
+                  value: pm25Value,
-                      ? double.parse(pm25Value.toStringAsFixed(1).padLeft(4, '0'))
-                      : pm25Value,
                   unit: AqiType.pm25.unit,
                 ),
                 AqiSubValueWidget(
                   range: (0, 999),
                   label: AqiType.pm10.value,
-                  value: pm10Value < 100
+                  value: pm10Value,
-                      ? double.parse(pm10Value.toStringAsFixed(1).padLeft(4, '0'))
-                      : pm10Value,
                   unit: AqiType.pm10.unit,
                 ),
                 AqiSubValueWidget(
                   range: (0, 5),
                   label: AqiType.hcho.value,
-                  value: double.parse(ch2oValue.toStringAsFixed(2)),
+                  value: ch2oValue,
                   unit: AqiType.hcho.unit,
                 ),
                 AqiSubValueWidget(
-                  range: (0, 9.99),
+                  range: (0, 999),
                   label: AqiType.tvoc.value,
                   value: tvocValue,
                   unit: AqiType.tvoc.unit,
@@ -84,12 +112,6 @@ class AqiDeviceInfo extends StatelessWidget {
                   value: co2Value,
                   unit: AqiType.co2.unit,
                 ),
-                AqiSubValueWidget(
-                  range: (0, 100),
-                  label: AqiType.c6h6.value,
-                  value: 18,
-                  unit: AqiType.c6h6.unit,
-                ),
               ],
             ),
           ),

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

@@ -17,6 +17,23 @@ class AqiSubValueWidget extends StatelessWidget {
     required this.range,
     super.key,
   });
+
+  final String label;
+  final String value;
+  final String unit;
+  final (double min, double max) range;
+
+  double get _parsedValue => double.parse(value);
+
+  static const List<_AqiRange> _ranges = [
+    _AqiRange(max: 12, color: ColorsManager.goodGreen),
+    _AqiRange(max: 35, color: ColorsManager.poorOrange),
+    _AqiRange(max: 55, color: ColorsManager.poorOrange),
+    _AqiRange(max: 150, color: ColorsManager.unhealthyRed),
+    _AqiRange(max: 250, color: ColorsManager.severePink),
+    _AqiRange(max: 500, color: ColorsManager.hazardousPurple),
+  ];
+
   static List<_AqiRange> _getRangesForValue((double min, double max) range) {
     final (double min, double max) = range;
     final rangeSize = (max - min) / 6;
@@ -38,24 +55,9 @@ class AqiSubValueWidget extends StatelessWidget {
     return ranges.length - 1;
   }
 
-
-  final String label;
-  final double value;
-  final String unit;
-  final (double min, double max) range;
-
-  static const List<_AqiRange> _ranges = [
-    _AqiRange(max: 12, color: ColorsManager.goodGreen),
-    _AqiRange(max: 35, color: ColorsManager.poorOrange),
-    _AqiRange(max: 55, color: ColorsManager.poorOrange),
-    _AqiRange(max: 150, color: ColorsManager.unhealthyRed),
-    _AqiRange(max: 250, color: ColorsManager.severePink),
-    _AqiRange(max: 500, color: ColorsManager.hazardousPurple),
-  ];
-
   @override
   Widget build(BuildContext context) {
-    final activeSegment = _getActiveSegmentByRange(value, range);
+    final activeSegment = _getActiveSegmentByRange(_parsedValue, range);
     return Expanded(
       child: Container(
         padding: const EdgeInsetsDirectional.all(10),
@@ -86,7 +88,7 @@ class AqiSubValueWidget extends StatelessWidget {
           crossAxisAlignment: CrossAxisAlignment.end,
           children: [
             Text(
-              value.toString(),
+              value,
               style: context.textTheme.titleMedium?.copyWith(
                 color: ColorsManager.blackColor,
                 fontWeight: FontWeight.w400,

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

@@ -8,8 +8,7 @@ enum AqiType {
   pm10('PM10', 'µg/m³'),
   hcho('HCHO', 'mg/m³'),
   tvoc('TVOC', 'µg/m³'),
-  co2('CO2', 'ppm'),
+  co2('CO2', 'ppm');
-  c6h6('C6H6', 'µg/m³');
 
   const AqiType(this.value, this.unit);