Radial goals
Each agent's share of its own target as a ring, with the overall score in the middle.
Radial goals are concentric rings, one per agent, each its share of its own target. The overall
score sits in the middle. Past the target a ring goes round again from the top, with a marker where
it ends, so an agent that is ahead reads as a second lap. Hovering or focusing a ring — or its
legend row — dims the rest and rolls the middle to that agent's share. A ranges switch (like Week
and Month) repaints every ring.
| Agent | Done | Target | Share |
|---|---|---|---|
| Support agent | 412 tickets | 375 | 110% |
| QA agent | 136 checks | 160 | 85% |
| Research agent | 18 reports | 24 | 75% |
Usage
<!-- include core.css + radial-goals.css -->
<div class="rgx panel">
<div class="rgx-b">
<div class="rgx-ring"><svg viewBox="0 0 180 180" aria-hidden="true"></svg>
<div class="rgx-c"><b class="num">0%</b><span class="muted">of targets</span></div>
</div>
<div class="rgx-lg"><!-- one .rgx-r per agent --></div>
</div>
</div>
<!-- radial-goals.js draws one ring per agent and rolls the middle readout -->Properties
| Name | Type | Description |
|---|---|---|
goals | RadialGoal[] | Two to five agents, outermost first. Three read best — the fewer the rings, the thicker they are. |
title | string | The heading above the rings. Defaults to "Agent goals". |
subtitle | string | The line under the title. Defaults to "N of M on target". |
ranges | { value; label }[] | The period switch options, like Week and Month. Leave out for no switch. |
range | string | The selected range value (controlled). Leave out to let the switch pick it. |
onRangeChange | (range: string) => void | Called with the new range value when the switch changes. |
Each RadialGoal carries a key, a label (like "Support agent"), a unit (what it counts, like
"tickets"), the value done, its target, and an optional color. The share is value / target;
at or past the target the ring's row shows an "on target" chip, and the ring draws a second lap with
a marker. Colours fall back to the chart palette (the accent, then green, orange, violet and red).
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The ring
tracks use the chip token and the laps and dots use the chart palette, so the rings read on either
surface; the "on target" chip uses the ok tokens. In Soft the panel and the legend rows are rounder.
Respecting prefers-reduced-motion, the sweep and the middle readout settle without animating.