In Power BI können derzeit im Table Visual sowohl Zahlen als auch Texte bedingt formatiert werden. Im Matrix Visual hingegen können nur die Zahlen im Values Bereich bedingt formatiert werden - nicht aber die Texte im Columns und Rows Bereich. Diese Einschränkung kann mit einer UNICHAR oder einer SVG Visualisierung der Texte umgangen werden (siehe dazu auch hier für einen anderen Anwendungsfall).
Hinweis: im folgenden Beitrag werden ausschließlich Calculated Columns und keine Measures erzeugt, da im Rows und Columns Bereich des Matrix Visuals ausschließlich Columns und keine Measures aufgetragen werden können.
Ausgangssituation
In einer Anwendung für das Projektmanagement Reporting ist jedes Projekt einer Project Phases "in execution" oder "finished" zugeordnet:
Diese beiden Stati können im Matrix Visual entweder im Columns Bereich ...
.... oder im Rows Bereich aufgetragen werden:
Basislösung in Power BI: Bedingte Formatierung
Zur Bestimmung der Farbe für die Bedingte Formatierung wird eine entsprechende Calculated Column mittels DAX erzeugt:
Project Phase (Color) =
SWITCH(
'Dim Projects'[Project Phase];
"finished"; "#16c60c";
"in execution"; "#fff100"
)
Die derart definierten Farben können jetzt wunderbar auf die Werte im Values Bereich angewendet werden, nicht aber auf die Texte im Rows Bereich:
Lösung 1: Anreicherung der Texte mittels UNICHAR() Symbolen
Als mögliche Lösung kann in einer weiteren Calculated Column der Text mit einem bunten UNICHAR() Symbol angereichert werden:
Project Phase (with Symbol) =
SWITCH(
'Dim Projects'[Project Phase];
"finished"; UNICHAR(128994);
"in execution"; UNICHAR(128993);
"other"; UNICHAR(128997)
)
& " "
& 'Dim Projects'[Project Phase]
Der derart angereicherte Text kann jetzt im Matrix Visual sowohl im Columns als auch im Rows Bereich problemlos eingesetzt werden:
Darüber hinaus kann das Textfeld auch im Slicer eingesetzt werden.
Lösung 2: Visualisierung der Texte als SVG Images
SVG Images sind Bilder, die mittels HTML Befehl dynamisch generiert werden. Wir können diese Technologie in Power BI zur bedingten Formatierung nutzen, in dem wir ein buntes Viereck erzeugen und darauf unseren Text platzieren. Die Texte können dabei horizontal oder auch vertikal dargestellt werden.
a) Horizontale Texte für den Rows Bereich
Wir erzeugen auch hier eine Calculated Column mittels DAX mit dem entsprechenden SVG Befehl für die horizontale Darstellung auf einem liegenden Rectangle:
Project Phase (SVG horicontal) =
VAR var_Color =
SWITCH(
'Dim Projects'[Project Phase];
"finished"; "rgb(22,198,12)";
"in execution"; "rgb(255,241,0)"
)
VAR var_Project_Phase = 'Dim Projects'[Project Phase]
RETURN
"data:image/svg+xml;utf8,"
& "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>"
& "<rect width='100%' height='90%' x='0' y='0' fill='" & var_Color & "' />"
& "<text text-anchor='left' x='5' y='16' font-size='12' fill='rgb(0,0,0)' font-family='Segoe UI'> " & var_Project_Phase & " </text>"
& "</svg>"
Die Kategorisierung als Image URL ist essentiell für die Darstellung des Bildes anstelle der URL:
Diese Column kann jetzt im Columns oder Rows Bereich des Matrix Visuals platziert werden - es entsteht der Eindruck einer bedingten Formatierung der Texte im Rows Bereich:
Entscheidend für die korrekte Darstellung des SVG Images sind die Einstellungen der Bildgröße im Matrix Visual:
Glücklicherweise beziehen sich diese Image size Settings nicht nur auf Bilder im Values Bereich sondern auch im Columns und Rows Bereich.
b) Vertikale Texte für den Columns Bereich
Wir erzeugen eine weitere Calculated Column mittels DAX mit dem entsprechenden SVG Befehl für die vertikale Darstellung auf einem stehenden Rectangle:
Project Phase (SVG vertical) =
VAR var_Color =
SWITCH(
'Dim Projects'[Project Phase];
"finished"; "rgb(22,198,12)";
"in execution"; "rgb(255,241,0)"
)
VAR var_Project_Phase = 'Dim Projects'[Project Phase]
RETURN
"data:image/svg+xml;utf8,"
& "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>"
& "<rect width='100%' height='100%' x='0' y='0' fill='" & var_Color & "' />"
& "<text text-anchor='left' x='-90' y='25' transform='rotate(-90,0,0)' font-size='13' fill='rgb(0,0,0)' font-family='Segoe UI'> " & var_Project_Phase & " </text>"
& "</svg>"
Jetzt wieder die Kategorisierung als Image URL vornehmen:
Und schon erhalten wir die formatierten vertikalen Text-Vierecke im Columns Bereich des Matrix Visuals:
Entscheidend für die saubere Darstellung ist auch hier die Definition der gewünschten Bildgröße:
Anstelle eines Vierecks können auch Ellipsen, Kreise und einige andere Formen erzeugt werden:
Leider werden SVG Images NICHT im Slicer dargestellt - leider weder im aktuellen Default Slicer noch im neuen Button Slicer (Preview):
Fazit und Empfehlungen
Beide Lösungsvarianten haben ihre Vorzüge.
Die Formatierungsmöglichkeiten mit UNICHAR sind zwar begrenzt, dafür ist der Einsatz universell bspw. auch im Slicer möglich, da es sich weiterhin um einen Text und nicht um ein Image handelt.
SVG bietet umfangreiche Formatierungsmöglichkeiten, es sind auch sehr anspruchsvolle Darstellungen möglich (siehe weiterführende Links). Schade nur, das SVG Images derzeit nicht im Slicer gerendert werden.
Weiterführend
https://www.sqlbi.com/articles/creating-custom-visuals-in-power-bi-with-dax/ (toll!)
https://de.wikipedia.org/wiki/Scalable_Vector_Graphics
https://www.w3schools.com/graphics/svg_rect.asp