Legend Filter Heatmap Stats Block for React

Replace commitsFrom with your own list: 84 numbers, oldest first, starting on a Monday (twelve weeks of seven days). FLOORS are the fewest commits a day needs to reach each step and RANGES are the words the key writes for them; change both together. The counts on the toggles, the headline and the status line are computed from the list.

It keeps the days at that level in their full shade and draws all the others as empty outlined squares. You can choose several levels at once and switch one off by pressing it again; with nothing chosen every day shows. The grid never reflows, and the line under the key says how many days are shown. Outlines are solid, not faded, so the text and the key keep their contrast.

Yes. Each level is a toggle button with a visible focus ring and an on and off state, so it works with the keyboard and with screen readers, and the line under the key is announced politely when the count changes. The group is named "Show days by commits".

Yes. The drawing is an image with a summary (the total commits and the number of top-level days), and an unseen table lists the commits of every day, a row per week. The table does not change with the filter; it always carries the full data.

The header comes first, then the grid with every second week number hidden so the labels never touch, then the key as five full-width toggles. The grid is 12 columns of about 20 pixels at 320. Nothing scrolls sideways.