Charts

O componente chart no Nerdify permite criar gráficos interativos, dinâmicos e responsivos integrados diretamente com os dados de um report. Por baixo dos panos, ele utiliza o Chart.js com suporte a extensões como gráficos geográficos (GeoJSON).

💡 Os charts funcionam como qualquer outro component do Nerdify: podem ser estilizados, ocultados por condição, renderizados em diferentes tamanhos e integrados a outras estruturas como report, fieldset e list.

🎛️ Estrutura básica

chart :nome_do_grafico, type: :bar, resources: :dados_grafico, size: 12

Atributo	Tipo	Descrição
`type:`	`Symbol`	Tipo do gráfico (ex: `:bar`, `:line`, `:pie`, `:doughnut`, `:geo`, etc.)
`resources:`	`Symbol`	Nome do `resource` que contém os dados (gerado por um `report`)
`size:`	`Integer`	Tamanho da largura do gráfico (1 a 12 colunas)
`labels:`	`Array`	Rótulos fixos para o eixo X
`dynamic_labels:`	`Symbol`	Campo que deve ser usado como label dinâmico por item (ex: `:categoria`)
`series:`	`Array`	Define quais séries exibir, com nome, cor e campo a ser usado
`styles:`	`Hash`	Estilo visual, como altura, cores, bordas, margens, etc.

📊 Tipos de gráfico suportados

Tipo (`type:`)	Descrição
`:bar`	Gráfico de barras
`:line`	Gráfico de linhas
`:pie`	Gráfico de pizza (1 série)
`:doughnut`	Gráfico de rosca (1 série)
`:radar`	Gráfico de radar
`:polarArea`	Gráfico de área polar
`:geo`	Gráfico geográfico com GeoJSON

🧱 Exemplo básico

chart :grafico_despesas, type: :doughnut, resources: :dados_despesa, size: 12, styles: {
  fixed_height: "400px",
  align: { body: "center" }
}

🧩 Com séries múltiplas

Gráficos como o de barra, linha e outros podem conter múltiplas séries de dados, representando agrupamentos ou comparações.

chart :grafico_com_series, type: :bar, resources: :dados_series, size: 12,
  dynamic_labels: :categoria,
  series: [
    { label: "Janeiro", name: :column_name, backgroundColor: "#62AC63" },
    { label: "Fevereiro", name: :column_name, backgroundColor: "#E27572" }
  ]

Atributo	Descrição
`label:`	Nome exibido na legenda
`name:`	Campo do resource usado para o valor da série
`backgroundColor:`	Cor da série no gráfico
`tension:`	Para deixar os elementos, como curvas das linhas, mais suaves
`type:`	você pode definir um tipo específico para a série, independente do tipo do gráfico

✅ Você pode usar stack: "grupo" dentro da série para agrupar visualmente os dados empilhados por grupo comum.

🧠 Labels dinâmicos x estáticos

labels: → define os rótulos fixos no eixo X (ex: ["jan", "fev", "mar"])
dynamic_labels: → usa um campo do resource para montar os rótulos dinamicamente por linha (ex: :mes, :categoria)

🌍 Gráficos geográficos com GeoJSON

O Nerdify suporta gráficos geográficos (mapas com estados ou regiões) por meio de plugins Chart.js com suporte a GeoJSON.

Exemplo de gráfico geo:

chart :mapa_vendas, type: :geo, resources: :dados_mapa, dynamic_labels: :estado,
  series: [
    { label: "Vendas", name: :valor, backgroundColor: "#62AC63" }
  ],
  geojson: "/path/to/brazil-states.json",
  styles: { fixed_height: "500px" }

Atributo	Descrição
`geojson:`	Caminho do arquivo `.json` com os dados geográficos
`dynamic_labels:`	Campo do resource que mapeia o nome da região (ex: `SP`, `BA`)
`series:`	Campo com os dados numéricos para colorir os estados

📍 Os valores são mapeados via correspondência entre dynamic_labels e os IDs ou nomes das regiões definidos no GeoJSON.

🧪 Exemplo completo com `report`

report :dados_mensais, data: {
  resource: "financial_transactions",
  pipeline: :grafico_por_mes
} do
  chart :grafico_faturamento, type: :bar, resources: :dados_mensais,
    dynamic_labels: :mes,
    series: [
      { label: "Receitas", name: :receitas, backgroundColor: "#62AC63" },
      { label: "Despesas", name: :despesas, backgroundColor: "#E27572" }
    ],
    styles: { fixed_height: "400px", align: { body: "center" } }
end

🎨 Estilização

O chart aceita todas as opções padrão de styles dos componentes:

fixed_height:
padding:
margin:
align:
border:
background:
etc.

Exemplo:

styles: { fixed_height: "350px", background: "white", padding: { top: 2, bottom: 2 } }

Para saber todas as opções de estilização, veja o conteúdo sobre componentes e estilos do Nerdify.

📚 Conclusão

O chart é um componente poderoso que integra-se diretamente ao resultado dos reports, permitindo visualização interativa de dados em tempo real, com suporte total a:

Gráficos tradicionais (barra, linha, pizza)
Séries e empilhamentos
GeoJSON para gráficos de mapa
Estilização e personalização visual

🎛️ Estrutura básica​

📊 Tipos de gráfico suportados​

🧱 Exemplo básico​

🧩 Com séries múltiplas​

🧠 Labels dinâmicos x estáticos​

🌍 Gráficos geográficos com GeoJSON​

Exemplo de gráfico geo:​

🧪 Exemplo completo com report​

🎨 Estilização​

📚 Conclusão​