mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
Sp 1593 reworks (#277)
<!-- Thanks for contributing! Provide a description of your changes below and a general summary in the title Please look at the following checklist to ensure that your PR can be accepted quickly: --> ## Jira Ticket [SP-1593](https://syncrow.atlassian.net/browse/SP-1593) ## Description 1. AQI Distribution chart bars when all values are empty. 2. Min element in Y axis of Range of AQI chart is visible. 3. Matched AQI chart titles to have the same size for consistency. 4. Allowed `RangeOfAqiValue` model's values to be nullable, and they fallback to `0` when null. 5. Implemented AQI Legend. 6. Increased the size of AQI Distribution chart's tooltip. 7. Improved alignment of location cell. 8. Doesn't fetch devices on date change. ## Type of Change <!--- Put an `x` in all the boxes that apply: --> - [x] ✨ New feature (non-breaking change which adds functionality) - [x] 🛠️ Bug fix (non-breaking change which fixes an issue) - [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change) - [ ] 🧹 Code refactor - [ ] ✅ Build configuration change - [ ] 📝 Documentation - [ ] 🗑️ Chore [SP-1593]: https://syncrow.atlassian.net/browse/SP-1593?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
This commit is contained in:
Faris Armoush
@ -38,9 +38,9 @@ class RangeOfAqiValue extends Equatable {
|
||||
factory RangeOfAqiValue.fromJson(Map<String, dynamic> json) {
|
||||
return RangeOfAqiValue(
|
||||
type: json['type'] as String,
|
||||
min: (json['min'] as num).toDouble(),
|
||||
average: (json['average'] as num).toDouble(),
|
||||
max: (json['max'] as num).toDouble(),
|
||||
min: (json['min'] as num? ?? 0).toDouble(),
|
||||
average: (json['average'] as num? ?? 0).toDouble(),
|
||||
max: (json['max'] as num? ?? 0).toDouble(),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -24,11 +24,13 @@ abstract final class FetchAirQualityDataHelper {
|
||||
}) {
|
||||
final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
|
||||
final aqiType = context.read<AirQualityDistributionBloc>().state.selectedAqiType;
|
||||
if (shouldFetchAnalyticsDevices) {
|
||||
loadAnalyticsDevices(
|
||||
context,
|
||||
communityUuid: communityUuid,
|
||||
spaceUuid: spaceUuid,
|
||||
);
|
||||
}
|
||||
loadRangeOfAqi(
|
||||
context,
|
||||
spaceUuid: spaceUuid,
|
||||
|
||||
@ -23,6 +23,7 @@ abstract final class RangeOfAqiChartsHelper {
|
||||
return titlesData.copyWith(
|
||||
bottomTitles: titlesData.bottomTitles.copyWith(
|
||||
sideTitles: titlesData.bottomTitles.sideTitles.copyWith(
|
||||
reservedSize: 36,
|
||||
getTitlesWidget: (value, meta) => Padding(
|
||||
padding: const EdgeInsetsDirectional.only(top: 20.0),
|
||||
child: Text(
|
||||
@ -40,6 +41,7 @@ abstract final class RangeOfAqiChartsHelper {
|
||||
reservedSize: 70,
|
||||
interval: 50,
|
||||
maxIncluded: false,
|
||||
minIncluded: true,
|
||||
getTitlesWidget: (value, meta) {
|
||||
final text = value >= 300 ? '301+' : value.toInt().toString();
|
||||
return Padding(
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
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/aqi_distribution_chart_box.dart';
|
||||
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_legend.dart';
|
||||
import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
|
||||
|
||||
class AirQualityView extends StatelessWidget {
|
||||
@ -20,6 +21,10 @@ class AirQualityView extends StatelessWidget {
|
||||
child: Column(
|
||||
spacing: 32,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: height * 0.1,
|
||||
child: const AqiLegend(),
|
||||
),
|
||||
SizedBox(
|
||||
height: height * 1.2,
|
||||
child: const AirQualityEndSideWidget(),
|
||||
@ -40,7 +45,7 @@ class AirQualityView extends StatelessWidget {
|
||||
return SingleChildScrollView(
|
||||
child: Container(
|
||||
padding: _padding,
|
||||
height: height * 1.1,
|
||||
height: height * 1.2,
|
||||
child: const Column(
|
||||
children: [
|
||||
Expanded(
|
||||
@ -52,8 +57,9 @@ class AirQualityView extends StatelessWidget {
|
||||
child: Column(
|
||||
spacing: 20,
|
||||
children: [
|
||||
Expanded(child: RangeOfAqiChartBox()),
|
||||
Expanded(child: AqiDistributionChartBox()),
|
||||
Expanded(flex: 2, child: AqiLegend()),
|
||||
Expanded(flex: 12, child: RangeOfAqiChartBox()),
|
||||
Expanded(flex: 12, child: AqiDistributionChartBox()),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@ -32,8 +32,13 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
}
|
||||
|
||||
List<BarChartGroupData> _buildBarGroups() {
|
||||
return List.generate(chartData.length, (index) {
|
||||
final data = chartData[index];
|
||||
final groups = <BarChartGroupData>[];
|
||||
for (var i = 0; i < chartData.length; i++) {
|
||||
final data = chartData[i];
|
||||
final isAllZero = data.data.every((d) => d.percentage == 0);
|
||||
if (isAllZero) {
|
||||
continue;
|
||||
}
|
||||
final stackItems = <BarChartRodData>[];
|
||||
double currentY = 0;
|
||||
var isFirstElement = true;
|
||||
@ -56,13 +61,15 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
currentY += percentageData.percentage + _rodStackItemsSpacing;
|
||||
isFirstElement = false;
|
||||
}
|
||||
|
||||
return BarChartGroupData(
|
||||
x: index,
|
||||
groups.add(
|
||||
BarChartGroupData(
|
||||
x: i,
|
||||
barRods: stackItems,
|
||||
groupVertically: true,
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
|
||||
BarTouchData _barTouchData(BuildContext context) {
|
||||
@ -73,6 +80,7 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
color: ColorsManager.semiTransparentBlack,
|
||||
),
|
||||
tooltipRoundedRadius: 16,
|
||||
maxContentWidth: 500,
|
||||
tooltipPadding: const EdgeInsets.all(8),
|
||||
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
||||
final data = chartData[group.x];
|
||||
@ -81,10 +89,13 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
|
||||
final textStyle = context.textTheme.bodySmall?.copyWith(
|
||||
color: ColorsManager.blackColor,
|
||||
fontSize: 8,
|
||||
fontSize: 11,
|
||||
);
|
||||
|
||||
for (final percentageData in data.data) {
|
||||
if (percentageData.percentage == 0) {
|
||||
continue;
|
||||
}
|
||||
final percentage = percentageData.percentage.toStringAsFixed(1);
|
||||
final type = percentageData.type[0].toUpperCase() +
|
||||
percentageData.type.substring(1).replaceAll('_', ' ');
|
||||
@ -98,7 +109,7 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
DateFormat('dd/MM/yyyy').format(data.date),
|
||||
context.textTheme.bodyMedium!.copyWith(
|
||||
color: ColorsManager.blackColor,
|
||||
fontSize: 9,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
textAlign: TextAlign.start,
|
||||
@ -118,7 +129,6 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
final leftTitles = titlesData.leftTitles.copyWith(
|
||||
sideTitles: titlesData.leftTitles.sideTitles.copyWith(
|
||||
reservedSize: 70,
|
||||
interval: 20,
|
||||
maxIncluded: false,
|
||||
minIncluded: true,
|
||||
getTitlesWidget: (value, meta) => Padding(
|
||||
@ -140,7 +150,7 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
|
||||
final bottomTitles = AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
showTitles: chartData.isNotEmpty,
|
||||
getTitlesWidget: (value, _) => FittedBox(
|
||||
alignment: AlignmentDirectional.bottomCenter,
|
||||
fit: BoxFit.scaleDown,
|
||||
@ -148,7 +158,7 @@ class AqiDistributionChart extends StatelessWidget {
|
||||
chartData[value.toInt()].date.day.toString(),
|
||||
style: context.textTheme.bodySmall?.copyWith(
|
||||
color: ColorsManager.lightGreyColor,
|
||||
fontSize: 8,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@ -19,7 +19,7 @@ class AqiDistributionChartTitle extends StatelessWidget {
|
||||
children: [
|
||||
ChartsLoadingWidget(isLoading: isLoading),
|
||||
const Expanded(
|
||||
flex: 3,
|
||||
flex: 4,
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: AlignmentDirectional.centerStart,
|
||||
@ -28,7 +28,9 @@ class AqiDistributionChartTitle extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
FittedBox(
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: FittedBox(
|
||||
alignment: AlignmentDirectional.centerEnd,
|
||||
fit: BoxFit.scaleDown,
|
||||
child: AqiTypeDropdown(
|
||||
@ -47,6 +49,7 @@ class AqiDistributionChartTitle extends StatelessWidget {
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart';
|
||||
import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
|
||||
import 'package:syncrow_web/utils/style.dart';
|
||||
|
||||
class AqiLegend extends StatelessWidget {
|
||||
const AqiLegend({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsetsDirectional.all(20),
|
||||
decoration: subSectionContainerDecoration.copyWith(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
spacing: 16,
|
||||
children: RangeOfAqiChartsHelper.gradientData.map((e) {
|
||||
return Flexible(
|
||||
flex: 4,
|
||||
child: FittedBox(
|
||||
fit: BoxFit.fill,
|
||||
child: ChartInformativeCell(
|
||||
color: e.$1,
|
||||
title: FittedBox(
|
||||
fit: BoxFit.fill,
|
||||
child: Text(e.$2),
|
||||
),
|
||||
height: null,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -47,19 +47,29 @@ class AqiLocationInfoCell extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
Align(
|
||||
alignment: AlignmentDirectional.bottomEnd,
|
||||
child: Padding(
|
||||
padding: const EdgeInsetsDirectional.all(10),
|
||||
child: SizedBox(
|
||||
height: 40,
|
||||
width: 120,
|
||||
alignment: AlignmentDirectional.bottomCenter,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Expanded(
|
||||
child: SvgPicture.asset(
|
||||
svgPath,
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: AlignmentDirectional.bottomStart,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: AlignmentDirectional.bottomEnd,
|
||||
child: Padding(
|
||||
padding: const EdgeInsetsDirectional.all(10),
|
||||
child: Text(
|
||||
value,
|
||||
style: context.textTheme.bodySmall?.copyWith(
|
||||
color: ColorsManager.vividBlue.withValues(alpha: 0.7),
|
||||
color: ColorsManager.vividBlue.withValues(
|
||||
alpha: 0.7,
|
||||
),
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 24,
|
||||
),
|
||||
@ -67,16 +77,7 @@ class AqiLocationInfoCell extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Align(
|
||||
alignment: AlignmentDirectional.bottomStart,
|
||||
child: SizedBox.square(
|
||||
dimension: MediaQuery.sizeOf(context).width * 0.45,
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: AlignmentDirectional.bottomStart,
|
||||
child: SvgPicture.asset(svgPath),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
@ -7,16 +7,18 @@ class ChartInformativeCell extends StatelessWidget {
|
||||
required this.title,
|
||||
required this.color,
|
||||
this.hasBorder = false,
|
||||
this.height,
|
||||
});
|
||||
|
||||
final Widget title;
|
||||
final Color color;
|
||||
final bool hasBorder;
|
||||
final double? height;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: MediaQuery.sizeOf(context).height * 0.0385,
|
||||
height: height ?? MediaQuery.sizeOf(context).height * 0.0385,
|
||||
padding: const EdgeInsetsDirectional.symmetric(
|
||||
vertical: 8,
|
||||
horizontal: 12,
|
||||
|
||||
Reference in New Issue
Block a user