Power BI: Entwicklung von Custom Visuals

Mit den Custom Visuals hat Microsoft ein neues, leistungsfähiges Visualisierungsfeature in Power BI integriert. In einer kleinen Blog-Serie möchte pmOne-Consultant Erik Mayer dazu beitragen, dass Poweruser und Entwickler diese erweiterte Möglichkeit für die Aufbereitung von Berichten auch durchschauen und einsetzen können. Der erste Teil dreht sich um Grundlagen und Architektur von Power BI Custom Visuals, um dann in Kürze näher auf Entwicklungserfahrungen, Komplikationen und Probleme einzugehen.

Microsoft Power BI ist eine großartige Plattform für Reporting und Self-Service BI. Sie bietet eine große Auswahl an vorgefertigten Grafiken, mit denen sich interaktive Dashboards erstellen lassen. In der frei zugänglichen Power BI Visuals Gallery sind aktuell 51 Visuals zum Download verfügbar, und die Anzahl steigt stetig. Noch besser: Falls eine bestimmte Aufgabe eine angepasste Grafik erfordert, ist es möglich, jede dieser Grafiken als Power BI „Custom Visual“ nach individuellen Anforderungen weiterzuentwickeln.

 

Ziel dieses Blog-Posts ist es, den Lesern die Grundlagen der Architektur von Power BI Custom Visuals näher zu bringen. Geplant sind noch weitere Beiträge, in denen wir über unsere Entwicklungserfahrungen sowie von Komplikationen und Problemen berichten.

 

Oops, an error occurred! Code: 20190823153914c047a881 

Abb. 1: app.powerbi.com/visuals/ 

 

Benötigte Technologien und Komponenten von Microsoft Power BI

Alle Grafiken von Microsoft Power BI beruhen auf HTML5 und werden mit dem objektorientierten Interface implementiert, das Power BI mitbringt. Dieses sorgt für die nötige Interaktivität und hilft bei der Konvertierung der Daten zur Grafik. Programmiert wird die Logik in TypeScript, das wiederum zu JavaScript kompiliert wird. In den existierenden Visuals nutzt Microsoft das populäre d3.js Framework, um die Grafiken zu generieren und empfiehlt dieses Framework auch für die Entwicklungen von Power BI Custom Visuals. Grundsätzlich ist es auch möglich, andere Komponenten wie zum Beispiel WebGL oder SVG zu verwenden und sogar untereinander zu kombinieren.

 

Das Dateiformat verstehen

Alle Microsoft Power BI Grafiken werden als einzelne Datei im PBVIZ-Format verbreitet. Dabei handelt es sich eigentlich nur eine umbenannte ZIP Datei. Sie beinhaltet per Default den geschriebenen Quellcode in TypeScript, auch wenn das nicht unbedingt notwendig ist. Neben der aus dem TypeScript kompilierten JavaScript-Datei umfasst eine PBIVIZ-Datei auch weitere Dateien wie die Package-Definition im XML-Format (automatisch generiert) sowie Grafiken, die das Custom Visual benötigt (zum Beispiel: Miniaturbilder, Icons und andere).

 

Tipp: Grafiken aus der Power BI Custom Visuals Gallery (https://app.powerbi.com/visuals/) können als PBVIZ Datei heruntergeladen werden und lassen sich mit einem ZIP-Editor öffnen. Auf den TypeScript-Quellcode kann man dann direkt zugreifen und dort die Vorgehensweise anderer Entwickler nachvollziehen. Außerdem können die PBVIZ Datei auch direkt in die Power BI Dev Tools importiert werden (https://app.powerbi.com/devTools).

 

So funktioniert der Power BI Datenfluss

Oops, an error occurred! Code: 20190823153914fb05a2a1

Ein Power BI Custom Visual verwendet die von Power BI bereitgestellten Daten – allerdings ohne dabei auf die original Datenquellen zuzugreifen. Das Power BI Custom Visual kann nur auf die Spalten und DAX-Berechnungen zugreifen, die für die jeweilige Anzeige vom Anwender ausgewählt wurden. Diese wiederum werden aus dem Power BI Datenmodell ausgewählt.

 

UI Anpassungsmöglichkeiten

Abhängig von dem Grafiktyp, der entwickelt wird, können verschiedene Daten vom User gefordert werden. Das erforderliche „Mapping“ kann der Anwender in der Benutzerschnittstelle (UI) über den Konfigurationsbereich des Visuals selbst steuern. Dieser Konfigurationsbereich ist per Code über „dataRoles“ individuell gestaltbar.

Oops, an error occurred! Code: 201908231539145992a944 

Abb. 2: Visual Konfigurationsbereich – Definition „dataRoles“


Nach dem Fordern der Daten ist noch das interne Mapping über die DataViewMappings vonnöten. In den meisten Fällen ist es trotzdem noch notwendig, per TypeScript und entsprechenden Berechnungen die Daten in ein von der (D3) Grafik gefordertes Format umzuwandeln. Fallabhängig kann das recht aufwändig werden. Aus Sicht des Programmierers besteht die Hauptarbeit bei der Entwicklung von Custom Visuals darin, die Power BI „Rohdaten“ in das korrekte Format für die d3.js Grafik zu konvertieren sowie eine komplexere D3-Grafikdefinition zu erstellen. 

 

Jedes Visual hat im Konfigurationsbereich einen Bereich für das Datenmapping (Chart-Icon) und einen Bereich für individuelle Parameter, über den der Anwender Aussehen und Verhalten des Visuals steuern kann. Auch dieser Bereich kann im Code individuell über eine Objektdefinition angepasst werden.

 Oops, an error occurred! Code: 201908231539141d8551c5

Abb. 3: Visual Konfigurationsbereich – Definition Anzeige und Verhalten

 

Aufbau der Architektur des Power BI objektorientierten Interfaces

Oops, an error occurred! Code: 2019082315391459adfdbb

Der Quellcode eines Power BI Custom Visuals hat drei Hauptkomponenten, die in der oben dargestellten Reihenfolge ausgeführt werden und im TypeScript Code zu implementieren sind. 

 

  • Initialize: An dieser Stelle im Quellcode werden viele internen und externen Variablen vorbereitet und befüllt. Alle groben Anpassungen für das User Interface sollten auch an dieser Stelle initialisiert werden. Außerdem erhält diese Funktion einen Parameter vom Typ „VisualInitOptions“, der alle Basisinformationen zu Größe, Animation, Styles, Interaktivitäten und dem äußeren HTML-Element des Visuals beinhaltet.
  • Convert: Wie bereits beschrieben, muss im Code eines Custom Visual eine Konvertierung von den Power BI Rohdaten zu einem angepassten und für die d3.js Grafikdefinition geeigneten Format erfolgen. In der Convert-Funktion wird daher das d3.js Datenhaltungsobjekt aus den ankommenden Rohdaten erstellt.
  • Update: An dieser Stelle wird die d3.js Grafikdefinition erstellt, die das eigentliche Power BI Custom Visual aus den vereinfachten, konvertierten Daten rendert. Außerdem werden hier alle größeren Anpassungen vorgenommen, da diese Funktion immer aufgerufen wird, wenn es eine Änderung an der Grafik oder Zeichenfläche gibt. 

 

Zusammenfassung: Zur Entwicklung eines Custom Visuals

Folgende Punkte müssen in TypeScript implementiert und definiert werden:

1. Einlesen und Mappen der ausgewählten Power BI Rohdaten

2. Konvertieren der gemappten Daten zum benötigten Format der D3.js-Grafiksdefinition  

3. Implementieren des Power BI objektorientierten Interfaces und der benötigten Konfigurationsmöglichkeiten des Visuals 

 

Das Power BI-Team der pmOne freut sich auf Rückmeldungen unter erik.mayer(at)pmone.com und steht selbstverständlich gerne als Implementierungspartner für Custom Visuals-Entwicklungen zur Verfügung. 

 

Ein weiterer Blog-Beitrag zum Thema Power BI Custom Visuals, der etwas tiefer in die Technologien und Möglichkeiten einsteigt, ist in Vorbereitung.

 

Zum Schluss noch ein Hinweis an all diejenigen, die an einem Erfahrungsaustausch und Networking zum Thema Power BI interessiert sind: Im Frühjahr 2016 hat sich die Power BI Usergroup München gegründet, in der alle Excel- und Power BI-„Junkies“ aus der Umgebung herzlich willkommen sind. Allgemeine Informationen und den Termin des nächsten Treffens finden Interessierte auf der Power BI-Seite der pmOne-Homepage, auf der XING-Seite der Usergroup oder der offiziellen Microsoft Power BI Usergroup-Seite.