Sparkline
数字の横に添える小さな推移の線。軸や目盛りを持たず、形だけを見せる。触れると、その点までの線が濃くなり、印が指に付いて滑る。
インポート
import { Sparkline } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { Sparkline } from '@caroainc/ui-components/sparkline'ダッシュボードの数字のカードに、直近の推移を添えるときに使います。高さは最小〜最大の幅で描くので、値の大きさではなく動きの形を見せます。値の大きさを比べたいときはLine Chartを使います。
基本的な使い方
線に触れる（スマートフォンでは指でなぞる）と、触れた点までの線が濃く、その先が薄くなり、点の印が隣の点へ滑って移ります。onActiveChangeで触れた点を受け取り、カードの大きな数字をその日の値に替えると、線をなぞるだけで日ごとの値を見られます（このときはrenderTooltip={() => null}で吹き出しを消します）。
Loading...
<div className="flex flex-col gap-2 rounded-lg border border-border p-4">
<span className="text-xs text-sub-foreground">チケット売上</span>
<span className="text-xl font-semibold">27,600円</span>
<Sparkline aria-label="チケット売上の推移" data={amounts} />
</div>// なぞった日の値をカードの数字に出す
const [active, setActive] = useState<number | null>(null)
const index = active ?? amounts.length - 1
<span className="text-xl font-semibold">{amounts[index].toLocaleString()}円</span>
<Sparkline data={amounts} onActiveChange={setActive} renderTooltip={() => null} />吹き出し
カードの数字を替えないときは、触れた点の値を吹き出しで出します。既定は値の3桁区切りです。renderTooltipで日付などを添えられます。
Loading...
<Sparkline
data={days.map((day) => day.tickets)}
color="purple"
renderTooltip={(value, index) => `${days[index].date} ${value}枚`}
/>既定の大きさはh-8 w-fullです。classNameで変えます。
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | - | 左から順に結ぶ値（必須） |
color | ChartColor | 'base' | 線の色 |
area | boolean | true | 線の下を薄く塗る |
showLastPoint | boolean | true | 最後の点に印を付ける |
renderTooltip | (value: number, index: number) => ReactNode | - | 触れた点の吹き出し。nullを返すと出さない |
onActiveChange | (index: number | null) => void | - | 触れた点が変わったとき（離れたらnull） |
aria-label | string | - | 推移の名前（読み上げ用）。付けると画像として読み上げる |