Todos os projetos

Painéis executivos com um sistema visual próprio em DAX

Cards, cabeçalhos e alertas gerados em DAX e HTML, com o tema de cada empresa vindo de uma tabela. O mesmo relatório veste a identidade de cada marca do grupo.

Contexto
Diretoria e C-level de um grupo com várias marcas
Meu papel
Especialista de BI
Período
2025–2026
Ferramentas
Power BI, DAX, HTML Content, SVG, CSS, Modelagem dimensional

Como a solução funciona

  1. Dimensão de empresas cores, logos e gradientes de cada marca
  2. Medidas DAX HTML e CSS gerados conforme o filtro
  3. Visual HTML Content cards, selos de status e tabelas
  4. Diretoria exceções primeiro, na identidade da marca

O problema

Os painéis da diretoria precisavam atender marcas diferentes do grupo, cada uma com sua identidade visual, e mostrar as exceções (quem estourou o orçamento, o que piorou) sem obrigar ninguém a caçar a informação numa tabela.

O que eu fiz

  • Tema vindo dos dados. Criei uma dimensão de empresas com cores, gradientes e logos de cada marca. Nenhuma cor fica fixa no código: tudo segue a empresa selecionada no filtro.
  • Biblioteca de componentes em DAX. Medidas que geram HTML e SVG: cabeçalho dinâmico, cards de KPI, selos de status em verde, amarelo e vermelho, fundo de página e as séries de gráfico no tema da marca.
  • Despesas das oito diretorias. Destaquei os três maiores ofensores com linhas expansíveis, um gráfico de dispersão do impacto e a projeção de fechamento do ano.
  • Regras para não quebrar. As medidas declaram todas as variáveis antes de montar o texto, limitam o número de linhas para não estourar a memória do visual e evitam recursos que o visual não suporta.
  • Padrão 2.0. Evoluí a abordagem para separar HTML e CSS em medidas distintas e documentei o padrão como uma skill de IA, para gerar novos componentes seguindo as mesmas regras.
DAX
Status Despesa HTML =
VAR _real = ABS ( [Despesa Realizada] )
VAR _meta = ABS ( [Despesa Orçada] )
VAR _pct = DIVIDE ( _real, _meta )
VAR _cor =
    SWITCH ( TRUE (), _pct <= 0.95, "#1e7a4c", _pct <= 1.05, "#9a5b00", "#b4232f" )
RETURN
    "<span class='selo' style='background:" & _cor & "'>"
        & FORMAT ( _pct, "0%" ) & " do orçado</span>"

Exemplo simplificado de um selo de status. Despesas vêm negativas no modelo, daí o ABS.

Resultado

  • Um único relatório atende todas as marcas, trocando a identidade visual pelo filtro de empresa.
  • A diretoria vê primeiro o que precisa de atenção: status por cor, maiores ofensores e projeção do ano na mesma tela.
  • Novos componentes seguem um padrão documentado, o que acelera e uniformiza as entregas.