Sankey
Requests from keys to models to providers; hover a node to follow its path.
| From | To | Requests |
|---|---|---|
| checkout-web | gpt-5 | 4,200 |
| checkout-web | claude-sonnet-4-5 | 2,100 |
| checkout-worker | gpt-5-mini | 3,600 |
| checkout-worker | claude-sonnet-4-5 | 900 |
| ci-runner | gpt-5-mini | 700 |
| gpt-5 | OpenAI | 4,200 |
| gpt-5-mini | OpenAI | 4,300 |
| claude-sonnet-4-5 | Anthropic | 3,000 |
<div className="w-full">
<Sankey aria-label="Requests from keys to models to providers" nodes={nodes} links={links} />
</div>import { Sankey } from "@logicplanes/kaeso-ui";Props
aria-labelstringThe chart's accessible name ("Requests by model").
emptybooleanShows the empty state (
emptyText) in place of the data. Pass it when the period has no data.emptyTextReactNodeWhat the empty state says. Defaults to "No data for this period" in the provider's language.
errorReactNodeThe data failed to load: the chart keeps its height, says so quietly and offers Try again. Errors are toasts, so the value isn't shown; toast the message where the request fails.
formatValue((v: number) => string) = (v) => formatNumber(v)Formats the values beside the nodes and in the data table. Defaults to
formatNumber.heightnumber = 320The diagram's height in px (320 by default).
linksSankeyLinkIn[]The flows, each with a
sourceand atargetnodeidand avalue.loadingbooleanThe data is loading: the chart keeps its height and shows a quiet loading bar.
nodesSankeyNodeIn[]The nodes, each with an
idand alabel. Columns follow from the links.onRetry(() => void)Called when Try again is pressed after
error; without it, the button doesn't show.