Painel
O corpo de uma aba do dashboard — Filter Bar + grade de widgets + Chart Wizard, com toolbar de painel, arraste, grupos, fixados na sidebar e persistência. Trocar de aba troca o painel; o usuário monta a própria visão dentro de cada um.
Boas Práticas
Cada aba do dashboard é um painel: o corpo da tela que junta a Filter Bar, a grade de widgets (criar, arrastar, redimensionar, agrupar) e o Chart Wizard.
Um painel reúne três peças — Filter Bar persistente (filtros do painel, com estado "alterado"), grade de widgets (12 colunas; cards curados coexistem com os do usuário) e Chart Wizard (criar/editar). E vive em dois modos: toolbar interna (o painel mostra Novo/Restaurar/Limpar) ou ações delegadas ao subheader (esconde a toolbar, a tela dispara de fora; também habilita fixar na sidebar por arraste).
Toolbar e Ações
Toolbar do painel: Novo · Restaurar · Limpar
As três ações seguem sempre essa ordem e têm semânticas distintas. Restaurar reorganiza; Limpar remove — a confirmação reflete isso na cor (Restaurar = warning, Limpar = error). Cada ação só habilita quando há o que fazer; no mobile vão para o FAB "Mais ações".
| Ação | O que faz | Destrutivo? |
|---|---|---|
| Novo gráfico | Abre o Chart Wizard para criar | Não |
| Restaurar padrão | Volta a estrutura/posições ao layout padrão. Não apaga seus gráficos/grupos | Não (pede confirmação) |
| Limpar | Remove os cards do painel (no painel de compras, só os não-padrão) | Sim |
Menu de personalização do card (⋮)
Cada card expõe um menu (⋮, sempre visível no modo padrão), em ordem fixa, agrupando configuração, posicionamento e remoção. Toda a configuração de conteúdo vem do Chart Wizard.
| Ação | O que faz |
|---|---|
| Editar | Reabre o Chart Wizard pré-preenchido |
| Tipo de gráfico | Troca o tipo na hora (barra ↔ linha ↔ pizza…) |
| Período | Seletor no header (7 dias / 30 dias / Este ano) |
| Copiar para | Duplica o card em outro painel/aba |
| Mover para grupo | Move o card para uma pasta existente |
| Fixar / Desafixar | Fixa uma cópia na sidebar (ou remove) |
| Redefinir resolução · Visualizar expandido | Tamanho padrão · ampliado |
| Remover | Exclui (com modal de confirmação) |
Três menus distintos. O do widget (⋮) age sobre um gráfico; o da aba age sobre o painel inteiro; o ⋮ da página reúne links, filtros salvos, painéis ocultos e exportação. No widget fixado, Fixar/Redefinir/Expandir são trocados por Desafixar da sidebar e Mover para o body.
Há três menus distintos, por alcance: o ⋮ do widget age sobre um gráfico; o menu da aba (Compartilhar, Duplicar, Renomear, Ocultar, Remover) age sobre o painel inteiro; e o ⋮ da página reúne Meus links, Filtros salvos, Painéis ocultos e Exportar (PDF ou imagem). No widget fixado, Fixar/Redefinir/Expandir dão lugar a Desafixar da sidebar e Mover para o body.
Arrastar e Agrupar
Arrastar: sombra + reflow
O gesto é baseado em pointer (não no HTML5 nativo). O card de origem sai do fluxo e um fantasma segue o cursor; na área de destino aparece a sombra (bloco azul claro) e os demais cards refluem ao redor; ao soltar, a sombra vira o card real (soltar fora volta ao original).
| Origem → Destino | O que acontece |
|---|---|
| Corpo → Sidebar | Fixa uma cópia compacta no grupo do contexto |
| Sidebar → Corpo | Cria uma cópia independente na célula sob o cursor (sombra + reflow) |
| Dentro do corpo | Reposiciona no grid (sombra + reflow) |
| Dentro da sidebar | Reordena dentro do grupo (lacuna azul indica a posição) |
| Card sobre card (corpo) | Agrupa os dois numa pasta |
| Card do painel de compras → Sidebar | Também é fixável (vira cópia compacta) |
Agrupar gráficos
A sombra azul segura a posição de destino; os cards refluem ao redor. O fantasma acompanha o cursor.
Um grupo é uma pasta de gráficos dentro do painel: vários widgets vivem juntos num cartão que se move e redimensiona como uma unidade, com cabeçalho (ícone, título editável inline, contador e menu ⋮) e uma mini-grade de fluxo. Agrupe gráficos que contam a mesma história; um gráfico sem contexto comum fica solto.
A mini-grade preenche cada linha sem buracos; redimensionar na horizontal fixa a largura, na vertical ajusta só a altura, e há hug (a pasta abraça a altura dos cards). O menu do cabeçalho concentra ações da pasta (desagrupar, copiar para, redefinir tamanho, expandir, remover); as de um gráfico ficam no card filho.
Tirar do grupo (drag-out): arrastar um card para fora dos limites vira extração, não reordenação — o card vira solto ou é fixado na sidebar. Fixar ou extrair é uma cópia: a pasta de origem fica intacta.
Blocos
Um único CTA — não dilua o convite com ações secundárias.
Lado a lado com os widgets do usuário, o painel usa blocos curados de formato fixo. Use cada um pelo papel que cumpre, não pela aparência:
- Seção de métricas (tiles) — KPIs num card com grade responsiva; cada tile traz um número de relance com tom semântico (neutral/info/warning/error). Em modo de seleção, filtram o resto da tela.
- Lista de status — status em barras horizontais clicáveis (rótulo à esquerda, valor à direita); clicar pula para a fatia. Para comparação visual entre fatias, prefira barras ou pizza.
- Empty state do painel — boas-vindas quando o painel está em branco: título, descrição, ilustração e um único CTA "Novo gráfico".
- Grade de charts — gráficos em grade responsiva (1–3 colunas), em modo galeria (gráfico puro) ou como widget (com casca e período sobre dados reais).