kaze風
CategoryBar
構成比を1本の帯で見せるコンポーネント。予算消化やストレージ使用量の内訳、NPS の分布に。
プレビュー
使いどころ
使う場面
- 1 本の帯で、全体の内訳を見せる（予算の使い道、容量の使用状況、達成度の段階）
- marker で、目標や基準の位置を帯の上に示す。値は data と同じ単位で渡す
- DonutChart より細長い場所に収まる。カードの中や表のセルで、構成比を 1 行で見せたいときに使う
使わない場面
- 項目が 6 個を超えるとき。細い区間が読めない。まとめるか BarChart を使う
- 項目どうしの大小を正確に比べること。BarChart を使う
- 1 つの値が上限に対して、どこまで進んだか。Progress か Meter を使う
- 時間の推移。LineChart か ColumnChart を使う
使い方
<CategoryBar
aria-label="ストレージ使用量の内訳"
showPercent
data={[
{ label: "ドキュメント", value: 42 },
{ label: "画像", value: 28 },
]}
formatValue={(v) => `${v} GB`}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
data必須 | CategoryBarItem[] | なし | { label, value, color? } の配列。color 省略時は --chart-* を順に使用 |
marker | CategoryBarMarker | なし | 目標線など。合計に対する位置に表示 |
showLabels | boolean | true | 下に凡例（ラベル + 値）を表示するか |
showPercent | boolean | false | 凡例に % を表示するか |
height | number | 8 | 帯の太さ（px） |
formatValue | (value: number) => string | なし | 値のフォーマット関数 |
aria-label必須 | string | なし | 必須。内訳は非表示テキストで読み上げられる |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- aria-label は必須。role="img" で、内容は「ラベル 値（割合）」の一覧と、marker のラベルと値が読み上げ用に入る。画面上のラベルは aria-hidden で、読み上げの重複を避けている
- showLabels は既定で true。色と項目の対応が文字で出る。showLabels を false にするときは、近くの文章で内訳を伝える
- showPercent を true にすると、割合も読み上げ用の要約に入る。割合が大事なときに付ける
- 区間にマウスを重ねるとラベルと値が出る（title）。キーボードでは出ないので、重要な数字は画面のラベルに出す
文言
- marker の label は「目標」「上限」のように短く。省略すると、読み上げ用に「目標」が使われる