Sortable Sparkline Tile Grid Stats Block for React

Edit VITALS and SORTS at the top of the file. A vital is a label, a budget, its decimals, a unit and fourteen daily readings (oldest first). Change is the move since day one as a share of day one, budget used is today's reading over the budget, and volatility is the gap between the lowest and highest reading as a share of the average. Add a sort by adding an entry to SORTS, a number to Figure and a branch to orderedBy.

It is the catalog's Segment Group, a single-choice control with arrow-key movement, wired to one piece of state. The list itself is re-ordered, not just restyled, so reading order and focus order follow what you see. A polite live region under the header announces the new order once.

The line always runs between 10% and 90% of its box, so the lowest and highest readings sit at fixed heights; two short ticks at the start edge mark them, and the line under the tile gives the two numbers in words ("Low 1.9 s, high 2.9 s"). The dot is the last day.

Lower is better for most vitals and higher is better for others, so the block shows direction with an arrow and a sign and leaves the judgement to the reader. The only thing that tells a tile it is over budget is its text ("101% of its 800 ms budget").

The tiles are an ordered list and each is a description list; every line is an image with a text name that gives its start, end, lowest day and highest day. The switch has an accessible name and visible focus. Values sit in bdi elements and signed changes stay left to right for right-to-left pages.

The switch takes the full width under the header and the tiles sit two across. Re-ordering moves tiles between slots, so the page's height does not change.