Created AqiTypeDropdown.

lib/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
@@ -21,7 +22,12 @@ abstract final class FetchAirQualityDataHelper {
       communityUuid: communityUuid,
       spaceUuid: spaceUuid,
     );
-    loadRangeOfAqi(context, spaceUuid: spaceUuid, date: date);
+    loadRangeOfAqi(
+      context,
+      spaceUuid: spaceUuid,
+      date: date,
+      aqiType: AqiType.aqi,
+    );
   }
 
   static void clearAllData(BuildContext context) {
@@ -61,10 +67,15 @@ abstract final class FetchAirQualityDataHelper {
     BuildContext context, {
     required String spaceUuid,
     required DateTime date,
+    required AqiType aqiType,
   }) {
     context.read<RangeOfAqiBloc>().add(
           LoadRangeOfAqiEvent(
-            GetRangeOfAqiParam(date: date, spaceUuid: spaceUuid),
+            GetRangeOfAqiParam(
+              date: date,
+              spaceUuid: spaceUuid,
+              aqiType: aqiType,
+            ),
           ),
         );
   }

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

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+enum AqiType {
+  aqi('AQI'),
+  pm25('PM2.5'),
+  pm10('PM10'),
+  co2('CO2'),
+  voc('VOC'),
+  tvoc('TVOC');
+
+  final String value;
+  const AqiType(this.value);
+}
+
+class AqiTypeDropdown extends StatefulWidget {
+  const AqiTypeDropdown({super.key, required this.onChanged});
+
+  final ValueChanged<AqiType?> onChanged;
+
+  @override
+  State<AqiTypeDropdown> createState() => _AqiTypeDropdownState();
+}
+
+class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
+  AqiType? _selectedItem = AqiType.aqi;
+
+  void _updateSelectedItem(AqiType? item) => setState(() => _selectedItem = item);
+
+  static const _defaultPadding = EdgeInsetsDirectional.symmetric(
+    horizontal: 12,
+    vertical: 2,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: ColorsManager.greyColor,
+          width: 1,
+        ),
+      ),
+      child: DropdownButton<AqiType?>(
+        value: _selectedItem,
+        isDense: true,
+        isExpanded: false,
+        selectedItemBuilder: (context) => [
+          Text(_selectedItem?.value ?? ''),
+        ],
+        borderRadius: BorderRadius.circular(16),
+        dropdownColor: ColorsManager.whiteColors,
+        underline: const SizedBox.shrink(),
+        icon: const RotatedBox(
+          quarterTurns: 1,
+          child: Icon(Icons.chevron_right, size: 24),
+        ),
+        style: _getTextStyle(context),
+        padding: _defaultPadding,
+        items: AqiType.values
+            .map((e) => DropdownMenuItem(value: e, child: Text(e.value)))
+            .toList(),
+        onChanged: (value) {
+          _updateSelectedItem(value);
+          widget.onChanged(value);
+        },
+      ),
+    );
+  }
+
+  TextStyle? _getTextStyle(BuildContext context) {
+    return context.textTheme.labelSmall?.copyWith(
+      color: ColorsManager.textPrimaryColor,
+      fontWeight: FontWeight.w700,
+      fontSize: 14,
+    );
+  }
+}

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

@@ -1,6 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 
 class RangeOfAqiChartTitle extends StatelessWidget {
   const RangeOfAqiChartTitle({super.key});
@@ -32,7 +37,21 @@ class RangeOfAqiChartTitle extends StatelessWidget {
           },
         ),
         const SizedBox(width: 34),
-        const Text('AQI'),
+        AqiTypeDropdown(
+          onChanged: (value) {
+            final spaceTreeState = context.read<SpaceTreeBloc>().state;
+            final spaceUuid = spaceTreeState.selectedSpaces.firstOrNull;
+
+            if (spaceUuid == null) return;
+
+            FetchAirQualityDataHelper.loadRangeOfAqi(
+              context,
+              spaceUuid: spaceUuid,
+              date: context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
+              aqiType: value ?? AqiType.aqi,
+            );
+          },
+        ),
       ],
     );
   }

lib/pages/analytics/params/get_range_of_aqi_param.dart

@@ -1,12 +1,16 @@
 import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 
 class GetRangeOfAqiParam extends Equatable {
   final DateTime date;
   final String spaceUuid;
+  final AqiType aqiType;
 
-  const GetRangeOfAqiParam({
+  const GetRangeOfAqiParam(
+    {
     required this.date,
     required this.spaceUuid,
+    required this.aqiType,
   });
 
   @override