Stacked Metrics Sparkline Stats Block for React

Edit APPS at the top of the file. An app has a name, a kind, a hero measure and two support measures; a measure is a label, twelve weekly readings (oldest first), the decimals to show and a suffix such as %. The change, the line, the bars and their accessible names are computed from those lists.

Each is the same twelve weeks as the supporting measure, drawn as twelve bars between 2 and 12 pixels tall: the lowest week is the shortest and the highest the tallest, so none disappears. The latest week is drawn at full weight and the rest at 35%. Each bar series is an image with a text name that gives its start, end, lowest and highest value.

It is the catalog's Sliding Number with its trigger set to view: the digits roll up from zero once the figure is on screen, and the final number is the one screen readers get. With reduced motion the number simply appears.

A rise in listeners and a fall in crash rate can both be good news, so the block shows direction with an arrow and a sign in the text colour and leaves the judgement to the reader. It also keeps the block correct in every theme preset.

Each card is headed by its app name, and the hero figure is a description list (label, then value and change). Values sit in bdi elements and signed changes are kept left to right for right-to-left pages. Every line and bar series is named in text, and nothing depends on colour.

The three cards stack one per row with the same content, and the lines that run past their corners keep their space because the cells are set 1.5 rem apart. Nothing scrolls sideways at 320 pixels.