Dual Gauge Comparison Stats Block for React

Edit SPRINT and TEAMS at the top of the file: each team is a name, the tasks it done and the tasks it planned in total. The percent, the arc, the tasks still to go, the gap on the chip and the headline are all computed from those two numbers, and the team with the higher percent gets the full-weight dial. Two teams is what the layout is drawn for; the grid is two columns from md.

Each dial is two SVG paths in a 200 by 200 box: a grey track that runs from 135 to 405 degrees, and the value arc on top of it, which starts at the same point and stops at the percent. The arcs are computed from the angle with a small arcPath helper when the module loads, so there are no magic path strings. The value arc is drawn on with a stroke-dash transition when the page loads; with reduced motion it simply appears. The middle and the 0 and 100 labels are HTML on top of the SVG, so they stay crisp and selectable.

It states the gap in percentage points, computed from the two percents, and sits on the divider so the eye goes from one dial to the other through it. It is decorative: the header already says the same thing in words, so assistive technology skips the chip and each dial is read as an image whose name gives the team, its tasks done and the percent. On a phone the cells stack and the chip moves to the rule between them.

Whether 72% is bad depends on the sprint, and a colour would decide that for the reader. The block uses weight instead: the dial that finished more is at full strength and the other at 55%, solid mixes of the text colour, so the pair reads in both themes and in greyscale. If one team breaches a target you care about, add a status icon beside its name rather than tinting the arc.

Yes. Each dial sits in a left-to-right box, because an arc fills clockwise from the lower start in every language, and the percents and counts sit in bdi elements, so they never reorder. The text around the dials, the header and the captions, follows the page direction, and the chip stays centred on the divider.

Below md the two cells stack, the second one starting under a rule with a + mark on each rail, and the chip sits on that rule. Each dial is 224 pixels wide on a phone and 256 from sm, so the first dial and its percent are on the first screen, and nothing scrolls sideways at 320 pixels.