Создание дашбордов на основе SVG макетов частая задача в PBI. На примере, дерева и столбчатой диаграммы, я покажу как это сделать используя язык DAX и макеты в figma
Выгрузка из Figma
Вам понадобится свёрстанный макет, который нужно будет выгрузить в SVG формате. Не забудьте убрать снять галочку с Outine text чтобы не превратить обычный текст в векторный объект с контуром.
После выгрузки нужно создать меру куда поместите код в двойных кавычках("")
В самом SVG нужно заменить кавычки " на '
Работа с деревом
Теперь у нас есть мера, в которой лежит код и нужно оживить показатели дерева. Создаем внутри меры переменные с помощью зарегистрированного слова 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