Ring Progress Metric Split Features Block for React

Edit METRICS (name, target, decimals, ring radius and its colour classes) and PERIODS (an id, a label and one value per metric, in percent). The rings, the legend, the count of targets met and the status line are all read from those two tables. A fourth metric needs another ring radius inside the others, 22 units smaller each time.

Each ring is two circles: a faint track and an arc whose length is its value as a share of the circle (pathLength="100", so 94.8 draws 94.8 percent). The arc's length is a CSS variable, so the change when you press a toggle button is one transition. The three rings differ in weight (foreground at full strength, 60% and 35%) rather than in colour, and the legend's swatches use the same classes.

The rings are decoration. The legend is the text alternative: each row names the metric, its value, its target and whether it is met, and the middle of the chart is real text ("3 of 3 targets met"). A polite status line repeats the count when you press a toggle button, and the toggle buttons are named by their period.

The arcs grow with a CSS transition and the digits roll like an odometer when you press a toggle button, and the section fades up once when the page loads. With reduced motion, all of it changes in place.

The copy comes first, then the figure under a hairline. Inside the figure the ring stacks over the legend, and the toggle wraps under its title if it must. Nothing scrolls sideways at 320 pixels.

The ring chart keeps its direction (it starts at the top and runs clockwise in every language). The copy, the legend and the toggle follow the page, and the percentages and targets are wrapped so they don't reorder.