Radar Chart Stats Block for React

Edit PERSON and SKILLS at the top of the file: each skill is a name, her score and the team average, out of 100. The number of axes follows the list (six is what the labels are spaced for; five to eight work), and the polygons, rings, spokes, label positions, overall score, best and weakest skill and the headline are computed from it.

In a 100 by 100 SVG box: each axis points at an angle from twelve o'clock, the rings are polygons at 20, 40, 60, 80 and 100 percent of the outer radius, and each score is a point on its axis at its percent of that radius. The points are computed once with a small pointAt helper and written as polygon strings. The names and scores are HTML placed on a slightly bigger circle, so they stay crisp and selectable and clear the outer ring.

The chart is an image whose name lists every skill with her score and the team's, and the same numbers are in the description list beside it, so nothing depends on seeing the polygon. The skill labels round the chart are hidden from assistive technology because the list repeats them. The two polygons differ by weight, fill and dash pattern, not by colour, and the legend under the chart says which is which.

The block fades up once, the number rolls to its value when it scrolls into view, and the two polygons grow from the middle of the chart. With reduced motion everything simply appears, complete.

The chart sits in a left-to-right box, so the axes keep their order (the first skill at twelve o'clock, then clockwise) in every language; the header and the list follow the page direction, and every score and signed gap is in a bdi element, with the gap kept left to right so a plus or a minus sign never moves to the wrong side.

Below lg the divider becomes a rule with a + on each rail between the header and the chart, and the list comes last. The chart is as wide as its column up to 24 rem, so it fills a 320 pixel phone, and each label is 72 pixels wide, so none touches the edge.