Donut chart
Where the agent's time went, by kind of task.
A donut chart shows a whole split into parts: a ring of segments that draw in one by one, with a
legend beside it. Each segment takes a label and a value, and gets a colour from the chart
palette unless you pass one. The middle shows the total with its label and unit; hovering a
segment or its legend row highlights both and shows that one in the middle instead.
Usage
<!-- include core.css + donut-chart.css -->
<div class="dm-dnx dm-panel">
<div class="dm-dnx-ring">
<svg viewBox="0 0 120 120"><!-- one <circle> per segment --></svg>
<div class="dm-dnx-c"><b class="dm-num">35h</b><span class="dm-muted">Agent time</span></div>
</div>
<div class="dm-dnx-lg"><!-- one .dm-dnx-r per segment --></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
segments | DonutChartSegment[] | The ring's parts. Each is { label, value, color? }. |
label | string | Under the total in the middle, like "Agent time". Defaults to Total. |
unit | string | After every value, like h in "14.2h". |
format | (n: number) => string | Writes a value. Defaults to one decimal, like 14.2. |
active | number | null | Index of the highlighted segment, or null. Leave it out to let hovering highlight it. |
defaultActive | number | null | The highlight to start with when uncontrolled. |
onActiveChange | (index: number | null) => void | Fires when the highlighted segment changes (Angular: activeChange; Flutter: onActiveChange). |
A DonutChartSegment is { label: string; value: number; color?: string }; color defaults to the
chart palette (--dm-c1..c6) in order.
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). Segment
colours come from the chart palette tokens (--dm-c1..c6), the card sits on a surface, and the
legend hover tint and the centre text read from the theme tokens. The arcs sweep in and the total
counts up on load; with prefers-reduced-motion the ring appears already drawn.