Cartão de Gráfico Sankey

Um fluxo de Sankey no shell da placa do painel. Recharts mostra os nós e links; a carta desenha os nós da pílula nos tokens do gráfico, pinta cada fita com a cor da sua fonte para que os fluxos de cada origem sejam lidos como uma única família, etiqueta as fontes com nome e valor à esquerda e afunda com a sua partilha à direita, e isola o que quer que você passe - nó ou ligação - enquanto o título se segue.

Tracked time

86h

Tracked timeShare of tracked time

Instalação

A Sankey Chart Card faz parte da BoardUI Pro.

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

Acesso pro pro

Cartão de Gráfico Sankey é um Pró componente.

Sua licença BoardUI Pro desbloqueia isso componente e todos os seus arquivos fonte. Ative sua licença uma vez, em seguida, instalá-lo diretamente em seu projeto com o CLI.

Ativar a sua licença

Use a chave do seu email de compra Lemon Squeezy. Você só precisa fazer isso uma vez por máquina.

npx boardui@latest login YOUR_LICENSE_KEY

Instalar o componente

O CLI copia a fonte e resolve todas as dependências do BoardUI e do npm para você.

npx boardui@latest add sankey-chart-card

Isto componente está incluído no BoardUI Pro

Obter BoardUI Pro agora e instalá-lo termina fora.

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

nodes é um { name, color? } lista e links é { source, target, value }, referenciando nós pelo nome ou índice. Os valores do nó, o total do título, as partilhas do dissipador e as relações de hover são todas derivadas dos links. 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.

// Sources carry the colour - every ribbon leaving a node takes that node's// colour (linkColor="source", the default) - and sinks stay "neutral" so the// ribbons paint them. Nodes without a colour cycle the palette by index.const nodes = [  { name: "Focus", color: "var(--color-chart-7)" },  { name: "Meetings", color: "var(--color-chart-5)" },  { name: "Browsing", color: "neutral" },  { name: "Writing", color: "neutral" },  { name: "Email", color: "neutral" },];
// Links reference nodes by name (or index). Add a node + link and the// layout rebalances; the right-hand percentages are shares of all sinks.const links = [  { source: "Focus", target: "Browsing", value: 16.2 },  { source: "Focus", target: "Writing", value: 11.6 },  { source: "Focus", target: "Email", value: 3.4 },  { source: "Meetings", target: "Email", value: 1.2 },];
<SankeyChartCard  title="Tracked time"  nodes={nodes}  links={links}  format={(n) => `${n}h`}   // headline + source labels  range="This week"        // static pill…  axisLabels={["Tracked time", "Share of tracked time"]}/>
// …or a working period dropdown: each range overrides links (and nodes / delta / headline).<SankeyChartCard  nodes={nodes}  ranges={[    { id: "this-week", label: "This week", links: thisWeek },    { id: "last-week", label: "Last week", links: lastWeek },    { id: "this-month", label: "This month", links: thisMonth },  ]}/>