Analytics Block

O AnalyticsBlock é a camada de contexto do sistema de visualização do EDS. Ele envolve qualquer chart (via slot) e adiciona o cabeçalho padronizado: título, subtítulo, badge de status, seletor de período e menu de ações. Transforma um gráfico genérico num bloco de análise com significado.

Camadas: Charts (desenho) → Analytics Block (contexto) → Widget (configuração do usuário) → Dashboard (layout). Aqui é a segunda.

API completa no EletroDS — props, slots, eventos e demo interativa.

Quando usar

Use o AnalyticsBlock sempre que um gráfico precisar de identidade e contexto numa tela: um título que diz o que ele mede, um período que o usuário possa trocar, um status que sinalize saúde do dado e ações para fixar, copiar ou expandir. Sozinho, um chart é só desenho; dentro do bloco ele vira uma peça que a pessoa entende e opera.

Quando NÃO usar

Não use para um número solto sem contexto de período nem ações — nesse caso, um KpiCard direto basta. Para layout de vários blocos lado a lado, o bloco não resolve grid: use o Dashboard.

Exemplos

O mesmo bloco envolve qualquer chart — com tooltip no hover, linha-guia de interação e menu de ações no header:

Bar Chart

Line Chart

Pie Chart

Donut Chart

Com status="error" o badge fica vermelho. KpiCard também entra no bloco (indicador + tendência):

KPI

Status e período

O badge de status (ok / warning / error) só aparece quando definido — sem ele, nenhum selo "OK" padrão polui o header. Para um rótulo próprio (texto + cor), um selo custom tem prioridade sobre o status semântico.

O seletor de período ocupa o header só quando há opções para escolher; sem opções, sem seletor. Trocar o período não busca dados sozinho: o bloco não faz fetch. O squad fornece os dados ao chart filho e reage à troca de período recarregando o que precisa.

Menu de ações

O kebab (⋮) reúne as ações do bloco: Editar, Tipo de gráfico ▸, Copiar para ▸, Fixar na sidebar, Redefinir resolução padrão, Visualizar expandido e Remover.

Tipo de gráfico troca a visualização sem refazer o bloco (Área, Barra, Coluna, Linha, Rosca, Pizza, Radar, Radial, Tag Cloud, KPI) — o submeno lista os tipos compatíveis com os dados.
Copiar para envia uma cópia independente para outra dashboard ou área; editar a cópia não afeta o original.
No modo compacto (fixado na sidebar) o menu troca Fixar / Redefinir / Visualizar por Desafixar da sidebar e Mover para o body, refletindo as ações que fazem sentido naquele contexto.

Cabeçalho de conteúdo dinâmico

Ative o 2º header dentro do corpo (padrão dos charts de estilo Interactive), acima do gráfico, com título/descrição próprios e cards de dado fixado que deixam de ser informativos e viram um mini-painel sincronizado com o gráfico:

Período filtra de verdade. O seletor (7d/30d/ano) filtra os dados por data → gráfico e stats recalculam juntos.
Tendência ↑↓%. Cada card compara o valor do período com o período anterior de mesmo tamanho: verde sobe, vermelho desce, "–" estável.
Em foco (hover). Passar o mouse num segmento do gráfico atualiza o card "em foco" com a categoria, o valor e a % do total.
Cross-filter (clique). Clicar num card destaca a categoria no gráfico — barra/fatia realçada ou guia vertical em linha/área. Clicar de novo limpa. É two-way com o clique no próprio gráfico.
Responsivo. Com largura sobrando mostra 2 cards + o card em foco; estreito (< ~420px) mostra 1 card e suprime o foco (não estoura).

Os stats e o gráfico vêm da mesma raiz (config + dados + período). Por isso preview (drawer), index, sidebar e dashboard mostram exatamente o mesmo.

Modo compacto & herança

O compact colapsa o header (1 linha, sem descrição/filtros/footer; período vai pro menu) e — o ponto-chave — propaga o modo ao chart filho automaticamente. O chart inserido no slot herda compact (esconde eixos, legenda e tooltip) sem precisar de prop manual.

Ele entra em compact de dois jeitos:

Automático por largura: o bloco observa o próprio tamanho e colapsa sozinho quando a coluna fica estreita (< 240px) — ex.: ao ser inserido na Sidebar. Nesse modo o seletor de período sai do header e vira item do menu ⋮.
Manual: forçar o modo compact (override) quando o layout exige.

Compact é por container, não por tela. O bloco colapsa quando a própria largura fica < 240px (não pela viewport) — por isso fica completo no corpo e compact na sidebar na mesma tela. Ver Responsivo.

O AnalyticsBlock já é o card e força o chart filho a renderizar sem card próprio (automaticamente) — você não precisa configurar isso. Sem card-dentro-de-card.