Widgets e Gráficos
No dashboard a unidade é o widget — ele envolve um gráfico, ganha contexto e ações, e vira a peça que o usuário monta na própria visão.
Boas Práticas
No dashboard, a unidade não é o gráfico solto — é o widget. Um gráfico, sozinho, é só desenho; o widget o envolve (via Analytics Block) e dá o que falta para entender e operar: título, período, status/selo e um menu de ações.
As camadas (Chart → Analytics Block → Widget → Painel)
A visualização se monta em camadas, cada uma com um papel: o Chart é o desenho puro; o Analytics Block dá contexto (título, período, status, ações); o Widget acrescenta a configuração do usuário (tipo, colunas, fixar/copiar); e o Painel é o layout que organiza os widgets numa grade editável. Cada camada só conhece a de baixo: você empilha contexto e configuração sem refazer o gráfico.
Index com widgets × Dashboard
Os widgets aparecem em dois lugares distintos. Na Index com widgets (a view “Meus widgets” de uma Index) eles convivem com o subheader da index, a sidebar e a tabela — os gráficos derivam das colunas da própria tabela. No Dashboard são abas de painel com blocos curados, sem tabela nem sidebar de index. Abaixo, a Index com widgets:
Caminho (contador)
120
Caminho (contador)
120
No mobile
No mobile, a faixa de widgets deixa de ser grade (até 4 colunas no desktop) e empilha em coluna full-width — um widget abaixo do outro, sem carrossel horizontal. A tela rola verticalmente até a tabela, que preserva uma altura mínima. Assim a pessoa lê cada gráfico inteiro e ainda alcança a lista logo abaixo, sem o conteúdo principal sumir.
Criar
No menu do header de uma coluna da tabela: Criar Gráfico (tipos geométricos) ou Criar Métrica (contador, distintos, tag cloud). O gráfico nasce daquela coluna e vai para o corpo.
Tela única: tipo · dados · estilo, com pré-visualização ao vivo. Emite a config persistível.
A criação parte quase sempre dos dados: no cabeçalho de uma coluna da tabela, a pessoa gera um gráfico daquela coluna — ver Estrutura de Index › Tabelas. A configuração abre no Chart Wizard: tela única (tipo → dados → estilo → detalhes) com preview ao vivo, que define tipo, séries, rótulo, selo e período e emite a config. Editar (⋮ → Editar) reabre o wizard pré-preenchido — ele é o passo de criar/editar, não o de exibir.
Tipos
O EDS oferece uma família de tipos, todos prontos para widget e dashboard. Para anatomia, props e exemplos de cada um, ver o índice de Charts. Modelos 1:1 interativos (passe o mouse: destaca o ponto + tooltip; período e ⋮ abrem):
Caminho (contador)
120
| Tipo | Use quando |
|---|---|
| Barras / Colunas | Comparar categorias discretas; aceita empilhada, horizontal e mista. |
| Linhas | Tendências ao longo do tempo, uma ou mais séries. |
| Área | Tendência e volume com preenchimento; empilhamento normal ou 100%. |
| Pizza / Rosca | Partes de um todo; a rosca empilhada vira sunburst. |
| Radar | Comparação multidimensional num polígono. |
| Radial | Progresso, multi-anel e gauge. |
| KPI | Um indicador único com tendência ↑↓, para número em destaque. |
| Tag cloud | Nuvem de termos por frequência/peso. |
Modos
No corpo o widget é completo (header, período, menu ⋮). Fixado na sidebar ele entra em modo compacto (só título + desenho). Ao passar o mouse no fixado, abre ampliado num popover.
No corpo: default (header + período + ⋮). Na sidebar: compacto (só título + desenho). Ao passar o mouse no fixado, ele abre ampliado.
Onde aprofundar
- Widget — o envoltório: header, menu de ações, estados e modos default/compacto.
- Analytics Block — a camada de contexto: status, período e herança de modo compacto.
- Chart Wizard — criação/edição guiada da config do gráfico.
- Charts — o índice de todos os tipos, com props compartilhadas e exemplos.