kaze風
Heatmap
2次元の密度を単一色相の濃淡で見せるヒートマップ。曜日×時間帯などの行×列（matrix）と、日別カレンダー（calendar）に対応。
プレビュー
最大値 62（水 15）
91011121314151617月火水木金
最大値 16（2026-09-18）
5月6月7月8月9月10月月水金
使いどころ
使う場面
- 時間帯と曜日など、2 つの軸が交わる場所の濃淡から、集中している所を見つける（matrix）
- 日ごとの活動量を、1 年などの長い期間で見せる（calendar。コミット数、ログイン回数）
- 値の違いは 1 色の濃淡で表す。levels（既定 5 段階）と max で、濃さの基準をそろえる
使わない場面
- 正確な数値を読ませること。濃淡の差は数値ほど細かく読めない。Table を使う
- 5 行以下・5 列以下の小さな比較。BarChart か Table を使う
- 値の正負や、基準との差を見せること。濃淡は 1 方向（少ないから多い）にしか使えない
- 意味の違うカテゴリを色で分けること。1 色の濃淡で、値の大きさだけを表す
使い方
<Heatmap
aria-label="曜日と時間帯別のアクセス数"
rows={["月", "火", "水"]}
columns={["9", "10", "11"]}
values={[
[12, 30, 48],
[8, 25, 44],
[10, 28, 50],
]}
/>
<Heatmap
variant="calendar"
aria-label="直近 6 か月のアクティビティ"
data={[{ date: "2026-10-01", value: 5 }]}
startDate="2026-05-01"
endDate="2026-10-29"
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
variant | "matrix" | "calendar" | "matrix" | 行×列か、日別カレンダーか |
rows | string[] | なし | matrix: 行ラベル |
columns | string[] | なし | matrix: 列ラベル |
values | (number | null)[][] | なし | matrix: values[行][列]。null はデータなし |
data | HeatmapDatum[] | なし | calendar: 日別の値（date は YYYY-MM-DD。同日は合計） |
startDate | string | なし | calendar のときの開始日（YYYY-MM-DD）。未指定なら data の最初の日 |
endDate | string | なし | calendar のときの終了日（YYYY-MM-DD）。未指定なら data の最後の日 |
weekStartsOn | 0 | 1 | 1 | calendar: 週の開始曜日（0 = 日曜, 1 = 月曜） |
color | string | "var(--chart-1)" | 濃淡のベース色 |
levels | number | 5 | 濃淡の段階数 |
max | number | なし | 最も濃くなる値（省略時はデータの最大値） |
cellSize | number | 16 | セルの一辺（px） |
gap | number | 3 | セル間の余白（px） |
showLegend | boolean | true | 「少 … 多」の凡例 |
formatValue | (value: number) => string | なし | ツールチップの値のフォーマット関数 |
formatTooltip | (cell: HeatmapCell) => string | なし | ツールチップ全文の差し替え |
aria-label必須 | string | なし | アクセシビリティ用ラベル（必須） |
startDate / endDate | string | なし | calendar: 表示範囲（省略時はデータの範囲） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- aria-label は必須。「過去 1 年のコミット数」のように書く。ヒートマップは role="img" で、中のセルは読み上げられない
- 最大値とその場所（「最大値 42（2026-03-12）」）が、aria-describedby で読み上げ用に付く。ほかのセルの値は伝わらない
- セルの値は、マウスを重ねたときのツールチップでしか見られない。キーボードでは操作できない。重要な数字は、近くの文章や Table でも伝える
- 「少 ... 多」の凡例は装飾（aria-hidden）。濃淡の意味は、aria-label か周囲の文で説明する
文言
- formatValue で単位を付ける（「42 件」）。tooltip の文言を変えるときは formatTooltip を使う