Оживляем SVG в POWER BI часть 1

Создание дашбордов на основе SVG макетов частая задача в PBI. На примере, дерева и столбчатой диаграммы, я покажу как это сделать используя язык DAX и макеты в figma.

Выгрузка из Figma

Вам понадобится свёрстанный макет, который нужно будет выгрузить в SVG формате. Не забудьте убрать снять галочку с Outine text чтобы не превратить обычный текст в векторный объект с контуром. После выгрузки нужно создать меру куда поместите код в двойных кавычках(«»)

Работа с деревом

Теперь у нас есть мера, в которой лежит код и нужно оживить показатели дерева. Создаем внутри меры переменные с помощью зарегистрированного слова var. В каждой ячейки у нас есть 2 показателя, значок стрелочки и результат вычислений.

Мы будем использовать моковые значения для примера

Для этого нам понадобится следующий код на DAX:

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

Где num_1,_2 — это переменные целых чисел
В вашем случае это могут быть любой численный тип данных, все зависит от того, что вам приходит из источника.

var rez_1 — результат выражения

var trian_1=IF(rez_1<0, «⏶»,»⏷») — if конструкция, которая первым аргументом принимает в себя логическое выражение. В результате true переменная trian_1 будет приниматься в себя стрелочку вверх. При результате false стрелочку вниз.

var color_1=IF(rez_1<0, «#22A249″,»#F97066») — цвет окраски чисел и стрелочки завернут в строку в шестнадцатеричном в формате.

var color_2=IF(rez_1<0, «#E7FAEA»,»#FEE4E2″) — цвет окраски фона ячейки завернут в строку в шестнадцатеричном в формате.

Визуализируем

Далее нужно использовать наши переменные в коде SVG
Переменные обертываются в двойные кавычки и вставляются вместо статичных элементов.

Пример кода:

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

Важно использовать переменную со стрелкой и числом вместе, чтобы элементы не наезжали друг на друга.

Теперь мы имеем следующую логику визуализации элементов.

Если первое число больше второго, то фон ячейки напротив окрашивается в красный цвет вместе с числом и стрелка смотрит вниз

При обратной логике ячейка окрашивается в зеленый вместе с текстом и стрелка смотрит вверх. Добавляется минус в результат из-за логического выражения.

Так мы оживляем все дерево, подставляя туда переменные или подключая свой источник данных. В следующий части мы разберем как строится дашборд из баров написанный на HTML.