update

Author: C-D-Lewis

dashboard2/src/components/DeviceMetrics.ts

@@ -88,11 +88,12 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
     const points = buckets.length > width ? buckets.slice(buckets.length - width) : buckets;
     let minPoint: PlotPoint = { x: 0, y: 0, value: 0 };
     let maxPoint: PlotPoint = { x: 0, y: 99999999, value: 0 };
+    let lastPoint: PlotPoint = { x: 0, y: 0, value: 0 };
 
     ctx.lineWidth = 1.5;
     ctx.strokeStyle = Theme.palette.secondary;
     ctx.beginPath();
-    points.forEach((p: DataPoint, i: number) => {
+    points.forEach((p: DataPoint, i: number, arr) => {
       const { value } = p;
       const pHeight = ((value - minValue) * height) / range;
       const x = i;
@@ -106,6 +107,11 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
       }
 
       ctx.lineTo(x, y);
+
+      // Record last value
+      if (i === arr.length - 1) {
+        lastPoint = { x, y, value };
+      }
     });
     ctx.stroke();
 
@@ -114,6 +120,13 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
     ctx.fillStyle = 'white';
     ctx.fillText(minPoint.value.toFixed(1), minPoint.x + LABEL_OFFSET, minPoint.y - LABEL_OFFSET);
     ctx.fillText(maxPoint.value.toFixed(1), maxPoint.x + LABEL_OFFSET, maxPoint.y - LABEL_OFFSET);
+
+    // Most recent value
+    ctx.fillText(
+      lastPoint.value.toFixed(1),
+      lastPoint.x + LABEL_OFFSET,
+      lastPoint.y - LABEL_OFFSET,
+    );
   };
 
   return fabricate('div')

dashboard2/src/util.ts

@@ -7,6 +7,9 @@ import { sendConduitPacket } from './services/conduitService';
 
 declare const fabricate: Fabricate<AppState>;
 
+/** Extra Y for visibility */
+const Y_EXTRA = 1.1;
+
 /**
  * Re-load the devices list data.
  *
@@ -223,11 +226,13 @@ export const fetchMetric = async (state: AppState, name: MetricName) => {
         9999999,
       );
     maxValue = name.includes('Perc')
-      ? 110
-      : newHistory.reduce(
-        // @ts-expect-error handled with 'type'
-        (acc: number, [, value]: MetricPoint) => (value > acc ? value : acc),
-        0,
+      ? Math.round(100 * Y_EXTRA)
+      : Math.round(
+        newHistory.reduce(
+          // @ts-expect-error handled with 'type'
+          (acc: number, [, value]: MetricPoint) => (value > acc ? value : acc),
+          0,
+        ) * Y_EXTRA,
       );
   } else {
     throw new Error('Unexpected metric data type');