LED bar chart

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-ledbars label="Requests per minute" unit="req/min" unit-text="requests per minute"
    min="0" max="2000" warn="1500" alarm="1800" peak
    labels="api,auth,search,billing,queue,cdn,mail,db"
    values="1284,1920,1610,420,880,1130,260,740"></tui-ledbars>

<!-- 24 hours, one colour, every third hour printed -->
<tui-ledbars label="kWh per hour · today" unit="kWh" min="0" max="4"
    label-every="3" labels="00,01,02,…,23" values="0.42,0.38,…"></tui-ledbars>

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

const bars = document.querySelector('tui-ledbars');

// Same columns, new readings: they move with a meter's ballistics.
setInterval(async () => {
  const perService = await fetch('/metrics/rpm').then((r) => r.json());   // { api: 1302, auth: 1710, … }
  bars.setData(Object.values(perService));
}, 5000);

// New columns: pass { label, value } pairs.
bars.setData(steps.map((s) => ({ label: s.name, value: s.tokens })));

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

• The chart is a role="group" named by its label and described by one generated sentence: how many bars, the range, the highest and lowest, and who is over each line.
• Every column is a role="meter" named by its label, with aria-valuenow, min, max and an aria-valuetext in words: “1,920 requests per minute, over the alarm line at 1,800”. They update with the data; browse through them to read the whole chart.
• One tab stop, then the arrow keys, Home and End. Focus is a 2px ring drawn in light on the glass, where an ink ring would vanish.
• Colour is never alone: the scale prints a wedge at each line, the readout prints the value, and the words say which line it is past.
• Reduced motion: the bars jump to the new readings; the peak segment keeps showing the last reading’s top until the next, without falling.

A custom element that writes plain DOM: every segment is an <i> with its zone colour set once, and a frame only toggles is-on on the segments that changed. The lit layer is a pseudo-element with a hot centre and a glow in the segment’s own colour; unlit, the colour shows at 15% through the smoke. The window is the kit’s display glass with its glare fixed over the columns. Ballistics are two time constants (60 ms up, 420 ms down) and the peak holds 1.2 s then falls at 55% of the scale a second. The loop runs only while a column moves: it sleeps when every bar is on its reading, pauses off screen and in a hidden tab, and clamps a frame to 1/30 s. Names are measured on a canvas once per width, so thinning them costs no layout.