Оживляем 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
Переменные обертываются в двойные кавычки и вставляются вместо статичных элементов.
Пример кода:
Важно использовать переменную со стрелкой и числом вместе, чтобы элементы не наезжали друг на друга.
Теперь мы имеем следующую логику визуализации элементов.
Если первое число больше второго, то фон ячейки напротив окрашивается в красный цвет вместе с числом и стрелка смотрит вниз
При обратной логике ячейка окрашивается в зеленый вместе с текстом и стрелка смотрит вверх. Добавляется минус в результат из-за логического выражения.
Так мы оживляем все дерево, подставляя туда переменные или подключая свой источник данных. В следующий части мы разберем как строится дашборд из баров написанный на HTML.
