Eletro Design System EletroDSGuide

Geral

A visão macro do dashboard — camada de síntese sobre os dados, as duas áreas simétricas (corpo × sidebar), o grid de 12 colunas e o comportamento responsivo. A montagem (arrastar, agrupar, fixar) vive em Painel.

Esta página é a visão macro. O comportamento de montagem (arrastar, agrupar, fixar, toolbar e persistência) vive em Painel; os blocos de gráfico em si, em Widgets e Gráficos.

Boas Práticas

O dashboard é a camada de síntese sobre os dados: enquanto a tabela lista registros, ele responde "como estão as coisas?" com gráficos que o próprio usuário monta a partir daquela fonte. Reaproveita a casca da Estrutura de Index.

Quando usar
Sintetizar os dados de uma tela: KPIs, tendências e recortes que o usuário monta a partir da própria fonte.
Quando a pessoa precisa montar a própria visão — criar, fixar, agrupar e reposicionar gráficos.
Em dois contextos: embutido numa Index (explorar/guardar recortes) ou como tela dedicada de múltiplos painéis.
Quando não usar
Conteúdo fixo que ninguém reorganiza — use uma grade estática de Charts.
Um único gráfico ou KPI isolado — use o Widget direto, sem grade nem painéis.
Operar registros um a um — isso é a Index (tabela), não o dashboard.

Anatomia

Index × Dashboard — onde os gráficos vivem

Na Index, os gráficos derivam dos dados da tabela (mesma fonte) e podem ser fixados na sidebar de gráficos — sem abas de painel. No Dashboard, são painéis (abas), cada um uma grade editável de widgets.

Index vs Dashboard

O mesmo motor de widgets aparece nos dois contextos, mas corpo e sidebar permanecem simétricos e a grade é idêntica. Na Index, o corpo deriva dos dados (tabela + charts da mesma fonte), sem abas de painel. No Dashboard, são múltiplos painéis em abas, cada um uma grade editável.

Duas áreas simétricas

Corpo (grade de 12 colunas, cards redimensionáveis) e Sidebar de gráficos (cópias compactas, agrupadas pelo contexto de origem). Arrasta-se nos dois sentidos; fixar é copiar (vidas apartadas).

Corpo (grid)            Sidebar de gráficos
  layout em colunas       lista compacta empilhada
  redimensionável         agrupada por contexto (Compras, Contratos…)

Grid (12 colunas, masonry)

Colunas12
Gaps (x/y)16px / 16px
Altura da linha30px
Largura padrão de um novo card4 colunas
Largura/altura mínima3 col × 3 linhas (cards "altos" da index: 3 × 5)
Por linha (responsivo)1 a 4 cards, conforme a largura disponível

Cards redimensionáveis por alças (cantos/lados); a largura custom é preservada, senão o card preenche a linha. API dos blocos: EletroDS.

Responsividade

O recorte principal é lg = 1024px: acima é desktop; abaixo, mobile/tablet. Breakpoints genéricos em Foundations › Breakpoints.

ÁreaDesktop (≥1024px)Mobile/Tablet (≤1023px)
SidebarFixa e colapsável; o hambúrguer oculta/exibe o painelVira drawer; o hambúrguer abre/fecha por cima
Navegação inferiorOcultaVisível (barra inferior)
SubheaderAções inline (Novo/Restaurar/Limpar/export)Vão para o FAB "Mais ações"; busca encolhe
Tabs-âncoraLinha fixaRolam na horizontal
Arrastar widgetsPointer (mouse)Toque (touch-action: pan-y)
Tabela (Index)Largura total≤640px: rola na horizontal (min 760px)
Container vs viewport. O modo compact de um widget não depende da tela, e sim da largura do próprio bloco: abaixo de ~240px (ex.: fixado na sidebar) ele colapsa. Use a container query, não o breakpoint.

Painéis

A 1ª tela traz blocos curados; o usuário também cria novos painéis (em branco, ME interno ou externo via Power BI/Looker) e compartilha por link (leitura) ou template (cópia editável).

Painel de compras (curado) — blocos padrão da 1ª tela

Cada bloco se adapta ao grid como os widgets; o hero de criação encolhe e a ilustração some quando não cabe.

Modais — Novo painel e Compartilhar
Veja tambémPainel Widgets e Gráficos Estrutura de Index Construir páginas Index Charts