kaze風
Sparkline
インラインのミニ折れ線グラフ。テーブルやメトリクスの横に配置。
プレビュー
上昇トレンド
下降トレンド
エリア付き
使いどころ
使う場面
- 数字のそばに添えて、増えているか減っているかの傾きだけを示す（Metric や Table のセル）
- データは 7〜30 点程度。大きな傾向が見えるように、軸も目盛りも付けない前提で使う
- 色は 1 つ。意味を持たせるときは、増加は positive、減少は negative の色にそろえ、文字（+12%）も併記する
使わない場面
- 単体で置くこと。軸も目盛りも値もないので、何の数字か、どれだけ変わったかが読めない。必ず隣に値かラベルを置く
- 正確な値を読ませるとき。LineChart を使う
- 2 点未満のデータ。データが 2 点未満だと何も描かれない（null を返す）。空の状態は文字で示す
- 複数系列の比較。LineChart を使う
使い方
<Sparkline
data={[10, 15, 12, 20, 18, 25]}
color="var(--chart-emerald)"
showArea
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | number[] | なし | 数値の配列 |
width | number | 80 | SVGの幅 |
height | number | 24 | SVGの高さ |
color | string | var(--chart-emerald) | 線の色 |
showArea | boolean | false | 塗りつぶしエリアを表示 |
label | string | なし | 読み上げ用の名前。指定すると画像として読まれ、省略すると装飾として読み飛ばされる |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- label（または aria-label）を渡すと role="img" で読み上げられる。渡さないと aria-hidden になる
- 隣に値が表示されているときは、label を渡さず装飾にしてよい（数字が読まれるので、二重に読み上げない）
- 単体で置くとき、または傾きが重要なときは label に「過去 7 日のアクセス数は増加傾向」のように、傾向を言葉で書く
- 色だけで増減を伝えない。上がった、下がったを文字でも伝える