Filtros e interações

Selos usados: GA-candidato · Preview · NÃO MEDIDO · Roadmap. Legenda e template (selo + 9 campos) em README.

Achado central: todo filtro/slicer é client-side sobre o snapshot — nunca vira SQL. Isso tem três consequências boas: custo zero por interação, nenhuma superfície de injeção via slicer, e o limite passa a ser o que está no snapshot. Exemplos usam o workspace sintético Comércio Aurora Ltda.

Slicers (8 tipos) e escopos#

Selo: GA-candidato

1. O que é — 8 tipos de segmentador: select, daterange, buttons, range, hier (encadeado), number ("e se"), field (campo-parâmetro) e measure.
2. Quando usar — recortar o painel por categoria, período, faixa; ou trocar campo/medida (field/measure) e simular número (number/what-if).
3. Como funciona — cada slicer tem escopo: dashboard, página ou por visual (destino); busca no filtro (≥20 opções), multi-seleção (OR/AND), selecionar tudo/limpar. Sincronização entre páginas (syncPages): um controle numa página vale no painel inteiro.
4. Pré-requisitos — snapshot com as colunas usadas pelo slicer.
5. Como validar — adicione um select de produtos.categoria no escopo do dashboard, selecione "Bebidas" e confirme todos os visuais recortando; mude o escopo para um visual só e confirme o aviso quando ele "não alcança nada".
6. Limites e ressalvas — filtro pessoal por usuário (slicer pessoal) é Roadmap; o que existe por usuário é RLS (ver Segurança). Slicers operam sobre o snapshot, não sobre a base viva.
7. Dados de exemplo (sintéticos) — categorias {Bebidas, Limpeza, Higiene}; selecionar "Bebidas" deixa só receita=250.
8. Evidência (código/teste) — DASH_FILTER_TYPES em dashboard-widgets.ts; renders em dashboard-filters.tsx; testes de slicers.
9. Estado & maturidade — GA-candidato.

Datas relativas#

Selo: GA-candidato

1. O que é — presets de período: hoje, 7d, 30d, mês, ano, e genérico -Nd/-Nw/-Nm/-Ny (estilo Power BI), no fuso do painel.
2. Quando usar — "últimos 30 dias" que anda sozinho a cada dia.
3. Como funciona — presetRange calcula a janela no fuso configurado do painel.
4. Pré-requisitos — uma coluna de data no snapshot.
5. Como validar — configure "últimos 30 dias" e confirme o intervalo se deslocando ao mudar a data de referência.
6. Limites e ressalvas — depende do fuso do painel (America/Sao_Paulo por padrão).
7. Dados de exemplo (sintéticos) — hoje=2026-07-31 → janela 2026-07-02..07-31.
8. Evidência (código/teste) — presetRange (dashboard-widgets.ts) + teste.
9. Estado & maturidade — GA-candidato.

Cross-filter / cross-highlight e editor de interações#

Selo: GA-candidato

1. O que é — clicar num visual realça a seleção e recorta os demais; e um editor de interações origem→destino para definir, por par de visuais, se a ação é Filtrar / Realçar / Ignorar.
2. Quando usar — o gesto que "parece Power BI": clicar numa barra e ver o resto do painel reagir.
3. Como funciona — clique aplica cross-filter (Ctrl acumula; re-clique limpa); o editor de pares define o modo por destino, com herança do modo global ("padrão") e preview em memória antes de salvar; saneamento com allowlist (modos válidos, ids existentes, sem auto-referência, teto de pares). A mesma semântica vale no viewer autenticado, no público e no embed.
4. Pré-requisitos — dois ou mais visuais na página.
5. Como validar — no editor de interações, defina "Barras de categoria → Tabela = Filtrar"; clique numa barra e confirme a tabela recortando; troque para "Ignorar" e confirme que a tabela não reage.
6. Limites e ressalvas — a persistência da seleção entre sessões é parcial (ver abaixo).
7. Dados de exemplo (sintéticos) — clicar "Bebidas" nas barras filtra a tabela para os itens de Bebidas.
8. Evidência (código/teste) — interactions-editor.tsx, interactions-sanitize.ts + teste; applyCrossFilter (dashboard-widgets.ts); dashboard-view.tsx.
9. Estado & maturidade — GA-candidato; fecha a lacuna "cross-filter por par sem editor / não passado à view autenticada" da auditoria inicial.

Drill-down / drill-up#

Selo: GA-candidato

1. O que é — descer/subir níveis por hierarquia de colunas e por datas (ano → mês → dia).
2. Quando usar — explorar de "Região" até "Cidade", ou de ano até dia.
3. Como funciona — config.drill sobre a hierarquia; chips de contexto + botão de drill-up; datas usam dateBucket.
4. Pré-requisitos — hierarquia definida no modelo (ver Modelo semântico).
5. Como validar — num visual com a hierarquia Região > UF > Cidade, clique para descer de Sudeste até São Paulo e use drill-up para voltar.
6. Limites e ressalvas — drill opera sobre o snapshot do visual.
7. Dados de exemplo (sintéticos) — Sudeste → SP → São Paulo.
8. Evidência (código/teste) — config.drill (dashboard-widgets.ts), dashboard-filters.tsx.
9. Estado & maturidade — GA-candidato.

Drill-through entre páginas#

Selo: GA-candidato

1. O que é — saltar para outra página levando o contexto (por coluna), automático no clique ou por botão, com chip "voltar".
2. Quando usar — clicar num produto e ir para a página de detalhe daquele produto.
3. Como funciona — DashPageTab.drillthrough define a coluna-chave; o destino nasce filtrado pelo valor clicado.
4. Pré-requisitos — página de destino configurada como alvo de drill-through.
5. Como validar — configure "Detalhe do produto" como destino por produtos.id; clique num produto na visão geral e confirme a página de detalhe já filtrada.
6. Limites e ressalvas — o contexto passado é por coluna configurada.
7. Dados de exemplo (sintéticos) — clicar produto id=10 abre "Detalhe" com produto_id=10.
8. Evidência (código/teste) — DashPageTab.drillthrough, dashboard-filters.tsx.
9. Estado & maturidade — GA-candidato.

Tooltips e páginas de dica (tooltip pages)#

Selo: GA-candidato

1. O que é — tooltips com campos extras, tooltip rico (conteúdo além do número) e páginas de dica (uma página inteira do painel como tooltip, estilo Power BI).
2. Quando usar — mostrar detalhes ao passar o mouse sem poluir o visual.
3. Como funciona — config.tooltipFields/tooltipPage; a página de dica fica oculta da barra e aparece ao passar o mouse sobre o ponto.
4. Pré-requisitos — campos extras e/ou uma página marcada como dica.
5. Como validar — adicione produtos.marca como campo de tooltip e confirme que aparece ao passar o mouse; crie uma tooltip page e confirme a prévia.
6. Limites e ressalvas — tooltip rico é conteúdo estruturado; o motor de dados é o mesmo do visual de origem.
7. Dados de exemplo (sintéticos) — tooltip de "Receita por categoria" mostrando marca e nº de pedidos.
8. Evidência (código/teste) — dashboard-tooltip.ts (+15 testes), tooltip-rich.ts + teste.
9. Estado & maturidade — GA-candidato.

Bookmarks#

Selo: GA-candidato

1. O que é — até 10 marcadores que guardam o estado completo do painel, aplicáveis por botão.
2. Quando usar — salvar "visão executiva" e "visão detalhada" e alternar com um clique.
3. Como funciona — o bookmark guarda seleções/filtros/estado; um botão pode aplicá-lo.
4. Pré-requisitos — estado configurado para salvar.
5. Como validar — configure filtros, salve como bookmark "Julho", mude tudo e aplique o bookmark para restaurar.
6. Limites e ressalvas — bookmarks são do dashboard, não por usuário.
7. Dados de exemplo (sintéticos) — bookmark "Bebidas · Julho".
8. Evidência (código/teste) — saveBookmarksAction, dashboard-filters.tsx.
9. Estado & maturidade — GA-candidato.

Persistência e compartilhamento de seleções por URL#

Selo: Preview

1. O que é — a seleção viaja na URL (?f=, base64url) para compartilhar uma visão filtrada.
2. Quando usar — mandar um link já filtrado para um colega.
3. Como funciona — a URL grava seleção + data; parâmetros (field/measure/what-if) também viajam pelo codec de estado.
4. Pré-requisitos — filtros/parâmetros aplicados.
5. Como validar — filtre "Bebidas", copie a URL, abra em outra aba e confirme o filtro restaurado.
6. Limites e ressalvas — faixa/hierarquia não sobrevivem apenas pela URL (dependem de bookmark); não há autosave por usuário. Por isso Preview.
7. Dados de exemplo (sintéticos) — ?f=… com categoria=Bebidas, período=Julho.
8. Evidência (código/teste) — dashboard-filters.tsx (?f=), url-state.ts.
9. Estado & maturidade — Preview; persistência completa em evolução.

Estado & evidência: filtros/slicers/drill/tooltips/bookmarks cobertos por testes puros; todo filtro é client-side sobre o snapshot (custo zero, sem injeção). Estados derivados de matriz de estados do produto (teto Preview). Nenhum recurso é GA de produto.