Wizualizacje SVG jako spełnienie marzeń użytkownika w tworzeniu własnych KPI

I. Wprowadzenie

Grafiki SVG w Power BI zapewniają poziom precyzji i możliwości narracyjnych, których nie są w stanie zapewnić standardowe wykresy. Ponieważ SVG jest tylko znacznikiem, każdy piksel – pozycje, kształty, etykiety i interakcje – może być sterowany przez miary i dynamiczne reguły biznesowe. W rezultacie otrzymujemy kompaktowe, spójne wizualizacje (niestandardowe wskaźniki, wykresy punktowe, wykresy kaskadowe, osie czasu, karty wyników, schematy), które pozostają responsywne w stosunku do fragmentatorów, drążenia danych i kontekstu na poziomie wiersza bez zewnętrznych dodatków.

W tym artykule omówimy krok po kroku proces tworzenia wizualizacji SVG od podstaw: wybór układu współrzędnych, powiązanie miar z geometrią, formatowanie tekstu w celu zapewnienia czytelności, nakładanie warstw adnotacji i łączenie interaktywności. Po drodze omówimy najlepsze praktyki (skale, wypełnienie, wyrównanie, dostępność, tokeny kolorów, higiena wydajności) i zwrócimy uwagę na typowe pułapki (nadmierne rysowanie, kolizje etykiet, nadmierne obciążenie DAX i kompromisy związane z konserwacją). Na koniec otrzymasz wzór wielokrotnego użytku, który można dostosować do dowolnego wskaźnika KPI lub układu.

Rozważymy również zalety i wady. Plusy: precyzyjna kontrola pikseli, niewielkie rozmiary, możliwość ponownego wykorzystania modelu semantycznego i płynne dostosowywanie motywów. Minusy: krzywa uczenia się, konieczność dyscypliny w nazewnictwie i testowaniu oraz potencjalne problemy z wydajnością, jeśli znaczniki lub DAX nie są zoptymalizowane. Zrozumienie obu stron pomoże Ci zdecydować, kiedy SVG jest odpowiednim narzędziem, a kiedy natywna grafika jest „wystarczająco dobra”.

Nasz zespół specjalizuje się właśnie w tym: przekształcaniu ulubionych wykresów i wskaźników KPI w w pełni zautomatyzowane, gotowe do produkcji raporty Power BI oparte na niestandardowym SVG. Od systemów odkrywania i projektowania po inżynierię DAX i zarządzanie, wspieramy klientów na każdym etapie, aby ich raporty były nie tylko piękne, ale także łatwe w utrzymaniu, szybkie i godne zaufania.

II. Czym jest SVG

Wizualizacje SVG w Power BI to wizualizacje, które renderują grafikę przy użyciu Scalable Vector Graphics (SVG) – formatu opartego na XML, który pozostaje ostry w każdym rozmiarze. W Power BI zazwyczaj generuje się ciągi SVG w DAX lub Power Query i wyświetla je za pomocą wizualizacji obsługującej HTML/SVG (np. HTML Content, Deneb lub niestandardowe wizualizacje). Pozwala to rysować w pełni niestandardowe kształty (ikony, paski, punktory, paski Gantta, flagi, wykresy sparkline) z dynamicznymi kolorami, rozmiarami i etykietami opartymi na danych.

Dlaczego warto używać SVG w Power BI?

- Grafika o idealnej rozdzielczości, niezależna od rozdzielczości.
- Wysoka dynamika: każdy atrybut (kolor, położenie, krycie, tekst) może reagować na miary.
- Umożliwia tworzenie wykresów niedostępnych w standardowej wersji (wykresy punktowe, mostki kaskadowe, niestandardowe kafelki KPI).

Kompromisy:

- Większy nakład pracy przy projektowaniu i utrzymaniu (tworzysz znaczniki SVG).
- Może działać wolniej, jeśli generujesz bardzo duże pliki SVG w każdym wierszu.
- Dostępność i podpowiedzi wymagają starannego podejścia.

III. Zalety i wady korzystania z SVG

Zalety:

- Precyzyjna kontrola pikseli
  
  Dokładne pozycjonowanie, rozmiar i styl każdego elementu (etykiety, znaczniki, kształty) wykraczające poza możliwości natywnych elementów wizualnych.
- W pełni oparty na danych
  
  Geometria i tekst mogą reagować na filtry/segmentatory za pośrednictwem DAX, umożliwiając tworzenie wskaźników KPI uwzględniających segmentatory, dynamiczne progi i adnotacje warunkowe.
- Nieograniczone typy wizualizacji
  
  Tworzenie niestandardowych wykresów (np. wskaźniki punktowe, niestandardowe wykresy kaskadowe, osie czasu, schematy), które nie są dostępne w standardzie.
- Spójność marki
  
  Scentralizuj kolory, typografię i odstępy za pomocą tokenów opartych na miarach, aby zapewnić spójną tematykę w raportach.
- Lekkie i przenośne
  
  Brak zewnętrznego niestandardowego kodu wizualnego; SVG to tylko tekst, łatwy do szablonowania, ponownego wykorzystania i wersjonowania w kontroli źródła.

Wady:

- Stroma krzywa uczenia się
  
  Wymaga biegłości zarówno w DAX, jak i SVG; debugowanie długich ciągów znaków może być żmudne.
- Ryzyko związane z utrzymaniem
  
  Bez ścisłego nazewnictwa i modularyzacji SVG/DAX szybko staje się trudny do odczytania, testowania i rozszerzania.
- Ograniczona natywna interaktywność
  
  Podświetlanie krzyżowe, wbudowane podpowiedzi i funkcje ułatwień dostępu są słabsze w porównaniu ze standardowymi elementami wizualnymi.
- Niuanse związane z eksportowaniem i układem
  
  Subskrypcje e-mailowe, eksport do formatu PDF i widok mobilny mogą być renderowane w różny sposób; konieczne jest dokładne testowanie.
- Pułapki związane z wydajnością
  
  Nadmierne znaczniki, wiele elementów lub intensywne łączenie ciągów znaków (szczególnie w DirectQuery) mogą spowalniać działanie elementów wizualnych.

IV. Najlepsze praktyki dotyczące korzystania z SVG

Istnieje pięć najlepszych praktyk dotyczących używania SVG w raporcie:

Najpierw zaprojektuj tokeny (kolory, rozmiary, odstępy)
- Scentralizuj styl jako miary (np. __Color_Primary, __Font_S, __Pad_M), aby motywy zmieniały się w jednym miejscu.
- Przykład:
```
VAR cMain = [__Color_Primary]
VAR f12 = [__Font_S]
```
Zmodularyzuj SVG (składaj z fragmentów)
- Stwórz małe miary dla elementów podstawowych (oś, słupki, etykiety) i połącz je.
- Przykładowy wzorzec:
```
__svg_axis(), __svg_bars(), __svg_labels() → CONCATENATEX({[__axis],[__bars],[__labels]},[Value],"")
```
Użyj stabilnego układu współrzędnych
- Ustaw viewBox="0 0 W H" i wyprowadź wszystkie pozycje z marginesów oraz szerokości/wysokości wykresu.
- Przykład:
```
VAR W = 280
VAR mL = 12
VAR plotW = W - (mL + [mR])
positions = mL + scaleX(Value)
```
Bądź bezwzględny w kwestii liczby elementów
- Ogranicz kształty; w miarę możliwości agreguj; unikaj ciężkich dekoracji poszczególnych punktów.
- Zmniejsz powtarzające się atrybuty za pomocą grup<g> i wspólnych ciągów klas/stylów.
Higiena wydajności w DAX
- Buforuj za pomocą VAR i ponownie wykorzystuj; unikaj powtarzania CALCULATE dla tych samych wyników cząstkowych.
- Twórz znaczniki za pomocą CONCATENATEX w małej tabeli VAR zamiast wielu konkatenacji.
- Ograniczenia: ograniczaj liczbę wierszy (TOPN), unikaj skomplikowanej logiki dla każdego wiersza w DirectQuery.

V. SVG jako przyszłość zaawansowanych raportów Power BI – prawdziwy przykład

Powyższy obrazek przedstawia wykres tornado pokazujący procentowy rozkład wskaźnika rotacji pracowników według działu i płci.

Jak utworzyć miarę, aby to pokazać? Kod Dax ma ponad 150 wierszy, więc omówię to krok po kroku

Każda wizualizacja SVG wymaga ustawienia kluczowych parametrów wysokości i szerokości wybranego elementu wizualnego.

Kluczowe ustawienia:

Wbase = 280 → podstawowa szerokość obszaru roboczego (px/jednostki użytkownika) dla całego SVG.
mL, mR, mT, mB = 12 → marginesy lewy/prawy/górny/dolny (wypełnienie) wokół obszaru rysowania.
rowH = 34 → wysokość jednego wiersza/pasma kategorii.
barH = ROUND(rowH*0.65,0) → grubość słupka ustawiona na ~65% wysokości wiersza (tak, aby pozostało trochę pionowego wypełnienia).

Typowe zastosowanie:

Inner plot width = Wbase - mL - mR
Row y-position = mT + rowIndex * rowH
Bar y = rowY + (rowH - barH)/2 (wyśrodkowuje pasek w rzędzie)