mobile: live sparklines on data rows + tank sort

claude · claude · commit 7ec66d7358de · 2026-07-01T06:57:20.000Z
- Sparkline widget (auto-scaled trend line) shown next to SOG, depth, water temp, wind, and each tank in the drawer. Values accumulate into rolling per-metric history buffers in BoatState as they arrive (last 150 samples) — live trend, no cloud data client needed. - Sort tanks with the web app's tankSort order (freshwater first, then fwd/mid/aft, main later; ties by name). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016m9NjsSfBSx1RgN3fpnx7e
diff --git a/mobile/lib/boat_state.dart b/mobile/lib/boat_state.dart
@@ -33,8 +33,21 @@ class BoatState extends ChangeNotifier {
   String status = 'Starting…';
   DateTime? lastUpdate;
 
+  // Rolling live-value history for sparklines, keyed by metric
+  // (depth/seatemp/sog/wind/tank:<name>). Live-accumulated as values arrive.
+  final Map<String, List<double>> history = {};
+  static const int _histCap = 150;
+
   bool get connected => status.startsWith('Connected');
 
+  List<double>? spark(String key) => history[key];
+
+  void _push(String key, double v) {
+    final list = history.putIfAbsent(key, () => <double>[]);
+    list.add(v);
+    if (list.length > _histCap) list.removeAt(0);
+  }
+
   void setAis(List<AisBoat> boats) {
     aisBoats = boats;
     notifyListeners();
@@ -77,7 +90,12 @@ class BoatState extends ChangeNotifier {
     }
     if (seakeeperPower != null) this.seakeeperPower = seakeeperPower;
     if (seakeeperProgress != null) this.seakeeperProgress = seakeeperProgress;
-    if (tanks != null) this.tanks = tanks;
+    if (tanks != null) {
+      this.tanks = tanks;
+      for (final t in tanks) {
+        _push('tank:${t.name}', t.level);
+      }
+    }
     if (acVolts != null) this.acVolts = acVolts;
     if (acWatts != null) this.acWatts = acWatts;
     notifyListeners();
@@ -99,12 +117,24 @@ class BoatState extends ChangeNotifier {
     double? windAngleDeg,
   }) {
     if (position != null) this.position = position;
-    if (speedKn != null) this.speedKn = speedKn;
+    if (speedKn != null) {
+      this.speedKn = speedKn;
+      _push('sog', speedKn);
+    }
     if (cogDeg != null) this.cogDeg = cogDeg;
     if (headingDeg != null) this.headingDeg = headingDeg;
-    if (depthFt != null) this.depthFt = depthFt;
-    if (seaTempF != null) this.seaTempF = seaTempF;
-    if (windSpeedKn != null) this.windSpeedKn = windSpeedKn;
+    if (depthFt != null) {
+      this.depthFt = depthFt;
+      _push('depth', depthFt);
+    }
+    if (seaTempF != null) {
+      this.seaTempF = seaTempF;
+      _push('seatemp', seaTempF);
+    }
+    if (windSpeedKn != null) {
+      this.windSpeedKn = windSpeedKn;
+      _push('wind', windSpeedKn);
+    }
     if (windAngleDeg != null) this.windAngleDeg = windAngleDeg;
     lastUpdate = DateTime.now();
     notifyListeners();
diff --git a/mobile/lib/data_drawer.dart b/mobile/lib/data_drawer.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'boat_state.dart';
+import 'sparkline.dart';
 
 /// The dashboard: all the boat readouts that used to be overlaid on the chart,
 /// grouped into sections. Opened from the map's dashboard button. Rebuilds live
@@ -60,14 +61,16 @@ class DataDrawer extends StatelessWidget {
                   : '${pos.latitude.toStringAsFixed(5)}, '
                       '${pos.longitude.toStringAsFixed(5)}',
             ),
-            _Row('SOG', _fmt(state.speedKn, 'kn')),
+            _Row('SOG', _fmt(state.speedKn, 'kn'), spark: state.spark('sog')),
             _Row('COG', _fmt(state.cogDeg, '°', digits: 0)),
             _Row('Heading', _fmt(state.headingDeg, '°', digits: 0)),
             const SizedBox(height: 16),
             const _Section('Environment'),
-            _Row('Depth', _fmt(state.depthFt, 'ft')),
-            _Row('Water temp', _fmt(state.seaTempF, '°F')),
-            _Row('Wind', wind),
+            _Row('Depth', _fmt(state.depthFt, 'ft'),
+                spark: state.spark('depth')),
+            _Row('Water temp', _fmt(state.seaTempF, '°F'),
+                spark: state.spark('seatemp')),
+            _Row('Wind', wind, spark: state.spark('wind')),
             if (state.spotZeroFwGph != null || state.spotZeroSwGph != null) ...[
               const SizedBox(height: 16),
               const _Section('Watermaker'),
@@ -80,7 +83,8 @@ class DataDrawer extends StatelessWidget {
               const SizedBox(height: 16),
               const _Section('Tanks'),
               for (final t in state.tanks)
-                _Row(t.name, '${t.level.toStringAsFixed(0)}%'),
+                _Row(t.name, '${t.level.toStringAsFixed(0)}%',
+                    spark: state.spark('tank:${t.name}')),
             ],
             if (state.seakeeperStabilizing != null ||
                 state.acVolts != null) ...[
@@ -117,29 +121,32 @@ class _Section extends StatelessWidget {
 }
 
 class _Row extends StatelessWidget {
-  const _Row(this.label, this.value);
+  const _Row(this.label, this.value, {this.spark});
   final String label;
   final String value;
+  final List<double>? spark;
   @override
-  Widget build(BuildContext context) => Padding(
-        padding: const EdgeInsets.symmetric(vertical: 6),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.baseline,
-          textBaseline: TextBaseline.alphabetic,
-          children: [
-            SizedBox(
-              width: 96,
-              child: Text(label,
-                  style: const TextStyle(color: Colors.white60, fontSize: 13)),
-            ),
-            Expanded(
-              child: Text(value,
-                  style: const TextStyle(
-                      color: Colors.white,
-                      fontSize: 16,
-                      fontWeight: FontWeight.w600)),
-            ),
-          ],
-        ),
-      );
+  Widget build(BuildContext context) {
+    final s = spark;
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 6),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 96,
+            child: Text(label,
+                style: const TextStyle(color: Colors.white60, fontSize: 13)),
+          ),
+          Expanded(
+            child: Text(value,
+                style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 16,
+                    fontWeight: FontWeight.w600)),
+          ),
+          if (s != null && s.length >= 2) Sparkline(data: s),
+        ],
+      ),
+    );
+  }
 }
diff --git a/mobile/lib/sparkline.dart b/mobile/lib/sparkline.dart
@@ -0,0 +1,67 @@
+import 'dart:math' show max, min;
+
+import 'package:flutter/material.dart';
+
+/// Tiny trend line for a rolling series of values (auto-scaled to its own
+/// min/max). Used next to the drawer readouts. Renders nothing until there are
+/// at least 2 points.
+class Sparkline extends StatelessWidget {
+  const Sparkline({
+    super.key,
+    required this.data,
+    this.color = Colors.white70,
+    this.width = 60,
+    this.height = 20,
+  });
+
+  final List<double> data;
+  final Color color;
+  final double width;
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      height: height,
+      child: (data.length < 2)
+          ? null
+          : CustomPaint(painter: _SparkPainter(data, color)),
+    );
+  }
+}
+
+class _SparkPainter extends CustomPainter {
+  _SparkPainter(this.data, this.color);
+  final List<double> data;
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    var lo = data.reduce(min);
+    var hi = data.reduce(max);
+    if (hi - lo < 1e-9) hi = lo + 1; // flat series → avoid divide-by-zero
+    final path = Path();
+    for (var i = 0; i < data.length; i++) {
+      final x = i / (data.length - 1) * size.width;
+      final y = size.height - (data[i] - lo) / (hi - lo) * size.height;
+      if (i == 0) {
+        path.moveTo(x, y);
+      } else {
+        path.lineTo(x, y);
+      }
+    }
+    canvas.drawPath(
+      path,
+      Paint()
+        ..color = color
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = 1.5
+        ..strokeJoin = StrokeJoin.round,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _SparkPainter old) =>
+      old.data != data || old.color != color;
+}
diff --git a/mobile/lib/viam_connection.dart b/mobile/lib/viam_connection.dart
@@ -81,8 +81,8 @@ class ViamConnection {
     _spotZeroFwName = _discoverSensorByName(robot, 'spotzero-fw', '');
     _spotZeroSwName = _discoverSensorByName(robot, 'spotzero-sw', '');
     _seakeeperName = _discoverSensorByName(robot, 'seakeeper', '');
-    _tankNames = _discoverSensorsWhere(
-        robot, (n) => n.contains('fuel') || n.contains('freshwater'));
+    _tankNames = _tankSort(_discoverSensorsWhere(
+        robot, (n) => n.contains('fuel') || n.contains('freshwater')));
     _acPowerNames =
         _discoverSensorsWhere(robot, (n) => RegExp(r'ac-\d-\d$').hasMatch(n));
     final cameras = _discoverCameras(robot);
@@ -135,6 +135,27 @@ class ViamConnection {
 
   bool _boolish(dynamic v) => v == true || (v is num && v != 0);
 
+  /// Port of the web app's tankSort: freshwater first, then fwd/mid/aft, main
+  /// later; ties broken by name.
+  List<String> _tankSort(List<String> names) {
+    int score(String raw) {
+      final n = raw.toLowerCase();
+      var s = 0;
+      if (n.contains('freshwater')) s -= 10000;
+      if (n.contains('fwd')) s -= 1000;
+      if (n.contains('mid')) s -= 500;
+      if (n.contains('aft')) s -= 250;
+      if (n.contains('main')) s += 50;
+      return s;
+    }
+
+    return List.of(names)
+      ..sort((a, b) {
+        final d = score(a) - score(b);
+        return d != 0 ? d : a.toLowerCase().compareTo(b.toLowerCase());
+      });
+  }
+
   /// Camera components on the robot, sorted, with the web app's filtered-camera
   /// rule: drop "<name>" when a "<name>-filtered" sibling exists (prefer the
   /// filtered feed). (chartplotter-hide needs the machine config; not yet done.)
