DataDonutChart
components/data/DonutChart.vue
Donut/pie chart with a center slot and a swatch legend, driven by an array of {title, percent, html} items.
273
k
Tokens
Cached
$0.22 90%
Uncached
$0.14 10%
Scenarios
legendBelow · align left — one-line items (qdash Tools · Outcome)
ok
330
failed
0
denied
14
273
k
Tokens
Cached
$0.22 90%
Uncached
$0.14 10%
100
%
Healthy
Uptime
100%
1.2
m
Requests
API
576k
Web
360k
Mobile
180k
Other
84k
8
Sources
Source 1
Source 2
Source 3
Source 4
Source 5
Source 6
Source 7
Source 8
1.2
m
Requests
API
576k
Web
360k
Mobile
180k
Other
84k
No data
Slots
64%of quota
Used
Free
Allowed
4,210 reqs
Blocked
1,052 reqs
components/data/DonutChart.vue
Usage
<DataDonutChart
:items = "[]"
:size = "135"
:thickness = "24"
:gap = "0"
:legendBelow = "false"
:align = "center"
:centerValue = "centerValue"
centerUnit = "undefined"
centerLabel = "undefined"
:centerSize = "23"
:hideLegend = "false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Array | [] | Segments — each { title, percent, html?, color? }. percent drives arc size; html (freeform) renders below the title in the legend (beside it, on one line, with legendBelow); color overrides the auto palette (token role or CSS color). |
| size | Number | 135 | Donut diameter in px |
| thickness | Number | 24 | Ring stroke width in px |
| gap | Number | 0 | Gap between segments in px |
| legendBelow | Boolean | false | Legend below the chart in a horizontal row that wraps between items, instead of a column beside it. The chart fills its container so the row gets the full width; each item stays on one line (swatch · title · value). |
| align | 'center' | 'left' | 'center' | legendBelow only: center the donut and legend row, or set both flush left (e.g. in a DataMachine #right slot, next to the value). With legendBelow the chart fills its container so the legend row wraps only when it runs out of width. |
| centerValue | Number | String | null | Center default → DataMetricValue val (auto-abbreviated, e.g. 273000 → "273k"). Ignored when the #center slot is used. |
| centerUnit | String | undefined | DataMetricValue unit for the center value ('bytes', 'duration', or custom) |
| centerLabel | String | undefined | Small muted label below the center value (e.g. "Tokens") |
| centerSize | Number | 23 | Center value font size in px |
| hideLegend | Boolean | false | The ring alone — the legend's words move to the ring's tooltip and accessible name (a DataMachineMicro glyph, c109: size 20, thickness 5). |
Slots
| Slot | Description |
|---|---|
| center | Donut hole content (HTML). Overrides the default DataMetricValue built from centerValue/centerUnit/centerLabel. |