Endpoint Latency Range Stats Block for React

Edit ROUTES at the top of the file. A route has a path, calls, errors, a limit, and p50, p95 and p99 in milliseconds. SCALE is the shared latency scale (1,000 ms) and ALERT_AT is the error rate, in percent, from which a route is called out. The headline, the rates, the range and each share of the limit are all read from those rows.

Every route is drawn on the same scale, 0 to 1,000 ms. The bar starts at p50 and ends at p99, and three ticks mark p50, p95 and p99. The numbers under the bar are the same milliseconds the ticks use, so the drawing and the text can't disagree.

The rate stays in the text colour. The one route over 1% is marked with a destructive status and the words "Over 1%", so the alert is not carried by colour alone and it still reads in every theme, light or dark.

Yes. The table is named ("Gateway routes for the last 24 hours"), each column has a header, and the path is the row header. The range is decorative because the p50, p95 and p99 are written out beside it. The limit bar is named with the calls, the limit and the share. The status icon is hidden from assistive technology because "Over 1%" says the same. Values sit in bdi elements, and paths are kept left to right. The bar takes an aria-label. The table is a native table. When it is wider than the frame, Tab reaches the scroll region and the arrow keys scroll it.

The rate-limit column drops out below lg and the latency range below md. The error rate stays, and a line under the path keeps that route's share of the limit (and, on a phone, its p99), so those numbers are not lost. Nothing in the remaining columns needs a sideways scroll at 320 pixels.

The header and the framed table fade up once when the page loads. With reduced motion the transitions are off and both simply appear. The limit bars do not animate.