Gráficos B

Sankey

Fluxo de fontes para destinos, com a espessura proporcional ao volume.

data-u="sankey"Família B

Exemplo

Gráfico de Sankey

Fluxos coloridos pela fonte, do trabalho às entregas. Passe o mouse sobre uma fonte ou destino para isolar os fluxos dele.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="sankey" data-u-props="{&quot;label&quot;:&quot;Horas da equipe&quot;,&quot;unit&quot;:&quot;&quot;,&quot;sources&quot;:[&quot;Produto&quot;,&quot;Suporte&quot;,&quot;Vendas&quot;,&quot;Infra&quot;,&quot;Estudo&quot;],&quot;dests&quot;:[&quot;Código&quot;,&quot;Clientes&quot;,&quot;Reuniões&quot;,&quot;Docs&quot;,&quot;Revisão&quot;,&quot;Outros&quot;],&quot;footL&quot;:&quot;Horas registradas&quot;,&quot;footR&quot;:&quot;Parcela das horas&quot;,&quot;periods&quot;:[{&quot;label&quot;:&quot;Esta semana&quot;,&quot;matrix&quot;:[[22,0,6,6,8,2],[2,12,3,3,2,2],[0,12,6,1,0,1],[10,1,2,1,3,1],[5,0,0,6,1,2]]},{&quot;label&quot;:&quot;Semana passada&quot;,&quot;matrix&quot;:[[20,0,7,5,7,3],[3,10,4,2,2,3],[0,10,7,1,0,2],[9,1,3,1,2,1],[4,0,0,7,1,2]]},{&quot;label&quot;:&quot;Este mês&quot;,&quot;matrix&quot;:[[90,0,24,26,30,8],[8,48,12,12,8,8],[0,50,24,4,0,4],[40,4,8,4,12,4],[20,0,0,24,4,8]]}]}"></div>
  <div class="u-chartb-copy">
    <h3>Gráfico de Sankey</h3>
    <p>Fluxos coloridos pela fonte, do trabalho às entregas. Passe o mouse sobre uma fonte ou destino para isolar os fluxos dele.</p>
  </div>
</article>

Instalação

Só este gráfico, com o core e os tokens:

curl -fsSL unslop.leallabs.dev/i | sh -s add sankey

Dependência Puxa junto b-shell (casca dos gráficos B). O instalador baixa e já põe na ordem certa.

O card completo do exemplo, em HTML pronto pra colar:

curl -fsSL unslop.leallabs.dev/i | sh -s add chart-sankey

Família B: casca u-chartb-card > o data-u com a classe u-chartb-panel, e depois div.u-chartb-copy com h3 e p.

Props

Vão em data-u-props, como JSON. Cada item de periods vira uma opção do seletor e o gráfico reanima do dado antigo pro novo.

Prop	Tipo	Padrão	O que faz
`label`	string	sem padrão	Rótulo pequeno no topo do card.
`unit`	string	h	Sufixo dos valores.
`sources`	array	sem padrão	Nomes das fontes (linhas da matriz).
`dests`	array	sem padrão	Nomes dos destinos (colunas da matriz).
`footL`	string	sem padrão	Rótulo do azulejo da esquerda.
`footR`	string	sem padrão	Rótulo do azulejo da direita.
`periods`	array	sem padrão	Lista de `{label, matrix}`. matrix`[fonte][destino]`.
`period`	number	0	Índice do período que abre selecionado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
svg do gráfico	`role="img"` e `aria-label`	`"Rótulo: fluxo de fontes para destinos"`.
lista de períodos	`role="listbox"`, `role="option"`	Abre com `aria-expanded` e marca a opção em `aria-selected`.

Teclado

Tecla	Faz
Enter ou Espaço	abre a lista de períodos
Seta para cima e para baixo	anda pelas opções
Esc	fecha sem trocar
Tab	fecha e segue o foco

Eventos e API

Nenhum evento público. A troca de período acontece dentro do card.