Lamp heatmap

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-heatmap label="Deploys per day · api" layout="calendar"
    start="2025-09-29" unit="deploys" unit-one="deploy" data-lamp="green"
    values="3,7,5,9,4,0,0,…"></tui-heatmap>

<tui-heatmap label="Incidents by hour" layout="week" data-lamp="red"
    unit="incidents" unit-one="incident" values="…168 values, Monday 00:00 first…"></tui-heatmap>

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

const map = document.querySelector('tui-heatmap');

// A value a day from start, oldest first; null for a day with no reading.
map.setData(deploysPerDay, { start: '2025-09-29' });
map.push(todaysDeploys);   // one more day at the end

// A lamp chosen by click, Enter or Space.
map.addEventListener('pick', (e) => showDeploys(e.detail.date, e.detail.value));

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

• A WAI-ARIA grid: rows of gridcell lamps, each named in full (“Tue 14 Oct 2025: 6 deploys”), with one tab stop that the arrows, Home/End and PageUp/PageDown move. The row headers name the weekdays.
• The grid is described by a summary that states the data: the total, the busiest day, how many had none, and what each step of light means. With summary="mean" a rate is averaged instead, and its highest and lowest cells are named.
• Hover and focus read the same lamp on the display in the head; the lamp being read is ringed in print as well as lit, so nothing depends on seeing brightness alone. The legend prints each step’s range.
• Each step of light is clearly apart from the next, and the glow grows with it; a day with no reading is an empty socket with no lens at all.
• Reduced motion: lamps change brightness at once and no frame is asked for; nothing else moves.

Two layers. The sockets are spans in rows, so the ARIA grid is real and the columns line up: each is a hole in the plate (a dark ring, the upper wall’s shadow falling on the glass, a lit lower lip) with the lens’s reflection of the room’s lamp, the same on every lamp, so it never moves with the brightness. The sockets carry the focus and hover rings and never restyle when the data changes. Behind them is one canvas: every unlit lens (dark glass tinted by the lamp colour) is baked once per layout, and the lit lamp (a warm-white core in the lamp colour, darker at the rim, inside its glow) is one sprite, drawn at the step’s brightness. A frame is one blit per lit lamp; new values fade 140 ms up and 260 ms down, and the loop stops when every lamp has arrived. The size comes from the width by a container query, 8 to 20 px, read back in layout units so a scaled thumbnail lines up exactly.