Cartão de Gráfico de Mapas Heatmap
Um mapa de calor da matriz na placa do painel - dia da semana × hora, região × mês, qualquer coisa com dois eixos. As células misturam o acento na faixa do gráfico por valor, de modo que a rampa segue o tema em ambos os modos; pairando numa célula toca- lhe, escurece as suas legendas de linha e coluna, e troca o título pelo valor dessa célula. Grade CSS simples, sem biblioteca de gráficos.
Active users
1,892
+5.2%Instalação
Heatmap Chart Card faz parte da BoardUI Pro.
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Dados
rows é { label, values[] }[] e columns nomeia os slots de valor. Adicione uma linha ou uma coluna e os fluxos de rede; cor troca o sotaque da rampa e max alfineta a extremidade saturada. A pílula do período é um dropdown quando você passa ranges - cada faixa carrega seus próprios dados (e opcionalmente delta / headline) e o gráfico re-anima na seleção; onRangeChange permite- lhe obter em vez disso. Sem suportes de dados, o cartão envia três intervalos de demonstração, que é o que as antevisões acima usam.
// 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"