mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
Implemented min, max, average informative cells to RangeOfAqiChartBox
.
This commit is contained in:
@ -47,9 +47,10 @@ class RangeOfAqiChart extends StatelessWidget {
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.bottomCenter,
|
||||
end: Alignment.topCenter,
|
||||
stops: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
colors: RangeOfAqiChartsHelper.gradientData.map((e) {
|
||||
final (color, _) = e;
|
||||
return color.withValues(alpha: 0.8);
|
||||
return color.withValues(alpha: 0.6);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
|
@ -2,6 +2,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/range_of_aqi_chart.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/analytics/widgets/analytics_error_widget.dart';
|
||||
import 'package:syncrow_web/utils/style.dart';
|
||||
@ -24,15 +25,11 @@ class RangeOfAqiChartBox extends StatelessWidget {
|
||||
children: [
|
||||
AnalyticsErrorWidget(state.errorMessage),
|
||||
const SizedBox(height: 10),
|
||||
const ChartTitle(title: Text('Range of AQI')),
|
||||
const RangeOfAqiChartTitle(),
|
||||
const SizedBox(height: 10),
|
||||
const Divider(),
|
||||
const SizedBox(height: 20),
|
||||
Expanded(
|
||||
child: RangeOfAqiChart(
|
||||
chartData: state.rangeOfAqi,
|
||||
),
|
||||
),
|
||||
Expanded(child: RangeOfAqiChart(chartData: state.rangeOfAqi)),
|
||||
],
|
||||
),
|
||||
);
|
||||
@ -40,3 +37,39 @@ class RangeOfAqiChartBox extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class RangeOfAqiChartTitle extends StatelessWidget {
|
||||
const RangeOfAqiChartTitle({super.key});
|
||||
|
||||
static const List<(Color color, String title, bool hasBorder)> _colors = [
|
||||
(Color(0xFF962DFF), 'Max', false),
|
||||
(Color(0xFF93AAFD), 'Min', false),
|
||||
(Colors.transparent, 'Avg', true),
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const ChartTitle(title: Text('Range of AQI')),
|
||||
const Spacer(),
|
||||
..._colors.map(
|
||||
(e) {
|
||||
final (color, title, hasBorder) = e;
|
||||
return Padding(
|
||||
padding: const EdgeInsetsDirectional.only(end: 16),
|
||||
child: ChartInformativeCell(
|
||||
title: Text(title),
|
||||
color: color,
|
||||
hasBorder: hasBorder,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(width: 34),
|
||||
const Text('AQI'),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,63 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:syncrow_web/utils/color_manager.dart';
|
||||
|
||||
class ChartInformativeCell extends StatelessWidget {
|
||||
const ChartInformativeCell({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.color,
|
||||
this.hasBorder = false,
|
||||
});
|
||||
|
||||
final Widget title;
|
||||
final Color color;
|
||||
final bool hasBorder;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: MediaQuery.sizeOf(context).height * 0.0365,
|
||||
padding: const EdgeInsetsDirectional.symmetric(
|
||||
vertical: 8,
|
||||
horizontal: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadiusDirectional.circular(8),
|
||||
border: Border.all(
|
||||
color: ColorsManager.greyColor,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: Alignment.center,
|
||||
child: Row(
|
||||
spacing: 6,
|
||||
children: [
|
||||
Container(
|
||||
height: 8,
|
||||
width: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
border: Border.all(color: ColorsManager.grayBorder),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
// CircleAvatar(
|
||||
// radius: 4,
|
||||
// backgroundColor: color,
|
||||
// ),
|
||||
DefaultTextStyle(
|
||||
style: const TextStyle(
|
||||
color: ColorsManager.blackColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 14,
|
||||
),
|
||||
child: title,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
|
||||
import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
|
||||
import 'package:syncrow_web/utils/color_manager.dart';
|
||||
import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
|
||||
|
||||
class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
|
||||
const EnergyConsumptionPerDeviceDevicesList({
|
||||
@ -42,42 +42,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
|
||||
|
||||
return Tooltip(
|
||||
message: '${device.name}\n${device.productDevice?.uuid ?? ''}',
|
||||
child: Container(
|
||||
height: MediaQuery.sizeOf(context).height * 0.0365,
|
||||
padding: const EdgeInsetsDirectional.symmetric(
|
||||
vertical: 8,
|
||||
horizontal: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadiusDirectional.circular(8),
|
||||
border: Border.all(
|
||||
color: ColorsManager.greyColor,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: Alignment.center,
|
||||
child: Row(
|
||||
spacing: 6,
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 4,
|
||||
backgroundColor: deviceColor,
|
||||
),
|
||||
Text(
|
||||
device.name,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: ColorsManager.blackColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
child: ChartInformativeCell(title: Text(device.name), color: deviceColor),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user