Introduction

Power BI offre une gamme de visualisations de base accessible depuis l’onglet dédié (1). De plus, il est possible d’importer des visuels supplémentaires depuis l’AppSource de Microsoft (2). En cas d’absence de visualisation répondant à nos exigences, la possibilité de concevoir notre propre visuel Power BI s’offre à nous. Celui-ci peut être utilisé à titre personnel ou partagé avec la communauté Power BI, selon nos préférences.

Les visuels Power BI sont contenus dans des fichiers .pbiviz qui incluent du code pour afficher les données. Tout le monde peut créer un visuel personnalisé et l’empaqueter dans un fichier .pbiviz, qui pourra être imporé dans un rapport Power BI (3).

Environnement de développement

Avant de commencer tout développement, nous devons installer node.js et le package pbiviz. Node.js est un runtime JavaScript construit qui permet aux développeurs d’exécuter toutes les applications créées sur JavaScript.

Lien de téléchargement à https://nodejs.org/en/download

L’outil pbiviz compile le code source d’un visuel Power BI en un package compressé contenant tous les scripts et ressources nécessaires. Ce package regroupe l’ensemble des éléments indispensables au bon fonctionnement du visuel dans Power BI. Pour l’installer, il suffit de suivre les deux étapes simples décrites ci-dessous.

• Lancez Node.js command prompt

• Lancer la commande npm i -g powerbi-visuals-tools@latest
• npm i powerbi-visuals-utils-formattingutils

Ensuite nous devons configurer Power BI Desktop et Power BI Service pour le développement du visuel.

Nous devons activer l’option « Développer un visuel » en suivant ces 3 étapes.

1. A partir de Power BI Desktop, naviguez Fichier > Options et paramètres > Options.

2. Dans paramètres du rapport, activez l’option « Développer un visuel » .

3. Ensuite, sélectionnez OK. Nous devons activer le mode développeur sur Power BI Service.

Projet visuel personnalisé

Structure du projet

La meilleure façon pour créer un nouveau visuel Power BI est d’utiliser l’outil pbiviz. Pour cela on lance un terminal, on choisit le dossier où l’on souhaite créer son projet et on lance la commande suivante : pbiviz new .

En lançant la commande, on aura un dossier de visuel Power BI qui contient les fichiers suivants :

Ouvrir le projet sur VS Code ou lancez cette commande « code . »

Premier visuel personnalisé

Nous allons créer un visuel très simple pour débuter. Un visuel qui va nous retourner la hauteur et la largeur de ce dernier.

Dans un premier temps nous devons ouvrir un terminal dans l’emplacement de ce projet, ensuite lancer la commande « npm install » et enfin lancer le serveur avec la commande « npm start » ou « pbiviz start »

Visualisons le résultat de développement sur Power BI Service.

Ajoutons un peu de style.

Enregistrons et Cliquons sur le bouton rafraichir.

Allons plus loin

Dans le fichier capabilities.json

Data Roles : définir les puits de champ affichés dans le volet Champs

Data Mapping Modes : définir le type de DataView utilisé par le visuel

Tree Funnel Chart personnalisé (Trunnel)

Le graphique que nous allons concevoir est un entonnoir arborescent. Un diagramme d’entonnoir illustre une mesure à différentes étapes d’un processus menant à un objectif précis, comme le nombre de prospects traversant chaque phase d’un processus de vente jusqu’à la concrétisation d’une vente.

Notre arbre de conversion effectuera une démarche similaire, mais il permettra de segmenter l’objectif final en plusieurs résultats, mettant davantage l’accent sur la manière dont les prospects se perdent au cours du processus. Prenons l’exemple des étudiants de premier cycle qui achevèrent leur diplôme : notre intérêt se porte sur les raisons pour lesquelles certains n’ont pas terminé selon les attentes, ainsi que sur le niveau de distinction atteint par ceux qui ont réussi. L’entonnoir arborescent pourrait représenter cette situation de la manière suivante :

Le nombre total d’étudiants inscrits au cours est représenté par la hauteur du tronc. Chaque branche indique le nombre d’étudiants n’ayant pas réussi à atteindre la récompense prévue, et chaque feuille montre la segmentation du résultat souhaité, à savoir le niveau de distinction obtenu.

Créons un nouveau projet avec la commande : pbiviz new trunnel_project

La structure des dossiers du projet aura apparence similaire à ceci.

Dans le fichier visual.ts :

Tout dans cette section se déroulera dans le fichier visual.ts, écrit en TypeScript.

C’est le point d’entrée du visuel et contiendra les méthodes nécessaires à son affichage. Les autres fichiers importants sont settings.ts et capabilities.json, sur lesquels je reviendrai lors de la configuration des liaisons de données et des options de formatage.

Dans le fichier visual.ts, il est impératif de définir une classe qui implémente l’interface IVisual. Cette classe doit comporter un constructeur qui instancie le visuel, ainsi qu’une méthode update qui sera appelée à chaque fois que le visuel doit être rendu à nouveau. Dans Power BI, le constructeur est invoqué une seule fois lors de l’ajout du visuel sur le canevas du rapport. Quant à la méthode update, elle est appelée à chaque modification:

• Redimensionnement du visuel
• Modification d’une option de formatage
• Ajout ou suppression de champs de données
• Actualisation des données du visuel

Tout d’abord, on ouvre le fichier visual.ts et on supprime tout. On ajoute ensuite les modules suivants:

Ensuite on implante l’interface IVisual dans la classe Visual.

Spécifier les vues de données : Data Views

Le visuel Trunnel nécessitera deux champs obligatoires et un champ optionnel. Les champs Category et Measure seront obligatoires, et un champ Optionnel pour Trier. Voici à quoi ils ressembleront.

Category et la Measure fourniront respectivement le nom et l’ampleur de chaque point de données. Les données de Tri ne seront pas réellement utilisées dans le visuel. Elle est présente uniquement afin que les utilisateurs puissent ajouter une colonne alternative pour trier les données. Voici un tableau d’échantillons que nous utiliserons pour les tests.

Les champs de données sont définis dans le fichier capabilities.json. Initialement, ce dernier contiendra les paramètres du modèle par défaut que nous supprimerons, laissant uniquement l’objet vide. À cet emplacement, il sera nécessaire de préciser les rôles de données (dataRoles), les mappages de vue de données (dataViewMappings) et les critères de tri (sorting).

Tout d’abord, nous définissons les rôles de données (dataRoles) ; ils spécifient les champs qui apparaîtront dans le volet Champs. C’est assez simple, ils nécessitent simplement un nom (name), un type (kind) et le type de données autorisé.

Nous allons ajouter un objet dataViewMappings et inclure une spécification pour la vue de données catégoriques.

Création du modèle de données :

Maintenant que le visuel peut accepter des données qui seront reflétées dans la vue de données, nous devons créer une structure dans laquelle je vais traiter les données de la vue de données. Chaque point de données sera un TrunnelItem avec le nom de la catégorie, la valeur de la mesure, la somme cumulative de toutes les valeurs jusqu’à ce point, un indicateur indiquant s’il s’agit d’un point de données feuille et la somme cumulative des feuilles jusqu’à ce point.

Les TrunnelItems contiendront un tableau d’éléments (Items), ainsi que les noms de catégories pour les branches et les feuilles. Ils incluront également des comptages et des sommes pour les branches et les feuilles.

Ces deux interfaces sont ajoutées au fichier visual.ts. Ensuite, toujours dans visual.ts, nous allons ajouter une fonction pour prendre une DataView et traiter les données en TrunnelItems.

Formatage du visuel :

Nous pouvons définir les cartes et leurs catégories pour n’importe quelle propriété dans le visuel personnalisé, ce qui nous permet de les utiliser plus facilement.

Voilà à quoi ressemble notre partie de personnalisation que nous avons développée pour notre visuel Power BI.

Pour les configurer, nous devons :

• Définir les groupes et les propriétés dans le fichier JSON de capacités
• Définir des classes pour contenir les valeurs de propriété
• Ajouter une propriété pour garder une trace des valeurs actuelles
• Implémenter la méthode enumerateObjectInstances du Visual

Tous les groupes et propriétés de formatage doivent être définis dans le fichier capacités.json. Dans le fichier, il existe un objet de niveau supérieur appelé « objets » qui définit une collection d’objets (qui sont les groupes de propriétés) et chaque objet définit une collection de propriétés qui sont les propriétés de formatage.

La structure à suivre :

Voilà le JSON de ma propriété de groupe Colours par exemple :

Ensuite, nous définissons la classe pour « Colours » :

Dans la même logique, nous créons les autres groupes de propriétés.

Finalement, nous créons l’extension de DataViewObjectsParser. Essentiellement, cette classe utilitaire fournit un moyen simple d’accéder aux valeurs des propriétés dans le volet de formatage.

Pour l’instant, tout ce que nous devons savoir, c’est que la classe nécessite une propriété pour chaque groupe de propriétés (objets) défini dans le fichier capacités.json. Ces noms de propriété doivent correspondre aux noms d’objet dans les capacités. Et être défini sur la classe de groupe de propriétés appropriée telle que définie ci-dessus.

Ainsi, pour les cinq groupes de propriétés :

Il nous reste juste à implémenter la méthode enumerateObjectInstances dans visual.ts. Cette méthode est appelée uniquement lorsque le volet de mise en forme du visuel est actif dans Power BI. Il est déclenché lorsque le volet obtient le focus ou qu’un paramètre est modifié. Il est appelé une fois pour chaque objet défini dans les capacités. Ainsi, pour notre visuel, il se déclenchera cinq fois. La méthode est appelée avec un seul paramètre options qui donne accès au nom de l’objet pour lequel elle est appelée.

Références

• https://learn.microsoft.com/en-us/power-bi/developer/visuals/develop-power-bi-visuals
• https://learn.microsoft.com/en-us/power-bi/developer/visuals/develop-circle-card
• https://learn.microsoft.com/en-us/power-bi/developer/visuals/format-pane
• https://www.youtube.com/watch?v=LQB-q9SVyY4
• https://medium.com/@jatin7gupta/getting-started-with-power-bi-custom-visuals-59ce8d850feb
• https://medium.com/@Sapna.Puranic/power-bi-70-778-exam-preparation-insights-power-bi-embedded-custom-visuals-adc19c4d30b2
• https://www.youtube.com/watch?v=GWU94yNSO8E

Envie d’autres tutos de nos experts ? Découvrez les bases pour bien démarrer avec les Azure Functions.