Created an initial version of RangeOfAqiChart.

This commit is contained in:
Faris Armoush
2025-05-25 12:01:26 +03:00
parent 0f9227a6f5
commit c8fe4e3baa
3 changed files with 166 additions and 2 deletions

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.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/air_quality_end_side_widget.dart';
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
class AirQualityView extends StatelessWidget { class AirQualityView extends StatelessWidget {
const AirQualityView({super.key}); const AirQualityView({super.key});
@ -22,7 +23,7 @@ class AirQualityView extends StatelessWidget {
height: height * 1.2, height: height * 1.2,
child: const AirQualityEndSideWidget(), child: const AirQualityEndSideWidget(),
), ),
SizedBox(height: height * 0.5, child: const Placeholder()), SizedBox(height: height * 0.5, child: const RangeOfAqiChartBox()),
SizedBox(height: height * 0.5, child: const Placeholder()), SizedBox(height: height * 0.5, child: const Placeholder()),
], ],
), ),
@ -44,7 +45,7 @@ class AirQualityView extends StatelessWidget {
child: Column( child: Column(
spacing: 20, spacing: 20,
children: [ children: [
Expanded(child: Placeholder()), Expanded(child: RangeOfAqiChartBox()),
Expanded(child: Placeholder()), Expanded(child: Placeholder()),
], ],
), ),

View File

@ -0,0 +1,105 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class RangeOfAqiChart extends StatelessWidget {
final List<double> minValues;
final List<double> avgValues;
final List<double> maxValues;
const RangeOfAqiChart({
super.key,
required this.minValues,
required this.avgValues,
required this.maxValues,
});
@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,
gridData: EnergyManagementChartsHelper.gridData(),
titlesData: EnergyManagementChartsHelper.titlesData(context),
borderData: FlBorderData(show: false),
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),
),
],
),
),
],
);
}
FlDotData _buildDotData(Color color) {
return FlDotData(
show: true,
getDotPainter: (spot, percent, bar, index) => FlDotCirclePainter(
radius: 2,
color: ColorsManager.whiteColors,
strokeWidth: 2,
strokeColor: color,
),
);
}
}

View File

@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
import 'package:syncrow_web/utils/style.dart';
class RangeOfAqiChartBox extends StatelessWidget {
const RangeOfAqiChartBox({super.key});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsetsDirectional.all(20),
decoration: secondarySection,
child: const Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 20,
children: [
ChartTitle(title: Text('Range of AQI')),
Expanded(
child: RangeOfAqiChart(
avgValues: [
120,
60,
110,
100,
90,
70,
80,
90,
100,
110,
120,
150,
160
],
minValues: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130],
maxValues: [
130,
140,
150,
160,
170,
180,
190,
200,
210,
220,
230,
240,
],
),
),
],
),
);
}
}