mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
Created an initial version of RangeOfAqiChart
.
This commit is contained in:
@ -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()),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
@ -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,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -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,
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user