Sankey
从密钥到模型再到服务商的请求流向;悬停节点可追踪其路径。
| 来源 | 目标 | 请求 |
|---|---|---|
| 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";属性
aria-labelstring图表的无障碍名称(“按模型统计的请求”)。
emptyboolean以空状态(
emptyText)替代数据。当时间段内没有数据时传入。emptyTextReactNode空状态显示的文字。默认为 LocaleProvider 语言中的“此时间段内没有数据”。
errorReactNode数据加载失败:图表保持高度,低调地说明情况并提供“重试”。错误以 toast 显示,因此不会显示该值;请在请求失败处用 toast 显示消息。
formatValue((v: number) => string) = (v) => formatNumber(v)格式化节点旁和数据表中的值。默认为
formatNumber。heightnumber = 320图示的高度,单位 px(默认 320)。
linksSankeyLinkIn[]流向,每个包含
source和target节点的id以及value。loadingboolean数据正在加载:图表保持高度,并显示一条低调的加载条。
nodesSankeyNodeIn[]节点,每个包含
id和label。列由连接关系决定。onRetry(() => void)出现
error后点击“重试”时调用;不传入时不显示该按钮。