Cartão de Gráfico de Radar
Um gráfico de radar no painel de placas - grade de polígono nas fichas de gráfico, título de contagem que segue o eixo pairado, chip delta e pílula de período, e um ponto ativo pulsante em cada série. Um botão alterna entre preenchido, pontilhado, linhas-so, e um layout de pontuação central.
Visitantes
1,424
+5.2%Instalação
Radar 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.
Variantes
variant escolhe o olhar: filled (por omissão), dots, lines para comparação de séries, e score, que imprime o valor de cada eixo ao lado de seu rótulo e os media em um disco central elevado. tiles (como na pré-visualização acima) adiciona um ladrilho stat por eixo sob qualquer um deles e permite que a carta cresça.
{/* Dots on every vertex */}<RadarChartCard variant="dots" />
{/* Outline only - two series and a legend */}<RadarChartCard variant="lines" series={[ { key: "desktop", label: "Desktop" }, { key: "mobile", label: "Mobile" }, ]}/>
{/* Centre score: each axis label carries its value, low ones turn rose */}<RadarChartCard variant="score" alertBelow={30} />Dados
data é uma lista plana de linhas - uma por eixo - chaveada por label, com um campo numérico por série. series nomeia esses campos e, opcionalmente, as suas cores; tudo o mais (teor de radiação, totais, valores das legendas, estados de hover) é derivado. A pílula do período é uma gota- abaixo 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.
const data = [ { label: "January", desktop: 186, mobile: 80 }, { label: "February", desktop: 305, mobile: 200 }, { label: "March", desktop: 237, mobile: 120 }, { label: "April", desktop: 273, mobile: 190 }, { label: "May", desktop: 209, mobile: 130 }, { label: "June", desktop: 214, mobile: 140 },];
<RadarChartCard title="Visitors" data={data} series={[ { key: "desktop", label: "Desktop" }, // palette colour { key: "mobile", label: "Mobile", color: "var(--color-chart-6)" }, // or your own ]} max={320} // optional radius ceiling (defaults to the largest value) headline={1424} // optional resting headline (defaults to the primary total) delta={0.052} // "+5.2%" chip range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / delta / headline.<RadarChartCard title="Visitors" series={[{ key: "desktop", label: "Desktop" }]} ranges={[ { id: "h1", label: "H1 2024", data: h1Data, delta: 0.052 }, { id: "h2", label: "H2 2024", data: h2Data, delta: 0.081 }, { id: "year", label: "2024", data: yearData, delta: 0.067 }, ]} defaultRange="h1" onRangeChange={(id) => track("radar_range", { id })}/>