Gráfico de Área

1. Geral

O Gráfico de Área é um componente avançado para criar gráficos de área interativos, ideal para visualizar a evolução de dados ao longo do tempo. Assim como o gráfico de barras, sua principal finalidade é ser uma ferramenta de análise multidimensional, permitindo que o usuário explore os dados e aprofunde a visualização (Drill Anywhere).

2. Como Configurar

A configuração do componente é feita através de um conjunto de variáveis. Abaixo estão as suas funcionalidades e como configurá-las.

3. Configurações Gerais

3.1. Título 

Define o título que aparece no topo do componente.

3.2. Subtítulo

Define o subtítulo que aparece no topo do componente.

3.3. Exibição da Borda

Adiciona uma borda e sombra ao redor do componente.

4. Dados

4.1. Query

Esta variável contém a consulta SQL completa que busca os dados brutos no banco de dados. É a fonte de informação para o seu gráfico. Você deve escrever uma consulta SQL que retorne pelo menos duas colunas:

• Uma coluna com os rótulos/categorias que você quer exibir no eixo X (exemplo: meses, nomes de vendedores, produtos).

• Uma ou mais colunas com os valores numéricos (exemplo: total de vendas, quantidade de produtos).

4.2. Coluna

Esta variável atua como um mapeamento. Ela informa ao gráfico qual das colunas, retornadas pela sua query, deve ser usada como o eixo X (o eixo horizontal, das categorias). Você deve preencher este campo com o nome exato (ou o alias) da coluna da sua query que contém os rótulos.

4.3. Séries

Esta variável define quais dados numéricos serão desenhados no gráfico. Mapeia as colunas de valor da sua query para o eixo Y do gráfico. Configure um array JSON onde cada objeto é uma série e contém:

serieColumn: O nome da coluna da query com o valor numérico.

titulo: O nome da série que aparece na legenda.

color: A cor da série em formato HEX (exemplo: "#3B82F6").

order: Define a ordem de exibição das séries. Em gráficos empilhados, dita o empilhamento.

marker: coloque true na série principal para destacar valores (o prefixo é aplicado no label).

4.4. Opções de Visualização

Esta é a variável que transforma um gráfico estático em uma ferramenta de análise interativa. Ela cria um menu dropdown no topo do gráfico, permitindo que o usuário alterne a forma como os dados são agrupados. Configure um array JSON onde cada objeto representa uma opção do menu e contém:

nome: O texto da opção do dropdown (exemplo: “Vendas por Mês”).

query: A consulta SQL para aquela visão.

axisColumn: A coluna da query que será o eixo X (a dimensão).

idColumn: A coluna da query com o ID a ser passado para o drill-down.

drillVariable: A variável que receberá o valor do idColumn (exemplo: :VAR_MES_ID).

5. Drill

5.1. Opções de Driil 

Esta é a variável mais importante para a interatividade. Ela cria o menu de opções que aparece quando o usuário clica em uma parte do gráfico. Cada opção nesse menu permite aprofundar a análise dos dados por uma nova dimensão.

Configure um array de objetos JSON, onde cada objeto é uma opção de drill e deve conter:

label: O texto que o usuário verá no menu (exemplo: “Detalhar por Status”).

drillQuery: A consulta SQL que será executada para gerar o próximo nível do gráfico.

drillSeries: JSON que configura as séries para a visão de drill. Usa a mesma configuração do JSON do tópico 4.3. Séries.

Exemplo: 

[
   {
      "serieColumn":"VENDAS",
      "titulo":"Vendas",
      "color":"#3b82f6",
      "marker":true
   },
   {
      "serieColumn":"META",
      "titulo":"Meta",
      "color":"#a8a29e",
      "marker":false
   }
]

drillAxisColumn: A coluna da drillQuery que será o novo eixo X.

drillIdColumn: A coluna de ID da drillQuery para o próximo nível de drill.

drillVariable: A variável que receberá o ID deste nível de drill.

5.2. Variável para Drill

É o nome de uma variável (exemplo: :VAR_MES_SELECIONADO) que receberá o valor da variável ID da Coluna quando o usuário clicar em uma parte do gráfico.

Como funciona: Se o usuário clica no campo do mês “Janeiro” (cujo ID_MES é 1), a variável :VAR_MES_SELECIONADO passa a valer 1. A drillQuery do próximo nível usará essa variável em sua cláusula WHERE para filtrar os dados (exemplo: WHERE MES = :VAR_MES_SELECIONADO).

5.3. ID da Coluna

Aponta para a coluna da sua query atual que contém o ID de cada eixo x. Exemplo: Se seu gráfico mostra vendas por mês, a axisColumn seria NOME_MES, e a idColumn poderia ser ID_MES (contendo 1, 2, 3…).

5.4. Label do Eixo

É uma variável simples que define um título descritivo para o eixo X (o eixo horizontal). Use para dar mais contexto ao usuário. Se o eixo X mostra os meses, a Label do Eixo poderia ser “Mês de Referência”.

6. Reatividade

Mantenha a reatividade manual ativada: ela atualiza automaticamente a interface sempre que variáveis, queries ou filtros mudam — sem “piscadas” ou recarregamentos completos — garantindo experiência fluida, dados sincronizados e preservando o contexto.

7. Configurações Avançadas

Se quiser explorar opções avançadas de personalização, acesse nossa documentação. Lá você encontrará instruções para configurações mais complexas para adaptar o componente exatamente às suas necessidades.