Contenu de présentation sur la Création de visuels personnalisés avec Power BI Visuals CLI lors de la session MSDEVMTL : Data Plateform, le 23 janvier 2017 au locaux de Microsoft Montréal

1. Création de visuels personnalisés
avec Power BI Visuals CLI
Denys Chamberland
Analyste-Programmeur Web
@MawashiKid
mawashikid@gmail.com
MSDEVMTL – Data Platform ©2017

2. Denys Chamberland
• analyste-programmeur Web depuis plus de 20 ans
• importante collaboration dans l’architecture, l’analyse
et la conception de plusieurs projets d’applications Web.
• Microsoft Community Contributor à l'affut des dernières
technologies Microsoft.
• Lauréat d’une seconde position lors du Montreal Devops Hackathon 2016
• Background en multimédia: 10 années d’expérience en production de vidéo
numérique
• En parallèle: expertise en infographie et photographie [hobby] –
conception graphique dont le logo YulDev…
MawashiKid@gmail.com

3. Agenda
 Introduction
 Custom Visual Gallery – description du format de fichier PBIVIZ
 Rétrospectives des versions Power BI Visuals antécédentes
 Concepts de base
 IVisual LifeCycle : contructor, update, destroy – object enumeration
 Capabilities : DataRoles & DataMapping, DataView, Object Formatting
 Installation chaine d’outils requis
 Node.js + Node Package Manager (npm)
 Visual Studio Code
 Power BI Visuals CLI Tool (pbiviz) - via Node Package Manager (npm)
 Typings (gestion de fichiers) – via Node Package Manager (npm)
 Local Self-Signed Certificate – via pbiviz
 Architecture de projet Power BI Visuals CLI
 Démos
 Session questions

4. La suite d’outils Power BI permet déjà de transformer et d’analyser des données d’entreprise en riches composants visuels,
tels que des tableaux de bord et rapports interactifs.
Introduction

5. Introduction – suite…
Power BI Visuals
 Conscient des besoins croissants d’analyse d’intelligence d’affaires et dans une initiative visant à rejoindre un plus grand
gabarit d’utilisateurs, Microsoft a amené un nouvel élément fort important permettant aux développeurs de créer des
composants visuels personnalisées - [parfois même au delà des approches visuelles traditionnelles] - avec l’ajout de l’outil
Power BI Visuals.
 Les stratégies d'exploitation ne sont désormais plus uniquement axées sur des options de base conventionnelles, mais de
plus en plus orientées vers une multitude de possibilités.

6.  Les 3 éléments clés utilisés lors du dévelopement de visuels personalisés sont:
 TypeScript
 Less
 D3.js
Introduction – suite…

7. Introduction – élément clé :TypeScript
http://www.typescriptlang.
org/
 Le code des visuels (src/ visual.ts - ainsi que les modules et
interfaces qu’ils implémentent) doit être écrit en TypeScript, qui est un
superset de JavaScript et qui prend en charge des fonctionnalités plus
avancées et un accès précoce aux fonctionnalités ES6 / ES7.
 Tous les fichiers .ts TypeScript doivent être stockés dans le répertoire
src / et ajoutés au tableau des fichiers dans tsconfig.json.

8. Introduction – élément clé : Less
http://http://lesscss.org/
• Par défaut, les feuilles de style (style/visual.less) sont créées en format .less.
• Less est en quelque sorte un pré-compilateur CSS qui permet de prendre en charge certaines
fonctionnalités avancées telles que les imbrications, les variables, les mixins, les conditions, les
boucles, etc.
• Si vous ne voulez pas utiliser ces fonctions,
vous pouvez simplement écrire vos styles en format CSS.
style/

9. Introduction – élément clé : D3.js – Data Driven Documents
https://github.com/d3/d3/wiki/Gallery
• Le dernier élément clé (et non le moindre…) est l'utilisation des frameworks open source JavaScript.
• Une bonne majorité des visualisations personnalisées disponibles en ligne sur le site Custom Visuals Gallery de la
communauté Power BI ont été construits à partir de modèles de code D3.js. Cette approche est un framework open
source de visualisation de données créé par Mike Bostock - qui a notamment été un des principaux collaborateurs en
matière de visualisation de données pour le New York Time jusqu’en 2015. Une approche entièrement JavaScript
principalement orientée sur la manipulation du DOM ainsi que de vecteurs.
• Il existe un nombre imposant de types de visualisations vraiment soignées sur la galerie de D3.js, lesquels peuvent être
facilement réorientées dans un contexte Power BI Visuals et ce, sans avoir constamment à réinventer la roue.

10. Custom Visuals Gallery
• https://app.powerbi.com/visuals/
• Le site Custom Visuals Gallery héberge une collection
de composants visuels créés par Microsoft ainsi que
des développeurs indépendants membres de la
Communauté Power BI.
• Sandboxing depuis avril 2016: fournit une couche
d'isolation pour chaque visuel personnalisé en
l'hébergeant dans un iFrame dédié.
• Votre code et vos dépendances sont injectés
dynamiquement dans l'iFrame. Il garantit que vous
n'avez pas de conflit avec d'autres visuels / éléments
sur votre page et supprime l'accès aux API que vous ne
devriez pas utiliser dans vos visuels personnalisés.
• N.B: Une bonne majorité avait été d’abord créés en
version Power BI Visuals CORE [deprecated]. Certains
ont cependant été migrés vers la nouvelle version
Power BI Visuals CLI.

11. Custom Visuals Gallery
• https://app.powerbi.com/visuals/
En cliquant sur un des icônes, on peut ensuite voir une fenêtre affichant le nom du visuel, le nom de l’auteur,
une brève description et une image graphique du visuel.
On peut également contacter l’auteur et certains vont même donner un lien de référence du projet sur
Github.
Ces composants visuels sont disponibles en format de package .pbiviz, ainsi qu’en exemple complet
d’application de démonstration .pbix.

12. Custom Visuals Gallery – importation de package .pbiviz
• 1 Sélectioner l’option menu
File>Import BI Custom Visual
• 2- Un message d’avertissement est alors
affiché par mesure de sécurité Microsoft…
• 3 – Localiser le fichier .pbiviz à importer
• 4 – Un message de confirmation devrait
ensuite indiquer que le visual a été importé
avec succès
• 5 – Finalement une icône identifiant le
visual importé est alors ajouté au
panneau de visualisation

13. Power BI Visuals Extensibity Developer Tool- DeprecatedRétrospective
 https://app.powerbi.com/devTools
 Une première version DevTool de développement en ligne [très embryonaire
-style "playground“…] a d’abord été créée comme rampe de lancement lors d’un concours
Microsoft en septembre 2015 invitant les participants à soumettre leurs créations visuelles.

14. Power BI Visuals Extensibity Developer Tool- DeprecatedRétrospective
 Un cadre d’affichage supérieure gauche pour le code source des visuels en TypeScript
 Un autre cadre d’affichage inférieur gauche pour le contenu de feuille de style CSS
 Un cadre d’affichage de résultat en cliquant Compile & Run.
 Finalement la compilation en format .pbiviz s’effectuait en cliquant sur le bouton Export.

Plusieurs fonctionalités TypeScript comme let et const n’étaient pas supportées et l’interface
n’offrait pas vraiment de possibilités de gestion de librairies clients externes.

15. Power BI Visuals Extensibity Developer Tool- DeprecatedRétrospective
• Un formulaire de sauvegarde et d’envoi en ligne était jadis disponible avec cette version.
• La soumission de contenu .pbiviz pour mise en ligne sur le site Custom Visual Gallery
s’effectue désormais par courriel.
[voir: https://app.powerbi.com/visuals/info#submit ]

16. Power BI Visuals CORE- DeprecatedRétrospective
 https://github.com/Microsoft/PowerBI-visuals-core
 Microsoft a ensuite décidé de regrouper une liste imposante de composants visuels dans une application
Web version Visual Studio 2015 avec la version Power BI Visuals CORE Bien que l’application fournisse une
quantité respectable d’informations, l’architecture était bâtie comme une lourde batterie de cuisisne
nécessitant beaucoup de temps et de patience au niveau de configuration Node.js, Gulp.
 L'application n'offrait pas vraiment d'options de création|exportation de fichier .pbiviz "right out-of-the-
box"...
 L'ajout de nouveaux composants exigeait de "cloner" un répertoire existant, rebâtir le code,
et de rouler un tâche Gulp chaque fois qu’on voulait effectuer une compilation de package.
[voir: http://amolpandey.com/2016/08/02/powerbi-how-to-create-pbiviz-file-custom-visualization/]

17. Power BI Visuals CORE- DeprecatedRétrospective
Une application client de type "Playground" pouvait être actionnée à partir de
Visual Studio 2015 (Ctrl+F5), permettant de visionner les différents exemples de chartes
incluses dans le projet Power BI Visuals CORE en mode Web View

18. Power BI Visuals CORE- DeprecatedRétrospective
Ainsi qu’en mode Mobile View. [Désolé pas de bouton Export .pbiviz…]

19. Power BI Visuals CLI – PBIVIZ ToolRétrospective
• Création de nouveau projet: pbiviz new <NomdeProjet>
• Mise-a-jour de version de projet: pbiviz update
• Compilation de projet - package pbiviz: pbiviz package
• Démarrage serveur local – débugguage en ligne Power BI Online: pbiviz start
 Après avoir écouté activement plusieurs commentaires émis par les dévelopeurs - membres
de la communauté Power BI, Microsoft a décidé qu'il était temps de modifier son approche
et de repenser à une formule plus compact, plus malléable et homogène, permettant
également une meilleure gestion de librairies client externes.
 Puis en août 2016, Microsoft a officellement annoncé la mise en ligne de la nouvelle
version de dévelopement Power BI Visuals CLI.
 Le nouvel outil de développement est entièrement basé sur la ligne de commande pbiviz
et fonctionne sur toutes les plates-formes avec n'importe quel IDE de votre choix.
 Les principales fonctions de base pbiviz sont:

20. Power BI Visuals CLI – PBIVIZ ToolRétrospective
Donc une simple commande en ligne pbiviz new <NomdeProjet>
permet maintenant de générer un nouveau modèle Template de projet Power BI
Visuals CLI en quelques secondes. Tadam…

21. Concepts de base: IVisual en 3 cycles
constructor(options:VisualConstructorOptions): void;
update?(options: VisualUpdateOptions): void;
destroy?(): void;
L'interface IVisual est l’engin principal de Power BI Visuals que toute classe de composant visuels
[visual.ts] doit implémenter. L’interface IVisual est executée en 3 cycles:
La méthode constructor est appelée une seule fois, lorsque le visuel est initialisé pour
la première fois lors du chargement.
La méthode update est appelée chaque fois qu’une mise a jour est effectuée sur le
composant visuel, tel qu’une modification de données ou de changements de paramètres
de propriétés ou lors d’un repositionnement effectués par l’usager...
La méthode destroy est appelée lorsque le visuel est sur le point d'être disposé.
Ici, le visuel devrait être nul, ainsi que toutes les ressources attachées afin d’éviter
les fuites de mémoire.

22. Concepts de base: capabilities.json
1- Propriétés - dataRoles 2- Propriétés -objects
• L’ajout de fichiers capabilities.json dans l’architecture des nouvelles version Power BI Visuals CLI a permis une
meilleure séparation de contrôle.
• On a vite réalisé qu’à la base, la gestion du formatage d’interface utilisateur Power BI ne relevait pas vraiment de la
logique du code source des visuels [visual.ts].
• En revanche, on a cependant cru préférable de déclarer une liste d'options de formatage objects dans un fichier de
configuration capabilities.json que l‘environnement Power BI pourra prendre en charge au moment du
chargement du visuel.

23. Concepts de base: capabilities.json – Data Roles & Mapping

24. Concepts de base: capabilities.json – DataView
Qu'est-ce qu'un DataView?
 DataView est un modèle d'objet JavaScript pour les représentations canoniques des données.
 A la base, il ne s’agit pas vraiment ici d’un modèle de format de fichier format JSON, mais plutôt d’une
forme d’arborescence ou graphe d’objet avec de références croisées supportant des vues multiples,
simples et canoniques des mêmes données, donnant ainsi aux visualisations la liberté de choisir leur
modèle de représentations canoniques préféré.
 Les structures canoniques DataView sont:
 metadata
 categorical
 table
 single
 matrix
 tree

25. Concepts de base: capabilities.json – DataView
Si vous souhaitez voir ces données ("metadata", "categorical", "matrix", "table" ,
"single" et "tree") lors de tests en ligne sur l'environnement
Power BI Online Developer Visual, vous n'avez qu'a cliquer sur le bouton
d'affichage du DataView en format JSON.

26. Capabilities – DataView- metadata
metadata:
Les métadonnées contiennent des informations sur les différentes colonnes, telles
que leur type (catégorique ou scalaire), le type de chaînes de caractères qui
s'appliquent à ses valeurs, ainsi que les options de formatage statique telles que la
couleur d'arrière-plan, la position des légendes, etc.

27. Capabilities – DataView- categorical

28. Capabilities – DataView- table

29. Capabilities – DataView- single

30. Capabilities – DataView- matrix

31.  Installation Node.JS (gratuit…)
 Version 5.0 recommendée - 4.0+ minimum
 Installation Node Package Manage (npm)
 Installation Visual Studio Code (gratuit…)
 Outil compact et performant de développement Node.js, TypeScript…
 Installation Typings (gratuit…)
 Recommendé pour la gestion de librairies via TypeScript (typings.json)
 Installation Power BI Visuals CLI tool (pbiviz) (gratuit…)
 Installation via Node Package Manager (npm)
npm install –g powerbi-visuals-tools
Installation Local self-signed certificate (gratuit…)
 pbiviz -–install-cert
Installation Power BI Visuals CLI - ToolChain

32. • https://nodejs.org/en/download/
Installation Node.js

33. • http://code.visualstudio.com/
Installation Visual Studio Code

34. Installation Typings - npm
• https://www.npmjs.com/package/typings
# Install Typings CLI utility.
npm install typings --global
# Search for definitions.
typings search tape
# Find a definition by name.
typings search --name react
# If you use the package as a module:
# Install non-global typings (defaults to "npm" source, configurable through `defaultSource` in `.typingsrc`).
typings install debug --save
# If you use the package through `<script>`, it is part of the environment, or
# the module typings are not yet available, try searching and installing with `--global`:
typings install dt~mocha --global --save
# If you need a specific commit from github.
typings install d3=github:DefinitelyTyped/DefinitelyTyped/d3/d3.d.ts#1c05872e7811235f43780b8b596bfd26fe8e7760 --global --save
# Search and install by version.
typings info env~node --versions
typings install env~node@0.10 --global --save
# Install typings from a particular source (use `<source>~<name>` or `--source <source>`).
typings install env~atom --global --save
typings install bluebird --source npm --save
#Use `typings/index.d.ts` (in `tsconfig.json` or as a `///` reference).
cat typings/index.d.ts
Typings est le moyen simple de gérer et d'installer les définitions de TypeScript.
Il utilise typings.json, qui peut résoudre le registre Typings, GitHub, NPM,
Bower, HTTP et les fichiers locaux.
Les packages peuvent utiliser des définitions de types de différentes sources et de
différentes versions, sachant qu'elles ne seront jamais en conflit pour les utilisateurs.

35. Installation Power BI Visuals CLI Tool (PBIVIZ)
npm install –g powerbi-visuals-tools
pbiviz
Pour installer l’outil de commande Power BI Visuals CLI Tool (PBIVIZ), on doit simplement exécuter la commande npm
suivante à partir d’une console command prompt avec droit d’administrateur:
Une fois le processus d’installation complété, on peut ensuite confirmer que les opérations ont bien été effectuées avec succès en
exécutant la commande pbiviz suivante - sans paramètre:

36. Installation Power BI Visuals CLI Tool (PBIVIZ)
Une fenêtre affichant une description des différentes options de paramètres de commande pbiviz disponibles apparaitra
ensuite a l’ écran:

37. Installation - Local self-signed certificate
 ll est possible d'effectuer des tests de visionnement de composant visuels
en ligne sur le site Power BI Online.: https://app.powerbi.com
 On doit d’abord selectionner l’option de menu Settings.

38. Installation - Local self-signed certificate
 Puis sous l’onglet General>Developer, simplement s’assurer
de cocher l’option “Enable Developer visual for testing”
 On doit ensuite s’assurer que le serveur local est démarré en
exécutant la commande suivante à partir du répertoire root
du projet. [Ex: C:PBIVisualsbarChart]
pbiviz start

39. Installation - Local self-signed certificate
pbiviz -–install-cert
Ouch!!!...
“Can’t contact visual server.
Please make sure the visual server is running
and configured correctly”
 Ceci indique que le portail Power BI Online n'est pas en mesure de
détecter un serveur https sécurisé sur votre poste.
 Pour remédier au problème, on doit d'abord installer un certificat SSL
à partir de la commande pbiviz suivante.
 Une fois le certificat SSL installé, ceci permettra à nos
composants visuels d'être chargés dans notre navigateur local.

40. Installation - Local self-signed certificate
pbiviz -–install-cert
Ouch!!!...
“Can’t contact visual server.
Please make sure the visual server is running
and configured correctly”
 Ceci indique que le portail Power BI Online n'est pas en mesure de
détecter un serveur https sécurisé sur votre poste.
 Pour remédier au problème, on doit d'abord installer un certificat SSL
à partir de la commande pbiviz suivante.
 Une fois le certificat SSL installé, ceci permettra à nos
composants visuels d'être chargés dans notre navigateur local.

41. Visual Studio Code – architecture de projet PBIVIZ CLI
api/ Ce répertoire contient des informations relatives a la version
assets/ Ce répertoire est utilisé pour stocker des éléments graphiques tels que des
Icones, images screenshots, etc.
dist/ Lorsque l’on exécute la commande pbiviz package, un fichier pbiviz est
automatiquement généré sous le repertoire dist/.
src/ Ce répertoire est utilisé pour stocker tout code source format TypeScript et JavaScript
style/ Ce repertoire contient le principal fichier de style Less de votre composant visuel
Importation de fichiers style externes: @import (less) "style/external.css";
.gitignore Manifeste Indiquant a git les fichiers a ignorer et ne pa prendre en charge..
capabilities.json Fichier de configuration utilisé pour définir les capacités
[dataRole, dataViewMappings, object] relatifs à votre visuel
package.json Fichier permettant d’effectuer la gestion de modules [node_modules] à partir de
commandes npm.
pbiviz.json Principal fichier de configuration du projet.
tsconfig.json Parametres de compilateur de fichiers Typescript.
typings.json Ce fichier est optionnel mais suggeré pour la gestion de définitions de types Typescript

42. Démos…

43. Démo – Ferrari + code svg

44. Démo – Slicer – thermometer -revisited

45. Démo – d3.js circlepacking version - revisited

46. Questions?

47. Power BI Visuals
Build Your Custom Visuals in Power BI (Step-by-Step) -Tsuyoshi Matsuzaki:
https://blogs.msdn.microsoft.com/tsmatsuz/2016/09/27/power-bi-custom-visuals-programming/
Create a custom visual with the custom visual developer tools
https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-tips-and-tricks-for-creating-reports/
How to Create a Power BI Custom Visual Based on an Existing d3 Visual – Jon Gallant
https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-tips-and-tricks-for-creating-reports/
Forums Community Power BI– (section Developer)
https://community.powerbi.com/t5/Developer/bd-p/Developer
TypeScript:
TypeScript Samples:
https://www.typescriptlang.org/samples/
TypeScript Deep Dive:
https://github.com/basarat/typescript-book
D3.js:
D3.js Gallery – Mike Bostock:
https://github.com/d3/d3/wiki/Gallery
Collection D3.js Gallery (2490 examples!) – Christophe Viau :
https://github.com/basarat/typescript-book
D3 Tips and Tricks v3.x – Malcolm Maclean:
https://leanpub.com/D3-Tips-and-Tricks
Liens utiles… [Merci de votre participation ;]