ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-11-27 00:54:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented the overall design of RangeOfAqiChart, whats left is 100% matching it with the figma design.

Browse Source
This commit is contained in:
Faris Armoush
2025-05-26 09:50:53 +03:00
parent 39351a710d
commit cd2eb46f49
1 changed files with 73 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
View File

@ -15,75 +15,45 @@ class RangeOfAqiChart extends StatelessWidget {
required this.maxValues, required this.maxValues,
}); });
static const _gradientColors = [
ColorsManager.goodGreen,
ColorsManager.moderateYellow,
ColorsManager.poorOrange,
ColorsManager.unhealthyRed,
ColorsManager.severePink,
ColorsManager.hazardousPurple,
];
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Stack( return Stack(
children: [ 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( LineChart(
LineChartData( LineChartData(
minY: 0, minY: 0,
maxY: 320, maxY: 301,
gridData: EnergyManagementChartsHelper.gridData(), gridData: EnergyManagementChartsHelper.gridData(),
titlesData: EnergyManagementChartsHelper.titlesData(context), 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: [ lineBarsData: [
// Max line (top, purple) _buildMaxLine(),
LineChartBarData( _buildAverageLine(),
spots: List.generate( _buildMinLine(),
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),
),
], ],
), ),
), ),
@ -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) { FlDotData _buildDotData(Color color) {
return FlDotData( return FlDotData(
show: true, show: true,