feat: wider bars when zooming in

lib/features/dashboards/state/chart_scale_controller.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'chart_scale_controller.g.dart';
+
+@riverpod
+class BarWidthController extends _$BarWidthController {
+  @override
+  double build() {
+    return 1;
+  }
+
+  void updateScale(Matrix4 scale) {
+    final scaleX = scale.row0.x;
+    state = scaleX.floorToDouble();
+  }
+}

lib/features/dashboards/ui/pages/dashboard_page.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lotti/features/dashboards/state/chart_scale_controller.dart';
 import 'package:lotti/features/dashboards/ui/widgets/dashboard_widget.dart';
 import 'package:lotti/get_it.dart';
 import 'package:lotti/l10n/app_localizations_context.dart';
@@ -10,7 +12,7 @@ import 'package:lotti/utils/date_utils_extension.dart';
 import 'package:lotti/utils/platform.dart';
 import 'package:lotti/widgets/misc/timespan_segmented_control.dart';
 
-class DashboardPage extends StatefulWidget {
+class DashboardPage extends ConsumerStatefulWidget {
   const DashboardPage({
     required this.dashboardId,
     super.key,
@@ -21,10 +23,10 @@ class DashboardPage extends StatefulWidget {
   final bool showBackButton;
 
   @override
-  State<DashboardPage> createState() => _DashboardPageState();
+  ConsumerState<DashboardPage> createState() => _DashboardPageState();
 }
 
-class _DashboardPageState extends State<DashboardPage> {
+class _DashboardPageState extends ConsumerState<DashboardPage> {
   double zoomStartScale = 10;
   double scale = 10;
   double horizontalPan = 0;
@@ -36,6 +38,12 @@ class _DashboardPageState extends State<DashboardPage> {
   @override
   void initState() {
     _transformationController = TransformationController();
+    _transformationController.addListener(() {
+      ref.read(barWidthControllerProvider.notifier).updateScale(
+            _transformationController.value,
+          );
+    });
+
     super.initState();
   }
 
@@ -51,15 +59,6 @@ class _DashboardPageState extends State<DashboardPage> {
       widget.dashboardId,
     );
 
-    // TODO: bring back or remove
-    // final int shiftDays = max((horizontalPan / scale).floor(), 0);
-    // final rangeStart = getRangeStart(
-    //   context: context,
-    //   scale: scale,
-    //   shiftDays: shiftDays,
-    // );
-    // final rangeEnd = getRangeEnd(shiftDays: shiftDays);
-
     final rangeStart =
         DateTime.now().subtract(Duration(days: timeSpanDays)).dayAtMidnight;
     final rangeEnd = DateTime.now()

lib/features/dashboards/ui/widgets/charts/dashboard_health_bp_chart.dart

@@ -73,7 +73,7 @@ class DashboardHealthBpChart extends ConsumerWidget {
           transformationConfig: FlTransformationConfig(
             scaleAxis: FlScaleAxis.horizontal,
             transformationController: transformationController,
-            maxScale: 20,
+            maxScale: maxScale,
           ),
           LineChartData(
             gridData: FlGridData(

lib/features/dashboards/ui/widgets/charts/time_series/time_series_bar_chart.dart

@@ -4,15 +4,17 @@ import 'dart:math';
 import 'package:collection/collection.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:intl/intl.dart';
+import 'package:lotti/features/dashboards/state/chart_scale_controller.dart';
 import 'package:lotti/features/dashboards/ui/widgets/charts/time_series/utils.dart';
 import 'package:lotti/themes/theme.dart';
 import 'package:lotti/utils/date_utils_extension.dart';
 import 'package:lotti/utils/platform.dart';
 import 'package:lotti/widgets/charts/utils.dart';
 import 'package:tinycolor2/tinycolor2.dart';
 
-class TimeSeriesBarChart extends StatelessWidget {
+class TimeSeriesBarChart extends ConsumerWidget {
   const TimeSeriesBarChart({
     required this.data,
     required this.rangeStart,
@@ -34,7 +36,7 @@ class TimeSeriesBarChart extends StatelessWidget {
   final ColorByValue colorByValue;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     final inRange = daysInRange(rangeStart: rangeStart, rangeEnd: rangeEnd);
 
     final byDay = <String, Observation>{};
@@ -62,6 +64,8 @@ class TimeSeriesBarChart extends StatelessWidget {
     final barsWidth =
         (screenWidth - 150 - rangeInDays - screenWidth * 0.1) / rangeInDays;
 
+    final scale = ref.watch(barWidthControllerProvider);
+
     final barGroups = dataWithEmptyDays
         .sortedBy((observation) => observation.dateTime)
         .map((observation) {
@@ -75,7 +79,7 @@ class TimeSeriesBarChart extends StatelessWidget {
               topRight: Radius.circular(2),
             ),
             color: colorByValue(observation),
-            width: max(barsWidth, 1),
+            width: max(barsWidth, 1) * scale,
           ),
         ],
       );
@@ -106,7 +110,7 @@ class TimeSeriesBarChart extends StatelessWidget {
       child: BarChart(
         transformationConfig: FlTransformationConfig(
           scaleAxis: FlScaleAxis.horizontal,
-          maxScale: 20,
+          maxScale: maxScale,
           transformationController: transformationController,
         ),
         BarChartData(

lib/features/dashboards/ui/widgets/charts/time_series/time_series_line_chart.dart

@@ -68,7 +68,7 @@ class TimeSeriesLineChart extends StatelessWidget {
         transformationConfig: FlTransformationConfig(
           scaleAxis: FlScaleAxis.horizontal,
           transformationController: transformationController,
-          maxScale: 20,
+          maxScale: maxScale,
         ),
         LineChartData(
           gridData: FlGridData(

lib/features/dashboards/ui/widgets/charts/time_series/time_series_multiline_chart.dart

@@ -65,7 +65,7 @@ class TimeSeriesMultiLineChart extends StatelessWidget {
       child: LineChart(
         transformationConfig: FlTransformationConfig(
           scaleAxis: FlScaleAxis.horizontal,
-          maxScale: 20,
+          maxScale: maxScale,
           transformationController: transformationController,
         ),
         LineChartData(

lib/features/dashboards/ui/widgets/charts/time_series/utils.dart

@@ -8,6 +8,7 @@ typedef ColorByValue = Color Function(Observation);
 
 const gridAlpha = 76;
 const labelOpacity = 0.5;
+const maxScale = 20.0;
 
 class ChartLabel extends StatelessWidget {
   const ChartLabel(this.text, {super.key});

lib/widgets/misc/timespan_segmented_control.dart

@@ -5,7 +5,7 @@ class TimeSpanSegmentedControl extends StatelessWidget {
   const TimeSpanSegmentedControl({
     required this.timeSpanDays,
     required this.onValueChanged,
-    this.segments = const [14, 30, 90, 180],
+    this.segments = const [30, 90, 180, 365],
     super.key,
   });
 

pubspec.yaml

@@ -1,7 +1,7 @@
 name: lotti
 description: Achieve your goals and keep your data private with Lotti.
 publish_to: 'none'
-version: 0.9.560+2839
+version: 0.9.560+2840
 
 msix_config:
   display_name: LottiApp