Sparkline
sparkline内联趋势迷你图 · 无轴无网格的极简趋势 · line/area/bar 三态 + highlightLast 末点圆点 + 原生 SVG <title> tooltip(RSC 安全零 JS) · 几何抽纯函数(归一化/path/柱矩形)带单测 · 表格内联/KPI 卡/负载趋势(零依赖)
用法
折线（基础用法）
默认 line 形态，data 传纯数字序列即可，零依赖纯 SVG。
tsx
<Sparkline data={[4, 6, 5, 8, 7, 10, 9, 12, 11, 14]} />强调末点
highlightLast 在末点画强调圆点，突出最新值。
tsx
<Sparkline
data={[4, 6, 5, 8, 7, 10, 9, 12, 11, 14]}
highlightLast
width={140}
height={36}
/>形态：面积 / 柱
variant 切换 line / area / bar；tone 吃语义色或 token 变量。
tsx
<>
<Sparkline data={series} variant="area" tone="var(--color-chart-2)" width={140} height={36} />
<Sparkline data={dipSeries} variant="bar" tone="var(--color-chart-4)" width={140} height={36} />
</>表格内联
每行一条趋势，配 renderTooltip（原生 <title>，零 JS、RSC 安全）做逐点说明。
| 指标 | 当前 | 近 8 周期趋势 |
|---|---|---|
| 请求量 QPS | 1,284 | |
| 平均时延 ms | 62 | |
| 错误率 ‰ | 0.4 | |
| Token 消耗 | 3.2M |
tsx
<Sparkline
data={row.trend}
variant="line"
tone={row.tone}
highlightLast
width={96}
height={22}
renderTooltip={(v, i) => `第 ${i + 1} 周期：${v}`}
/>何时用
在表格单元格、KPI 卡、列表行内嵌一条「极简趋势」时用——无轴无网格、随文本流。需要带坐标轴/图例/交互 tooltip 的完整图表用 Chart（recharts）；只展示单值用 [Stat]/[Badge]。Sparkline 胜在零依赖、RSC 安全、可内联。
导入
ts
import { Sparkline, normalize, linePath, areaPath, barRects } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| data* | SparkDatum[] | — | 纯数字序列或 {x,y} 点（取 y） |
| variant | "line" | "area" | "bar" | "line" | 渲染形态：折线 / 面积 / 柱 |
| width | number | 80 | 视口宽 |
| height | number | 24 | 视口高 |
| tone | string | var(--color-primary) | 描边/填充色。可传语义色名（"primary"/"success"/"danger"/"chart-2"，经 resolveTone 解析为 var(--color-*)）、任意 CSS 颜色或变量 |
| highlightLast | boolean | false | 在末点画强调圆点 |
| min | number | — | 归一化下界，不传从数据推 |
| max | number | — | 归一化上界，不传从数据推 |
| className | string | — | 外层类名 |
继承 SVGProps<SVGSVGElement>（除 data）。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| renderTooltip | (value: number, index: number) => ReactNode | 渲染函数：逐点原生 tooltip，返回字符串渲染为 SVG <title>（零 JS，RSC 安全） |
禁忌 / 坑
- tone 既接受语义色名（
"primary"/"chart-2"，经 resolveTone 解析）也接受裸 CSS 变量；若手写var(...)给 SVG fill/stroke 须带--color-前缀，见 [[hulian-token-color-var-needs-color-prefix]]。 - renderTooltip 走原生
<title>，是浏览器悬停气泡（有延迟、不可定制样式），不是 JS 浮层——换取的是 RSC 安全、零客户端 JS。
相关
ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge · Dot
Playground
<Sparkline
data={[4, 6, 5, 8, 7, 10, 9, 12]}
variant="line"
highlightLast
width={120}
height={32}
/>