Wave Graph Point Selector Features Block for React

Edit WEEKS at the top of the file: each has a name, a percentage and a sentence. The curve, its area and the point positions are all worked out from those values, so adding a point re-spaces the rest. The curve leaves each point level, so it never overshoots a value between two points.

The points are one group of radio buttons: Tab puts focus on the chosen point and the arrow keys move along the curve, choosing a point as they go. The focused point floats its value and gets a focus ring, and each point's description points at its week's text under the chart.

Each point is a radio button named for its week, with that week's change and sentence as its description. The chart's caption gives the shape in a sentence (78 percent in week 1 to 43 percent in week 6), and the cell under the chart is real text, so the drawing is never the only source.

No. The six weeks' texts sit in one grid cell and the five not chosen are invisible, so it is as tall as the longest and nothing below it moves when you choose a point.

It gets shorter, the week labels shorten to W1 to W6, and each point keeps a 44 pixel touch target around its small mark. The cell under the chart stacks its text above the big number.

No: time runs the same way in every language, so the chart is dir="ltr". The header, the sentences and the cell under the chart follow the page's direction.