Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Création de visuels personnalisés avec Power BI Visuals CLI

444 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Création de visuels personnalisés avec Power BI Visuals CLI

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. Power BI Visuals CORE- DeprecatedRétrospective Ainsi qu’en mode Mobile View. [Désolé pas de bouton Export .pbiviz…]
  19. 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. 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. 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. 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. 23. Concepts de base: capabilities.json – Data Roles & Mapping
  24. 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. 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. 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. 27. Capabilities – DataView- categorical
  28. 28. Capabilities – DataView- table
  29. 29. Capabilities – DataView- single
  30. 30. Capabilities – DataView- matrix
  31. 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. 32. • https://nodejs.org/en/download/ Installation Node.js
  33. 33. • http://code.visualstudio.com/ Installation Visual Studio Code
  34. 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. 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. 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. 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. 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. 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. 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. 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. 42. Démos…
  43. 43. Démo – Ferrari + code svg
  44. 44. Démo – Slicer – thermometer -revisited
  45. 45. Démo – d3.js circlepacking version - revisited
  46. 46. Questions?
  47. 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 ;]

×