Split Area Chart Hero Stats Block for React

Edit OPENING, JOINED and LEFT at the top of the file: the fans before the first week, and one reading per week of fans who joined and fans who left. The count for each week, the headline's growth, the scale (whole thousands around the data), the curve, the three sub-figures and the number of week labels are all computed from them. Add a week to both lists and the chart gets another point.

A native range input with a value from the first week to the last sits invisibly over the chart, so it brings mouse, touch and keyboard handling for free: arrow keys step one week, Home and End jump to the ends. Its name is "Week" and its value text reads the week, the count and the change aloud, for example "Week 7: 5,632 paying fans, +148 on the week before". The visible guide, the big dot and the highlighted week number are moved by two CSS variables that are set from the chosen week.

The counts are scaled into a 100 by 100 box and turned into a smooth path that never overshoots a reading. The box stretches to its cell (preserveAspectRatio="none" with a non-scaling stroke), while the gridlines, scale labels, dots and week numbers are HTML placed from the same numbers, so they stay crisp. The scale starts below the lowest week rather than at zero and says so with its labels. The chart box is dir="ltr" because time runs the same way in every language.

Yes. The chart is an image named with its span and its first and last readings, and the same facts are available as text through the range input, which is a real, named, keyboard-operable control with a visible focus outline. The hero number and its change sit in a polite live region, so a screen reader hears the new week as you move. The sub-figures are a description list; the minus is a true minus sign, and the signs are kept left to right so a right-to-left page doesn't move them.

The band is the last thing in the hero panel, so it has no bottom rule and the panel has no bottom padding: the next section's top rule is its foot. The divider between the panels runs from the top rule down to the same line, with a + where it meets the rule. On a phone the divider becomes a rule between the two parts.

The header and the chart fade up once on load, the area fades in, and the guide and the big dot glide between weeks in 200 milliseconds. The digits of the number roll to each new week. With reduced motion all of it is off: the guide jumps and the digits change in place. Nothing scrolls sideways at 320 pixels.