Donut Pill Legend Stats Block for React

Edit SOURCES at the top of the file: each source is an id, a label, its visits and one of the five WEIGHTS. The arcs, the shares, the total, the pills, the table and the header's headline are all computed from that list. A source keeps its weight whatever is switched off, so a swatch always means the same source.

slicesOf takes the sources that are on and works out each one's arc from its share of the visits that remain, so the ring is always a whole circle. The pill shows "off" instead of a share and its swatch turns hollow. The shares of the sources that remain are rounded by the largest-remainder method, so they add up to exactly 100, and the total in the middle rolls to the new sum. The last source cannot be switched off, which keeps the ring from emptying.

A toggle group in multiple mode: each pill is a button with a pressed state. Tab reaches the group, the arrow keys move between the pills and Space or Enter toggles the focused one. The ring, the shares and the total follow at once. The pressed pill has a foreground outline and a filled swatch; an off pill is quiet, with a hollow swatch and "off" in place of its share.

The pills are named by their text ("Social 15%"), the donut is hidden from assistive technology and a table of the visits and shares sits beside it for screen readers. A polite status line says what changed ("4 of 5 sources on: 83,200 visits") and, if you try to switch off the last source, why nothing happened. The total in the middle is real text.

The arcs sweep in once when the block loads and grow or shrink with a short CSS transition when you toggle a source; the digits in the middle roll. With reduced motion everything changes at once.

The panel keeps its donut (about 240 px) and the pills wrap onto as many rows as they need, centred, with no sideways scroll at 320 px.