kaze風
BarList
ランキングリスト
プレビュー
使いどころ
使う場面
- 項目ごとの値を、ラベル付きの横棒で並べる。ランキングや上位 N 件（流入元、ページ別アクセス、商品別売上）
- 既定は値の降順。並び順を変えない元データには sortOrder="none" を使う
- 行ごとに href を渡すと、その行がリンクになる。Next.js の Link は as で渡す
使わない場面
- 10 件を超える項目。上位 5〜10 件に絞り、残りは「その他」にまとめるか Table を使う
- 時間の推移。LineChart か ColumnChart を使う
- 凡例が必要な複数系列や、軸を持つ比較。BarChart か ColumnChart を使う
使い方
<BarList
data={[
{ label: "ワイズサーチ", value: 3420 },
{ label: "トークライン", value: 1280 },
]}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | BarListItem[] | なし | データ配列（必須） |
sortOrder | "ascending" | "descending" | "none" | "descending" | ソート順 |
valueFormatter | (value: number) => string | なし | 値のフォーマッタ関数 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- ラベルと値が文字で出ているので、棒の長さが読めなくても内容は伝わる。値を省略しない
- href を付けた行は <a> になり、Tab で移動して Enter で開ける。リンクの意味がラベルだけで伝わる文言にする
- 棒の色を意味づけに使うときは、色だけに頼らずラベルにも書く
文言
- ラベルは短く（半角 20 文字程度まで）。長いとバーの上で折り返す
- valueFormatter か displayValue で単位を付ける（「1,240 件」「12.4%」）