Cartão de barras de palco
O funil como uma lista - uma pílula arredondada por estágio sobre a faixa do gráfico, nome à esquerda, valor e parte do estágio superior à direita. Larguras animam na montagem, pairando sobre um palco escurece sua pílula e desvanece o resto, e o título segue. Toma as mesmas etapas que o cartão de gráfico Funnel.
Pipeline
1,180
+2.4%Instalação
Stage Bars Card faz parte do 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.
Mono
mono gotas de tons por estágio para uma única tinta - cinza médio na luz, quase-branco no escuro - funil do estágio mono da referência.
{/* Single ink: every pill in one grey (mid grey on light, near-white on dark) */}<StageBarsCard mono />Dados
stages é um apartamento { label, value, color? } lista, primeiro no topo do funil. Adicione um palco e ele recebe uma linha e uma peça (três peças por linha, a carta cresce para caber); os tamanhos das colunas de etiquetas para o nome mais longo, as partilhas são derivadas da primeira fase. Cada fase pode carregar um 14px ícone desenhado na extremidade esquerda dentro de sua barra - showIcons={false} A pílula menstrual é uma gota 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.
import { RiEyeLine, RiUserAddLine } from "@remixicon/react";
// One entry per stage, top of the funnel first - the same shape FunnelChartCard// takes, plus an optional 14px icon drawn at the left end inside the bar.const stages = [ { label: "Visits", value: 4820, icon: <RiEyeLine className="size-3.5 text-neutral-950" /> }, { label: "Sign-up", value: 3260, icon: <RiUserAddLine className="size-3.5 text-neutral-950" /> }, { label: "Active", value: 2010 }, { label: "Pro", value: 1160 }, { label: "Team", value: 540 }, { label: "Enterprise", value: 180, color: "var(--color-chart-1)" }, // override any colour];
<StageBarsCard title="Pipeline" stages={stages} headline={4820} // optional resting headline (defaults to the first stage) delta={0.024} // "+2.4%" chip range="Last 30 days" // static pill… showIcons // default; false hides the icons without removing them from the data/>
// …or a working period dropdown: each range overrides stages / delta / headline.<StageBarsCard title="Pipeline" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: 0.024 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.061 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: -0.012 }, ]}/>