Radar chart
This run against the baseline on six eval scores, with the weak ones flagged.
A radar chart compares a run with its baseline on a handful of eval scores: the baseline draws itself
as an outline, then this run grows out of the middle filled over it, on grey scale rings. Each axis
takes a label, this run's value and the baseline it is measured against, both 0 to 100; a score
under weakBelow is flagged "Weak". Pointing at or tabbing to an axis shows its two scores and the
change in the line below, and the legend shows and hides either series (one always stays).
Usage
<!-- include core.css + radar-chart.css -->
<div class="dm-rdx dm-panel">
<div class="dm-rdx-h">
<div class="dm-rdx-t"><b>Eval scores</b><span class="dm-muted">Run 48 against run 41</span></div>
<div class="dm-rdx-lg">
<button class="dm-rdx-k" aria-pressed="true"><i class="dm-c"></i>This run</button>
<button class="dm-rdx-k" aria-pressed="true"><i class="dm-b"></i>Baseline</button>
</div>
</div>
<div class="dm-rdx-ch" role="group">
<svg class="dm-rdx-svg"><!-- rings, spokes, baseline + this run polygons --></svg>
<!-- one .dm-rdx-ax label per axis -->
</div>
<div class="dm-rdx-ro" aria-live="polite"><span><!-- the note or the axis in hand --></span></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
axes | RadarAxis[] | Five to seven axes, clockwise from the top. Each is { label, short?, value, baseline }. |
title | string | The bold heading. Defaults to Eval scores. |
subtitle | string | The quieter line beside the title, like "Run 48 against run 41". |
seriesLabels | [string, string] | The legend's names for the two series. Defaults to ['This run', 'Baseline']. |
weakBelow | number | A score under this is flagged "Weak". Defaults to 70. |
note | ReactNode | The note under the chart, shown while no axis is pointed at. Defaults to the average and its change. |
pulse | number | An axis to call out once the chart is drawn: its label pulses (by index). |
A RadarAxis is { label: string; short?: string; value: number; baseline: number }; short is
shown instead of label on a narrow card, and value/baseline are 0 to 100.
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). This run
and the baseline take the chart palette tokens (--dm-c1, --dm-c2), the rings and spokes read from
the line tokens, and the card, the "Weak" tag and the readout line come from the theme tokens. The
baseline draws itself and this run's fill scales in from the middle on load; with
prefers-reduced-motion the chart appears already drawn.