Gráficos

Visão geral dos gráficos

Quinze gráficos de painel, todos com seletor de período, destaque no hover e número que conta.

Qual gráfico pra qual pergunta

A pergunta	Gráficos
Como evoluiu no tempo?	Área, Linha, Combinado, Receita
Quantos passam de uma etapa pra outra?	Funil, Barras por etapa
O que está no topo?	Lista de barras
Como o total se divide?	Radial, Velocímetro
De onde vem e pra onde vai?	Sankey
Como se comparam em vários eixos?	Radar, Radar comparado
Em que dias acontece mais?	Mapa de calor, Anéis
Uma coisa anda com a outra?	Dispersão

Regras comuns

label é o rótulo pequeno do card. O número grande é calculado: soma, total ou média, conforme o gráfico.
periods é uma lista de {label, delta, ...dados}. Cada item vira uma opção do seletor, e o gráfico reanima do dado antigo pro novo. delta é a variação em %, negativa quando cai.
period escolhe o período que abre. Sem ele, abre o primeiro.
Cor vem de --c1 a --c6, na ordem. Não passe cor nas props.

As três cascas

Todo gráfico mora num card de casca, miolo e azulejo. Três famílias dividem a mesma casca, e isso decide o que o add baixa junto.

Família	Gráficos	Casca	Puxa junto
A	funnel, earnings, stages, area, combo	`u-chart-card`	nada
B	radar, radar-compare, sankey, radial, gauge, heatmap, rings	`u-chartb-card`	`b-shell`
C	line, barlist, scatter	`u-chartc-card`	`a-chartc`

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="funnel" data-u-props='{"label":"Cadastro","stages":[{"label":"Visitou"},{"label":"Criou conta"},{"label":"Assinou"}],"periods":[{"label":"7 dias","delta":6.1,"values":[2340,1310,310]}]}'></div>
  </div>
  <h3 class="u-chart-title">Funil de cadastro</h3>
  <p class="u-chart-desc">Quantas pessoas chegam a cada etapa nos últimos 7 dias.</p>
</article>