Chart recorder

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-recorder label="p95 latency · api-gateway" unit="ms"
    min="0" max="500" high="300"
    pen="p95" pen2="p50" speed="1"></tui-recorder>

import '/kit/kit.mjs';   // defines <tui-recorder>

const rec = document.querySelector('tui-recorder');

// A reading for each pen, whenever one arrives.
socket.addEventListener('message', (e) => {
  const { p95, p50 } = JSON.parse(e.data);
  rec.push(p95, p50);
});

// Or a whole history at once: oldest first, one reading every 5 s, ending now.
rec.setData(history.p95, { values2: history.p50, interval: 5 });

rec.addEventListener('alarm', (e) => page(e.detail.level, e.detail.value));
rec.stop();    // the paper halts, the pens lift
rec.start();

Needs kit.css and kit.mjs. How to install the kit.

• The recorder is a figure named by its printed label. The paper is one role="img" whose name states the data, rewritten at most every two seconds: “p95 latency, last 2 minutes: p95 now 182 ms; lowest 121 ms, highest 342 ms; p50 now 96 ms. Under 300 ms.” A name that changes is not announced, so a live chart never floods a screen reader.
• The latest reading is text on the display, there to be read whenever it is wanted. Crossing a set-point is the one thing announced, once, politely: “p95 latency: above 300 ms — 342 ms”, and “back under 300 ms” when it recovers.
• The alarm lamp and the drive lamp always have words beside them. The second pen differs from the first by its dash as well as its tone.
• It is a display, not a control: it takes no focus. Put the keys that act on it (stop, export) beside it.
• Reduced motion: the paper steps one whole division at a time and the pens jump to their readings; every reading is still drawn.

One custom element. The paper is a plate-coloured strip in a window cut into the panel; a canvas over it draws the printed grid (square, fine and major lines), the dashed set-points, the ink of each pen, and the times the recorder prints in the margin as each major line passes the pen. The ink is the finish’s own printing colour, read from the page, so the chart is ink on paper in aluminium and light printing on black in graphite, and lit inside glass. Readings are stored with the paper position they were made at; the paper position comes from the clock, so a recorder that was off screen catches up exactly. The paper moves a whole device pixel at a time, on a timer, the way a stepper drive feeds it. The pens are elements: a nib, an arm and a carriage on a steel rail, moved by a critically damped servo, all casting one shadow down and to the right; stopped, they lift and the shadow opens. The tear edge is a gradient: a dark edge, a lit crest, a shadow thrown right.