Formatação condicional, temas, templates BR

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

Objetivo#

Ao final desta aula você vai aplicar semáforo e tema.

Vídeo#

Identificador: acd-330-09-formatacao-condicional-temas · Duração-alvo: 6 min · Tela: /dashboards.

Roteiro (capítulos):

1. 0:00–1:15 — regras por coluna (semáforo) (/dashboards/[id]) — ordem das regras e operadores.
2. 1:15–2:15 — escala de calor e barras de dados (/dashboards/[id]) — as outras duas formas de destaque.
3. 2:15–3:15 — acessibilidade: cor não basta (/dashboards/[id]) — combinar cor com ícone.
4. 3:15–4:30 — tema do painel (/dashboards/[id]) — paleta, fonte, fundo, contraste.
5. 4:30–5:30 — templates BR via import/export (/dashboards/[id]) — estrutura sem dado.
6. 5:30–6:00 — saneamento: por que não dá para injetar cor — a proteção por trás do campo de cor.

Conteúdo#

Cor com regra, não cor de gosto

Formatação condicional pinta valores conforme regras que você define, para o número gritar sozinho quando estoura um limite — o equivalente da formatação condicional do Excel/Power BI, aplicada por coluna de um visual. Ela tem três formas: regras por coluna (semáforo), escala de calor (heat) e barras de dados. Vale sobretudo em tabela, matriz e heatmap (aula 5). Temas e templates resolvem um problema diferente, mas vizinho: a identidade visual do painel inteiro, não célula a célula.

Como aparece no produto

Nas regras por coluna, você monta uma lista de condições coluna · operador · valor · cor, com um ícone opcional (▲ ▼ •). Os operadores são >, >=, <, <=, =, !=. A avaliação segue a regra do Power BI: a primeira regra que casar com o valor vence — por isso a ordem importa, e a condição mais específica deve vir primeiro. Um exemplo de três regras para "Margem %" — < 0 vermelho ▼, < 10 âmbar •, >= 10 verde ▲ — classifica -2% como vermelho, 7% como âmbar e 18% como verde.

A escala de calor liga uma cor contínua nas células numéricas (valores baixos numa ponta, altos na outra) — é o mecanismo por trás do visual heatmap, disponível também como opção dentro de tabela/matriz. As barras de dados desenham uma mini-barra proporcional dentro da própria célula, útil para ranking ("qual filial vende mais") sem sair da tabela.

As cores das regras passam pelo mesmo saneamento anti-injeção da paleta do tema — não existe caminho para injetar um valor de cor arbitrário; usar as cores do tema mantém o painel coeso.

Separado da formatação condicional, o tema do painel define a paleta (6 cores hex validadas), fonte, fundo e estilo de cartão — vale para todos os visuais ao mesmo tempo, não célula a célula. O editor roda uma verificação de contraste antes de aplicar e sanitiza as cores contra injeção. Templates exportam/importam essa estrutura em JSON — e, por design, o template nunca leva dado, só a estrutura (cores, layout, tipos de visual); o import tem proteção explícita contra __proto__ (um vetor clássico de poluição de protótipo em JSON malicioso).

Exemplo na Aurora Varejo

Na tabela "Receita por filial", aplique uma barra de dados na coluna receita e uma regra de cor na coluna margem: São Paulo 250/18% (verde), Rio de Janeiro 90/7% (âmbar), Belo Horizonte 140/-2% (vermelho). A medida por trás da Margem % é:

DIVIDIR(SOMA(valor) - SOMA(custo); SOMA(valor))

Depois, exporte o tema "Aurora" (6 cores) como template e reimporte num painel novo — confirme que ele nasce com a mesma paleta, mas sem nenhum dado de vendas.

Erros comuns de design

• Cor sem significado. Pintar uma coluna só porque "fica bonito", sem uma regra por trás, é ruído — reserve cor para o que exige ação ou decisão, nunca decoração.
• Regra na ordem errada. Colocar a condição mais genérica (>= 10) antes da mais específica (< 0) faz a regra genérica vencer sempre — releia a ordem antes de salvar.
• Só cor, sem ícone. Para quem não distingue bem as cores (daltonismo) ou lê em preto e branco, cor sozinha não comunica — combine com ▲▼• (ver acessibilidade abaixo).
• Exagerar no destaque. Cor em toda coluna satura a leitura; reserve o semáforo para 1-2 colunas que realmente pedem atenção imediata.
• Tema sem checar contraste. Uma cor de destaque muito clara sobre fundo claro reduz a legibilidade mesmo passando pela verificação automática — teste visualmente antes de publicar.

Acessibilidade

A cor sozinha não comunica para todo mundo. Combine cor + ícone (▲▼•) para que a informação sobreviva em tons de cinza e para leitores com daltonismo. O tema já passa por verificação de contraste, mas isso não substitui o ícone nas regras de formatação condicional.

Estado atual (Preview)

Os schemas versionados de widget/tema (C01.3) e os temas avançados/tokens/templates BR/contraste (C14.3) são GA-candidato: a lógica de qual cor cada valor recebe, o saneamento anti-injeção, a verificação de contraste e a proteção anti-__proto__ no import são cobertos por suíte determinística. O selo da aula fica em Preview porque herda o teto do editor — a aparência final na tela não tem teste de snapshot visual, então o resultado pixel-a-pixel é NÃO MEDIDO.

Faça você mesmo#

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

1. Na matrix/table de Receita por filial (aula 5), configure uma barra de dados na coluna receita.
2. Configure uma regra de cor na coluna margem: < 0 vermelho ▼, < 10 âmbar •, >= 10 verde ▲.
3. Teste a ordem das regras: mova a >= 10 para o topo e confirme que o resultado muda (e piora).
4. Reordene de volta e combine cada regra com o ícone correspondente.
5. Abra a configuração de tema do painel e ajuste a paleta para as cores da Aurora.
6. Confirme que a verificação de contraste não acusa problema na combinação escolhida.
7. Exporte o tema como template e reimporte num painel novo, confirmando que ele chega sem dados.

Você terminou quando: a coluna margem tem semáforo com ícone, a barra de dados está na coluna receita, e o template do tema reimportado reproduz a paleta sem dado algum.

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/formatacao-condicional
• bi/editor-canvas-paginas-temas

Capacidades ensinadas#

C01.3 · C14.3 — o selo exibido na aula é sempre o estado mais conservador entre as capacidades citadas; nada aqui é "GA".