création de visuels personnalisés avec power bi visuals cli
TRANSCRIPT
Création de visuels personnalisésavec Power BI Visuals CLI Denys Chamberland Analyste-Programmeur Web @MawashiKid [email protected]
MSDEVMTL – Data Platform ©2017
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
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
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
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.
Les 3 éléments clés utilisés lors du dévelopement de visuels personalisés sont: TypeScript Less D3.js
Introduction – suite…
Introduction – élément clé :TypeScripthttp://www.typescriptla
ng.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.
Introduction – élément clé : Lesshttp://http://lesscss.or
g/• 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/
Introduction – élément clé : D3.js – Data Driven Documentshttps://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 visuels personnalisés 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éée 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 visuels vraiment soignés 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.
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: Plusieurs visuels avaient é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.
Custom Visuals Gallery• https://app.powerbi.com/visuals/
En cliquant sur une 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.
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 visuel a été importé avec succès
• 5 – Finalement une icône identifiant le visual importé est alors ajouté au panneau de visualisation
Power BI Visuals Extensibity Developer Tool- Deprecated
Ré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.
Power BI Visuals Extensibity Developer Tool- Deprecated
Ré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.
Power BI Visuals Extensibity Developer Tool- Deprecated
Ré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 ]
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/]
Power BI Visuals CORE- DeprecatedRétrospective
Une application client de type "Playground" pouvait être actionnée à partir deVisual 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
Power BI Visuals CORE- DeprecatedRétrospective
Ainsi qu’en mode Mobile View. [Désolé pas de bouton Export .pbiviz…]
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:
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. Tadaaaam…
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ètresde 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.
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.
Concepts de base: capabilities.json – Data Roles & Mapping
Concepts de base: capabilities.json – DataViewQu'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
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 boutond'affichage du DataView en format JSON.
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.
Capabilities – DataView- categorical
Capabilities – DataView- table
Capabilities – DataView- single
Capabilities – DataView- matrix
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
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 --versionstypings install [email protected] --global --save# Install typings from a particular source (use `<source>~<name>` or `--source <source>`).typings install env~atom --global --savetypings 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.
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:
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:
Installation - Local self-signed certificate
ll est possible d'effectuer des tests de visionnement de composant visuelsen ligne sur le site Power BI Online.: https://app.powerbi.com
On doit d’abord selectionner l’option de menu Settings.
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 rootdu projet. [Ex: C:\PBIVisuals\barChart]
pbiviz start
Installation - Local self-signed certificate
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 à noscomposants visuels d'être chargés dans notre navigateur local.
pbiviz -–install-cert
Ouch!!!... “Can’t contact visual server.
Please make sure the visual server is running and configured correctly”
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 à noscomposants visuels d'être chargés dans notre navigateur local.
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 Icônes, 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 JavaScriptstyle/ 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 pas prendre en charge..
capabilities.json Fichier de configuration utilisé pour définir les capacités [dataRole, dataViewMappings, object] relatifs à votre visuelpackage.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 Paramètres de compilateur de fichiers Typescript.
typings.json Ce fichier est optionne,l mais suggeré pour la gestion de définitions de types Typescript
Démos…
Démo – Ferrari + code svg
Démo – Slicer – thermometer -revisited
Démo – d3.js circlepacking version - revisited
Questions?
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-bookD3.js:
D3.js Gallery – Mike Bostock: https://github.com/d3/d3/wiki/Gallery
Collection D3.js Gallery (2490 examples!) – Christophe Viau :http://christopheviau.com/d3list/
D3 Tips and Tricks v3.x – Malcolm Maclean:https://leanpub.com/D3-Tips-and-Tricks
Liens utiles… [Merci de votre participation ;]