GitHub Stats Integration Block for React

Edit REPOSITORIES at the top of the file: each repository has a name and the median hours of its four stages (coding, waiting, review, merge). The row order (longest first), the shared scale, every bar width, the totals, the stage named in each row and the headline sentence are all worked out from that list, so there is nothing else to keep in step. Rename or add stages in STAGES and partsOf.

They are example figures; the block reads nothing from GitHub. Each bar adds up the median hours of four stages, which is a typical pull request rather than the median of totals, and the header says "adds up each stage's median". In a real product, compute each stage from the timestamps GitHub gives for commits, review events and merges, and feed the same typed shape.

So repositories can be compared by eye: the longest total fills the bar and every other bar is its share of it, so a short row stays short. A segment's width is its hours over that longest total, set through a CSS variable.

Tone carries the order of the stages, never hue, and the bars are decorative and hidden from assistive technology. Every row says the same facts in words: the repository, the total, the stage that takes the most, and the four stage numbers ("Coding 9, Waiting for review 14, Review 5, Merge 1"). Each repository name is an h3.

On a phone each row keeps the name and the total on one line, with the bar full width under them and the four numbers wrapping below. Bars always run left to right (they are a quantity, not text) while the rows themselves flip in a right-to-left layout; names and numbers keep their reading order. The segments grow in once on load; reduced motion draws them at their final size.