Donut

Ein Ring mit runden Enden und 2px Lücken, die Summe in der Mitte; ShareBar ist dieselbe Aufteilung in einer Pill.

183,70 $Total spend

gpt-584,20 $46 %
claude-sonnet-4-561,40 $33 %
gpt-5-mini22,80 $12 %
claude-haiku-4-514,10 $8 %
gpt-4.1-nano1,20 $1 %

Spend by model
Segment	Wert	Anteil
gpt-5	84,20 $	45,8 %
claude-sonnet-4-5	61,40 $	33,4 %
gpt-5-mini	22,80 $	12,4 %
claude-haiku-4-5	14,10 $	7,7 %
gpt-4.1-nano	1,20 $	0,7 %

import { Donut, ShareBar } from "@logicplanes/kaeso-ui";

Props

aria-label
string
Der zugängliche Name des Diagramms („Anfragen nach Modell“).
empty
boolean
Zeigt den leeren Zustand (emptyText) anstelle der Daten. Standardmäßig erscheint er, wenn jeder Wert 0 ist.
emptyText
ReactNode
Was der leere Zustand sagt. Standardmäßig „Keine Daten für diesen Zeitraum“ in der Sprache des LocaleProvider.
error
ReactNode
Die Daten ließen sich nicht laden: Das Diagramm behält seine Höhe, sagt es leise und bietet „Erneut versuchen“ an. Fehler sind Toasts, daher wird der Wert nicht angezeigt; zeige die Meldung dort als Toast, wo die Anfrage fehlschlägt.
formatValue
((v: number) => string) = (v) => formatNumber(v)
Formatiert die Summe in der Mitte und die Werte in der Legende. Standard ist formatNumber.
loading
boolean
Die Daten werden geladen: Das Diagramm behält seine Höhe und zeigt einen ruhigen Ladebalken.
onRetry
(() => void)
Wird aufgerufen, wenn nach error „Erneut versuchen“ gedrückt wird; ohne diese Funktion erscheint der Button nicht.
size
"md" | "sm" | "lg" = md
Der Durchmesser des Rings: sm 140px, md 160px (Standard) oder lg 180px.
slices
Slice[]
Die Teile des Ganzen, jeder mit id, label, value und optionaler color. Anteile unter 2 % werden als „Sonstige“ zusammengefasst, wenn es zwei oder mehr sind.
total
ReactNode
Ersetzt die Summe in der Mitte, die sonst die mit formatValue geschriebene Summe der Anteile ist.
totalLabel
ReactNode
Das Wort unter der Summe. Standardmäßig „Gesamt“ in der Sprache des LocaleProvider.