Cartão de Gráfico do Funil
Um funil de fluxo horizontal no shell da placa do painel. Cada estágio é uma coluna com o tamanho da sua parte superior do funil que liga no próximo, com uma pílula de porcentagem centrada e um rodapé de valor/ nome; pairando sobre um palco, eleva- o ao escurecer o resto e troca o título. O funil do rechart é uma pilha trapezóide vertical, de modo que este é desenhado à mão a partir das mesmas fichas. Para a versão da lista, veja o Cartão de Barras de Estágios.
Sign-up funnel
197
+5.2%Instalação
Funnel 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.
Formas e monofilamentos
shape="sharp" troca o aparador e as bordas em camadas por trapezóides simples, e mono pinta cada estágio na cor do texto - preto na luz, branco na escuridão - para um cartão de um único pingo. Eles combinam.
{/* Straight-edged trapezoids, no edge layers */}<FunnelChartCard shape="sharp" title="Hiring" ranges={HIRING_RANGES} />
{/* Single ink: mid grey on light, near-white on dark */}<FunnelChartCard mono title="Checkout" ranges={CHECKOUT_RANGES} />
{/* Both */}<FunnelChartCard mono shape="sharp" title="Hiring" ranges={HIRING_RANGES} />Dados
stages é um apartamento { label, value, color? } lista, primeiro no topo do funil. Adicione um estágio e ele obtém uma coluna - larguras, pescoços, porcentagens, e o rodapé são todos derivados. As cores ciclam a paleta do gráfico, a menos que seja anulada. 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 stage, top of the funnel first.const stages = [ { label: "Link opened", value: 197 }, { label: "Started", value: 110 }, { label: "Completed", value: 77 }, { label: "Converted", value: 38, color: "var(--color-chart-3)" }, // override any colour];
<FunnelChartCard title="Sign-up funnel" stages={stages} headline={197} // optional resting headline (defaults to the first stage) delta={0.052} // "+5.2%" chip range="Last 30 days" // static pill…/>
// …or a working period dropdown: each range overrides stages / delta / headline.<FunnelChartCard title="Checkout funnel" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: -0.018 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.042 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: 0.097 }, ]}/>