Small Multiples Sparkline Stats Block for React

Edit MONTHS and the lists above MEASURES (ORDERS, VISITORS, BASKET, RETURNS). A measure is a label, one reading per month and a function that writes a reading. Revenue and conversion are derived from the lists they depend on. Each series needs one reading per month; the axis, the dots and the guide follow MONTHS.

A native range input named Month lies unseen over the plot, so pointer, touch drag and the arrow, Home and End keys all work as they do on any slider. Moving the pointer over the plot also reads the month under it. On focus the guide appears with a focus ring around the plot, and its spoken value is the month followed by all six readings ("March: Orders 389, Revenue ...").

They share the time axis, not the vertical scale: each line runs from its own lowest reading to its own highest, so a small measure such as returns is as readable as a big one such as revenue. The values at the end of each row say what the heights mean, and each line's accessible name gives its start, end, lowest and highest month.

Every row is a heading and its line is an image with a text name; the values are plain text. The range input is the one control, with an accessible name and a readable value. The line, the guide and the dots are hidden from assistive technology where the text already says the same thing. The chart is kept left to right in right-to-left pages, because time runs that way in every language.

The value moves under each row's name so the lines keep their width, and the axis shows every other month. Touch drags across the plot read a month, while vertical swipes still scroll the page. Nothing scrolls sideways at 320 pixels.

The lines draw in once on load, and the guide fades in and out. With reduced motion both are instant; reading a month never animates.