API Health Live Banner Block for React

LATENCY at the top of the file is 30 response times in milliseconds, oldest first; the bar heights, the median and the slowest minute are all worked out from it. The block ships with typed data so the preview is stable. To make it live, fetch your gateway's last 30 minutes after the first render and put the result in state, keeping the typed list as the first render so the server and the browser agree. Fetch in a useEffect and set state with the result.

Any minute at or above SLOW (200 ms in the file). The status colour stays small on purpose: one bar and the dot, never a tinted panel or coloured text, so the callout reads as healthy at a glance and the exception still stands out. The sentence names the slow minute in words, so the colour is never the only signal.

The bars are a drawing, so the figure is hidden from assistive technology and the sentence beside it says the same thing in words: the median and the slowest minute. Nothing in the figure is focusable. The heading names the section, so it appears in the page's list of regions.

The figure moves under the text and keeps the latest 20 bars, with its caption changed to match; the first ten are dropped with CSS, not removed, so nothing is recomputed. The figure's width follows the column, and nothing scrolls sideways at 320 pixels.

Yes. The text, the link's arrow and the figure's frame follow the page direction, but the bars always keep time order, oldest first, because they carry dir="ltr": a time series that flipped would read as time running backwards. The numbers are wrapped in bdi, so "42 ms" keeps its unit in reading order.

The callout fades up once when the page loads, with a CSS transition. Nothing else moves. With reduced motion it simply appears.