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.
<aside> 🚨 O estrutura do JSON será explicada através de alguns trechos do código para que seja possível compreender cada propriedade
</aside>
{
"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
}
]
}
}
}
}
A propriedade “name” serve para definir um nome para o tema personalizado
"name": "Painel_Menu_OUV",
A propriedade “dataColors” define a paleta de cores do dashboard. Conforme o código abaixo dentro da propriedade dataColors colocaremos os valores que serão , nesse caso, eu utilizo o código hexadecimal de cada cor que eu quero no meu dashboard.
"dataColors": [
"#00d000",
"#ffd000",
"#193eff",
"#000000",
"#3c3c3c",
"#ffffff",
"#ff0000",
"#ececec"
],
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.