From cd2eb46f4958c34efecceb150348b7df2804de0c Mon Sep 17 00:00:00 2001
From: Faris Armoush <farmoush@uba.com.jo>
Date: Mon, 26 May 2025 09:50:53 +0300
Subject: [PATCH] Implemented the overall design of `RangeOfAqiChart`, whats
 left is 100% matching it with the figma design.

---
 .../widgets/range_of_aqi_chart.dart           | 132 ++++++++++--------
 1 file changed, 73 insertions(+), 59 deletions(-)

diff --git a/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
index 6e8974f7..934e4c6e 100644
--- a/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
@@ -15,75 +15,45 @@ class RangeOfAqiChart extends StatelessWidget {
     required this.maxValues,
   });
 
+  static const _gradientColors = [
+    ColorsManager.goodGreen,
+    ColorsManager.moderateYellow,
+    ColorsManager.poorOrange,
+    ColorsManager.unhealthyRed,
+    ColorsManager.severePink,
+    ColorsManager.hazardousPurple,
+  ];
+
   @override
   Widget build(BuildContext context) {
     return Stack(
       children: [
-        // Fixed gradient background
-        Positioned.fill(
-          child: Container(
-            decoration: const BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.bottomCenter,
-                end: Alignment.topCenter,
-                colors: [
-                  Color(0xFF0CEC16),
-                  Color(0xFFFAC96C),
-                  Color(0xFFEC7400),
-                  Color(0xFFD40000),
-                  Color(0xFFD40094),
-                  Color(0xFFBA01FD),
-                ],
-              ),
-            ),
-          ),
-        ),
         LineChart(
           LineChartData(
             minY: 0,
-            maxY: 320,
+            maxY: 301,
             gridData: EnergyManagementChartsHelper.gridData(),
             titlesData: EnergyManagementChartsHelper.titlesData(context),
-            borderData: FlBorderData(show: false),
+            borderData: EnergyManagementChartsHelper.borderData(),
+            betweenBarsData: [
+              BetweenBarsData(
+                fromIndex: 0,
+                toIndex: 2,
+                gradient: LinearGradient(
+                  begin: Alignment.bottomCenter,
+                  end: Alignment.topCenter,
+                  colors: _gradientColors
+                      .map(
+                        (e) => e.withValues(alpha: 0.8),
+                      )
+                      .toList(),
+                ),
+              ),
+            ],
             lineBarsData: [
-              // Max line (top, purple)
-              LineChartBarData(
-                spots: List.generate(
-                  maxValues.length,
-                  (i) => FlSpot(i.toDouble(), maxValues[i]),
-                ),
-                isCurved: true,
-                color: const Color(0xFF962DFF),
-                barWidth: 3,
-                isStrokeCapRound: true,
-                dotData: _buildDotData(const Color(0xFF5F00BD)),
-                belowBarData: BarAreaData(show: false),
-              ),
-              // Avg line (middle, white)
-              LineChartBarData(
-                spots: List.generate(
-                  avgValues.length,
-                  (i) => FlSpot(i.toDouble(), avgValues[i]),
-                ),
-                isCurved: true,
-                color: Colors.white,
-                barWidth: 3,
-                dotData: const FlDotData(show: false),
-                belowBarData: BarAreaData(show: false),
-              ),
-              // Min line (bottom, blue)
-              LineChartBarData(
-                spots: List.generate(
-                  minValues.length,
-                  (i) => FlSpot(i.toDouble(), minValues[i]),
-                ),
-                isCurved: true,
-                color: const Color(0xFF93AAFD),
-                barWidth: 3,
-                isStrokeCapRound: true,
-                dotData: _buildDotData(const Color(0xFF023DFE)),
-                belowBarData: BarAreaData(show: false),
-              ),
+              _buildMaxLine(),
+              _buildAverageLine(),
+              _buildMinLine(),
             ],
           ),
         ),
@@ -91,6 +61,50 @@ class RangeOfAqiChart extends StatelessWidget {
     );
   }
 
+  LineChartBarData _buildMinLine() {
+    return LineChartBarData(
+      spots: List.generate(
+        minValues.length,
+        (i) => FlSpot(i.toDouble(), minValues[i]),
+      ),
+      isCurved: true,
+      color: const Color(0xFF93AAFD),
+      barWidth: 3,
+      isStrokeCapRound: true,
+      dotData: _buildDotData(const Color(0xFF023DFE)),
+      belowBarData: BarAreaData(show: false),
+    );
+  }
+
+  LineChartBarData _buildAverageLine() {
+    return LineChartBarData(
+      spots: List.generate(
+        avgValues.length,
+        (i) => FlSpot(i.toDouble(), avgValues[i]),
+      ),
+      isCurved: true,
+      color: Colors.white,
+      barWidth: 3,
+      dotData: const FlDotData(show: false),
+      belowBarData: BarAreaData(show: false),
+    );
+  }
+
+  LineChartBarData _buildMaxLine() {
+    return LineChartBarData(
+      spots: List.generate(
+        maxValues.length,
+        (i) => FlSpot(i.toDouble(), maxValues[i]),
+      ),
+      isCurved: true,
+      color: const Color(0xFF962DFF),
+      barWidth: 3,
+      isStrokeCapRound: true,
+      dotData: _buildDotData(const Color(0xFF5F00BD)),
+      belowBarData: BarAreaData(show: false),
+    );
+  }
+
   FlDotData _buildDotData(Color color) {
     return FlDotData(
       show: true,