ヒートマップHeatmapChartExperimental
曜日・時間・コホートの密集度を示すヒートマップです。
プレビュー
状態とバリエーション
標準表示
セルの濃淡だけで密度の山を読む、SSOT 登録済みの標準バリエーションです。
月火水木金土日000408121620
列サマリー付き
各列のピーク値を上部のバーで示し、セルの密度と合わせて比較します。
ピーク698079908910099
月火水木金土日000408121620
値表示
セル内に値を表示し、濃淡だけでは読み取りにくい差分を補足します。
月火水木金土日0024%35%34%45%44%55%54%0433%44%43%54%53%64%63%0842%53%52%63%62%73%72%1251%62%61%72%71%82%81%1660%71%70%81%80%91%90%2069%80%79%90%89%100%99%
選択セル
確認中または編集中のセルをリングで強調し、クリック選択できる状態です。
ピーク698079908910099
月火水木金土日0024353445445554043344435453646308425352636273721251626172718281166071708180919020698079908910099
コンパクト
狭いカードやサイドパネル向けにセルの高さを抑える、SSOT 登録済みバリエーションです。
月火水木金土日000408121620
別カラー
同じ密度表現を、文脈に合わせたチャートカラーで表示する状態です。
ピーク698079908910099
月火水木金土日000408121620
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| data | { x: string; y: string; value: number; color?: ChartColor }[] | - | xLabels と yLabels に対応するセル値です。 |
| xLabels | string[] | - | 曜日などの列ラベルです。 |
| yLabels | string[] | - | 時間帯などの行ラベルです。 |
| summary | { x: string; value: number; color?: ChartColor; description?: ReactNode }[] | - | 日別ピークなど、ヒートマップ上部に表示する任意の列サマリーです。 |
| variant | "compact" | "default" | "default" | セル密度を切り替える生成済みデザインバリアントです。 |
| max | number | - | セル濃度を正規化する明示的な最大値です。 |
| summaryMax | number | - | サマリーバーの高さを正規化する明示的な最大値です。 |
| showValues | boolean | false | セル内にフォーマット済みの値を表示します。 |
| showSummaryValues | boolean | true | サマリーバーの上にフォーマット済みの値を表示します。 |
| selectedCell | { x: string; y: string } | - | 確認中または編集中のセルを強調します。 |
| onCellSelect | (cell, selection) => void | - | ヒートマップセルが選択されたときに呼ばれます。 |
使い方
Loading...