Outils de développement existants
Il en existe actuellement deux majeurs et un mineur permettant de développer des Custom Visuals sous Power BI, les deux majeurs nécessitent Node.js :
- Avec le langage Typescript, en utilisant des bibliothèques comme SVG & d3.js. Cette méthode est la plus courante et on trouve des guides expliquant les démarches datant de 2016 [1]. C’est aussi par ailleurs ce qui a été utilisé pour nos visuels du scorecard & du mailtracker développés en mai-juin 2017. On peut trouver nos guides dans le répertoire K:\PowerBi\Custom Visual.
- Avec le langage R, en utilisant des bibliothèques comme Plotly & ggplot2. Cette démarche est la plus récente (mi-juin 2017) [2] et on peut trouver des guides de la même année [3]. Une documentation officielle pour la bibliothèque Plotly sous R est disponible [4].
- Enfin, la solution émergente (fin 2017) [5] est un tronc de visuels à importer et à modifier directement sur Power BI. Un guide provenant de la personne qui a créé ce tronc de visuels a été publié pour aider à comprendre comment fonctionne le tronc [6].
Analyse des méthodes
Avec Typescript et SVG/d3.js
Cette méthode est la plus ancienne et la plus documentée dans nos propres ressources. C’est donc un terrain déjà exploré. On peut travailler sur ce langage avec un environnement comme Visual Studio.
Les avantages
Comme nous avons pu le voir dans nos guides SVG/d3.js en Typescript, l’avantage est de pouvoir utiliser ces bibliothèques graphiques pour une grande liberté de création. Il est donc possible de créer des lignes, des cercles, de couleur et de taille personnalisées à n’importe quel endroit dans la fenêtre de notre visuel. De plus, il est possible de retranscrire un script en JavaScript vers du Typescript plutôt facilement.
Les inconvénients
Cette méthode de développement nécessite l’installation de Node.js ainsi que la bibliothèque d3.js en amont, ainsi que l’installation de certificats pour pouvoir faire fonctionner un serveur et avoir le visuel en direct. Ce visuel en direct n’est utilisable que sur un navigateur, pas sur Power BI Desktop. Pour ce qui est des visuels exportés, il est évidemment tout à fait possible de les importer sur le navigateur, mais aussi sur la version Desktop de Power BI.
Le code à fournir pour obtenir un visuel fonctionnel nécessite au moins une centaine de lignes car quasiment tout se fait manuellement. Ceci s’explique par le besoin de créer le « corps » du visuel, mais aussi le « mapping » des variables. Globalement, cette méthode requiert un apport lourd en lignes de code.
Avec R et Plotly/ggplot2
Cette méthode est le concurrent de la méthode Typescript SVG/d3.js. On développe en R – Plotly en installant R [7] puis l’environnement Rstudio [8].
Les avantages
Le principal avantage de Plotly est l’interface utilisateur déjà intégrée dans le visuel. Elle permet donc de choisir quelles courbes afficher, de zoomer, d’autoscaler, ou encore de sélectionner une partie de l’axe horizontal en quelques clics [9]. Il est aussi possible de changer la visibilité des graphes en public/privé/secret selon le besoin. La documentation officielle et les troncs de visuels qui sont mis à disposition sont très riches, la prise en main ne devrait donc pas être longue [4].
Les inconvénients
On retrouve ici les mêmes nécessités d’installation en amont pour Node.js & le serveur du visuel en direct.
Avec le tronc-visuel d3.js sur Power BI
C’est la méthode la plus récente et qui consiste à développer directement sur le visuel :
Les avantages
Cette méthode ne nécessite pas d’installation en amont, ni de serveur. On retrouve ici les mêmes avantages de liberté de création que la méthode classique.
Les inconvénients
Le principal inconvénient est que le visuel est limité à 30 000 points de données. On retrouve les mêmes inconvénients que le développement classique en Typescript SVG/d3.js : l’apport en lignes de code est lourd. De plus, cette méthode présente quelques spécificités par rapport à la méthode classique dans le sens où certaines lignes de code qui fonctionnaient auparavant ne fonctionnent plus et nécessitent des modifications comme expliqué ici [6].
Pour résumer
| Méthode | SVG/d3.js | R Plotly | Tronc-visuel d3.js |
| Date | 2016 | juin-17 | nov-17 |
| Environnement | Visual Studio | Rstudio | Directement sur le visuel |
| Langage | Typescript | R javascript | Typescript |
| Avantages | Liberté de création d’objets graphiques | Interface sur visuel intégrée sur chaque graphe | Pas d’installation, plug & dev |
| Inconvénients | Lourd en code | N/A (mis à part la prise en main pour ma part) | Lourd en code et 30 000 points-données max |
Références
[1] « Build Your Custom Visuals in Power BI (Step-by-Step) – Tsmatz ». [En ligne]. Disponible ici
[2] « Interactive R custom visuals support is here! | Blog Microsoft Power BI | Microsoft Power BI ». [En ligne]. Disponible ici
[3] « Interactive Charts using R and Power BI: Create Custom Visual Part 1 | RADACAD ». [En ligne]. Disponible ici
[4] « plotly ». [En ligne]. Disponible ici
[5] « D3.js Visual – create your own custom visual », D3.js Visual – create your own custom visual. [En ligne]. Disponible ici
[6] « Power BI D3.js Custom Visual », Azure BI. [En ligne]. Disponible ici
[7] « The Comprehensive R Archive Network ». [En ligne]. Disponible ici
[8] « Download RStudio – RStudio ». [En ligne]. Disponible ici
[9] « Getting Started with Plotly for R ». [En ligne]. Disponible ici : https://plot.ly/r/getting-started/. [Consulté le: 04-avr-2018].
Ecrit par Valentin Chau.