diff --git a/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart b/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart index 1038aaa8..0575dfff 100644 --- a/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart +++ b/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart @@ -9,21 +9,22 @@ class AqiDistributionChart extends StatelessWidget { const AqiDistributionChart({super.key, required this.chartData}); final List chartData; - static const _rodStackItemsSpacing = 4; + static const _rodStackItemsSpacing = 0.4; + static const _barWidth = 20.0; + static final _barBorderRadius = BorderRadius.circular(22); @override Widget build(BuildContext context) { return BarChart( BarChartData( - alignment: BarChartAlignment.spaceAround, - barTouchData: _barTouchData(context), - titlesData: _titlesData(context), + maxY: 100.1, gridData: EnergyManagementChartsHelper.gridData( - horizontalInterval: 100, + horizontalInterval: 20, ), borderData: EnergyManagementChartsHelper.borderData(), + barTouchData: _barTouchData(context), + titlesData: _titlesData(context), barGroups: _buildBarGroups(), - groupsSpace: 12, ), duration: Duration.zero, ); @@ -41,8 +42,8 @@ class AqiDistributionChart extends StatelessWidget { fromY: currentY, toY: currentY + data.aqi!, color: AirQualityDataModel.metricColors['aqi']!, - borderRadius: BorderRadius.circular(10), - width: 20, + borderRadius: _barBorderRadius, + width: _barWidth, ), ); currentY += data.aqi! + _rodStackItemsSpacing; @@ -54,8 +55,8 @@ class AqiDistributionChart extends StatelessWidget { fromY: currentY, toY: currentY + data.pm25!, color: AirQualityDataModel.metricColors['pm25']!, - borderRadius: BorderRadius.circular(10), - width: 20, + borderRadius: _barBorderRadius, + width: _barWidth, ), ); currentY += data.pm25! + _rodStackItemsSpacing; @@ -67,11 +68,11 @@ class AqiDistributionChart extends StatelessWidget { fromY: currentY, toY: currentY + data.pm10!, color: AirQualityDataModel.metricColors['pm10']!, - borderRadius: BorderRadius.circular(10), - width: 20, + borderRadius: _barBorderRadius, + width: _barWidth, ), ); - currentY += data.pm10! + 2; + currentY += data.pm10! + _rodStackItemsSpacing; } if (data.hcho != null) { @@ -80,11 +81,11 @@ class AqiDistributionChart extends StatelessWidget { fromY: currentY, toY: currentY + data.hcho!, color: AirQualityDataModel.metricColors['hcho']!, - borderRadius: BorderRadius.circular(10), - width: 20, + borderRadius: _barBorderRadius, + width: _barWidth, ), ); - currentY += data.hcho! + 2; + currentY += data.hcho! + _rodStackItemsSpacing; } if (data.tvoc != null) { @@ -93,11 +94,11 @@ class AqiDistributionChart extends StatelessWidget { fromY: currentY, toY: currentY + data.tvoc!, color: AirQualityDataModel.metricColors['tvoc']!, - borderRadius: BorderRadius.circular(10), - width: 20, + borderRadius: _barBorderRadius, + width: _barWidth, ), ); - currentY += data.tvoc! + 2; + currentY += data.tvoc! + _rodStackItemsSpacing; } if (data.co2 != null) { @@ -106,11 +107,11 @@ class AqiDistributionChart extends StatelessWidget { fromY: currentY, toY: currentY + data.co2!, color: AirQualityDataModel.metricColors['co2']!, - borderRadius: BorderRadius.circular(10), - width: 20, + borderRadius: _barBorderRadius, + width: _barWidth, ), ); - currentY += data.co2! + 2; + currentY += data.co2! + _rodStackItemsSpacing; } return BarChartGroupData( x: index, @@ -143,7 +144,7 @@ class AqiDistributionChart extends StatelessWidget { final metricName = AirQualityDataModel.metricColors.entries .firstWhere((entry) => entry.value == item.color) .key - .toUpperCase(); + .toLowerCase(); return TextSpan( text: '$metricName: ${item.toY - item.fromY}\n', style: context.textTheme.bodySmall?.copyWith( @@ -159,47 +160,55 @@ class AqiDistributionChart extends StatelessWidget { } FlTitlesData _titlesData(BuildContext context) { - final titlesData = EnergyManagementChartsHelper.titlesData(context); + final titlesData = EnergyManagementChartsHelper.titlesData( + context, + leftTitlesInterval: 20, + ); - return titlesData.copyWith( - bottomTitles: AxisTitles( - sideTitles: SideTitles( - showTitles: true, - getTitlesWidget: (value, meta) { - if (value.toInt() >= chartData.length) return const SizedBox.shrink(); - return Padding( - padding: const EdgeInsetsDirectional.only(top: 20.0), - child: Text( - chartData[value.toInt()].date.day.toString(), - style: context.textTheme.bodySmall?.copyWith( - color: ColorsManager.lightGreyColor, - fontSize: 12, - ), - ), - ); - }, - reservedSize: 32, - ), - ), - leftTitles: titlesData.leftTitles.copyWith( - sideTitles: titlesData.leftTitles.sideTitles.copyWith( - reservedSize: 70, - getTitlesWidget: (value, meta) => Padding( - padding: const EdgeInsetsDirectional.only(end: 12), - child: FittedBox( - alignment: AlignmentDirectional.centerStart, - fit: BoxFit.scaleDown, - child: Text( - value.toInt().toString(), - style: context.textTheme.bodySmall?.copyWith( - fontSize: 12, - color: ColorsManager.lightGreyColor, - ), + final leftTitles = titlesData.leftTitles.copyWith( + sideTitles: titlesData.leftTitles.sideTitles.copyWith( + reservedSize: 70, + interval: 20, + maxIncluded: false, + minIncluded: true, + getTitlesWidget: (value, meta) => Padding( + padding: const EdgeInsetsDirectional.only(end: 12), + child: FittedBox( + alignment: AlignmentDirectional.centerStart, + fit: BoxFit.scaleDown, + child: Text( + '${value.toStringAsFixed(0)}%', + style: context.textTheme.bodySmall?.copyWith( + fontSize: 12, + color: ColorsManager.lightGreyColor, ), ), ), ), ), ); + + final bottomTitles = AxisTitles( + sideTitles: SideTitles( + showTitles: true, + getTitlesWidget: (value, _) => FittedBox( + alignment: AlignmentDirectional.bottomCenter, + fit: BoxFit.scaleDown, + child: Text( + chartData[value.toInt()].date.day.toString(), + style: context.textTheme.bodySmall?.copyWith( + color: ColorsManager.lightGreyColor, + fontSize: 8, + ), + ), + ), + reservedSize: 36, + ), + ); + + return titlesData.copyWith( + leftTitles: leftTitles, + bottomTitles: bottomTitles, + ); } }