Radar Chart Capability Trio Features Block for React

Edit AXES and SUITES at the top of the file: each suite has its name, a sentence and two lists of scores out of 100, before and now, one per axis in the order of AXES. The rings, spokes, polygons, label positions and the deltas in the list are all derived from those, by small functions. For a different number of axes, add or remove a label and a score in each suite; the geometry follows.

In SVG, in a 100 by 100 box, with no chart library: each polygon's points come from the scores by simple trigonometry at module scope. The outlines keep their pixel width at any size, and the axis labels are real text positioned in percent, so they stay readable on a phone while the chart scales. The three suites' polygons are drawn together and only the chosen one is visible.

The tabs are a real tab list: arrow keys move between suites. The chart is decoration and is hidden; its facts are in the list beside it, where each axis has its score and its change ("Accuracy 88, plus 4"), and in the caption, which says the scores are out of 100 and higher is better. Both the dashed and solid keys are text.

So the shapes are comparable: the radar is easy to read only when a bigger polygon means a better one on every axis. Latency and cost are scored so that faster and cheaper score higher. If your axes have real units, show them in the list and keep the radar's scores normalised like this.

No: a chart keeps its axes in order, so the figure is dir="ltr". The tabs, the list and the caption follow the page's direction, and the changes are written with a true plus or minus sign so they read the same way.

The tabs come first, then the radar, scaled to the screen's width, then the scores. The chart's labels keep their size, and the scores sit one per row with a hairline between them.