Donut Breakdown Stats Block for React

Edit BUCKETS at the top of the file: each bucket is a label and the dollars spent. Add or remove buckets (up to five weights are defined; add a sixth to WEIGHTS for more). The total, every share, every arc, the middle and the header's headline are computed from the list, and FEBRUARY is the month before, for the comparison in the header's sentence.

sharesOf rounds every share down and then gives the spare percent points to the buckets with the largest remainders. Rounding each to the nearest whole number can total 99 or 101, which looks like a mistake beside a total. The legend uses these whole numbers; the arcs use the exact fractions.

Primary stays on a page's one main action, and chart hues change from preset to preset. The five arcs are the foreground at 100, 65, 40, 20 and 10 percent, mixed with the background into solid colours (never see-through), and the legend repeats each shade as a swatch. The meaning is never carried by colour alone: every arc has its name, amount and share in text beside it.

The legend is a description list (a term for the bucket, its amount and share as descriptions), so a screen reader reads every number. The drawing is hidden from assistive technology because the list says the same, and the figure's caption says how the arcs run. The total in the middle is real text; with reduced motion the arcs and the digits appear at once.

The donut sits in a box that is kept left to right, because a chart's direction is its own: arcs always run clockwise from twelve o'clock. The legend and header follow the page direction, and amounts and percentages are wrapped in bdi elements so signs and units stay in reading order.

The split becomes one column in reading order: header, donut (about 280 px square), legend. The legend rows keep their swatch, name, amount and share on one line down to 320 px, and nothing scrolls sideways.