6 minutos de leitura
O Power BI é amplamente reconhecido por suas ferramentas poderosas de visualização de dados, proporcionando insights que ajudam os tomadores de decisão a entenderem suas métricas. No entanto, muitas vezes os visuais padrão não oferecem o nível de personalização necessário para representar certos tipos de dados ou não atendem à identidade visual de uma marca. É aqui que entra a possibilidade de criar visuais personalizados usando HTML e CSS no Power BI.
Uma solução flexível para criar visuais únicos no Power BI é utilizar HTML e CSS, oferecendo uma experiência de design personalizada e responsiva. Neste artigo, vamos explorar como é possível criar um visual em HTML simples e atrativo para acompanhar pedidos em aberto.
HTML e CSS oferecem flexibilidade quase ilimitada para criar designs personalizados, possibilitando um controle maior sobre a apresentação dos dados. Isso é útil especialmente para:
Vamos considerar um exemplo simples: criar uma barra que nos permite acompanhar visualmente o progresso de pedidos em aberto. Imagine que queremos apresentar de uma maneira mais visual e atrativa a proporção de pedidos que já foram concluídos em relação ao total.
Tabela de Pedidos
Vamos usar a tabela abaixo como exemplo para ilustrar como funciona o visual:
| PedidoId | Cliente | Status |
| 1 | João Silva | Concluído |
| 2 | Maria Souza | Em Aberto |
| 3 | Carlos Lima | Concluído |
| 4 | Ana Costa | Em Aberto |
| 5 | Pedro Rocha | Concluído |
| 6 | Laura Neves | Concluído |
| 7 | Bruno Alves | Concluído |
| 8 | Paula Dias | Concluído |
| 9 | Renato Melo | Em Aberto |
| 10 | Juliana Reis | Concluído |
Nesta tabela, temos 10 pedidos, dos quais 7 estão concluídos e 3 ainda estão em aberto.
Podemos utilizar o visual “HTML Content” do marketplace do Power BI, que nos permite criar e visualizar código HTML diretamente no painel.
Explicação de cada seção do código:
<style>.progress-bar {
width: 100%;
height: 25px; /* Altura fixa para exemplo */
background-color: #e8e8e8; /* Cor de fundo fixa para exemplo */
border-radius: 10px; /* Arredondamento fixo para exemplo */
position: relative;
}
.progress-fill {
height: 100%;
background-color: #ff6f61; /* Cor de preenchimento fixa para exemplo */
border-radius: 10px;
animation: progress-animation 2s ease-out forwards; /* Duração da animação fixa para exemplo */
color: #ffffff; /* Cor do texto fixa para exemplo */
text-align: center;
position: absolute;
left: 0;
top: 0;
}
.progress-label {
display: inline-block;
width: 50%;
line-height: 25px; /* Altura fixa para exemplo */
font-weight: bolder; /* Peso da fonte fixa para exemplo */
}
@keyframes progress-animation {
0% {
width: 0%;
}
}
</style>
<div class='progress-bar'>
<div class='progress-fill' style='width: 70%;'>
</div>
</div>
No exemplo acima, usamos valores fixos para altura, cor de fundo, cor de preenchimento, duração da animação e outras propriedades. Esses valores podem ser substituídos por variáveis DAX para tornar o visual dinâmico, conforme mostrado na medida DAX a seguir.
Este código cria uma barra de progresso que varia de acordo com o percentual de pedidos concluídos, representado pelo valor {Progress}. A estilização aplicada torna a barra visualmente atrativa, utilizando cores vibrantes, cantos arredondados e uma animação suave para o progresso.
Podemos integrar a porcentagem de pedidos concluídos às métricas que temos em nossa base de dados no Power BI, de modo que o HTML seja preenchido dinamicamente com a porcentagem correta. Vamos definir duas medidas DAX simples:
OpenOrdersBar =// Valor de preenchimento da barra (0 a 100)
VAR fillValue = ([CompletedOrders] / [TotalOrders]) * 100
// Altura da barra em pixels
VAR barHeight = 25
// Cor de fundo da barra em RGB
VAR barBackgroundColor = "RGB(230, 230, 230)"
// Arredondamento dos cantos da barra em pixels
VAR borderRadius = 10
// Cor de preenchimento da barra em RGB
VAR fillColor = "RGB(255, 100, 90)"
// Duração da animação em segundos
VAR animationDuration = 2
// Cor do texto interno da barra em RGB
VAR textColor = "RGB(255, 255, 255)"
// Peso da fonte do texto interno: opções - lighter, normal, bolder
VAR fontWeight = "bolder"
RETURN
"<style>
.progress-bar {
width: 100%;
height: "&barHeight&"px;
background-color: "&barBackgroundColor&";
border-radius: "&borderRadius&"px;
position: relative;
}
.progress-fill {
height: 100%;
background-color: "&fillColor&";
border-radius: "&borderRadius&"px;
animation: progress-animation "&animationDuration&"s ease-out forwards;
color: "&textColor&";
text-align: center;
position: absolute;
left: 0;
top: 0;
}
.progress-label {
display: inline-block;
width: 50%;
line-height: "&barHeight&"px;
font-weight: "&fontWeight&";
}
@keyframes progress-animation {
0% {
width: 0%;
}
}
</style>
<div class='progress-bar'>
<div class='progress-fill' style='width: "&fillValue&"%;'>
</div>
</div>
"
Criar visuais personalizados com HTML e CSS pode elevar significativamente a qualidade e a estética dos relatórios no Power BI, agregando muito valor na hora de comunicar informações de maneira eficaz. A nossa barra de progresso foi apenas um exemplo, mas as possibilidades são vastas, incluindo a criação de gráficos interativos e até visuais responsivos.
Que tal experimentar e adicionar um toque pessoal ao seu próximo dashboard? O que você gostaria de explorar mais sobre visuais personalizados? Compartilhe suas ideias ou deixe suas dúvidas nos comentários!
