ヒートマップHeatmapChartExperimental

曜日・時間・コホートの密集度を示すヒートマップです。

プレビュー

データ

対象: 木 12:00

状態とバリエーション

標準表示

セルの濃淡だけで密度の山を読む、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 に対応するセル値です。
xLabelsstring[]-曜日などの列ラベルです。
yLabelsstring[]-時間帯などの行ラベルです。
summary{ x: string; value: number; color?: ChartColor; description?: ReactNode }[]-日別ピークなど、ヒートマップ上部に表示する任意の列サマリーです。
variant"compact" | "default""default"セル密度を切り替える生成済みデザインバリアントです。
maxnumber-セル濃度を正規化する明示的な最大値です。
summaryMaxnumber-サマリーバーの高さを正規化する明示的な最大値です。
showValuesbooleanfalseセル内にフォーマット済みの値を表示します。
showSummaryValuesbooleantrueサマリーバーの上にフォーマット済みの値を表示します。
selectedCell{ x: string; y: string }-確認中または編集中のセルを強調します。
onCellSelect(cell, selection) => void-ヒートマップセルが選択されたときに呼ばれます。

使い方

import { HeatmapChart } from "@gunjo/ui";

const days = ["月", "火", "水", "木", "金", "土", "日"];
const times = ["00", "04", "08", "12", "16", "20"];
const data = times.flatMap((y, row) =>
    days.map((x, column) => ({
        x,
        y,
        value: Math.min(100, 30 + row * 8 + column * 4),
    }))
);

const summary = days.map((x) => ({
    x,
    value: Math.max(...data.filter((cell) => cell.x === x).map((cell) => cell.value)),
}));

export function HeatmapChartUsage() {
    return (
        <div className="grid gap-8">
            <HeatmapChart data={data} xLabels={days} yLabels={times} />
            <HeatmapChart
                data={data}
                xLabels={days}
                yLabels={times}
                summary={summary}
            />
            <HeatmapChart data={data} xLabels={days} yLabels={times} showValues />
            <HeatmapChart
                data={data}
                xLabels={days}
                yLabels={times}
                selectedCell={{ x: "木", y: "12" }}
            />
            <HeatmapChart
                data={data}
                xLabels={days}
                yLabels={times}
                variant="compact"
            />
        </div>
    );
}

設計の判断

  • 濃淡は連続で、値は必ず文字でも持たせます。セルは1色の不透明度を 0.1 から 1.0 まで動かして塗ります。段には切っていません。資料は5段から7段に切ることを薦めているので、そのぶん GUNJO は、すべてのセルに「列 行: 値」という読み上げ名を持たせました。showValues を on にすると値が画面にも出ます。濃いセルでも読めるように、背景色の下地を敷いた上に載せています。
  • 押せるセルだけが button になります。ただし、すべてのセルにフォーカスできます。onCellSelect を渡したときだけ <button> になり、渡さないときも tabIndex を持つ要素として、値がキーボードで読めるようにしてあります。意味のほとんどが色に載る図なので、止まる場所を増やしてでも値に届くほうを選びました。資料が言うとおり、列の多い格子ではタブの回数が増えます。狭い画面では、行ごとの一覧に組み替えてください。
  • 選択中のセルは、色ではなく輪郭で示します。selectedCell に当たるセルには前景色のリングが付き、aria-current も立ちます。塗りの濃さは値のままなので、選択の合図と値がぶつかりません。max を渡すと正規化の基準がそろうので、ヒートマップを並べて比べるときは同じ値を渡します。なお xLabels・yLabels の組み合わせのうち data に無いマスは 0 として塗られます。「値が無い」と「0」は、いまの HeatmapChart では区別できません。
    UIXHERO: ヒートマップ（Heatmap Chart）

使用コンポーネント

ヒートマップツールチップ

関連コンポーネント

リテンションコホートカード塗り分け地図分析カード統計