ヒートマップチャートカード
ダッシュボードカードシェルのマトリクスヒートマップ - 曜日×時間、領域×月、2つの軸を持つもの。セルは、ランプが両方のモードでテーマに従い、値によってチャートトラックにアクセントをミックスします。セルリングをホバリングし、行と列ラベルを暗くし、そのセルの値に見出しを交換します。 明白なCSSグリッド、チャートライブラリはありません。
Active users
1,892
+5.2%月
火
水
木
金
土
日
000204060810121416182022最小限もっと詳しく
インストール
ヒートマップチャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
データデータ
rows です。 { label, values[] }[] そして、 columns 値のスロットの名前。行または列とグリッドのリフローを追加します。 色: 色 ランプのアクセントを交換し、 max 飽和した端をピン留めします。 期間のカプセルはあなたが渡るときドロップダウンです ranges - 各範囲は、独自のデータ(オプションで)を運ぶ delta / headline)および選択のチャートの再アニメーション; onRangeChange 代わりにフェッチします。データなしで、カードは3つのデモ範囲を出荷します。これは、上記のプレビューが使用しているものです。
// One entry per row; values line up with `columns`.const columns = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];const rows = [ { label: "EMEA", values: [42, 48, 55, 61, 70, 74] }, { label: "AMER", values: [38, 40, 47, 52, 58, 66] }, { label: "APAC", values: [21, 25, 29, 36, 41, 49] }, { label: "LATAM", values: [12, 14, 15, 19, 24, 27] },];
<HeatmapChartCard title="Revenue by region" columns={columns} color="var(--color-chart-7)" // ramp accent; defaults to chart-6 blue max={80} // fully saturated cell; defaults to the largest value ranges={[ // period dropdown - each range overrides rows / columns / max / delta { id: "h1", label: "H1 2024", rows: h1Rows, delta: 0.118 }, { id: "h2", label: "H2 2024", rows: h2Rows, delta: 0.064 }, ]}/>
// Or a static pill: rows={rows} range="H1 2024"