Sortable Open Metrics Table About Block for React

Edit METRICS at the top of the file: each has a label, a unit (dollars, count, percent, hours or months), last quarter's and this quarter's reading, a target and whether better is higher or lower. The change, the bar and the sort keys are all computed from those numbers, so nothing else needs editing. The figures are example data.

For a metric where higher is better the bar is the reading divided by the target; where lower is better (churn, reply time) it is the target divided by the reading, so both read as "how close". The bar stops at 100%, and a lower-is-better target is written with a leading "≤". Only a figure that has reached its target gets the status dot, with "target met" for a screen reader.

Metric sorts A to Z first, Change and Target sort biggest first; pressing the same column again reverses it. The sorted header carries aria-sort and an arrow, and a polite line above the table reads the result, such as "Sorted by progress to target, closest first". Ties fall back to the metric's name. Each sortable header holds a real button inside its cell, and the table has a visually hidden caption.

The table is wider than the screen, so it scrolls sideways inside a region that a keyboard can focus and that is named like the table. The metric column is pinned at the start so you always know which row you are reading. Nothing else on the page scrolls sideways.

Yes. The pinned column pins to the start, the sort arrows and bars follow the reading direction, and every figure is isolated so that a sign and a number keep their order in a right-to-left layout.

The header and the table fade up once on load; nothing else animates, and the rows change order without moving. With reduced motion the fade is off.