Esta documentação descreve como criar, configurar e manipular Dashboards, KPIs e Gráficos no Sistema Puca.
Sumário
- Visão Geral da Dashboard
- Configurações Gerais da Dashboard/KPI
- Menu de Contexto dos Gráficos na Dashboard/KPI
- Configuração de Gráficos
Visão Geral da Dashboard
Alguns módulos do sistema (como o financeiro, crm e etc.) possui uma página inicial, onde é exibido a Dashboard com os gráficos configurados em suas respectivas abas.
A Dashboard é composta por:
- Abas (KPIs): Organizam os gráficos em grupos temáticos
- Gráficos: Visualizações de dados configuráveis dentro de cada aba
- Menu lateral: Histórico de navegação e acesso rápido aos menus do módulo
Configurações Gerais da Dashboard/KPI
Criação e Edição de Abas
Para criar uma nova aba:
- Clique em ‘Nova Aba +’ na barra de seleção de abas
- Se o módulo permitir múltiplas fontes de dados (de diferentes entidades/tabelas do sistema), uma janela será exibida com os seletores de entidade e os papeis permitidos para manipular os gráficos daquela aba em questão
- Informe um nome para a aba e confirme
Para renomear uma aba:
- Clique no ícone de caneta ao lado do nome da aba em questão
- Digite o novo nome
- Clique no ícone de confirmação
Nota: Apenas usuários com permissão de edição podem criar ou modificar abas.
Seleção de Entidade (Fonte de Dados)
Ao criar uma nova aba ou gráfico, é possível selecionar a tabela de origem dos dados.
Passo a passo:
- Ao adicionar um novo gráfico, clique em “Novo Gráfico” no menu de configurações
- Uma janela será exibida com a lista de tabelas disponíveis
- Selecione a tabela desejada no campo “Tabela”
- Clique em “Confirmar”
A tabela selecionada determinará quais campos estarão disponíveis para uso no gráfico.
Configuração de Permissões
O sistema permite controlar quem pode visualizar cada aba da Dashboard.
Para configurar permissões:
- Clique no ícone de engrenagem (
) - Selecione “Configurações” > “Editar Permissões”
- Na janela que será aberta, selecione os papéis (roles) que terão acesso à aba
- Confirme as alterações
As permissões são baseadas em papéis do sistema, permitindo controle granular de acesso.
Filtros
O sistema oferece dois tipos de filtros:
Filtro Temporário
- Aplica filtros que duram apenas durante a sessão atual
- Útil para análises pontuais
Como usar:
- Clique no ícone de engrenagem ()
- Selecione “Filtro”
- Configure as condições desejadas no construtor de consultas
- Confirme para aplicar
Filtro Permanente
- Filtros salvos que são aplicados automaticamente ao carregar a aba
- Disponível apenas para usuários com permissão de edição
Como usar:
- Clique no ícone de engrenagem ()
- Selecione “Configurações” > “Filtro Permanentemente”
- Configure as condições desejadas
- Confirme para salvar
Reordenar Abas
Para reorganizar a ordem das abas:
- Clique no ícone de engrenagem ()
- Selecione “Configurações” > “Reordenar Abas”
- Arraste as abas para a posição desejada
- Confirme a nova ordem
Menu de Contexto dos Gráficos na Dashboard/KPI
Ao clicar em um gráfico, um menu de contexto é exibido com as seguintes opções:
| Opção | Descrição |
|---|---|
| Ver Gráfico / Ver Tabela | Alterna entre visualização gráfica e tabular |
| Acessar Dados | Abre a tela de listagem dos dados |
| Configurar | Abre a tela de configuração do gráfico |
| Duplicar | Cria uma cópia do gráfico |
| Excluir | Remove o gráfico da aba |
Configuração de Gráficos
Tipos de Gráficos Disponíveis
O sistema suporta os seguintes tipos de gráficos:
| Tipo | Descrição | Uso Recomendado |
|---|---|---|
| Line (Linhas) | Gráfico de linhas | Tendências ao longo do tempo |
| Bar (Barras) | Gráfico de barras/colunas | Comparação entre categorias |
| Pie (Pizza) | Gráfico circular | Proporções e distribuições |
| Funnel (Funil) | Gráfico de funil | Processos sequenciais e conversão |
| Gauge (Medidor) | Indicador tipo velocímetro | KPIs e metas com limites |
| Table (Tabela) | Tabela de dados | Visualização detalhada de dados |
Estrutura de Dados do Gráfico
Para configurar um gráfico, é necessário definir três elementos principais:
Colunas
- Definem o eixo X ou as categorias principais do gráfico
- Exemplo: Mês, Produto, Região
Linhas
- Definem séries adicionais ou subdivisões dos dados
- Cada valor único nas linhas gera uma série separada no gráfico
- Exemplo: Status, Tipo, Departamento
Valores
- Definem os dados numéricos a serem exibidos
- Requerem uma função de agregação
- Exemplo: Total de Vendas, Quantidade, Média de Valor
Passo a passo para configurar dados:
- Acesse a configuração do gráfico clicando sobre ele ou pelo menu “Configurar”
- Na seção “Todas Colunas”, visualize os campos disponíveis da tabela
- Arraste os campos desejados para as áreas de Colunas, Linhas ou Valores
- Para cada campo, clique no ícone de engrenagem () para configurar opções adicionais
Funções de Agregação
As funções de agregação são utilizadas nos campos de Valores para calcular os dados exibidos.
| Função | Descrição | Exemplo de Uso |
|---|---|---|
Contagem (count) |
Conta o número de registros | Total de pedidos |
Contagem de Distintos (count_distinct) |
Conta valores únicos | Clientes únicos |
Soma (sum) |
Soma todos os valores | Total de vendas |
Maior (max) |
Retorna o maior valor | Maior pedido |
Menor (min) |
Retorna o menor valor | Menor pedido |
Média (avg) |
Calcula a média | Ticket médio |
Média Ponderada (weighted_avg) |
Média com peso | Preço médio ponderado |
Primeiro (first) |
Retorna o primeiro valor | Primeira compra |
Último (last) |
Retorna o último valor | Última atualização |
Outro (custom) |
Função personalizada | Cálculos especiais |
Para configurar uma função de agregação:
- Após arrastar um campo para a área de Valores, clique no ícone de engrenagem ()
- Selecione a Função de Agregação desejada no menu suspenso
- Se necessário, configure opções adicionais (ex: campo para ordenação em “Primeiro” ou “Último”)
- Clique em “Salvar”
Média Ponderada
Para usar a média ponderada:
- Selecione a função “Média Ponderada”
- Configure:
- Campo de Valor: O campo que será calculado
- Campo de Peso: O campo que define o peso de cada valor
- Confirme as configurações
Truncar Data
Para campos de data, é possível agrupar os dados por diferentes períodos.
Opções de truncamento:
| Opção | Descrição | Exemplo |
|---|---|---|
Ano (year) |
Agrupa por ano | 2024, 2025 |
Mês (month) |
Agrupa por mês | Jan/2024, Fev/2024 |
Dia (day) |
Agrupa por dia | 01/01/2024 |
Hora (hour) |
Agrupa por hora | 01/01/2024 14:00 |
Minuto (minute) |
Agrupa por minuto | 01/01/2024 14:30 |
Segundo (second) |
Agrupa por segundo | 01/01/2024 14:30:45 |
Milisegundo (millisecond) |
Precisão máxima | - |
Para truncar uma data:
- Após arrastar um campo de data para Colunas ou Linhas, clique no ícone de engrenagem ()
- Selecione a opção desejada no campo “Truncar data”
- Clique em “Salvar”
Nota: A função de truncar data não pode ser usada junto com funções personalizadas.
Configurações Específicas por Tipo de Gráfico
Gráfico de Linhas (Line)
| Configuração | Descrição |
|---|---|
| Conectar Pontos Nulos | Liga pontos mesmo quando há valores nulos |
| Mostrar Eixo X/Y | Exibe ou oculta os eixos |
| Estilizar Área | Preenche a área abaixo da linha |
| Suavizar Linhas | Deixa as linhas com curvas suaves |
| Empilhar | Empilha as séries de dados |
| Máscaras | Formatação para legenda e eixos |
| Valores Mín/Máx | Define limites para os eixos |
| Margens | Ajusta espaçamentos internos |
Gráfico de Barras (Bar)
| Configuração | Descrição |
|---|---|
| Mostrar Eixo X/Y | Exibe ou oculta os eixos |
| Eixo X no Topo | Move o eixo X para o topo |
| Categorias na Vertical | Inverte a orientação do gráfico |
| Empilhar | Empilha as barras |
| Máscaras | Formatação para os eixos |
| Valores Mín/Máx | Define limites para os eixos |
| Margens | Ajusta espaçamentos internos |
Gráfico de Pizza (Pie)
| Configuração | Descrição |
|---|---|
| Tamanho do Raio | Define o tamanho do gráfico |
| Linha para os Valores | Exibe linhas conectando valores |
| Gráfico de Rosquinha | Transforma em gráfico de rosquinha |
| Raio da Rosquinha | Define o espaço central vazio |
| Rosa Type | Estilo de pétalas de rosa |
| Raio/Largura da Borda | Personaliza bordas |
| Posição Horizontal/Vertical | Ajusta posicionamento |
Gráfico de Funil (Funnel)
| Configuração | Descrição |
|---|---|
| Ordenar Funil | Define ordenação (ascending, descending, none) |
| Label dentro do Funil | Exibe valores dentro dos trapézios |
| Espaço entre trapézios | Define o gap entre elementos |
| Distâncias | Ajusta posicionamento nas quatro direções |
Medidor (Gauge)
| Configuração | Descrição |
|---|---|
| Valor Mínimo/Máximo | Define a escala do medidor |
| Nome da Medida | Texto exibido junto ao valor |
| Ângulo Inicial/Final | Define a abertura do arco |
| Intervalo | Define quantidade de divisões |
| Ponteiro | Configurações de largura e visibilidade |
| Limites | Configura faixas de cores (Baixo, Médio, Alto) |
| Posição | Ajusta posicionamento horizontal/vertical |
Dicas Importantes
-
Redimensionamento: Na Dashboard os gráficos podem ser redimensionados e movidos arrastando as bordas ou o próprio gráfico (apenas para usuários com permissão).
-
Responsividade: Em dispositivos móveis, os gráficos são reorganizados automaticamente em formato vertical.
-
Permissões: Todas as funcionalidades de edição requerem permissão específica configurada no módulo correspondente.
-
Preview: Ao configurar um gráfico, utilize a área de Preview para visualizar as alterações em tempo real antes de salvar.
Fluxo Resumido de Criação de um Gráfico
- Acesse a Dashboard do módulo desejado
- Selecione ou crie uma aba para o gráfico
- Clique em “Novo Gráfico” no menu de configurações
- Selecione a tabela de origem dos dados (se solicitado)
- Configure os dados:
- Arraste campos para Colunas (categorias)
- Arraste campos para Linhas (séries, opcional)
- Arraste campos para Valores (dados numéricos)
- Configure agregações clicando no ícone de engrenagem de cada campo
- Selecione o tipo de gráfico desejado
- Clique em “Avançar” para configurar o estilo
- Personalize cores e opções específicas do tipo de gráfico
- Salve as configurações