Horizon Chart Grid Stats Block for React

Replace REGIONS and readingsOf at the top of the file: readingsOf must return one array of numbers per region, oldest first, and SAMPLES is how many it holds. STEP is each band's height in the unit of the data, and three bands fold 3 × STEP; a reading above that is capped, so raise STEP if your peaks are higher. The band paths, the current value, the change, the peak and the headline are computed from the arrays.

A strip is a line chart folded twice. The lightest band covers 0 to 40 Gbps, the middle 40 to 80 and the darkest 80 to 120, and each band is drawn full height on the same baseline, so where the strip is dark the reading is high and where it is light the reading is low. All strips share one step, so a pale strip really is quieter than a dark one. The key says it in words.

The weights (20%, 45% and 80% of the text colour, each mixed solid with the page colour) keep the bands opaque, so a darker band always covers the lighter one beneath it, and they follow any theme, light or dark. A hue would add a meaning (good or bad) the data doesn't have.

The strips are hidden from assistive technology. Each row says its region, its peak, its current value and its change in text, an unseen table adds the low, and the figure's caption names the chart. The change has an arrow and a true minus sign, the arrows are trend arrows so they don't mirror, and the strip is forced left to right so the oldest reading is at the start in every language.

Each row becomes two lines: the region with its current value and change, then the strip at full width, so the shape stays readable at 320 pixels. The "vs 1 h ago" text is dropped from the change (the table keeps it) and the key moves under the rows. The strips draw in from the start once on load; with reduced motion they are simply there.