logo ilegra laranja
banner

Criando visuais personalizados no Power BI com HTML e CSS

escrito por Fábio Kyrillos

6 minutos de leitura

null

Aprenda a usar HTML e CSS no Power BI para criar visuais personalizados que se alinham à identidade da sua marca, destacando dados com flexibilidade e inovação.

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.

Por que usar HTML e CSS para criar visuais personalizados?

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:

  • Adaptar os visuais à identidade visual da empresa, seguindo cores e estilos pré-definidos;
  • Criar soluções únicas que os visuais padrão não cobrem;
  • Inovar no design de dashboards, destacando informações importantes.

Exemplo de visual: barra de pedidos em aberto

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:

PedidoIdClienteStatus
1João SilvaConcluído
2Maria SouzaEm Aberto
3Carlos LimaConcluído
4Ana CostaEm Aberto
5Pedro RochaConcluído
6Laura NevesConcluído
7Bruno AlvesConcluído
8Paula DiasConcluído
9Renato MeloEm Aberto
10Juliana ReisConcluído

Nesta tabela, temos 10 pedidos, dos quais 7 estão concluídos e 3 ainda estão em aberto.

Passo a passo da criação do visual

Podemos utilizar o visual “HTML Content” do marketplace do Power BI, que nos permite criar e visualizar código HTML diretamente no painel.

  1. Adicionar o Visual HTML: Primeiro, instale o visual “HTML Content” do marketplace do Power BI. Com ele no dashboard, você será capaz de renderizar código HTML e estilizar usando CSS.
  2. Escrever o Código HTML e CSS: Observação: O DAX usa aspas duplas (“) para inserir texto. Portanto, ao construir o código em HTML e CSS, é recomendado usar aspas simples (‘) para evitar conflitos. Isso garantirá que o código seja interpretado corretamente tanto no HTML quanto no DAX.

Explicação de cada seção do código:

  • .progress-bar: Esta classe define a barra de progresso como um todo, incluindo largura, altura, cor de fundo e bordas arredondadas;
  • .progress-fill: Esta classe é responsável pela parte preenchida da barra de progresso, que mostra o progresso real. Possui cor de preenchimento, animação para suavizar o movimento e posicionamento relativo dentro da barra principal;
  • .progress-label: Esta classe define o estilo do rótulo interno que mostra a porcentagem de progresso;
  • @keyframes progress-animation: Define a animação para a barra de progresso, começando em 0% e preenchendo até o valor necessário.
<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.

Integrando os dados com DAX

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:

  • TotalOrders: Conta o total de linhas na tabela de pedidos.
    TotalOrders = COUNTROWS(fOrders)
  • CompletedOrders: Conta o total de pedidos que estão com o status ‘Concluído’.
    CompletedOrders = COUNTROWS(FILTER(fOrders, fOrders[Status] = “Concluído”))
  • OpenOrdersBar: Nesta etapa, vamos substituir os valores fixos utilizados no exemplo de HTML e CSS por variáveis DAX, tornando o visual dinâmico e adaptável aos dados reais.
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>

"

Benefícios da customização

  • Design Personalizado: Você pode facilmente modificar as cores, adicionar animações, ícones ou ajustar as dimensões da barra;
  • Flexibilidade: Com HTML e CSS, você pode criar elementos que se adaptam ao contexto dos seus relatórios, dando mais destaque ao que é importante;
  • Coerência Visual: Utilizando código HTML, é possível seguir à risca o manual de identidade visual da empresa, garantindo consistência entre relatórios e outros materiais.

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! 

Compartilhe esse post: