Live Ticker Bar Stats Block for React

Edit METRICS at the top of the file. Each metric is an id, a label and a script of readings, and every script is the same length. The row shows the item at the current step. The first item is what the server renders. The sample count in the live cell is the length of that script. There is no socket in the demo.

The ghost Button at the end of the row pauses and resumes. While the script can still run, the button is pressed when the feed is paused. After the last sample, or when motion is reduced, the button stays so the row does not shift, and its name says the reading is held or still. Pressing it then does nothing. The choice stays in the page.

The row is the whole block, and a visible heading would make it a panel. The heading is in the page for assistive technology: "Beatline fleet", and how many live readings there are. Each reading is a term and a value in a description list named Fleet readings, with the label before the value in the reading order and the value drawn above it.

The word in the first cell (Live, Paused, Held or Still) is a polite live region. It changes when you pause, when the script holds, or when reduced motion keeps the first reading. It does not announce each new number. The sample count under it updates in silence. The dot sends one ring per sample and does not loop.

The row stays on the first reading of every metric, the dot does not ping, and the word reads Still. The pause control does not start the script. With motion allowed, the digits roll every two seconds until the script ends.

The live cell and the pause button stay put. The six readings sit in a scroller between them, so the row never grows a second line. The scroller can take keyboard focus, because a person who does not use a pointer still needs to move it. From sm the six readings share the row and the scroller only appears when it has to. The row ends the block: there is no padding and no rule under it.