Bringing SVG to life in POWER BI part 1

Creating dashboards based on SVG layouts is a common task in PBI. Using the example of a tree and a bar chart, I will show how to do this using the DAX language and layouts in figma.

Uploading from Figma

You will need a layout that will need to be uploaded in SVG format. Don't forget to uncheck Outine text so you don't turn regular text into a vector object with an outline. After uploading, you need to create a measure where you place the code in double quotes (“”)

Working with wood

Now we have a measure in which the code lies and we need to revive the tree indicators. We create variables inside the measure using the registered word var. In each cell we have 2 indicators, an arrow icon and a calculation result.

We will use mock values ​​for example

To do this we need the following DAX code:

var num_1 = 110
var num_2 = 111
var rez_1 = num_1 - num_2
var trian_1=IF(rez_1<0, "⏶","⏷")
var color_1=IF(rez_1<0, "#22A249","#F97066")
var color_2=IF(rez_1<0, "#E7FAEA","#FEE4E2")
return

Where num_1,_2 are integer variables
In your case, it can be any numeric data type, it all depends on what comes to you from the source.

var rez_1 – the result of the expression

var trian_1=IF(rez_1<0, "⏶","⏷") - if construction, which takes a logical expression as the first argument. As a result, true the variable trian_1 will take the up arrow into itself. If the result is false, a down arrow.

var color_1=IF(rez_1<0, "#22A249","#F97066") - the coloring of numbers and arrows is wrapped in a string in hexadecimal format.

var color_2=IF(rez_1<0, "#E7FAEA","#FEE4E2") - the cell background color is wrapped in a string in hexadecimal format.

Let's visualize

Next we need to use our variables in the SVG code
Variables are wrapped in double quotes and inserted in place of static elements.

Sample code:

<path d='M8 342C8 337.582 11.5817 334 16 334H75V369H16C11.5817 369 8 365.418 8 361V342Z' fill="white"/>

<text fill="#101828" xml:space="preserve" style="white-space: pre" font-family='Arial' font-size="12" font-weight="bold" letter-spacing='0em'><tspan x='42' y='355.56' text-anchor="middle">"&_num_1&"</tspan></text>

<path d='M75 334H134C138.418 334 142 337.582 142 342V361C142 365.418 138.418 369 134 369H75V334Z' fill="&color_2&" />

<text fill="#101828" xml:space="preserve" style="white-space: pre" font-family='Arial' font-size="12" font-weight="bold" letter-spacing='0em'><tspan x='104' y='349.56' text-anchor="middle">"&_num_2&"</tspan></text>

<text fill="#22A249" xml:space="preserve" style="white-space: pre" font-family='Arial' font-size="10" font-weight="bold" letter-spacing='0em'><tspan x='106' y='363.467' text-anchor="middle"><tspan font-size="12px" fill="&color_1&"> "&_trian_1&" "&rez_1&"</tspan></tspan></text>

It is important to use the arrow and number variable together so that the elements do not overlap each other.

Now we have the following logic for visualizing elements.

If the first number is greater than the second, then the background of the cell opposite is painted red along with the number and the arrow points down

With reverse logic, the cell turns green along with the text and the arrow points up. A minus is added to the result due to a Boolean expression.

This is how we animate the entire tree by substituting variables there or connecting our data source. In the next part we will look at how to build a dashboard of bars written in HTML.