Componentes · Análise
Painel de indicadores
A tela de abertura do sistema: números-resumo em cartões, gráficos por categoria ou por mês, e um bloco de filtros no topo que vale para tudo. Você escolhe a tabela, a conta e o formato de cada bloco; a consulta, o período anterior e o recarregar ao filtrar já vêm prontos.
<mad-db-metric-card>
Novo → Dashboard (ou Paleta → Dashboard)
4 a 8 cartões e 2 a 4 gráficos por painel — mais que isso, divida em abas
01
O que é um painel — e o que não é
Cada bloco do painel faz a própria conta na tabela que você escolheu: um cartão conta ou soma, um gráfico agrupa por uma coluna. O bloco de filtros no topo muda o período e as condições, e todos os blocos refazem a conta juntos.
| Sua situação | Componente certo |
|---|---|
| Um número-resumo de uma tabela (quantos, quanto, média) | Cartão de número |
| O mesmo número comparado com o mês ou período anterior | Cartão de comparação |
| Distribuição por categoria, evolução por mês, ranking | Gráfico |
| Filtros que valem para todos os blocos de uma vez | Bloco de filtros do dashboard |
| Uma tabela de registros com total no rodapé | Listagem |
| Agrupamentos, subtotais e exportar para PDF ou Excel | Relatório |
| Cada usuário montar o próprio painel arrastando blocos | Meus Dashboards, no app publicado |
O painel não exporta: não há botão de baixar imagem nem planilha no gráfico. Quem precisa do
número em arquivo usa um Relatório.
1
Criar a tela e desenhar a grade
- Em Novo, escolha o tipo Dashboard. A tela nasce com o bloco de filtros no topo e uma grade vazia.
- Na barra do editor, clique em Configurar layout para abrir a janela Layout do Dashboard.
- Adicione linhas com Adicionar linha e diga quantas colunas cada uma tem — 4 colunas para cartões, 2 para gráficos.
- Em Modo, Uniforme divide igual; Customizado deixa você dar as larguras em porcentagem.
- Clique em Aplicar layout. Cada célula vira um lugar para soltar um cartão ou um gráfico.
Resultado: a grade aparece no canvas com as células vazias; o que você já tinha configurado numa célula é preservado quando o tipo dela não muda.
Destaque
Clique no print para ampliar.
2
Definir os filtros do painel
- Na barra do editor, clique em Configurar filtros do dashboard.
- Em Estilo, escolha onde os filtros ficam: toolbar em linha no topo, chips com etiquetas dos filtros ativos, drawer ou modal atrás de um botão Filtros, ou uma coluna fixa com sidebar-left e sidebar-right.
- Em Filtros declarados, clique em Adicionar filtro e escolha o tipo: período, data, intervalo, escolha numa tabela, texto. Dê um nome curto a cada um.
- Em Critério base, se todo bloco deve obedecer a uma regra fixa (só a empresa da pessoa, só registros ativos), adicione a regra por tabela.
- Nos blocos, a seção Filtros do dashboard diz se aquele bloco obedece a Todos os filtros, Somente alguns, todos Exceto alguns, ou Nenhum.
Resultado para quem usa o sistema: a pessoa escolhe um período e um cliente, clica em Aplicar, e todos os cartões e gráficos recarregam de uma vez com os números daquele recorte.
Destaque
Clique no print para ampliar.
O bloco de filtros tem que ser o primeiro item da tela. Um cartão ou gráfico colocado acima
dele fica fora do painel, e os estilos de coluna lateral quebram. O editor barra a gravação
quando isso acontece.
3
Montar um cartão de número
- Solte um DB Metric Card numa célula e dê um Nome (ID) único — é como o painel identifica o bloco.
- Em Datasource, escolha o banco, a tabela, a Agregação — Contar, Somar, Média, Mínimo ou Máximo — e, para tudo que não é contar, o Campo numérico.
- Em Formato do campo numérico, escolha como o número aparece: inteiro, moeda, percentual, abreviado.
- Em Label, o que o número significa — Chamados abertos. Ícone e Cor do cartão ajudam a bater o olho.
- Se o número precisa de uma condição fixa (só os abertos), abra Regras de carregamento e adicione a regra — as regras têm página própria em Filtrar.
Resultado para quem usa o sistema: o cartão mostra o número já formatado, com o ícone e a cor escolhidos; sem dados, mostra um traço em vez de zero.
Destaque
Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.
O que o painel escreve no código
4
Comparar com o período anterior
- Solte um KPI Compare em vez do cartão comum. Ele calcula o número do período escolhido e o do período anterior, e mostra a diferença em porcentagem com a seta.
- Configure Datasource e Label como no cartão de número.
- Em Label comparação, o texto ao lado da variação — vs mês anterior.
- Deixe Critério de comparação em automático: o período anterior vem do filtro de período do painel. Só troque para PHP customizado quando a comparação é fixa — sempre contra o mesmo ano, por exemplo.
Resultado para quem usa o sistema: com o período de março escolhido, o cartão mostra o número de março e, abaixo, +12,3% vs mês anterior em verde — ou em vermelho quando caiu.
Destaque
Destaque
Clique no print para ampliar.
Sem período escolhido, não há comparação. Se o painel não tem filtro de período, ou a
pessoa deixou em Personalizado sem datas, o cartão de comparação fica em branco — sem aviso.
5
Montar um gráfico
- Solte um DB Chart numa célula, dê um Nome (ID) e um Título.
- Em Datasource, escolha a tabela, Agrupar por — a coluna que vira as barras ou as fatias — e a Agregação. Para séries lado a lado ou empilhadas, preencha também o Sub-agrupador.
- Em Tipo de gráfico, escolha Barras para comparar categorias, Linha para evolução no tempo, Pizza ou Donut para participação.
- Quando o agrupamento é por data, use Formato do rótulo para o eixo mostrar Abr/26 em vez da data crua.
- Em Apresentação, ajuste Altura (px), legenda e paleta. As opções do fim da seção mudam com o tipo: barras mostram Horizontal e Empilhado; linha mostra Área preenchida e Curva suave; pizza, donut e rosa mostram Mostrar %.
Resultado para quem usa o sistema: o gráfico desenha com a paleta do sistema, mostra o valor ao passar o mouse e se redesenha sozinho quando a janela muda de tamanho.
Destaque
Destaque
6
Clicar no gráfico para filtrar
- Selecione o gráfico e abra a seção Drill-down.
- Ligue Habilitar filtro ao clicar.
- Em Modo, deixe em automático: o painel descobre se o clique manda o valor direto, procura o código pelo nome, ou ajusta o mês e o ano.
- Em Propriedade alvo, o nome do filtro do painel que recebe o valor — o mesmo nome declarado na janela de filtros.
- Confira na seção Filtros do dashboard de cada bloco se ele obedece a esse filtro.
Resultado para quem usa o sistema: a pessoa clica na fatia Alta do gráfico de prioridade e todos os cartões e gráficos passam a mostrar só os chamados de prioridade alta; clicar de novo na mesma fatia desfaz o filtro.
Destaque
Em gráfico de linha, Curva suave só tem efeito com Área preenchida ligada. Em pizza,
Mostrar % troca o rótulo de valor pela porcentagem — não mostra os dois.
Click action é o caminho para quem programa: um método que roda no clique. Preenchê-lo
desliga o Drill-down por completo — escolha um dos dois.
7
Testar antes de entregar
Salve a tela e publique no Teste online. Confira nesta ordem:
| O que fazer | O que tem que acontecer |
|---|---|
| Abrir o painel | Todos os cartões mostram número, nenhum mostra traço ou erro. |
| Escolher um período e aplicar | Cartões e gráficos recarregam juntos, sem recarregar a página. |
| Ver o cartão de comparação | A porcentagem e a seta aparecem, e a cor bate com o sinal. |
| Passar o mouse num gráfico | O valor e o rótulo aparecem formatados. |
| Clicar numa barra ou fatia com Drill-down | O painel inteiro filtra; clicar de novo desfaz. |
| Limpar os filtros | Tudo volta ao total. |
| Abrir no celular | As células quebram em linhas e os gráficos se redesenham. |
09
Problemas comuns
O painel abre com o bloco de filtros no lugar errado ou a coluna lateral não aparece
O bloco de filtros não é o primeiro item da tela. Mova-o para cima de todos os cartões.
O cartão mostra um traço em vez do número
A consulta não devolveu nada: a tabela está vazia no período, ou uma regra de carregamento está errada. Abra as regras e confira a condição.
O cartão de comparação fica em branco
Não há período escolhido. Adicione um filtro de período ao painel e escolha um período.
Marquei Curva suave e a linha continua reta
Curva suave só tem efeito com Área preenchida ligada. Ligue as duas.
Mudei a largura do cartão e nada aconteceu
A largura do cartão vem da grade: mude o número de colunas ou as larguras na janela Layout do Dashboard.
Preenchi o método de clique e o filtro ao clicar parou
Click action e Drill-down são excludentes. Apague o método para voltar ao filtro ao clicar.
10
Referência: painel × código
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados. A consulta de cada bloco fica no topo do arquivo, com o nome do bloco; é ela que as regras de carregamento alimentam.
| No painel | No código | Padrão |
|---|---|---|
| Nome (ID) | name | — |
| Datasource | database · model · group-by · total · field | — |
| Formato do campo numérico | format | — |
| Label | label | — |
| Ícone | icon | — |
| Cor do ícone · Cor de fundo do ícone | icon-color · icon-bg | — |
| Cor do cartão | variant | default |
| Tendência · Label Tend. | trend · trendLabel | — |
| Label comparação | compare-label | vs período anterior |
| Título · Subtítulo (do gráfico) | title · subtitle | — |
| Tipo de gráfico | type | bar |
| Formato do rótulo | legend-format | — |
| Sufixo | suffix | — |
| Abreviar (K/M/B) | abbreviate | — |
| Altura (px) | height | 300 |
| Largura (do gráfico) | width | — |
| Sem card wrapper | no-panel | — |
| Mostrar legenda · Posição legenda | legend · legend-position | — |
| Paleta de cores | colors | — |
| Horizontal · Empilhado | horizontal · stacked | — |
| Área preenchida · Curva suave | area · smooth | — |
| Mostrar % | percentage | — |
| Click action | click-action | — |
| Séries como linha | line-series | — |
| 2ª agregação (linha) · Campo da linha · Nome da série de linha | line-total · line-field · line-label | — |
| Eixo Y secundário (direita) | line-secondary-axis | — |
| Drill-down | filter-prop · filter-mode · filter-model · filter-field | — |
| Estilo (do bloco de filtros) | style | toolbar |
| Título · Nome (ID) do bloco de filtros | title · name | — |
| Trigger | trigger | auto |
| Coluna principal (estilo Sidebar) | <mad-dashboard-main> | — |