Concevoir des tableaux de bord avec Envision

Concevoir des tableaux de bord avec Envision










Accueil » Ressources » Ici

Les tableaux de bord Envision reposent sur de plus petites unités appelées « vignettes ». Il est possible d'ajuster leur taille et leur couleur et de les insérer là où vous le souhaitez dans la page du tableau de bord. Envision met l'accent sur des tableaux de bord très efficaces dans lesquels tous les indicateurs sont importants pour votre entreprises et tiennent sur une page. Même les tableaux de bord les plus complexes s'affichent en moins d'une demie seconde. Dans le présent article, nous expliquons comment concevoir un tableau de bord Envision en partant de zéro.

Votre premier tableau de bord

Nous allons concevoir notre premier tableau de bord avec l'échantillon de données. La capture d'écran ci-dessous illustre le tableau de bord que vous devriez obtenir dans votre compte Lokad.

Image

Ce tableau de bord est généré par le script ci-dessous, qui peut vous paraître impressionnant au premier abord. Nous allons le décomposer ligne par ligne dans la suite de l'article.
read "/sample/Lokad_Items.tsv"
read "/sample/Lokad_Orders.tsv" as Orders
read "/sample/Lokad_PurchaseOrders.tsv" as PO

show label "Hello World: my first dashboard" a1f1 tomato

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price{$}" c2d2 with min(SellPrice)
show table "Max selling price{$}" e2f2 with max(SellPrice)

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes{$}" a3f5 tomato with
Week.oamount as "Sold"
Week.pamount as "Purchased"

show piechart "Sales by brand" a6c8 tomato with 
  sum(Orders.NetAmount) group by Brand

show treemap "Stock value by supplier{$}" d6f8 tomato with 
  Name
  StockOnHand * BuyPrice
  Supplier

show table "Top Sellers" a9f12 tomato with 
  Id as "Product ID"
  Supplier
  StockOnHand
  sum(Orders.NetAmount) as "Sold{$}" 
  order by sum(Orders.NetAmount) desc
Nous vous conseillons de vous connecter à votre compte Lokad, de cliquer sur Create Envision Script et de copier-coller le script ci-dessus puis de cliquer sur Start Run. Une fois l'exécution terminée, cliquez sur le nouveau lien vert qui s'affiche parmi les Recent runs, sous le bouton Start Run. Vous devriez voir apparaître un tableau de bord identique à celui présenté ci-dessus.

Le tableau de bord tient sur une seule page, mais chaque vignette peut être étendue en cliquant dessus. Si vous cliquez sur le graphique, celui-ci s'étend sur toute la fenêtre de votre navigateur et en cliquant n'importe où dans la zone noire autour de la vignette étendue, cette dernière reprend sa taille initiale.

Titre, position et couleur

La vignette label est la plus simple des vignettes disponibles dans Envision. Elle est un bon point de départ pour comprendre les propriétés que partagent toutes les vignettes, c’est-à-dire un titre, une position et une couleur principale. La vignette label affiche simplement du texte spécifié dans celle-ci et la taille de la police est ajustée pour tenir dans la vignette.
show label "Hello World: my first dashboard" a1f1 tomato
Toutes les vignettes sont définies par une instruction show. Ce mot-clé est suivi de 4 arguments. Le premier est le type de vignette. Envision est compatible avec de nombreux types de vignette et label figure parmi ces types. Dans la section suivante, nous présentons quelques autres types de vignette également utilisés dans ce tableau de bord.

Après le type de la vignette vient son titre, défini par une chaîne de caractères, ce qui explique les guillemets ("). Selon le type de vignette, l'affichage du titre peut être différent, mais il se fait généralement en haut de la vignette. Puis, après le titre, c'est la position de la vignette qui est définie, avec a1f1 dans l'exemple ci-dessus. Envision utilise une grille similaire à celle que l'on trouve dans Excel pour positionner les vignettes, avec des lettres pour les colonnes et des numéros pour les lignes. Ainsi, a1f1 englobe les cellules comprises entre l'angle en haut à gauche en A1 et l'angle en bas à droite en F1. Envision n'est pas sensible à la casse, donc A1F1 est strictement équivalent à a1f1.

Enfin, c'est la couleur qui est spécifiée, tomato dans l'exemple ci-dessus. L'argument de spécification de la couleur n'est pas obligatoire et c'est la couleur black (noire) qui est utilisée par défaut. Toutes les couleurs du Web sont valides pour Envisionainsi que les triplets hexadécimaux sans le signe #. Il faut par exemple utiliser 0099CC au lieu de 0099CC. Cependant, dans la pratique, il est trop fastidieux de modifier les couleurs directement dans le script.

L'éditeur de vignettes

Même s'il est possible de modifier la position et la couleur des vignettes depuis le script, ce n'est pas très pratique car l'éditeur de scripts ne permet pas de voir le résultat. Par conséquent, un second éditeur est inclu dans Envision, l'éditeur de vignettes. Ce dernier offre la possibilité d'ajuster la position des vignettes, leur titre et leur couleur ainsi que quelques fonctionnalités supplémentaires qui permettent d'accélérer la mise en forme d'un tableau de bord si besoin.

Image

Dans votre compte Lokad, retournez sur le tableau de bord généré précédemment et cliquez sur Edit Tiles. Une surcouche plus foncée apparaît sur chaque vignette, faisant apparaître leurs coordonnées de position. Ces dernières sont exprimées selon la convention présentées plus haut. Cliquez sur n'importe quelle vignette, celle du haut par exemple, et vous verrez s'afficher une boîte de dialogue, qui vous permettra de modifier les propriétés de la vignette.

Vous pouvez également remarquer des boutons verts avec le signe (+) sur la gauche de la page. Ces boutons servent à insérer une ligne vide juste au-dessus d'eux. C'est pratique lorsque vous voulez faire remonter une section du tableau de bord (et repousser une autre section vers le bas).

Image

Une fois que vous cliquez sur le bouton (+), un bouton rouge (-) apparaît. Ces boutons rouges fonctionnent à l'opposé des verts et permettent de supprimer une ligne vide. La ligne doit être vide pour que le bouton rouge (-) apparaisse, afin que vous ne puissiez pas supprimer de lignes qui contiennent encore des vignettes. De manière générale, nous vous suggérons de ne pas trop accorder d'attention au positionnement et à la couleur des vignettes lorsque vous codez votre script. Si des vignettes se chevauchent, Envision les repositionne afin qu'elles soient toutes visibles. Il n'y a aucun risque de positionnement erroné des vignettes. L'éditeur de vignettes est là pour que vous mettiez la touche finale à la mise en forme de vos tableaux de bord.

Afficher des indicateurs monovaleurs

S'il est aisé d'afficher des millions de chiffres, en proposer 10 qui valent la peine d'être lus chaque jour est très difficile. Un des cas d'utilisation les plus fréquents des tableaux de bord est la vignette qui ne contient qu'une seule valeur. Ce fonctionnement est obtenu avec les vignettes table. Ces dernières bénéficient d'un affichage spécial lorsque la table ne contient qu'une seule valeur, c'est à dire un tableau 1x1. Le script affiche 4 indicateurs distincts, un par ligne.
show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price{$}" c2d2 with min(SellingPrice)
show table "Max selling price{$}" e2f2 with max(SellingPrice)
L'instruction show table commence par le type, le titre, la position et la couleur, de la même façon que pour la vignette label. Ces options sont suivies du mot-clé with, qui indique que les variables inclues dans la vignette doivent être comptées — dès lors que la vignette contient des données. Ici, nos vignettes ne contiennent qu'une seule valeur chacune, mais nous verrons dans la suite des vignettes plus complexes qui englobent plusieurs valeurs.

À ce stade, nous n'avons pas abordé les capacités d'agrégation d'Envision. Sans entrer dans les détails, notez que sum(), min() et max() sont des agrégateurs et qu'ils fonctionnent à peu près comme leur équivalent dans Excel. sum(1) et Orders.1 peuvent tout de même être déroutants. Comme nous l'avons vu lors nos premiers calculs, Envision manipule principalement des vecteurs. Ainsi, sum(1) est un sucre syntaxique pour le script plus verbeux ci-dessous :
OnePerLine = 1
show table "Items" a2 with sum(OnePerLine)
Dans l'extrait de code ci-dessus, le vecteur OnePerLine est défini et, par convention, il fait partie de la table des articles. Donc, l'instruction a pour résultat d'affecter la valeur 1 à chaque article, c’est-à-dire à chaque ligne de la table. Par conséquent, la somme de toutes ces valeurs donne le nombre total d'articles listés dans la table Items. De la même façon, sum(Orders.1) est équivalent à un code alternatif :
Orders.OnePerLine = 1
show table "Orders" b2 with sum(Orders.OnePerLine)
Il s'agit à nouveau d'une opération sur un vecteur, où chaque ligne de la table Orders reçoit la valeur 1. Et le résultat donne donc aussi le nombre de ligne de la table. Pour n'importe quelle table, il est valide d'écrire MyTable.42 comme sucre syntaxique pour affecter la valeur 42 à un vecteur anonyme.

L'affichage du prix le plus bas utilise un mécanisme d'agrégation similaire, mais si vous observez attentivement le tableau, vous noterez un comportement visuel légèrement différent. En fait, le prix de vente est affiché avec le signe du dollar ($) en tant qu'unité. La ligne de script associée permet de comprendre comment cela est possible.
show table "Min selling price{$}" c2d2 with min(SellingPrice)
Ce fonctionnement est possible grâce au signe {$} ajouté à la fin du titre. Par convention, dans un titre, Envision considère la valeur trouvée entre accolades comme l'unité à utiliser. Cette dernière est généralement affichée à droite de la valeur, par exemple 42 miles, mais certaines unités sont placées en préfixe comme $ ou £.

Afficher un graphique

Les vignettes qui permettent d'afficher des graphiques sont également fréquemment utilisées dans Envision. Comme les données doivent être agrégées selon une certaine périodicité — par jour, par semaine, par mois — l'utilisation de ces vignettes est un peu plus complexe que celle des vignettes détaillées précédemment. Les lignes ci-dessous correspondent à la partie du script qui affiche le graphique.
Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes{$}" a3f5 tomato with
Week.oamount as "Sold"
Week.pamount as "Purchased" 
La table Week n'est pas vraiment une table car elle n'est pas chargée avec les données. En effet, les regroupements de données par période étant très fréquents dans le domaine du commerce, ils sont très importants pour Envision. Ainsi, les opérations qui impliquent de tels regroupements sont bien plus simples à implémenter. Mais cet aspect du langage Envision n'est pas l'objet du présent document. Disons simplement que Week joue le rôle d'un récipient dans lequel les données sont groupées par semaine.

Il y a ensuite l'affectation spéciale :=, que l'on appelle « affectation scalaire ». Celle-ci est différente d'une affectation standard = car au lieu de calculer une valeur par article, elle en calcule une qui est indépendante de tous les articles. Donc, dans notre cas, avec les deux premières lignes, deux valeurs sont calculées pour chaque semaine, Week.oamount et Week.pamount.

L'instruction d'affichage du graphique qui commence par show linechart est un peu plus longue que celle d'une simple vignette label. Afin d'éviter une instruction trop longue et difficilement lisible, nous utilisons « syntaxe de bloc de vignette ». Le bloc doit commencer juste après le mot-clé with et tous les arguments de vignette peuvent être listés dessous, un argument par ligne.

Ensuite, après le renvoi à la ligne, deux vecteurs sont listés, Week.oamount et Week.pamount. Comme cela a été mentionné précédemment, après with il est possible de lister plusieurs variables en les séparant par une virgule. Ce sont les variables affichées dans la vignette. Dans le cas présent, deux variables sont passées à la vignette. Un graphique peut porter sur plus de deux variables mais, en pratique, nous vous recommandons de ne pas en inclure plus de 3 sinon les graphiques deviennent illisibles.

Les variables passées à la vignette dans ses arguments peuvent être explicitement renommées grâce au mot-clé as suivi de la chaîne de caractères qui définit le nouveau nom. Chaque type de vignette gère les noms de variable différemment afin d'optimiser l'apparence de la vignette. Par exemple, un graphique affiche ces noms en tant que légende sous la courbe. Mais le mécanisme de renommage avec le mot-clé as fonctionne pour toutes les vignettes et pas uniquement avec les graphiques. La chaîne de caractères associée à as peut également contenir l'unité de mesure et se comportera alors comme les titres.

Par défaut, une série de couleurs est sélectionnée pour le graphique, en fonction de celles indiquées pour la vignette. Cependant, il est également possible d'indiquer une couleur par ligne à afficher, avec la syntaxe suivante :
show linechart "Weekly volumes{$}" a3f5 with
Week.oamount as "Sold" color: "blue"
Week.pamount as "Purchased" color: "red"

Afficher une table

Nous ne détaillons pas les autres types de graphiques, piechart (diagramme circulaire) et treemap (treemap), afin de couvrir une utilisation plus avancée des tables. Ces dernières, même s'il peut être difficile de les visualiser, représentent l'un des ingrédients les plus polyvalents de tableaux de bord dédiés à l'action. Les tables sont souvent utilisées pour afficher des listes d'actions avec un ordre de priorité, les produits pour lesquels il y a trop ou trop peu de stock par exemple. Le script présenté au début de l'article contient, à la fin, une table semi-complexe (cf. ci-dessous)
show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  sum(Orders.NetAmount) as "Sold{$}"
  order by sum(Orders.NetAmount) desc 
Cette instruction pourrait être écrite en une seule ligne mais, pour plus de lisibilité, nous utilisons à nouveau la syntaxe bloc de vignette. La syntaxe suit la norme Envision présentée jusqu'à présent, avec 4 variables listées après le mot-clé with. La déclaration se termine par une instruction order by que nous allons présenter ci-dessous. Avec Envision il est possible de lister des variables mais aussi des expressions, ce qui est le cas dans la ligne 4 ci-dessus. La somme sum() calcule une agrégation au niveau de l'article et ce calcul est exprimé directement dans la vignette. Il aurait été possible de d'abord déclarer le vecteur avec :
Sold = sum(Orders.NetAmount)
show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  Sold as "Sold{$}"
  order by sum(Orders.NetAmount) desc 
La déclaration d'expression dans les vignettes permet des scripts plus compacts, plus facile à lire et à gérer.

Enfin la dernière ligne commence par order by (classer par), qui, comme son nom l'indique, détermine l'ordre dans lequel les lignes de la table sont affichées : desc pour un ordre décroissant. Si desc n'est pas spécifié, l'ordre croissant est utilisé par défaut.