weight visualisation improvements

Dieterbe · Dieterbe · commit 161444b32f1e · 2024-09-11T16:03:43.000+03:00
* show weight entries during this nutrition plan and last 30 days
* show moving average of last 7 days
* show aggregate changes below chart
* fix unit displays in a few cases
* improv color scheme and other layout tweaks
* various small code cleanups
diff --git a/lib/screens/weight_screen.dart b/lib/screens/weight_screen.dart
@@ -22,7 +22,7 @@ import 'package:provider/provider.dart';
 import 'package:wger/providers/body_weight.dart';
 import 'package:wger/screens/form_screen.dart';
 import 'package:wger/widgets/core/app_bar.dart';
-import 'package:wger/widgets/weight/entries_list.dart';
+import 'package:wger/widgets/weight/weight_overview.dart';
 import 'package:wger/widgets/weight/forms.dart';
 
 class WeightScreen extends StatelessWidget {
@@ -48,8 +48,10 @@ class WeightScreen extends StatelessWidget {
           );
         },
       ),
-      body: Consumer<BodyWeightProvider>(
-        builder: (context, workoutProvider, child) => const WeightEntriesList(),
+      body: SingleChildScrollView(
+        child: Consumer<BodyWeightProvider>(
+          builder: (context, workoutProvider, child) => const WeightOverview(),
+        ),
       ),
     );
   }
diff --git a/lib/widgets/dashboard/widgets.dart b/lib/widgets/dashboard/widgets.dart
@@ -159,6 +159,10 @@ class _DashboardWeightWidgetState extends State<DashboardWeightWidget> {
     final profile = context.read<UserProvider>().profile;
     final weightProvider = context.read<BodyWeightProvider>();
 
+    final entriesAll =
+        weightProvider.items.map((e) => MeasurementChartEntry(e.weight, e.date)).toList();
+    final entries7dAvg = moving7dAverage(entriesAll);
+
     return Consumer<BodyWeightProvider>(
       builder: (context, workoutProvider, child) => Card(
         child: Column(
@@ -182,14 +186,16 @@ class _DashboardWeightWidgetState extends State<DashboardWeightWidget> {
                       SizedBox(
                         height: 200,
                         child: MeasurementChartWidgetFl(
-                          weightProvider.items
-                              .map((e) => MeasurementChartEntry(e.weight, e.date))
-                              .toList(),
-                          unit: profile!.isMetric
-                              ? AppLocalizations.of(context).kg
-                              : AppLocalizations.of(context).lb,
+                          entriesAll,
+                          weightUnit(profile!.isMetric, context),
+                          avgs: entries7dAvg,
                         ),
                       ),
+                      MeasurementOverallChangeWidget(
+                        entries7dAvg.first,
+                        entries7dAvg.last,
+                        weightUnit(profile!.isMetric, context),
+                      ),
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                         children: [
diff --git a/lib/widgets/measurements/categories_card.dart b/lib/widgets/measurements/categories_card.dart
@@ -32,7 +32,7 @@ class CategoriesCard extends StatelessWidget {
             height: 220,
             child: MeasurementChartWidgetFl(
               currentCategory.entries.map((e) => MeasurementChartEntry(e.value, e.date)).toList(),
-              unit: currentCategory.unit,
+              currentCategory.unit,
             ),
           ),
           const Divider(),
diff --git a/lib/widgets/measurements/charts.dart b/lib/widgets/measurements/charts.dart
@@ -18,14 +18,34 @@
 
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:intl/intl.dart';
 import 'package:wger/helpers/charts.dart';
 
+class MeasurementOverallChangeWidget extends StatelessWidget {
+  final MeasurementChartEntry _first;
+  final MeasurementChartEntry _last;
+  final String _unit;
+  const MeasurementOverallChangeWidget(this._first, this._last, this._unit);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      'overall change ${(_last.value - _first.value).toStringAsFixed(1)} $_unit',
+    );
+  }
+}
+
+String weightUnit(bool isMetric, BuildContext context) {
+  return isMetric ? AppLocalizations.of(context).kg : AppLocalizations.of(context).lb;
+}
+
 class MeasurementChartWidgetFl extends StatefulWidget {
   final List<MeasurementChartEntry> _entries;
-  final String unit;
+  final List<MeasurementChartEntry>? avgs;
+  final String _unit;
 
-  const MeasurementChartWidgetFl(this._entries, {this.unit = 'kg'});
+  const MeasurementChartWidgetFl(this._entries, this._unit, {this.avgs});
 
   @override
   State<MeasurementChartWidgetFl> createState() => _MeasurementChartWidgetFlState();
@@ -37,12 +57,7 @@ class _MeasurementChartWidgetFlState extends State<MeasurementChartWidgetFl> {
     return AspectRatio(
       aspectRatio: 1.70,
       child: Padding(
-        padding: const EdgeInsets.only(
-          right: 18,
-          left: 12,
-          top: 24,
-          bottom: 12,
-        ),
+        padding: const EdgeInsets.all(4),
         child: LineChart(mainData()),
       ),
     );
@@ -53,8 +68,8 @@ class _MeasurementChartWidgetFlState extends State<MeasurementChartWidgetFl> {
       touchTooltipData: LineTouchTooltipData(getTooltipItems: (touchedSpots) {
         return touchedSpots.map((touchedSpot) {
           return LineTooltipItem(
-            '${touchedSpot.y} kg',
-            const TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
+            '${touchedSpot.y.toStringAsFixed(1)} ${widget._unit}',
+            TextStyle(color: touchedSpot.bar.color, fontWeight: FontWeight.bold),
           );
         }).toList();
       }),
@@ -67,13 +82,13 @@ class _MeasurementChartWidgetFlState extends State<MeasurementChartWidgetFl> {
       gridData: FlGridData(
         show: true,
         drawVerticalLine: true,
-        //horizontalInterval: 1,
-        //verticalInterval: interval,
+        // horizontalInterval: 1,
+        // verticalInterval: 1,
         getDrawingHorizontalLine: (value) {
-          return const FlLine(color: Colors.grey, strokeWidth: 1);
+          return FlLine(color: Theme.of(context).colorScheme.primaryContainer, strokeWidth: 1);
         },
         getDrawingVerticalLine: (value) {
-          return const FlLine(color: Colors.grey, strokeWidth: 1);
+          return FlLine(color: Theme.of(context).colorScheme.primaryContainer, strokeWidth: 1);
         },
       ),
       titlesData: FlTitlesData(
@@ -94,8 +109,15 @@ class _MeasurementChartWidgetFlState extends State<MeasurementChartWidgetFl> {
                 return const Text('');
               }
               final DateTime date = DateTime.fromMillisecondsSinceEpoch(value.toInt());
+              // if we go across years, show years in the ticks. otherwise leave them out
+              if (DateTime.fromMillisecondsSinceEpoch(meta.min.toInt()).year !=
+                  DateTime.fromMillisecondsSinceEpoch(meta.max.toInt()).year) {
+                return Text(
+                  DateFormat.yMd(Localizations.localeOf(context).languageCode).format(date),
+                );
+              }
               return Text(
-                DateFormat.yMd(Localizations.localeOf(context).languageCode).format(date),
+                DateFormat.Md(Localizations.localeOf(context).languageCode).format(date),
               );
             },
             interval: widget._entries.isNotEmpty
@@ -111,29 +133,47 @@ class _MeasurementChartWidgetFlState extends State<MeasurementChartWidgetFl> {
             showTitles: true,
             reservedSize: 65,
             getTitlesWidget: (value, meta) {
-              return Text('$value ${widget.unit}');
+              // Don't show the first and last entries, otherwise they'll overlap with the
+              // calculated interval
+              if (value == meta.min || value == meta.max) {
+                return const Text('');
+              }
+              return Text('$value ${widget._unit}');
             },
           ),
         ),
       ),
       borderData: FlBorderData(
         show: true,
-        border: Border.all(color: const Color(0xff37434d)),
+        border: Border.all(color: Theme.of(context).colorScheme.primaryContainer),
       ),
       lineBarsData: [
         LineChartBarData(
-          spots: [
-            ...widget._entries.map((e) => FlSpot(
-                  e.date.millisecondsSinceEpoch.toDouble(),
-                  e.value.toDouble(),
-                )),
-          ],
+          spots: widget._entries
+              .map((e) => FlSpot(
+                    e.date.millisecondsSinceEpoch.toDouble(),
+                    e.value.toDouble(),
+                  ))
+              .toList(),
           isCurved: false,
-          color: Theme.of(context).colorScheme.secondary,
-          barWidth: 2,
+          color: Theme.of(context).colorScheme.primary,
+          barWidth: 0,
           isStrokeCapRound: true,
           dotData: const FlDotData(show: true),
         ),
+        if (widget.avgs != null)
+          LineChartBarData(
+            spots: widget.avgs!
+                .map((e) => FlSpot(
+                      e.date.millisecondsSinceEpoch.toDouble(),
+                      e.value.toDouble(),
+                    ))
+                .toList(),
+            isCurved: false,
+            color: Theme.of(context).colorScheme.tertiary,
+            barWidth: 1,
+            dotData: const FlDotData(show: false),
+          ),
       ],
     );
   }
@@ -146,6 +186,34 @@ class MeasurementChartEntry {
   MeasurementChartEntry(this.value, this.date);
 }
 
+// for each point, return the average of all the points in the 7 days preceeding it
+List<MeasurementChartEntry> moving7dAverage(List<MeasurementChartEntry> vals) {
+  var start = 0;
+  var end = 0;
+  final List<MeasurementChartEntry> out = <MeasurementChartEntry>[];
+
+  // first make sure our list is in ascending order
+  vals.sort((a, b) => a.date.compareTo(b.date));
+
+  while (end < vals.length) {
+    // since users can log measurements several days, or minutes apart,
+    // we can't make assumptions.  We have to manually advance 'start'
+    // such that it is always the first point within our desired range.
+    // posibly start == end (when there is only one point in the range)
+    final intervalStart = vals[end].date.subtract(const Duration(days: 7));
+    while (start < end && vals[start].date.isBefore(intervalStart)) {
+      start++;
+    }
+
+    final sub = vals.sublist(start, end + 1).map((e) => e.value);
+    final sum = sub.reduce((val, el) => val + el);
+    out.add(MeasurementChartEntry(sum / sub.length, vals[end].date));
+
+    end++;
+  }
+  return out;
+}
+
 class Indicator extends StatelessWidget {
   const Indicator({
     super.key,
diff --git a/lib/widgets/measurements/entries.dart b/lib/widgets/measurements/entries.dart
@@ -40,7 +40,7 @@ class EntriesList extends StatelessWidget {
         height: 220,
         child: MeasurementChartWidgetFl(
           _category.entries.map((e) => MeasurementChartEntry(e.value, e.date)).toList(),
-          unit: _category.unit,
+          _category.unit,
         ),
       ),
       Expanded(
diff --git a/lib/widgets/weight/weight_overview.dart b/lib/widgets/weight/weight_overview.dart
@@ -21,31 +21,97 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'package:wger/providers/body_weight.dart';
+import 'package:wger/providers/nutrition.dart';
 import 'package:wger/providers/user.dart';
 import 'package:wger/screens/form_screen.dart';
 import 'package:wger/screens/measurement_categories_screen.dart';
 import 'package:wger/widgets/measurements/charts.dart';
 import 'package:wger/widgets/weight/forms.dart';
 
-class WeightEntriesList extends StatelessWidget {
-  const WeightEntriesList();
+class WeightOverview extends StatelessWidget {
+  const WeightOverview();
   @override
   Widget build(BuildContext context) {
     final profile = context.read<UserProvider>().profile;
     final weightProvider = Provider.of<BodyWeightProvider>(context, listen: false);
+    final plan = Provider.of<NutritionPlansProvider>(context, listen: false).currentPlan;
 
-    return Column(
-      children: [
+    final entriesAll =
+        weightProvider.items.map((e) => MeasurementChartEntry(e.weight, e.date)).toList();
+    final entries7dAvg = moving7dAverage(entriesAll);
+
+    List<Widget> getOverviewWidgets(String title, bool isMetric, List<MeasurementChartEntry> raw,
+        List<MeasurementChartEntry> avg, BuildContext context) {
+      return [
+        Text(
+          title,
+          textAlign: TextAlign.center,
+          style: Theme.of(context).textTheme.titleLarge,
+        ),
         Container(
           padding: const EdgeInsets.all(15),
           height: 220,
           child: MeasurementChartWidgetFl(
-            weightProvider.items.map((e) => MeasurementChartEntry(e.weight, e.date)).toList(),
-            unit: profile!.isMetric
-                ? AppLocalizations.of(context).kg
-                : AppLocalizations.of(context).lb,
+            raw,
+            weightUnit(isMetric, context),
+            avgs: avg,
           ),
         ),
+        MeasurementOverallChangeWidget(
+          avg.first,
+          avg.last,
+          weightUnit(isMetric, context),
+        ),
+        const SizedBox(height: 8),
+      ];
+    }
+
+    return Column(
+      children: [
+        ...getOverviewWidgets(
+          'Weight all-time',
+          profile!.isMetric,
+          entriesAll,
+          entries7dAvg,
+          context,
+        ),
+        if (plan != null)
+          ...getOverviewWidgets(
+            'Weight during nutritional plan ${plan.description}',
+            profile.isMetric,
+            entriesAll.where((e) => e.date.isAfter(plan.creationDate)).toList(),
+            entries7dAvg.where((e) => e.date.isAfter(plan.creationDate)).toList(),
+            context,
+          ),
+        // if all time is significantly longer than 30 days (let's say > 75 days)
+        // and if there is is a plan and it also was > 75 days,
+        // then let's show a separate chart just focusing on the last 30 days
+        if (entriesAll.first.date
+                .isBefore(entriesAll.last.date.subtract(const Duration(days: 75))) &&
+            (plan == null ||
+                entriesAll
+                    .firstWhere((e) => e.date.isAfter(plan.creationDate))
+                    .date
+                    .isBefore(entriesAll.last.date.subtract(const Duration(days: 30)))))
+          ...getOverviewWidgets(
+            'Weight last 30 days',
+            profile.isMetric,
+            entriesAll
+                .where((e) => e.date.isAfter(DateTime.now().subtract(const Duration(days: 30))))
+                .toList(),
+            entries7dAvg
+                .where((e) => e.date.isAfter(DateTime.now().subtract(const Duration(days: 30))))
+                .toList(),
+            context,
+          ),
+
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Indicator(color: Theme.of(context).colorScheme.primary, text: 'raw', isSquare: true),
+            Indicator(color: Theme.of(context).colorScheme.tertiary, text: 'avg', isSquare: true),
+          ],
+        ),
         TextButton(
           onPressed: () => Navigator.pushNamed(
             context,
@@ -59,7 +125,8 @@ class WeightEntriesList extends StatelessWidget {
             ],
           ),
         ),
-        Expanded(
+        SizedBox(
+          height: 300,
           child: RefreshIndicator(
             onRefresh: () => weightProvider.fetchAndSetEntries(),
             child: ListView.builder(
@@ -69,7 +136,7 @@ class WeightEntriesList extends StatelessWidget {
                 final currentEntry = weightProvider.items[index];
                 return Card(
                   child: ListTile(
-                    title: Text('${currentEntry.weight} kg'),
+                    title: Text('${currentEntry.weight} ${weightUnit(profile.isMetric, context)}'),
                     subtitle: Text(
                       DateFormat.yMd(
                         Localizations.localeOf(context).languageCode,
