Donut
Parts against a whole. Arcs are stroke-dasharray on a circle rather than wedge paths — one number per slice, and no arc-flag branch at the halfway point.
src/components/ui/donut.tsxAbout
From the component's own source, where it was written.
A donut or pie chart of parts against a whole.
Arcs are drawn with stroke-dasharray on a circle rather than as wedge paths: one number per slice, no arc-flag branch at the halfway point, and a gap between slices is a dash pattern rather than trigonometry.
The centre label is not the accessible content — the <title> lists every slice with its share, because a ring with "62%" in the middle tells a screen reader nothing about the other 38.
Slices below minSlice are folded into an "Other" entry. A pie with fourteen one-percent wedges communicates less than one with five and a remainder.
Install
npx astralyx-ui add donut
Usage
import { Donut } from '@/components/ui/donut'
<Donut slices={slices} centerValue="748 kB" centerLabel="bundle" />Composer
Change the props and the source below follows.
<Donut
slices={slices}
thickness={18}
legend={true}
centerValue="748 kB"
/>Examples
Bundle composition
<Donut slices={slices} centerValue="748 kB" centerLabel="bundle" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Donut
Extends Omit<ComponentProps<'figure'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| slices | DonutSlice[] | required | { label, value, color? }. Percentages are computed from the total. |
| size | number | 160 | — |
| thickness | number | 18 | 0 renders a pie rather than a donut. |
| gap | number | 1 | Degrees of space between slices. |
| minSlice | number | 0.02 | Anything smaller folds into "Other" — fourteen one-percent wedges communicate less than five and a remainder. |
| centerLabel | ReactNode | — | — |
| centerValue | ReactNode | — | — |
| legend | boolean | true | — |
Types
DonutSlice
A donut or pie chart of parts against a whole.
| Field | Type | Description |
|---|---|---|
| label | string | — |
| value | number | — |
| color? | string | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| accessibility | <title> | Lists every slice with its share. A ring with "62%" in the middle tells a screen reader nothing about the other 38. |