Live Metrics Stats Block for React

Edit RPS, P95, ERRORS and CONNECTIONS at the top of the file. Each is one reading per sample, and the four lists are the same length. The headline's slowest sample is the maximum of the p95 list, so the sentence and the rail can't disagree. The first item of each list is what the server renders.

Live advances every two seconds. Every 5 s advances every five seconds. Paused waits. Switching pace clears the current wait and starts the new one, so a change is felt at once. After the ninth sample the reading holds no matter which pace is selected, and picking a pace again does not add samples. There is no socket in the demo.

Yes. One step index is read by the hero and by the three tiles. You never see a new error count beside an old request rate. The hero is the requests-per-second figure; the headline stays on the slowest p95 in the script, so it does not change under the reader on every tick.

Only the pace: every two seconds, every five seconds, paused, held on the last sample, or staying on the first because motion is reduced. The sample count sits in the same sentence but outside that live region, so a tick is not announced. The figures themselves are not live regions. Someone who wants the new number can read the figure.

The four figures stay on the first sample and the line says so. The pace control still switches, but the script does not play. With motion allowed, the digits roll to the next sample. Nothing loops, and the block does not ping.

The hero column comes first: the headline, the large figure, the pace control and the sample line. The three readings follow, under a rule, in the same order. From lg they sit beside the hero, and the divider runs up to the block's top rule. Only the start column fades in, because the rail can fall below the fold on a phone.