Area Chart With Reference Area Stats Block for React

Edit START and STEP (the first reading's time in minutes, and the minutes between readings), the DELAY and SENT lists, and FROM and TO, the readings the incident starts and ends at. The shaded band, its label, the duration, the peak, the alerts affected and the headline all follow. The scale rounds up to a multiple of fifteen seconds above the peak. Times are computed from the start, so the copy has no date.

It is a plain HTML element placed over the plot with two CSS variables, the start of the window and its width, both in percent of the plot, so it lines up with the curve at any size. It has a hairline at each edge and a faint tint, which darkens the area under it without hiding the line. The label above it is placed from the same variable. Because it is HTML, it stays crisp and the text can be selected and read.

The block uses a status colour once, on the one thing that is an alert: the incident's label. Everything else, including the line, the tint and the three rows, is drawn in your theme's foreground colour, so the chart reads in every theme and without colour.

Yes. The chart is an image whose name gives its span, its normal level, the incident's window and its peak with the time. The three rows are a description list, which says the same in text, and the scale and time labels are hidden from assistive technology because the image's name and the rows carry the facts. Values are kept left to right so a right-to-left page doesn't reorder them.

The chart comes first in the page and the three rows after it, so the reading order is the same on every screen: side by side on a wide screen, stacked on a phone. The chart is a 4:3 box on a phone with a label every hour, and nothing scrolls sideways at 320 pixels.

The header and the band fade up once on load and the area fades in; nothing else moves. With reduced motion the transitions are off.