Skip to content

Commit 1d11616

Browse files
committed
update
1 parent 33bd06a commit 1d11616

File tree

2 files changed

+24
-6
lines changed

2 files changed

+24
-6
lines changed

dashboard2/src/components/DeviceMetrics.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,12 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
8888
const points = buckets.length > width ? buckets.slice(buckets.length - width) : buckets;
8989
let minPoint: PlotPoint = { x: 0, y: 0, value: 0 };
9090
let maxPoint: PlotPoint = { x: 0, y: 99999999, value: 0 };
91+
let lastPoint: PlotPoint = { x: 0, y: 0, value: 0 };
9192

9293
ctx.lineWidth = 1.5;
9394
ctx.strokeStyle = Theme.palette.secondary;
9495
ctx.beginPath();
95-
points.forEach((p: DataPoint, i: number) => {
96+
points.forEach((p: DataPoint, i: number, arr) => {
9697
const { value } = p;
9798
const pHeight = ((value - minValue) * height) / range;
9899
const x = i;
@@ -106,6 +107,11 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
106107
}
107108

108109
ctx.lineTo(x, y);
110+
111+
// Record last value
112+
if (i === arr.length - 1) {
113+
lastPoint = { x, y, value };
114+
}
109115
});
110116
ctx.stroke();
111117

@@ -114,6 +120,13 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
114120
ctx.fillStyle = 'white';
115121
ctx.fillText(minPoint.value.toFixed(1), minPoint.x + LABEL_OFFSET, minPoint.y - LABEL_OFFSET);
116122
ctx.fillText(maxPoint.value.toFixed(1), maxPoint.x + LABEL_OFFSET, maxPoint.y - LABEL_OFFSET);
123+
124+
// Most recent value
125+
ctx.fillText(
126+
lastPoint.value.toFixed(1),
127+
lastPoint.x + LABEL_OFFSET,
128+
lastPoint.y - LABEL_OFFSET,
129+
);
117130
};
118131

119132
return fabricate('div')

dashboard2/src/util.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { sendConduitPacket } from './services/conduitService';
77

88
declare const fabricate: Fabricate<AppState>;
99

10+
/** Extra Y for visibility */
11+
const Y_EXTRA = 1.1;
12+
1013
/**
1114
* Re-load the devices list data.
1215
*
@@ -223,11 +226,13 @@ export const fetchMetric = async (state: AppState, name: MetricName) => {
223226
9999999,
224227
);
225228
maxValue = name.includes('Perc')
226-
? 110
227-
: newHistory.reduce(
228-
// @ts-expect-error handled with 'type'
229-
(acc: number, [, value]: MetricPoint) => (value > acc ? value : acc),
230-
0,
229+
? Math.round(100 * Y_EXTRA)
230+
: Math.round(
231+
newHistory.reduce(
232+
// @ts-expect-error handled with 'type'
233+
(acc: number, [, value]: MetricPoint) => (value > acc ? value : acc),
234+
0,
235+
) * Y_EXTRA,
231236
);
232237
} else {
233238
throw new Error('Unexpected metric data type');

0 commit comments

Comments
 (0)