Waffle Chart Stats Block for React

Edit QUESTION and ANSWERS at the top of the file: each answer is a name and its votes, biggest first. The total, the whole-percent shares, the square each answer starts at, the legend and the headline are computed from them. The tones are four solid mixes in TONES; keep the answers to four, or add a tone for each extra one.

Each exact share is rounded down, and the points that are left over go to the answers with the largest remainders, so the shares and the squares always total 100 even when plain rounding would give 99 or 101. With the sample votes, 44.1, 30.1, 18.0 and 7.8 become 44, 30, 18 and 8.

Its squares lift by two pixels and the other answers' squares fade to a faint tint, so you can find an answer's squares in the grid at a glance. The list entries are real buttons: they respond to hover, to keyboard focus and to a press, which keeps the squares lifted until you press again or choose another answer. On touch screens a tap does the same. Reduced motion removes the lift's transition but keeps the highlight.

The grid is one image whose name lists every answer and its percent, and the same numbers are in the list under it, with the votes behind each share, so nothing depends on seeing the squares. The list buttons have names and states (aria-pressed) and a visible focus ring. The squares are decorative and the tones are weights of the text colour, so the chart is readable in greyscale and in both themes.

It's how waffle charts are usually read, like a glass filling up from the bottom, one column after another. The order is computed once from each square's row and column, so the biggest answer takes the first four columns plus a few squares of the fifth. The grid is a left-to-right box in every language, so the first answer always fills from the start.