Line Chart With Threshold Stats Block for React

Edit LATENCY (one reading per STEP minutes, oldest first), THRESHOLD and CEILING at the top of the file. The breaches, minutes over, worst reading, thick strokes, rings, labels, headline and the chart's accessible name are all derived from them. The time labels under the chart are a short list, HOURS, placed by reading number: change it if you add readings.

The module finds every run of readings over the threshold and draws each as its own path. Where the line crosses, the start and end points are found by interpolation between the reading under the threshold and the one over it, so the thick stroke meets the threshold line cleanly instead of starting at the next reading. The rings are HTML elements positioned from the same numbers, so they stay round while the chart box stretches.

The block follows your theme, and colour is kept for one thing. A breach is shown by weight (a thicker stroke), by shape (rings) and by words, so it reads without colour and in every preset. A single status dot in the rail marks the alert; that is the only status colour in the block.

Yes. The drawing is an image whose name states the range, the worst reading, how long the series was over the SLO and in how many stretches. The same facts are in the rail as a description list and an ordered list, so nobody has to read the drawing. Figures sit in bdi elements, the chart box is dir="ltr" because time runs from the start to the end in every language, and the text is never smaller than 12 pixels.

The header fades up once and the line draws in from the start with a CSS clip-path transition; the rings fade in after it. With reduced motion everything simply appears. Nothing loops and there is no script.

The chart gets a taller shape (4 by 3), keeps its five time labels and the threshold label, and the rail drops under it behind a hairline with a plus on each rail. Nothing scrolls sideways at 320 pixels.