Pill-Driven Flagship Card Features Block for React

Edit RAW_METRICS at the top of the file. Each metric is a title, a pill label, a unit and 24 readings written as whole numbers times ten to the power of its decimals (so 14.1 dollars is 141 with one decimal), plus last week's average on the same scale. The number, the delta, the peak, the low, the average and the chart's shape are all worked out from those readings, so the card cannot disagree with its own chart.

They are a segment group named "Metric": one choice is always selected, and the arrow keys move between the pills and choose as they go. The card changes in place rather than opening a separate panel, so a segment group describes it better than tabs would. A polite, visually hidden line reads out the new metric and its change each time you pick one.

The chart is drawn from hand-made SVG and token colours, and each one is exposed as an image whose label is a sentence built from the same readings: the metric, its value now, the change against last week and the peak, the low and the average. The three ticks beside it say the same things as text, so nothing is only in the picture. Only the chart of the selected metric is visible to assistive technology.

No. The four charts sit in one grid cell and cross-fade, so the cell is as tall as the tallest, and the start cell's text is written to stay on one line per tick, so switching never moves the page. With reduced motion the charts swap instantly.

The giant number and the charts keep their order, because numbers and time series read left to right in every language. The title, the badge and the ticks follow the page's direction.

The pills sit in a row that scrolls sideways if four don't fit, then the number and its ticks come first and the chart follows under a hairline, a little shorter. Picking a pill works the same way.