Contribution Graph Team Block for React

Edit MAINTAINERS at the top of the file: a name, a role, how many commits a busy day can reach (cap) and a quiet stretch of weeks. The days are made from a fixed formula, so every render, on the server and in the browser, draws the same graph and nothing is random. To use real data, replace daysOf with your own list of 182 numbers per person (26 weeks of seven days, Monday first); Everyone is the sum of the people, and the total is counted from the days.

It is a group of toggles named "Show commits by"; each avatar toggle is named for the person ("Anya Volkova") and the first is Everyone. Arrow keys move between them and one is always chosen. A polite status line reads each pick once ("Anya Volkova: 214 commits in 26 weeks, 31 in the busiest week"), so the counting number, which is hidden from assistive technology while it counts, never chatters.

The squares are drawn and hidden from them. An unseen table in the same labelled region lists every day's commits for the picked view, one row per week and one column per day, so the data is complete without the picture.

The steps are relative: none, then four equal bands up to the picked view's busiest day, so each person's quiet and busy days read clearly whatever their pace. The legend says "Busiest day = darkest square". The real number is always in the table twin.

On load the weeks fade in one column after another, and the total counts up when the graph is on screen. Picking someone fades the squares to their new steps. With reduced motion the graph and the number appear at once and nothing transitions.

Twenty-six weeks need about 620 pixels, so below that the graph scrolls sideways inside a focusable, labelled region (use the arrow keys); the day names stay put beside it. The picker scrolls sideways too if it has to, and nothing else on the page scrolls at 320 pixels. The graph is always drawn left to right, oldest week first, even in a right-to-left page.