# Streamgraph

Gráfico de várias partes no tempo em sete estilos: fluxo, empilhado, 100%, cristas, linhas, barras e centrado, com camadas que ligam e desligam.

- Nome no registry: `streamgraph`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/streamgraph
- Categorias: conteudo, grafico, dados, serie-temporal, camadas, dashboard

## Quando usar

- Use quando: Mostrar como a mistura de várias categorias muda no tempo, em dashboard ou relatório
- Evite quando: Ritmo diário de uma atividade: activity-heatmap; valor único de cota, gauge

## Instalar

```bash
npx shadcn@latest add @visant/streamgraph
```

## Usar

```tsx
<Streamgraph
  height={200}
  categoryLabel="Semana"
  label="Pedidos de suporte por assunto"
  unit="pedidos"
/>
```

## API

### Streamgraph

- `data: StreamgraphDatum[]`
- `label: string` — O que se mede, como "Tíquetes por assunto". Nomeia o gráfico.
- `series: StreamgraphSeries[]` — Camadas do centro pra fora: a primeira corre no meio, as outras alternam acima e abaixo.
- `categoryLabel?: string = "Data"` — Cabeçalho da primeira coluna da tabela do leitor de tela.
- `className?: string`
- `defaultHiddenSeries?: string[]`
- `directLabels?: boolean = true` — Escreve o nome de cada camada no trecho mais grosso dela, quando cabe.
- `emptyLabel?: string = "Sem dados neste período"`
- `formatValue?: (value: number, series: StreamgraphSeries) => string`
- `height?: number = 260` — Altura do gráfico em px. A largura segue o contêiner.
- `hiddenSeries?: string[]` — Camadas escondidas, controlado.
- `legend?: boolean = true` — Mostra a legenda que liga e desliga camadas.
- `offset?: "wiggle" | "silhouette" | "zero" | "expand" | "ridge" = "wiggle"` — "wiggle" flui, "silhouette" centra, "zero" empilha, "expand" mostra em 100%, "ridge" dá uma base a cada camada.
- `onHiddenSeriesChange?: (hidden: string[]) => void`
- `shape?: "area" | "line" | "bar" = "area"` — "area" pinta as camadas, "line" desenha só a linha de cada uma, "bar" empilha em colunas.
- `unit?: string = ""` — Unidade depois de cada valor, como "tíquetes".