Area Chart With Pill Tabs Stats Block for React

Edit PERIODS at the top of the file. Each period has an id, a tab label, a list of names (what each reading is called, shown in the peak's chip and the chart's name), the series of readings, the previous period's total, the span and versus phrases the sentence uses, the unit and the ticks shown under the chart. The total, the change, the curve and the peak are computed. Add a period and a fifth pill and panel appear; keep the number of labels small enough for a phone.

Digits only roll when the same number element gets a new value. If the total sat inside each panel, a switch would unmount one and mount another, and the number would simply appear. So the figure sits above the panels and reads the selected period from state, in a polite live region so a screen reader hears the new total, while each panel holds just its chart. The tabs are controlled with value and onValueChange, which receives the new value.

The curve's highest reading stands 78% of the way up its box, which leaves room above it. A dot and a chip are placed at that point from two CSS variables, and the chip hangs from the dot toward the side with room: centred in the middle of the chart, and against the end when the peak is one of the last readings, so it never runs off the frame.

Yes. The tabs are a real tab list with arrow-key navigation and visible focus, and the selected panel is a tab stop. The chart is an image named with its unit, span, first and last readings and its low and high with their names. The labels under it, the gridlines and the arrow are hidden from assistive technology because the sign and the image's name carry the same facts. The minus in a fall is a true minus sign, and values and signs are kept left to right so a right-to-left page doesn't move them.

The header and the frame fade up once on load, and the area fades in under the line; the total's digits roll when you switch. With reduced motion the digits change in place and nothing else moves. On a phone the chart is a 3:2 box, the tab list stays within the screen (it scrolls if it ever overflows), and the longer label rows show every other or every third label. Nothing scrolls sideways at 320 pixels.