# Gráficos do unslop/ui

15 gráficos, todos `data-u="<nome>"` + `data-u-props='<JSON>'`. Os JSON abaixo são o mínimo que monta
sem erro (conferido contra o JS). Os blocos completos, com dados reais de demo, estão em
`ds/blocks/chart-<nome>.html` (`sh -s add chart-<nome>`).

## Regras comuns

- Quase todos têm `periods`: lista de `{label, delta, ...dados}`. O card ganha o seletor de período e o
  gráfico reanima do dado antigo para o novo. `period` (índice inicial) é opcional. `delta` é % (número, negativo cai).
- `label` é o rótulo pequeno do card; o número grande é calculado (soma, total ou média, conforme o gráfico).
- Escolha o gráfico pela pergunta: evolução no tempo (area, line, combo, earnings), etapas (funnel, stages),
  ranking (barlist), partes de um total (radial, gauge), fluxo (sankey), comparar séries em eixos (radar,
  radar-compare), calendário/intensidade (heatmap, rings), correlação (scatter).
- Cores vêm de `--c1..--c6` por ordem. Não passe cor nenhuma nas props.
- Dados: números plausíveis, com unidade e período. O total do card tem que bater com os azulejos.

## Casca (3 famílias, escolha a classe pela família)

| Família | Gráficos | Casca | Arquivos |
|---|---|---|---|
| A | funnel, earnings, stages, area, combo | `u-chart-card` > `u-chart-panel` > `[data-u]`; depois `h3.u-chart-title` e `p.u-chart-desc` | cada um é autossuficiente |
| B | radar, radar-compare, sankey, radial, gauge, heatmap, rings | `u-chartb-card` > `[data-u]` com classe `u-chartb-panel`; depois `div.u-chartb-copy` com `h3` e `p` | dependem de `b-shell.js` e `b-shell.css` |
| C | line, barlist, scatter | `u-chartc-card` > `u-chartc-panel` > `[data-u]`; depois `h3.u-chartc-title` e `p.u-chartc-desc` | dependem de `a-chartc.js` e `a-chartc.css` |

O `install.sh add <gráfico>` já baixa a dependência (b-shell ou a-chartc) e imprime os `<link>` e `<script>` na ordem certa.

Exemplo de card completo (família A):

```html
<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>
```

## Família A

### funnel
Props: `label`, `curve` (padrão `true`, `false` dá cortes retos), `stages:[{label}]`, `periods:[{label,delta,values}]` (um valor por etapa).
```html
<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]},{"label":"30 dias","delta":3.4,"values":[9870,5240,1290]}]}'></div>
```

### earnings
Props: `label`, `ticks` (opcional, padrão `[0,3000,5000,10000]`, o último é o teto), `periods:[{label,total,delta,labels,values}]`. Todos os períodos têm o mesmo número de barras.
```html
<div data-u="earnings" data-u-props='{"label":"Receita no ano","ticks":[0,3000,5000,10000],"periods":[{"label":"Semanal","total":18900,"delta":11.3,"labels":["S1","S2","S3","S4"],"values":[3400,4700,6900,3900]}]}'></div>
```

### stages
Props: `label`, `stages:[{label,icon}]`, `periods:[{label,delta,values}]`. `icon` aceito: `eye`, `user-plus`, `bolt`, `crown`, `users`, `building` (outro valor cai em `eye`).
```html
<div data-u="stages" data-u-props='{"label":"Pipeline de vendas","stages":[{"label":"Lead","icon":"eye"},{"label":"Proposta","icon":"bolt"},{"label":"Fechado","icon":"users"}],"periods":[{"label":"30 dias","delta":5.6,"values":[4120,1730,540]}]}'></div>
```

### area
Props: `label`, `series:[{label}]`, `periods:[{label,delta,labels,data}]`. `data` é um array por série, cada um com um valor por rótulo. Empilhada.
```html
<div data-u="area" data-u-props='{"label":"Visitas","series":[{"label":"Busca"},{"label":"Indicação"}],"periods":[{"label":"Este ano","delta":7.4,"labels":["Jan","Fev","Mar","Abr"],"data":[[2160,2260,2450,2410],[1200,1250,1350,1300]]}]}'></div>
```

### combo
Props: `label`, `bars:{label}`, `line:{label}` (linha em %), `periods:[{label,delta,labels,bars,line}]`.
```html
<div data-u="combo" data-u-props='{"label":"Pedidos","bars":{"label":"Pedidos"},"line":{"label":"Conversão"},"periods":[{"label":"Este ano","delta":9.4,"labels":["Jan","Fev","Mar","Abr"],"bars":[1220,1290,1380,1350],"line":[3.5,3.7,3.9,3.8]}]}'></div>
```

## Família B

### radar
Props: `label`, `axes` (nomes), `short` (abreviações, opcional), `max` (opcional), `periods:[{label,values,delta}]`.
```html
<div class="u-chartb-panel" data-u="radar" data-u-props='{"label":"Usuários ativos","axes":["Janeiro","Fevereiro","Março","Abril","Maio","Junho"],"short":["Jan","Fev","Mar","Abr","Mai","Jun"],"max":450,"periods":[{"label":"1º semestre","delta":4.8,"values":[310,402,365,371,338,394]}]}'></div>
```

### radar-compare
Props: `label`, `axes`, `short`, `max`, `periods:[{label,delta,series:[{name,values}]}]` (duas séries).
```html
<div class="u-chartb-panel" data-u="radar-compare" data-u-props='{"label":"Sessões","axes":["Janeiro","Fevereiro","Março","Abril","Maio","Junho"],"short":["Jan","Fev","Mar","Abr","Mai","Jun"],"max":300,"periods":[{"label":"1º semestre","delta":4.8,"series":[{"name":"Web","values":[210,255,238,230,196,221]},{"name":"App","values":[120,147,127,141,142,153]}]}]}'></div>
```

### sankey
Props: `label`, `unit` (sufixo, padrão `h`), `sources`, `dests`, `footL`, `footR`, `periods:[{label,matrix}]`. `matrix[fonte][destino]`: linhas = `sources`, colunas = `dests`.
```html
<div class="u-chartb-panel" data-u="sankey" data-u-props='{"label":"Horas da equipe","sources":["Produto","Suporte"],"dests":["Código","Clientes","Reuniões"],"footL":"Horas registradas","footR":"Parcela das horas","periods":[{"label":"Esta semana","matrix":[[22,0,6],[2,12,3]]}]}'></div>
```

### radial
Props: `label`, `periods:[{label,delta,items:[{name,value}]}]` (mesmos itens em todos os períodos).
```html
<div class="u-chartb-panel" data-u="radial" data-u-props='{"label":"Canais","periods":[{"label":"7 dias","delta":3.2,"items":[{"name":"Busca","value":640},{"name":"Direto","value":480},{"name":"Social","value":410}]}]}'></div>
```

### gauge
Mesmo formato do radial (meia-volta de segmentos).
```html
<div class="u-chartb-panel" data-u="gauge" data-u-props='{"label":"Tráfego por dispositivo","periods":[{"label":"7 dias","delta":3.4,"items":[{"name":"Desktop","value":1560},{"name":"Celular","value":900},{"name":"Tablet","value":330}]}]}'></div>
```

### heatmap
Props: `label`, `noun` (padrão "contribuições"), `tabs` (padrão `["Semanal","Mensal","Anual"]`), `activity` (título da barra), `periods:[{label,total,delta,seed,stats:[{v,l}]}]`. As células são geradas a partir de `seed` (determinístico): é padrão visual, não dado real por dia. Todos os períodos precisam do mesmo número de `stats`.
```html
<div class="u-chartb-panel" data-u="heatmap" data-u-props='{"label":"Commits neste ano","noun":"commits","periods":[{"label":"Este ano","total":1312,"delta":9.2,"seed":7,"stats":[{"v":"41 dias","l":"Maior sequência"},{"v":"28","l":"Commits no melhor dia"}]}]}'></div>
```

### rings
Duas variantes por `variant`.
Atividade (3 anéis): `rings` (3 nomes), `periods:[{label,pct,text}]`, `pct` de 0 a 1.
```html
<div class="u-chartb-panel" data-u="rings" data-u-props='{"variant":"activity","label":"Metas do dia","rings":["Foco","Entregas","Revisões"],"periods":[{"label":"Hoje","pct":[0.72,0.78,0.8],"text":["4h 20m","7 de 9","12 de 15"]}]}'></div>
```
Calendário (mini anéis por dia): `unit`, `hoverUnit`, `month` (índice inicial, padrão o último), `months:[{label,days,start,total,seed}]`. `start` = dia da semana do dia 1 (0 = domingo).
```html
<div class="u-chartb-panel" data-u="rings" data-u-props='{"variant":"calendar","label":"Dias mais produtivos","unit":"entregas no mês","hoverUnit":"entregas","month":0,"months":[{"label":"Junho","days":30,"start":1,"total":184,"seed":3}]}'></div>
```

## Família C

### line
Props: `label`, `unit` (sufixo, ex. `ms`), `series:[{label}]`, `periods:[{label,delta,labels,data}]`. Períodos podem ter quantidades diferentes de pontos. Para `unit` de latência o delta negativo é bom (o gráfico já trata).
```html
<div data-u="line" data-u-props='{"label":"Tempo de resposta","unit":"ms","series":[{"label":"p50"},{"label":"p95"}],"periods":[{"label":"7 dias","delta":-3.1,"labels":["Seg","Ter","Qua","Qui"],"data":[[188,181,176,184],[520,498,471,505]]}]}'></div>
```

### barlist
Props: `label`, `periods:[{label,delta,total,items:[{label,value}],stats:[{label,value}]}]`. `stats` são os azulejos (valor já formatado, texto).
```html
<div data-u="barlist" data-u-props='{"label":"Visualizações","periods":[{"label":"Hoje","delta":4.3,"total":4010,"items":[{"label":"/precos","value":1820},{"label":"/docs","value":1310},{"label":"/blog","value":880}],"stats":[{"label":"Visitantes únicos","value":"3.912"},{"label":"Rejeição","value":"38,2%"}]}]}'></div>
```

### scatter
Props: `label`, `unit` (padrão `h`), `xmax` (padrão 48), `categories:[{label}]`, `periods:[{label,delta,data}]`. `data[categoria]` = lista de `[x,y]`; y fixo de 1 a 5, x de 0 a `xmax`.
```html
<div data-u="scatter" data-u-props='{"label":"Tickets resolvidos","unit":"h","categories":[{"label":"Cobrança"},{"label":"Bug"}],"periods":[{"label":"Esta semana","delta":6.8,"data":[[[10,4.2],[5.7,3.8],[7.2,3.6]],[[19.5,3.2],[10.5,3.5],[17.2,3.1]]]}]}'></div>
```