Entenda a estrutura responsável pelos temas personalizados do Power BI
- #Power BI
A aplicação de um tema personalizado no Power BI é feita através de um arquivo JSON que contém todas as propriedades dos visuais, como cor, fonte e tamanho. Com esse arquivo JSON, podemos acessar as propriedades e alterar as opções de formatação desejadas para os visuais que serão apresentados no dashboard. O JSON abaixo contém a estrutura completa responsável por implementar as mudanças no nosso dashboard.
O estrutura do JSON será explicada através de alguns trechos do código para que seja possível compreender cada propriedade
{
"name": "nome_do_dashboard",
"dataColors": [
"#00d000",
"#ffd000",
"#193eff",
"#000000",
"#3c3c3c",
"#ffffff",
"#ff0000",
"#ececec"
],
"textClasses": {
"callout": {
"fontSize": 16,
"color": "#808080",
"fontFace": "'Rawline Regular', 'Verdana'"
},
"title": {
"fontSize": 15,
"color": "#808080",
"fontFace": "'Rawline Semibold', 'Verdana'"
},
"header": {
"fontSize": 15,
"color": "#808080",
"fontFace": "'Rawline Regular', 'Verdana'"
},
"label": {
"fontSize": 16,
"color": "#808080",
"fontFace": "'Rawline Regular', 'Verdana'"
}
},
"visualStyles": {
"*": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#FFF"
}
},
"transparency": 0
}
],
"categoryAxis": [
{
"labelColor": {
"solid": {
"fontSize":12,
"color": "#808080",
"fontFace":"Rawline Regular"
}
},
"titleColor": {
"solid": {
"fontSize": 12,
"color": "#808080",
"fontFace": "Rawline Regular"
}
},
"gridlineShow": true,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#808080"
}
}
}
],
"valueAxis": [
{
"labelColor": {
"solid": {
"color": "#808080"
}
},
"titleColor": {
"solid": {
"color": "#808080"
}
},
"gridlineShow": true,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#f5f5f5"
}
}
}
],
"labels": [
{
"show": true,
"color": {
"solid": {
"color": "#808080"
}
},
"fontFamily": "Rawline"
}
],
"categoryLabels": [
{
"show": true,
"color": {
"solid": {
"color": "#808080"
}
}
}
]
}
},
"page": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#ececec"
}
},
"transparency": 1
}
]
}
}
}
}
Definindo um nome para o tema
A propriedade “name” serve para definir um nome para o tema personalizado.
"name": "Painel_Menu_OUV",
Definindo paletas de cores do dashboard
A propriedade “textClasses” se refere ao elementos de textos do dashboard. Através desta propriedade é possível alterar o tamanho (fontSize), a cor (color) e a fonte do texto (fontFace). O código abaixo contém quatro propriedades nomeadas como: callout, title, header e label.
- callout: Se refere aos rótulos de dados de cartão indicadores de KPI.
- title: Se refere a formatação do título dos visuais.
- header: Se refere a formação do cabeçalho.
- label: Se refere aos valores de frase de destaque. Geralmente presente em alguns visuais.
"textClasses": {
"callout": {
"color": "#7469B6",
"fontFace": "'Rawline Regular', 'Verdana'"
},
"title": {
"fontSize": 12,
"color": "#03AED2",
"fontFace": "'Rawline Light', 'Verdana'"
},
"header": {
"fontSize": 12,
"color": "#E2DFD0",
"fontFace": "'Rawline Regular', 'Verdana'"
},
"label": {
"fontSize": 12,
"color": "#A79277",
"fontFace": "'Rawline Semibold', 'Verdana'"
}
},
- color: Define a cor do texto. Geralmente coloca-se um código hexadecimal da cor que queremos mas também pode ser representado de outras formas.
- fontSize: Define o tamanho da fonte do texto.
- fontFace: Define o estilo da fonte do texto apresentado nos visuais. No exemplo apresentado no trecho de código abaixo é importando observa a maneira de como podemos definir duas fontes. Caso a primeira não seja identificada a segunda será utilizada.
// Define uma fonte
"fontFace": "Rawline Semibold"
// Define duas fontes caso a primeira não estiver disponível o sistema utiliza a segunda
"fontFace": "'Rawline Semibold', 'Verdana'"
// Definindo várias fontes
"fontFace" : "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"
Definindo a formatação dos gráficos
A propriedade “visualStyles” define os elementos de um gráfico. Por meio dessa propriedade, é possível alterar os estilos visuais da tela de fundo (background), das categorias do gráfico (categoryAxis), dos valores das categorias (valueAxis), dos rótulos (valor do balão no Power BI) e dos rótulos das categorias (categoryLabels). O trecho de código abaixo demonstra a estrutura da propriedade "visualStyles":
As alterações serão representadas pela cor vermelha (#FF0000) nas imagens que forem apresentadas a seguir. O motivo é para facilitar a compreensão de cada alteração nos gráficos.
"visualStyles": {
"*": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#FFF"
}
},
"transparency": 0
}
],
"categoryAxis": [
{
"labelColor": {
"solid": {
"fontSize":12,
"color": "#808080",
"fontFace":"Rawline Regular"
}
},
"titleColor": {
"solid": {
"fontSize": 12,
"color": "#808080",
"fontFace": "Rawline Regular"
}
},
"gridlineShow": false,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#f5f5f5"
}
}
}
],
"valueAxis": [
{
"labelColor": {
"solid": {
"color": "#808080"
}
},
"titleColor": {
"solid": {
"color": "#808080"
}
},
"gridlineShow": true,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#f5f5f5"
}
}
}
],
"labels": [
{
"show": true,
"color": {
"solid": {
"color": "#808080"
}
},
"fontFamily": "Rawline Semibold"
}
],
"categoryLabels": [
{
"show": true,
"color": {
"solid": {
"color": "#808080"
}
}
}
]
}
background
O background serve para alterar o fundo de tela de um dashboard. De acordo o trecho de código abaixo podemos definir a cor (color) e a transparência (transparency).
- color: Altera a cor de fundo do dashboard
- transparency: Define se o fundo do visual será transparente ou não. Para determinar a transparência é necessário colocar o número 1 para ativar e o 0 para desativar.
"background": [
{
"color": {
"solid": {
"color": "#FFF"
}
},
"transparency": 0
}
],
categoryAxis e valueAxis
O categoryAxis define a formatação de rótulos ou categorias. O valueAxis é similar ao categoryAxis, mas aplicado ao eixo de valores.
"categoryAxis": [
{
"labelColor": {
"solid": {
"fontSize":12,
"color": "#808080",
"fontFace":"Rawline Regular"
}
},
"titleColor": {
"solid": {
"fontSize": 12,
"color": "#808080",
"fontFace": "Rawline Regular"
}
},
"gridlineShow": false,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#f5f5f5"
}
}
}
],
"valueAxis": [
{
"labelColor": {
"solid": {
"color": "#808080"
}
},
"titleColor": {
"solid": {
"color": "#808080"
}
},
"gridlineShow": true,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#f5f5f5"
}
}
}
],
- labelColor: Define a cor, o tamanho e o tipo de fonte dos rótulos do gráfico. O trecho de código abaixo altera a forma como o visual é apresentado. A imagem 1 apresenta os efeitos dessa alteração, nesse caso alteramos os rótulos para a cor vermelha (#FF0000), tamanho 12 e estilo de fonte "Rawline Regular".
"labelColor": {
"solid": {
"fontSize":12,
"color": "#FF0000",
"fontFace":"Rawline Regular"
}
},
Imagem 1 - labelColor com a formatação aplicada no categoryAxis
Imagem 2 - labelColor com a formatação aplicada no ValueAxis
- titleColor: Define as características visuais do título dos rótulos (Atendimentos). No código abaixo a estrutura é a mesma do “labelColor”, possibilitando alterar cor, tamanho e estilo de fonte do texto. O trecho de código abaixo define o título dos rótulos com a cor vermelha (#FF0000), tamanho 12 e estilo de fonte "Rawline Regular".
"titleColor": {
"solid": {
"fontSize": 12,
"color": "#FF0000",
"fontFace": "Rawline Regular"
}
},
Imagem 3 - titleColor aplicado com a formatação aplicada
gridlineShow, gridlineColor, showAxisTitle
"gridlineShow": true,
"showAxisTitle": true,
"gridlineColor": {
"solid": {
"color": "#FF0000"
}
}
- gridlineShow: O gridlineShow exibe as linhas de grade do gráfico. Nesse caso, podemos escolher entre “true” para habilitar e “false” para desabilitar.
- showAxisTitle: O showAxisTitle habilita e desabilita o título do eixo sendo “true” para habilitar e “false” para desabilitar.
- gridlineColor: O gridlineColor define uma cor para a linha de grade.
Imagem 4 - Propriedades visuais gridlineshow, showaxistitle, gridlinecolor aplicadas
Labels
A propriedade Labels define a formatação dos valores de um gráfico.
"labels": [
{
"show": true,
"color": {
"solid": {
"color": "#FF0000"
}
},
"fontFamily": "Rawline"
}
],
- show: Exibe o valor do rótulo.
- color: Define uma cor para o valor do rótulo.
- fontFamily: Define uma fonte.
Imagem 5 - Formatação de labels aplicada
categoryLabels
A propriedade categoryLabels se refere aos rótulos de categoria. O exemplo da imagem a seguir representa as alterações feitas por essa propriedade.
"categoryLabels": [
{
"show": true,
"color": {
"solid": {
"color": "#FF0000"
}
}
}
]
Imagem 6 - Estilo de categoryLabels aplicado
Page
A propriedade page define o estilo das páginas dos dashboards.
"page": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#ececec"
}
},
"transparency": 0
}
]
}
}
- background: Altera o fundo das páginas.
- color: Define a cor de fundo das páginas.
- transparency: Define a transparência no fundo da página, sendo 0 para desativar e 1 para ativar a transparência.
Como carregar arquivo JSON no Power BI?
- Clique em Exibição
- Clique em Temas na seta para baixo
- Clique em Procurar Temas
- Procure onde o seu tema está salvo e clique em Abrir
Criando um tema diretamente do Power BI
Para criar um tema no Power BI, acesse a aba "Exibição" e clique na seta para baixo para ampliar o acesso aos temas. Em seguida, selecione "Personalizar tema atual". Após realizar as alterações desejadas, basta aplicar o tema, e estará pronto.
É importante lembrar que, caso a fonte de texto seja externa, ela não estará disponível no Power BI na personalização de tema. Para utilizar uma fonte baixada da internet, é necessário alterar manualmente para o nome da fonte no arquivo JSON.
Imagem 7 - Clique em personalizar o tema atual
Imagem 8 - Clique em personalizar o tema atual
Conteúdo Bônus
A estrutura JSON permite alterar diversas características do dashboard manualmente, porém existe outras formas de facilitar esse trabalho com algumas ferramentas e sites que podem auxiliar no desenvolvimento de temas personalizados para o Power BI.
Gerador de temas BI
As ferramentas abaixo auxiliam no desenvolvimento de temas automaticamente.
- Power Portal
https://powerportal.com.br/temas.php
- PowerBI.tips
https://themes.powerbi.tips/themes/properties
- Power BI Theme Generator by BIBB
https://www.figma.com/community/plugin/1220630193579450556/power-bi-theme-generator-by-bibb
Página da Microsoft que explica detalhadamente as informações apresentadas.
Material deste artigo no Notion
Conclusão
Ao analisar a estrutura do JSON, foi possível entender que o Power BI oferece diversos recursos para a personalização de temas no desenvolvimento de dashboards. Por meio dessa estrutura, podemos configurar todos os elementos visuais, como paleta de cores, título, texto, fonte, eixos, entre outros. Além do conteúdo apresentado, existem várias outras maneiras de configurar nossos temas. Vale ressaltar que a configuração do tema personalizado apresentada é uma abordagem básica, destinada a auxiliar pessoas que ainda estão em fase de aprendizado ou que tenham curiosidade sobre o assunto. Ao explorar mais profundamente, podemos descobrir outras maneiras de personalizar ou padronizar nossos dashboards.
