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
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"
:centerValue = "centerValue"
centerUnit = "undefined"
centerLabel = "undefined"
:centerSize = "23"
/>
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; 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 | Render the legend below the chart in a horizontal row instead of beside it |
| 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 |
Slots
| Slot | Description |
|---|---|
| center | Donut hole content (HTML). Overrides the default DataMetricValue built from centerValue/centerUnit/centerLabel. |