Biblioteca de Componentes

Componentes HTML para o seu relatório

O construtor abaixo gera uma medida DAX dinâmica que respeita filtros, segmentações e o contexto atual do Power BI.

CRIADOR DE VISUAL

Tabela HTML dinâmica

Informe os nomes reais do modelo, escolha a agregação e defina a aparência.

Uso: copie a medida DAX para o Power BI e conecte-a ao visual HTML da loja.

HTML para preview

Medida DAX dinâmica

Prévia no visual HTML

RECEITA

R$ 82,4 mil

▲ 8,2% vs. período anterior

KPI

KPI Card com Variação

Card para indicador principal com comparação ao período anterior.

Ideal para

Receita, margem, conversão e ticket médio.

Ver snippet HTML

<div style="font-family:Arial;padding:16px;background:#FFF;border-left:4px solid #FBC02D"><small style="color:#64748B">RECEITA</small><div style="font-size:28px;font-weight:700;color:#041E43">R$ 82,4 mil</div><span style="color:#16803C">▲ 8,2% vs. período anterior</span></div>

Como usar

Abra um visual HTML no Power BI
Cole o snippet e substitua os valores pelas medidas

Baixar .html Baixar .md

Prévia no visual HTML

Meta mensal 72%

Indicador

Barra de Progresso

Indicador visual de realizado contra uma meta definida.

Ideal para

Metas comerciais, SLA e projetos.

Ver snippet HTML

<div style="font-family:Arial;padding:16px;background:#FFF;color:#041E43"><b>Meta mensal 72%</b><div style="height:8px;margin-top:10px;background:#E2E8F0"><i style="display:block;width:72%;height:100%;background:#3258A6"></i></div></div>

Como usar

Defina o percentual realizado
Troque width:72% pela medida

Baixar .html Baixar .md

Prévia no visual HTML● Dentro da meta

Status

Status Pill

Etiqueta compacta para comunicar o estado de um indicador.

Ideal para

Projetos, estoque e alertas.

Ver snippet HTML

<span style="display:inline-block;padding:7px 11px;border-radius:999px;background:#E5F6EB;color:#126B38;font:600 12px Arial">● Dentro da meta</span>

Como usar

Escolha o estado exibido
Altere texto e cores

Baixar .html Baixar .md

Prévia no visual HTML

Categoria	Valor
Produto A	R$ 42 mil

Tabela

Tabela de Resumo

Tabela HTML compacta para comparar categorias e períodos.

Ideal para

Análises operacionais e financeiras.

Ver snippet HTML

<table style="width:100%;border-collapse:collapse;font:13px Arial;color:#041E43"><tr style="background:#021689;color:#FFF"><th style="padding:8px;text-align:left">Categoria</th><th style="padding:8px">Valor</th></tr><tr><td style="padding:8px">Produto A</td><td style="padding:8px">R$ 42 mil</td></tr></table>

Como usar

Substitua as linhas por medidas
Ajuste os estilos inline

Baixar .html Baixar .md

Prévia no visual HTML

FATURAMENTOR$ 128,6 mil▲ 14,8%

KPI

Cartão de Valor Animado

Cartão com entrada suave para destacar um valor principal.

Ideal para

Indicadores executivos.

Ver snippet HTML

<div class="pp-kpi-animated" style="font-family:Arial;padding:18px;background:#021689;color:#FFF"><small style="color:#FBC02D">FATURAMENTO</small><strong style="display:block;font-size:30px">R$ 128,6 mil</strong><span style="color:#B8F2CC">▲ 14,8%</span></div>

Como usar

Substitua valor e percentual
Mantenha a classe de animação

Baixar .html Baixar .md

Prévia no visual HTML

Vendas · últimos 7 dias

Gráfico

Sparkline de Indicador

Mini gráfico de tendência para uma métrica.

Ideal para

Vendas, acessos e chamados.

Ver snippet HTML

<div style="font:13px Arial;padding:14px;color:#041E43"><b>Vendas · últimos 7 dias</b><svg viewBox="0 0 220 48" style="width:100%;height:48px"><polyline points="0,38 35,30 70,34 105,18 140,24 175,10 220,5" fill="none" stroke="#3258A6" stroke-width="4"/></svg></div>

Como usar

Substitua os pontos
Ajuste a cor do traço

Baixar .html Baixar .md

Prévia no visual HTML

MÊS ATUALR$ 54.200+6,4%

KPI

Comparativo de Períodos

Compara o valor atual com o período anterior.

Ideal para

Mês contra mês ou ano contra ano.

Ver snippet HTML

<div style="font:13px Arial;padding:16px;color:#041E43"><span>MÊS ATUAL</span><strong style="display:block;font-size:25px">R$ 54.200</strong><span style="color:#16803C">+6,4%</span></div>

Como usar

Conecte as medidas
Aplique cor condicional

Baixar .html Baixar .md

Prévia no visual HTML! Atenção necessária

Status

Badge de Alerta

Alerta visual para sinalizar desvios e pendências.

Ideal para

Estoque baixo e SLA vencido.

Ver snippet HTML

<span style="padding:7px 11px;background:#FFF1F2;color:#B42318;border:1px solid #FDA4AF;border-radius:999px;font:600 12px Arial">! Atenção necessária</span>

Como usar

Defina a regra
Troque o texto

Baixar .html Baixar .md

Prévia no visual HTML

Top categorias

Produto A 82%

Gráfico

Ranking Horizontal

Ranking simples para destacar maiores resultados.

Ideal para

Produtos, regiões e vendedores.

Ver snippet HTML

<div style="font:13px Arial;padding:14px;color:#041E43"><b>Top categorias</b><p>Produto A <b style="float:right">82%</b></p><div style="height:7px;background:#E2E8F0"><i style="display:block;width:82%;height:100%;background:#3258A6"></i></div></div>

Como usar

Ordene categorias
Substitua percentuais

Baixar .html Baixar .md

Prévia no visual HTML

Andamento do projeto

Planejado Em execução Concluído

Navegação

Timeline de Etapas

Linha do tempo para mostrar etapas e progresso.

Ideal para

Projetos, onboarding e vendas.

Ver snippet HTML

<div style="font:13px Arial;padding:16px;color:#041E43"><b>Andamento do projeto</b><div style="height:3px;margin-top:18px;background:linear-gradient(to right,#3258A6 55%,#E2E8F0 55%)"></div><small>Planejado &nbsp;&nbsp; Em execução &nbsp;&nbsp; Concluído</small></div>

Como usar

Defina as etapas
Destaque a etapa atual

Baixar .html Baixar .md