Merge pull request #1914 from matthiasn/feat/pan_zoom_in_dashboard

feat: pan & zoom in dashboards

.fvm/flutter_sdk

@@ -1 +1 @@
-/Users/mn/fvm/versions/3.27.1
+/Users/mn/fvm/versions/3.27.3

.fvm/fvm_config.json

@@ -1,3 +1,3 @@
 {
-  "flutterSdkVersion": "3.27.1"
+  "flutterSdkVersion": "3.27.3"
 }

.fvmrc

@@ -1,3 +1,3 @@
 {
-  "flutter": "3.27.1"
+  "flutter": "3.27.3"
 }

ios/Podfile.lock

@@ -101,21 +101,21 @@ PODS:
   - sqflite_darwin (0.0.4):
     - Flutter
     - FlutterMacOS
-  - sqlite3 (3.47.2):
-    - sqlite3/common (= 3.47.2)
-  - sqlite3/common (3.47.2)
-  - sqlite3/dbstatvtab (3.47.2):
+  - sqlite3 (3.48.0):
+    - sqlite3/common (= 3.48.0)
+  - sqlite3/common (3.48.0)
+  - sqlite3/dbstatvtab (3.48.0):
     - sqlite3/common
-  - sqlite3/fts5 (3.47.2):
+  - sqlite3/fts5 (3.48.0):
     - sqlite3/common
-  - sqlite3/perf-threadsafe (3.47.2):
+  - sqlite3/perf-threadsafe (3.48.0):
     - sqlite3/common
-  - sqlite3/rtree (3.47.2):
+  - sqlite3/rtree (3.48.0):
     - sqlite3/common
   - sqlite3_flutter_libs (0.0.1):
     - Flutter
     - FlutterMacOS
-    - sqlite3 (~> 3.47.2)
+    - sqlite3 (~> 3.48.0)
     - sqlite3/dbstatvtab
     - sqlite3/fts5
     - sqlite3/perf-threadsafe
@@ -291,8 +291,8 @@ SPEC CHECKSUMS:
   share_plus: 8b6f8b3447e494cca5317c8c3073de39b3600d1f
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
   sqflite_darwin: 5a7236e3b501866c1c9befc6771dfd73ffb8702d
-  sqlite3: 7559e33dae4c78538df563795af3a86fc887ee71
-  sqlite3_flutter_libs: 58ae36c0dd086395d066b4fe4de9cdca83e717b3
+  sqlite3: 3da10a59910c809fb584a93aa46a3f05b785e12e
+  sqlite3_flutter_libs: 5f386339eccc9516a12ab10e4aa925cbef5f2dcf
   super_native_extensions: 4916b3c627a9c7fffdc48a23a9eca0b1ac228fa7
   url_launcher_ios: 5334b05cef931de560670eeae103fd3e431ac3fe
   video_player_avfoundation: 7c6c11d8470e1675df7397027218274b6d2360b3

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,31 +23,42 @@ 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;
   bool zoomInProgress = false;
   int timeSpanDays = isDesktop ? 30 : 14;
 
+  late TransformationController _transformationController;
+
+  @override
+  void initState() {
+    _transformationController = TransformationController();
+    _transformationController.addListener(() {
+      ref.read(barWidthControllerProvider.notifier).updateScale(
+            _transformationController.value,
+          );
+    });
+
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _transformationController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final dashboard = getIt<EntitiesCacheService>().getDashboardById(
       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()
@@ -78,6 +91,7 @@ class _DashboardPageState extends State<DashboardPage> {
             rangeStart: rangeStart,
             rangeEnd: rangeEnd,
             dashboardId: widget.dashboardId,
+            transformationController: _transformationController,
           ),
         ],
       ),

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

@@ -154,12 +154,14 @@ class DashboardHealthBmiChart extends ConsumerWidget {
     required this.chartConfig,
     required this.rangeStart,
     required this.rangeEnd,
+    this.transformationController,
     super.key,
   });
 
   final DashboardHealthItem chartConfig;
   final DateTime rangeStart;
   final DateTime rangeEnd;
+  final TransformationController? transformationController;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -181,6 +183,7 @@ class DashboardHealthBmiChart extends ConsumerWidget {
         data: weightData,
         rangeStart: rangeStart,
         rangeEnd: rangeEnd,
+        transformationController: transformationController,
       ),
       chartHeader: BmiChartInfoWidget(
         chartConfig,

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

@@ -17,12 +17,14 @@ class DashboardHealthBpChart extends ConsumerWidget {
     required this.chartConfig,
     required this.rangeStart,
     required this.rangeEnd,
+    this.transformationController,
     super.key,
   });
 
   final DashboardHealthItem chartConfig;
   final DateTime rangeStart;
   final DateTime rangeEnd;
+  final TransformationController? transformationController;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -57,7 +59,7 @@ class DashboardHealthBpChart extends ConsumerWidget {
           (rangeInDays < 30 && ymd.day == 8) ||
           (rangeInDays < 30 && ymd.day == 22)) {
         return SideTitleWidget(
-          axisSide: meta.axisSide,
+          meta: meta,
           child: ChartLabel(chartDateFormatterMmDd(value)),
         );
       }
@@ -68,6 +70,11 @@ class DashboardHealthBpChart extends ConsumerWidget {
       chart: Padding(
         padding: const EdgeInsets.only(top: 20, right: 20),
         child: LineChart(
+          transformationConfig: FlTransformationConfig(
+            scaleAxis: FlScaleAxis.horizontal,
+            transformationController: transformationController,
+            maxScale: maxScale,
+          ),
           LineChartData(
             gridData: FlGridData(
               horizontalInterval: 10,
@@ -139,6 +146,8 @@ class DashboardHealthBpChart extends ConsumerWidget {
                   interval: 10,
                   getTitlesWidget: leftTitleWidgets,
                   reservedSize: 30,
+                  minIncluded: false,
+                  maxIncluded: false,
                 ),
               ),
             ),
@@ -148,8 +157,6 @@ class DashboardHealthBpChart extends ConsumerWidget {
             ),
             minX: rangeStart.millisecondsSinceEpoch.toDouble(),
             maxX: rangeEnd.millisecondsSinceEpoch.toDouble(),
-            minY: 60,
-            maxY: 160,
             lineBarsData: [
               LineChartBarData(
                 spots: systolicData

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

@@ -53,12 +53,14 @@ class DashboardHealthChart extends ConsumerWidget {
     required this.chartConfig,
     required this.rangeStart,
     required this.rangeEnd,
+    this.transformationController,
     super.key,
   });
 
   final DashboardHealthItem chartConfig;
   final DateTime rangeStart;
   final DateTime rangeEnd;
+  final TransformationController? transformationController;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -71,6 +73,7 @@ class DashboardHealthChart extends ConsumerWidget {
         chartConfig: chartConfig,
         rangeStart: rangeStart,
         rangeEnd: rangeEnd,
+        transformationController: transformationController,
       );
     }
 
@@ -79,6 +82,7 @@ class DashboardHealthChart extends ConsumerWidget {
         chartConfig: chartConfig,
         rangeStart: rangeStart,
         rangeEnd: rangeEnd,
+        transformationController: transformationController,
       );
     }
 
@@ -101,6 +105,7 @@ class DashboardHealthChart extends ConsumerWidget {
               rangeEnd: rangeEnd,
               unit: healthType?.unit ?? '',
               valueInHours: healthType?.unit == 'h',
+              transformationController: transformationController,
               colorByValue: (Observation observation) => colorByValueAndType(
                 observation,
                 healthType,
@@ -110,6 +115,7 @@ class DashboardHealthChart extends ConsumerWidget {
               data: data,
               rangeStart: rangeStart,
               rangeEnd: rangeEnd,
+              transformationController: transformationController,
               unit: healthType?.unit ?? '',
             ),
       chartHeader: HealthChartInfoWidget(chartConfig),

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

@@ -19,6 +19,7 @@ class MeasurablesBarChart extends ConsumerWidget {
     required this.rangeEnd,
     this.aggregationType,
     this.enableCreate = false,
+    this.transformationController,
     super.key,
   });
 
@@ -28,6 +29,7 @@ class MeasurablesBarChart extends ConsumerWidget {
   final DateTime rangeEnd;
   final bool enableCreate;
   final AggregationType? aggregationType;
+  final TransformationController? transformationController;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -69,12 +71,14 @@ class MeasurablesBarChart extends ConsumerWidget {
               rangeStart: rangeStart,
               rangeEnd: rangeEnd,
               unit: measurableDataType.unitName,
+              transformationController: transformationController,
             )
           : TimeSeriesBarChart(
               data: data,
               rangeStart: rangeStart,
               rangeEnd: rangeEnd,
               unit: measurableDataType.unitName,
+              transformationController: transformationController,
               colorByValue: (Observation observation) =>
                   colorFromCssHex('#82E6CE'),
             ),

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

@@ -16,12 +16,14 @@ class DashboardSurveyChart extends ConsumerWidget {
     required this.chartConfig,
     required this.rangeStart,
     required this.rangeEnd,
+    this.transformationController,
     super.key,
   });
 
   final DashboardSurveyItem chartConfig;
   final DateTime rangeStart;
   final DateTime rangeEnd;
+  final TransformationController? transformationController;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -77,6 +79,7 @@ class DashboardSurveyChart extends ConsumerWidget {
         lineBarsData: lineBarsData,
         minVal: minVal,
         maxVal: maxVal,
+        transformationController: transformationController,
       ),
       chartHeader: Positioned(
         top: 0,

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

@@ -46,12 +46,14 @@ class DashboardWorkoutChart extends ConsumerWidget {
     required this.chartConfig,
     required this.rangeStart,
     required this.rangeEnd,
+    this.transformationController,
     super.key,
   });
 
   final DashboardWorkoutItem chartConfig;
   final DateTime rangeStart;
   final DateTime rangeEnd;
+  final TransformationController? transformationController;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -72,6 +74,7 @@ class DashboardWorkoutChart extends ConsumerWidget {
         rangeStart: rangeStart,
         rangeEnd: rangeEnd,
         unit: chartConfig.displayName,
+        transformationController: transformationController,
         colorByValue: (Observation observation) => colorFromCssHex('#82E6CE'),
       ),
       chartHeader: WorkoutChartInfoWidget(chartConfig),