Criando visuais personalizados no Power BI com HTML e CSS

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:

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%;'>

        <span class='progress-label'>70%</span>

    </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&"%;'>

        <span class='progress-label'>"&fillValue&"%</span>

    </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!