Cross-filter, interações, drill-down/through, tooltips

Selo de estado: Preview (teto atual do produto) · Curso ACD-330 — Dashboards: visuais, filtros, interações e design · Aula 8 de 12 · Atualizado em 2026-10-04.

Objetivo#

Ao final desta aula você vai desenhar interações e drill-through.

Vídeo#

Identificador: acd-330-08-interacoes-drill-tooltips · Duração-alvo: 8 min · Tela: /dashboards.

Roteiro (capítulos):

0:00–1:15 — cross-filter com um clique (/dashboards/[id]) — clicar numa barra recorta o resto do painel.
1:15–3:00 — o editor de interações (/dashboards/[id]) — origem → destino, Filtrar/Realçar/Ignorar.
3:00–4:30 — drill-down/up (/dashboards/[id]) — hierarquia de colunas e de datas.
4:30–6:00 — drill-through entre páginas (/dashboards/[id]) — saltar levando o contexto.
6:00–7:15 — tooltips e páginas de dica (/dashboards/[id]) — detalhe sem poluir o visual.
7:15–8:00 — o mesmo comportamento em 3 lugares — viewer autenticado, público e embed.

Conteúdo#

O painel reage ao clique — a pergunta é "como"

Um painel estático é uma foto; um painel interativo deixa o leitor perguntar "e dentro disso?" sem sair da tela. Esta aula cobre quatro mecanismos que tornam isso possível: cross-filter (clicar recorta), o editor de interações (você decide o que cada clique faz, par a par), drill (descer de nível) e tooltips (detalhe sob o mouse, sem ocupar espaço fixo).

Como aparece no produto

Clicar num ponto de dado (uma barra, uma fatia, uma linha do mapa) aplica cross-filter: a seleção realça aquele ponto e recorta os demais visuais da página — Ctrl+clique acumula mais de uma seleção, e um re-clique no mesmo ponto limpa o filtro. Por padrão todo par de visuais segue esse comportamento "Filtrar", mas o editor de interações permite definir, par a par (origem → destino), se a ação é Filtrar, Realçar (destaca sem esconder o resto) ou Ignorar (aquele destino não reage a cliques naquela origem). O editor mostra uma prévia em memória antes de você salvar, herda um modo global ("padrão") quando você não especifica um par, e passa por saneamento: só aceita modos válidos, ids de visual que existem de fato, nunca permite um visual apontar para si mesmo, e respeita um teto de pares configurados.

Drill-down/up desce e sobe níveis de duas formas: por hierarquia de colunas (ex.: Região → UF → Cidade, definida no modelo semântico) ou por data (ano → mês → dia, automático em qualquer campo de tempo). Ao descer, chips de contexto mostram o caminho percorrido, com um botão de drill-up para voltar um nível por vez.

Drill-through é diferente de drill-down: em vez de abrir mais detalhe no mesmo visual, ele salta para outra página, levando o valor clicado como filtro. Configure a página de destino (ex.: "Detalhe do produto") com uma coluna-chave (ex.: produtos.id); o salto pode ser automático no clique ou disparado por um botão, e um chip "voltar" leva o leitor para onde ele estava.

Tooltips mostram contexto sem abrir espaço fixo no layout: além dos campos padrão, você pode adicionar campos extras (ex.: marca do produto) ou configurar um tooltip rico — conteúdo estruturado, não só um número solto. Quando o tooltip precisa ser mais elaborado que um cartão simples, uma página de dica (tooltip page) inteira do painel pode ser usada como conteúdo do tooltip — ela fica oculta da barra de páginas normal e só aparece ao passar o mouse sobre o ponto, no estilo de ferramentas de BI corporativas.

Uma garantia importante atravessa os quatro mecanismos: a mesma semântica de cross-filter, drill e tooltip vale no viewer autenticado, no painel público e no embed — o comportamento que você desenha no editor não muda dependendo de onde o leitor abre o painel.

Exemplo na Aurora Varejo

No editor de interações do painel "Comercial — Aurora", defina "Barras de categoria → Mapa = Filtrar" e "Barras de categoria → Linha mensal = Filtrar". Clique em "Bebidas" nas barras e confirme o mapa e a linha recortando. Troque o par "Barras → Tabela de detalhe" para "Ignorar" e confirme que a tabela não reage mais a esse clique específico. Configure a página "Detalhe do produto" como destino de drill-through pela coluna produtos.id; clique num produto na visão geral e confirme que a página de detalhe já abre filtrada por aquele produto, com o chip "voltar" visível.

Erros comuns de design

Cross-filter ligado em tudo, sem revisar. O padrão recorta todo par de visuais; se um gráfico de contexto não deveria reagir a outro, configure "Ignorar" explicitamente em vez de deixar o comportamento padrão surpreender o leitor.
Drill-through sem chip de volta visível. Levar o leitor para outra página sem um caminho claro de retorno é a reclamação mais comum desse recurso — confirme que o "voltar" aparece.
Confundir drill-down com drill-through. Drill-down aprofunda no mesmo visual (mesma pergunta, mais detalhe); drill-through muda de página (outra pergunta, sobre o item clicado). Usar um no lugar do outro confunde a navegação.
Tooltip rico lotado de campos. Tooltip serve para contexto rápido; mais de 5–6 campos extras já pede uma página de dica em vez de um tooltip simples.
Testar interação só no viewer autenticado. Como o mesmo comportamento vale no público e no embed, teste a jornada completa de clique nesses dois contextos antes de distribuir o link.

Estado atual (Preview)

O editor de interações origem → destino (C03.1) e o conjunto tooltip rico sanitizado + breadcrumbs de drill + teclado/toque (C03.4) são GA-candidato: cobertos por suíte determinística (interactions-sanitize.ts, tooltip-rich.ts, drill-breadcrumbs.ts, applyCrossFilter). O selo da aula continua Preview porque herda o teto do editor como um todo; a persistência da seleção de cross-filter entre sessões é parcial — ao recarregar o painel do zero, a seleção clicada não necessariamente volta (isso é diferente de um bookmark salvo, que guarda o estado completo de propósito).

Nota

Antes de publicar, abra o editor de interações e leia a lista de pares configurados em voz alta: "clicar em X faz Y com Z" — se alguma frase não faz sentido de negócio, o par está errado.

Necessidade	Mecanismo
"Clicar aqui deveria recortar aquilo"	Cross-filter + editor de interações (Filtrar)
"Clicar aqui deveria só destacar, sem esconder o resto"	Editor de interações (Realçar)
"Esse par não deveria reagir"	Editor de interações (Ignorar)
"Descer de Região até Cidade no mesmo gráfico"	Drill-down por hierarquia
"Ver o detalhe de um item numa página própria"	Drill-through
"Mostrar contexto sem ocupar espaço fixo"	Tooltip (rico ou página de dica)

Faça você mesmo#

No workspace de treino Aurora Varejo (abra /dashboards no console):

No painel "Comercial — Aurora", abra o editor de interações.
Defina "Barras de categoria → Mapa = Filtrar" e "Barras de categoria → Linha mensal = Filtrar".
Clique em "Bebidas" nas barras e confirme o mapa e a linha recortando.
Mude o par "Barras → Tabela de detalhe" para "Ignorar" e confirme que a tabela não reage.
Configure a página "Detalhe do produto" como destino de drill-through pela coluna produtos.id.
Clique num produto na visão geral e confirme que "Detalhe do produto" abre já filtrado, com chip "voltar".
Adicione produtos.marca como campo extra de tooltip num dos visuais e confirme que aparece ao passar o mouse.
Crie uma página de dica simples e associe-a como tooltip de outro visual.

Você terminou quando: o editor de interações tem pelo menos um par "Filtrar" e um "Ignorar" configurados, o drill-through salta com o chip "voltar" visível, e o tooltip rico mostra o campo extra.

Checagem rápida#

Três perguntas no final da aula, corrigidas no servidor. A aula só conta como concluída depois da checagem.

Documentação relacionada#

bi/filtros-interacoes

Capacidades ensinadas#

C03.1 · C03.4 — o selo exibido na aula é sempre o estado mais conservador entre as capacidades citadas; nada aqui é "GA".