SlideShare une entreprise Scribd logo
Création de visuels personnalisés
avec Power BI Visuals CLI
Denys Chamberland
Analyste-Programmeur Web
@MawashiKid
mawashikid@gmail.com
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@gmail.com
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é :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.
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/
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.
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.
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.
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
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.
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.
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 ]
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 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
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. Tadam…
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.
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 – 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
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.
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
• https://nodejs.org/en/download/
Installation Node.js
• http://code.visualstudio.com/
Installation Visual Studio Code
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.
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 visuels
en 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 root
du projet. [Ex: C:PBIVisualsbarChart]
pbiviz start
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.
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.
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
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-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 ;]

Contenu connexe

Tendances

Boostez vos applications en migrant vos bases vers SQL Server 2012 !
Boostez vos applications en migrant vos bases vers SQL Server 2012 !Boostez vos applications en migrant vos bases vers SQL Server 2012 !
Boostez vos applications en migrant vos bases vers SQL Server 2012 !
Microsoft Technet France
 
Nouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCADNouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCAD
procadconsultants
 
Power Bi, le tour complet 2017
Power Bi, le tour complet 2017 Power Bi, le tour complet 2017
Power Bi, le tour complet 2017
Isabelle Van Campenhoudt
 
SharePoint Days Casablanca - OneDrive for business démystifié
SharePoint Days Casablanca - OneDrive for business démystifiéSharePoint Days Casablanca - OneDrive for business démystifié
SharePoint Days Casablanca - OneDrive for business démystifié
Benoit Jester
 
Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013
Microsoft
 
SharePoint Days Casablanca 2016 - Les nouveautés de SharePoint 2016
SharePoint Days Casablanca 2016 -  Les nouveautés de SharePoint 2016SharePoint Days Casablanca 2016 -  Les nouveautés de SharePoint 2016
SharePoint Days Casablanca 2016 - Les nouveautés de SharePoint 2016
Benoit Jester
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
Microsoft Technet France
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
Microsoft
 
Présentation sharepoint 2013
Présentation sharepoint 2013Présentation sharepoint 2013
Présentation sharepoint 2013
Mohammed Amine Mostefai
 
Monter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows AzureMonter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows Azure
Microsoft Technet France
 
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
Patrick Guimonet
 
Recommandations pour la nouvelle IHM de HAL
Recommandations pour la nouvelle IHM de HAL Recommandations pour la nouvelle IHM de HAL
Recommandations pour la nouvelle IHM de HAL
OAccsd
 
Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...
Microsoft
 
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
Benoit Jester
 
Cycle Power BI Part1
Cycle Power BI Part1Cycle Power BI Part1
Cycle Power BI Part1
Isabelle Van Campenhoudt
 
Présentation SharePoint 2013
Présentation SharePoint 2013Présentation SharePoint 2013
Présentation SharePoint 2013
Laurent Rouable
 
Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...
Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...
Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...
Astoine.com "Gold Certified Microsoft Cloud Technology IT"​ Formation et Conseil - Maroc
 
Mieux comprendre SharePoint 2013
Mieux comprendre SharePoint 2013Mieux comprendre SharePoint 2013
Mieux comprendre SharePoint 2013
Benjamin Niaulin
 
Plénière J03 SharePoint et le cloud
Plénière J03   SharePoint et le cloudPlénière J03   SharePoint et le cloud
Plénière J03 SharePoint et le cloud
Conf'SharePoint 2013
 

Tendances (20)

Boostez vos applications en migrant vos bases vers SQL Server 2012 !
Boostez vos applications en migrant vos bases vers SQL Server 2012 !Boostez vos applications en migrant vos bases vers SQL Server 2012 !
Boostez vos applications en migrant vos bases vers SQL Server 2012 !
 
Nouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCADNouveautés Revit Architecture 2012 PROCAD
Nouveautés Revit Architecture 2012 PROCAD
 
Power Bi, le tour complet 2017
Power Bi, le tour complet 2017 Power Bi, le tour complet 2017
Power Bi, le tour complet 2017
 
SharePoint Days Casablanca - OneDrive for business démystifié
SharePoint Days Casablanca - OneDrive for business démystifiéSharePoint Days Casablanca - OneDrive for business démystifié
SharePoint Days Casablanca - OneDrive for business démystifié
 
Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013
 
SharePoint Days Casablanca 2016 - Les nouveautés de SharePoint 2016
SharePoint Days Casablanca 2016 -  Les nouveautés de SharePoint 2016SharePoint Days Casablanca 2016 -  Les nouveautés de SharePoint 2016
SharePoint Days Casablanca 2016 - Les nouveautés de SharePoint 2016
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
 
Présentation sharepoint 2013
Présentation sharepoint 2013Présentation sharepoint 2013
Présentation sharepoint 2013
 
Monter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows AzureMonter des environnements dev test efficaces avec Windows Azure
Monter des environnements dev test efficaces avec Windows Azure
 
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013Conf'SharePoint 2013 - B08   quelle stratégie de migration vers SharePoint 2013
Conf'SharePoint 2013 - B08 quelle stratégie de migration vers SharePoint 2013
 
Recommandations pour la nouvelle IHM de HAL
Recommandations pour la nouvelle IHM de HAL Recommandations pour la nouvelle IHM de HAL
Recommandations pour la nouvelle IHM de HAL
 
Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...
 
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
 
Cycle Power BI Part1
Cycle Power BI Part1Cycle Power BI Part1
Cycle Power BI Part1
 
Google appengine&guice
Google appengine&guiceGoogle appengine&guice
Google appengine&guice
 
Présentation SharePoint 2013
Présentation SharePoint 2013Présentation SharePoint 2013
Présentation SharePoint 2013
 
Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...
Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...
Astoine Maroc : Microsoft Power-BI Tableaux de Bord Décisionnel Self BI cloud...
 
Mieux comprendre SharePoint 2013
Mieux comprendre SharePoint 2013Mieux comprendre SharePoint 2013
Mieux comprendre SharePoint 2013
 
Plénière J03 SharePoint et le cloud
Plénière J03   SharePoint et le cloudPlénière J03   SharePoint et le cloud
Plénière J03 SharePoint et le cloud
 

En vedette

Présentation ssbi
Présentation ssbiPrésentation ssbi
Présentation ssbi
MSDEVMTL
 
Le Must du décisionnel avec l'ensemble de l'offre Microsoft BI
Le Must du décisionnel avec l'ensemble de l'offre Microsoft BILe Must du décisionnel avec l'ensemble de l'offre Microsoft BI
Le Must du décisionnel avec l'ensemble de l'offre Microsoft BI
Microsoft Technet France
 
Creating custom visuals with Power BI Visuals CLI
Creating custom visuals with Power BI Visuals CLICreating custom visuals with Power BI Visuals CLI
Creating custom visuals with Power BI Visuals CLI
Denys Chamberland
 
La BI Microsoft en mobilité sur tous les devices
La BI Microsoft en mobilité sur tous les devicesLa BI Microsoft en mobilité sur tous les devices
La BI Microsoft en mobilité sur tous les devices
Microsoft Décideurs IT
 
Afterworks présentation de la stack bi de microsoft
Afterworks présentation de la stack bi de microsoftAfterworks présentation de la stack bi de microsoft
Afterworks présentation de la stack bi de microsoft
Philippe Geiger
 
Ferrari f1 svg
Ferrari f1 svgFerrari f1 svg
Ferrari f1 svg
Denys Chamberland
 
Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...
Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...
Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...
Microsoft
 
Vue d'ensemble de SQL Server 2012
Vue d'ensemble de SQL Server 2012Vue d'ensemble de SQL Server 2012
Vue d'ensemble de SQL Server 2012
Microsoft Technet France
 
5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...
5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...
5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...
Swiss SharePoint Club
 
Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...
Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...
Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...
PMI-Montréal
 
Aerostructure analysis WIKI project
Aerostructure analysis WIKI projectAerostructure analysis WIKI project
Aerostructure analysis WIKI project
Mohammad Tawfik
 
Power bi introduction
Power bi introductionPower bi introduction
Power bi introduction
Bishwadeb Dey
 
SharePoint Online (Office 365) vs. SharePoint Server
SharePoint Online (Office 365) vs. SharePoint ServerSharePoint Online (Office 365) vs. SharePoint Server
SharePoint Online (Office 365) vs. SharePoint Server
BHolt_IT
 
2008-09-30 Présentation Générale SQL Server 2008
2008-09-30 Présentation Générale SQL Server 20082008-09-30 Présentation Générale SQL Server 2008
2008-09-30 Présentation Générale SQL Server 2008
Patrick Guimonet
 
Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...
Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...
Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...
FactoVia
 
2008-10-02 Paris - Administration des applications critiques avec SQL Server ...
2008-10-02 Paris - Administration des applications critiques avec SQL Server ...2008-10-02 Paris - Administration des applications critiques avec SQL Server ...
2008-10-02 Paris - Administration des applications critiques avec SQL Server ...
Patrick Guimonet
 
Introducing Power BI Embedded
Introducing Power BI EmbeddedIntroducing Power BI Embedded
Introducing Power BI Embedded
Mostafa
 
2009-03-13 SQL Server une plateforme crédible
2009-03-13 SQL Server une plateforme crédible2009-03-13 SQL Server une plateforme crédible
2009-03-13 SQL Server une plateforme crédible
Patrick Guimonet
 
Meilleures pratiques d'affaires avec Power Pivot
Meilleures pratiques d'affaires avec Power PivotMeilleures pratiques d'affaires avec Power Pivot
Meilleures pratiques d'affaires avec Power Pivot
Sophie Marchand, M.Sc., CPA, CGA, MVP
 
SharePoint Online v Onprem
SharePoint Online v OnpremSharePoint Online v Onprem
SharePoint Online v Onprem
Concurrency, Inc.
 

En vedette (20)

Présentation ssbi
Présentation ssbiPrésentation ssbi
Présentation ssbi
 
Le Must du décisionnel avec l'ensemble de l'offre Microsoft BI
Le Must du décisionnel avec l'ensemble de l'offre Microsoft BILe Must du décisionnel avec l'ensemble de l'offre Microsoft BI
Le Must du décisionnel avec l'ensemble de l'offre Microsoft BI
 
Creating custom visuals with Power BI Visuals CLI
Creating custom visuals with Power BI Visuals CLICreating custom visuals with Power BI Visuals CLI
Creating custom visuals with Power BI Visuals CLI
 
La BI Microsoft en mobilité sur tous les devices
La BI Microsoft en mobilité sur tous les devicesLa BI Microsoft en mobilité sur tous les devices
La BI Microsoft en mobilité sur tous les devices
 
Afterworks présentation de la stack bi de microsoft
Afterworks présentation de la stack bi de microsoftAfterworks présentation de la stack bi de microsoft
Afterworks présentation de la stack bi de microsoft
 
Ferrari f1 svg
Ferrari f1 svgFerrari f1 svg
Ferrari f1 svg
 
Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...
Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...
Obtenez votre brevet de pilotage de l’efficacité énergétique avec la BI Micro...
 
Vue d'ensemble de SQL Server 2012
Vue d'ensemble de SQL Server 2012Vue d'ensemble de SQL Server 2012
Vue d'ensemble de SQL Server 2012
 
5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...
5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...
5.2swiss_sharepoint_club_mvp_track2_office365_salesforce_integration_guillaum...
 
Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...
Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...
Soirée corporative du PMI-Montréal - Analytique de données et visualisation d...
 
Aerostructure analysis WIKI project
Aerostructure analysis WIKI projectAerostructure analysis WIKI project
Aerostructure analysis WIKI project
 
Power bi introduction
Power bi introductionPower bi introduction
Power bi introduction
 
SharePoint Online (Office 365) vs. SharePoint Server
SharePoint Online (Office 365) vs. SharePoint ServerSharePoint Online (Office 365) vs. SharePoint Server
SharePoint Online (Office 365) vs. SharePoint Server
 
2008-09-30 Présentation Générale SQL Server 2008
2008-09-30 Présentation Générale SQL Server 20082008-09-30 Présentation Générale SQL Server 2008
2008-09-30 Présentation Générale SQL Server 2008
 
Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...
Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...
Slides deck yos-tour_vincentthavonekham_mvp_azure_the_future_of_microsoft_dat...
 
2008-10-02 Paris - Administration des applications critiques avec SQL Server ...
2008-10-02 Paris - Administration des applications critiques avec SQL Server ...2008-10-02 Paris - Administration des applications critiques avec SQL Server ...
2008-10-02 Paris - Administration des applications critiques avec SQL Server ...
 
Introducing Power BI Embedded
Introducing Power BI EmbeddedIntroducing Power BI Embedded
Introducing Power BI Embedded
 
2009-03-13 SQL Server une plateforme crédible
2009-03-13 SQL Server une plateforme crédible2009-03-13 SQL Server une plateforme crédible
2009-03-13 SQL Server une plateforme crédible
 
Meilleures pratiques d'affaires avec Power Pivot
Meilleures pratiques d'affaires avec Power PivotMeilleures pratiques d'affaires avec Power Pivot
Meilleures pratiques d'affaires avec Power Pivot
 
SharePoint Online v Onprem
SharePoint Online v OnpremSharePoint Online v Onprem
SharePoint Online v Onprem
 

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

Presentation platform flash
Presentation platform flashPresentation platform flash
Presentation platform flash
Cynapsys It Hotspot
 
Formation sharepoint 2013 développement sharepoint 2013
Formation sharepoint 2013   développement sharepoint 2013Formation sharepoint 2013   développement sharepoint 2013
Formation sharepoint 2013 développement sharepoint 2013
EGILIA Learning
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
YounesOuladSayad1
 
Introduction à TeamCity
Introduction à TeamCityIntroduction à TeamCity
Introduction à TeamCity
Ulrich VACHON
 
Mobyview : Drupal Meetup, Paris, 17 Sep 2015
Mobyview : Drupal Meetup, Paris, 17 Sep 2015Mobyview : Drupal Meetup, Paris, 17 Sep 2015
Mobyview : Drupal Meetup, Paris, 17 Sep 2015
Alex Leroy Deval
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
YounesOuladSayad1
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPress
Stéphane Plante
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action
Denys Chamberland
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
Gregory Renard
 
Dev ops - Contiuous delivery
Dev ops - Contiuous deliveryDev ops - Contiuous delivery
Dev ops - Contiuous delivery
Patrice Ferlet
 
Prismic
PrismicPrismic
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1
Xavier Mouly
 
8 Rex : Mise en place de DevOps sur Azure
8   Rex : Mise en place de DevOps sur Azure8   Rex : Mise en place de DevOps sur Azure
8 Rex : Mise en place de DevOps sur Azure
aOS Community
 
Formation devops par la pratique
Formation devops par la pratiqueFormation devops par la pratique
Formation devops par la pratique
Khaled Ben Driss
 
SPINALBIM Suite: transformation digitale de l'exploitation et la maintenance
SPINALBIM Suite: transformation digitale de l'exploitation et la maintenanceSPINALBIM Suite: transformation digitale de l'exploitation et la maintenance
SPINALBIM Suite: transformation digitale de l'exploitation et la maintenance
Sebastien Coulon
 
S18 db2 web query comment partir de zero
S18   db2 web query comment partir de zeroS18   db2 web query comment partir de zero
S18 db2 web query comment partir de zero
Gautier DUMAS
 
Partager et collaborer avec Power BI - SQL Saturday Montreal 2017
Partager et collaborer avec Power BI - SQL Saturday Montreal 2017Partager et collaborer avec Power BI - SQL Saturday Montreal 2017
Partager et collaborer avec Power BI - SQL Saturday Montreal 2017
Jean-Pierre Riehl
 
Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...
Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...
Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...
Microsoft
 
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Cedric Girard
 

Similaire à Création de visuels personnalisés avec Power BI Visuals CLI (20)

Presentation platform flash
Presentation platform flashPresentation platform flash
Presentation platform flash
 
Formation sharepoint 2013 développement sharepoint 2013
Formation sharepoint 2013   développement sharepoint 2013Formation sharepoint 2013   développement sharepoint 2013
Formation sharepoint 2013 développement sharepoint 2013
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
 
Introduction à TeamCity
Introduction à TeamCityIntroduction à TeamCity
Introduction à TeamCity
 
Mobyview : Drupal Meetup, Paris, 17 Sep 2015
Mobyview : Drupal Meetup, Paris, 17 Sep 2015Mobyview : Drupal Meetup, Paris, 17 Sep 2015
Mobyview : Drupal Meetup, Paris, 17 Sep 2015
 
Programmation Web developpement dynamique
Programmation Web developpement dynamiqueProgrammation Web developpement dynamique
Programmation Web developpement dynamique
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPress
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Dev ops - Contiuous delivery
Dev ops - Contiuous deliveryDev ops - Contiuous delivery
Dev ops - Contiuous delivery
 
Prismic
PrismicPrismic
Prismic
 
Visio services 2013 share point saturday mtl
Visio services 2013   share point saturday mtlVisio services 2013   share point saturday mtl
Visio services 2013 share point saturday mtl
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1
 
8 Rex : Mise en place de DevOps sur Azure
8   Rex : Mise en place de DevOps sur Azure8   Rex : Mise en place de DevOps sur Azure
8 Rex : Mise en place de DevOps sur Azure
 
Formation devops par la pratique
Formation devops par la pratiqueFormation devops par la pratique
Formation devops par la pratique
 
SPINALBIM Suite: transformation digitale de l'exploitation et la maintenance
SPINALBIM Suite: transformation digitale de l'exploitation et la maintenanceSPINALBIM Suite: transformation digitale de l'exploitation et la maintenance
SPINALBIM Suite: transformation digitale de l'exploitation et la maintenance
 
S18 db2 web query comment partir de zero
S18   db2 web query comment partir de zeroS18   db2 web query comment partir de zero
S18 db2 web query comment partir de zero
 
Partager et collaborer avec Power BI - SQL Saturday Montreal 2017
Partager et collaborer avec Power BI - SQL Saturday Montreal 2017Partager et collaborer avec Power BI - SQL Saturday Montreal 2017
Partager et collaborer avec Power BI - SQL Saturday Montreal 2017
 
Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...
Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...
Mise en place d&rsquo;une usine logicielle pour technologies Microsoft et non...
 
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
Devoteam REX OpenShift DevOps - Red Hat Roadshow Paris - avril 2018
 

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

  • 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.
  • 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
  • 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
  • 43. Démo – Ferrari + code svg
  • 44. Démo – Slicer – thermometer -revisited
  • 45. Démo – d3.js circlepacking version - revisited
  • 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 ;]