Objectif

La Platform vous permet de créer des applications analytiques personnalisées à l'aide d'un ensemble de composants graphiques mis à disposition. La gestion et l'organisation de la restitution est centralisée dans l'onglet Dashboard d'une application. Cet onglet vous permet de lister, ajouter et éditer des tableaux de bord qui peuvent contenir différents types de contenu :

• Des représentations graphiques provenant des différentes extensions installées dans l'application

• Un paramètre dynamique pouvant être lié aux graphiques pour rendre les données affichées interactives

• Des textes statiques

• Des blocs avec onglets, pour passer d'une représentation graphique à une autre pour les mêmes données par exemple

• Des blocs pouvant également contenir différents types de contenu avec ou sans condition d'affichage

• Des pop-ins activées au clic de l'utilisateur

• Une intégration de code spécifique au projet en cours

Créer votre premier tableau de bord (en point & click)

Avant de commencer, vous devez d'abord disposer d'une application déjà déployée. Pour cela, vous pouvez partir de l'application ReactJS - Dashlab, par exemple, et utiliser le build et le déploiement automatiques. Dans cet exemple, les captures d'écran ont été réalisées à partir du même thème d'application.

Écran principal et création du tableau de bord

Pour commencer, allez sur l'écran Overview de votre application.

Depuis cet écran, sélectionnez « Dashboard »

Depuis cet écran, vous pourrez créer de nouveaux tableaux de bord, les supprimer, les éditer, etc. Pour le moment, nous allons nous concentrer sur la création d'un nouveau tableau de bord.

1. Sélectionnez « New Dashboard » sur votre écran.
2. Donnez-lui un nom, par exemple : « My first dashboard ».

L'url de ce tableau de bord (visible dans l'url une fois l'application en production), sera remplie automatiquement. Vous pouvez la modifier, en gardant simplement à l'esprit qu'elle doit être unique, deux tableaux de bord ne peuvent pas avoir la même url. Le champ description est optionnel et vous permettra de mieux documenter vos applications.

Nous n'allons (volontairement) pas passer en revue le mode « advanced », il s'agit d'une option permettant de modifier le comportement par défaut du tableau de bord. Ce mode par défaut est parfait pour une première fois, nous n'avons donc pas à le modifier.

Éditer votre nouveau tableau de bord

Ajouter un lien vers votre tableau de bord

Une fois le tableau de bord créé, vous pouvez entrer en mode éditeur en survolant le nouveau bloc et en cliquant sur « Edit ».

Vous disposez d'un mode « Full Screen » en haut à droite de la page, toutes les captures d'écran seront réalisées depuis ce mode pour les prochaines étapes de ce tutoriel.

Votre tableau de bord est vide ! et surtout, si vous n'étiez pas déjà sur la page, il n'existe aucun lien pour y accéder.

Il faut donc d'abord créer un lien dans le menu pour aller vers le tableau de bord.

Pour cela, utilisez le bouton « + », dans la colonne de gauche. Sélectionnez « Basic UI » puis « Link ». Vous arriverez alors sur un éditeur de lien.

Vous pouvez saisir un texte (qui sera affiché à l'écran), dans notre exemple : « My first dashboard ». Dans le champ url, si vous ne l'avez pas modifié à l'étape précédente, sélectionnez : « my-first-dashboard ». Sélectionnez également « Navigation » pour le passer sur actif, cela permet au lien de changer de couleur lorsqu'il s'agit de la page active. Les autres champs sont optionnels mais vous permettent de personnaliser davantage votre lien. Dans cet exemple, nous allons simplement ajouter « fa fa-dashboard » dans « Icon », ce qui correspond à une icône de la bibliothèque Font Awesome 4.

Une fois validé, votre lien apparaîtra dans le menu de gauche !

Ajouter un graphique à votre tableau de bord

Votre page est toujours vide : votre première idée pourrait être d'ajouter un graphique, et vous auriez raison... mais afin de rendre le tout « plus joli », nous allons commencer par ajouter un « panel ». Cela nous permettra d'avoir nos graphiques sur un fond blanc, au lieu du fond « gris » de l'application. Pour cela, cliquez sur le « + » en haut de l'écran.

Sélectionnez « Container » puis « Panel ». Puis agrandissez votre « panel » via les flèches disponibles en survolant celui-ci avec votre souris.

Sélectionnez le « + » de ce panel, puis « Chart » pour ajouter votre premier graphique à l'intérieur de ce « panel ».

Configurer un graphique

Onglets de l'éditeur de graphique

Type

Vous arriverez alors sur un éditeur de graphique. Vous devez d'abord sélectionner un type de graphique.

Pour notre exemple, nous allons sélectionner « Morris - Donut »

:::info Morris est une bibliothèque open source, le donut qu'elle fournit est plutôt bon, mais sa personnalisation est limitée.

Options

Un nouvel onglet vient d'apparaître ! Il s'agit de l'onglet « Options ». Cet onglet n'est pas toujours présent, certaines bibliothèques n'offrent pas toujours (encore) de personnalisation au clic.

Dans cet onglet, nous pouvons personnaliser les couleurs de notre donut. Le modèle par défaut étant suffisamment coloré, modifiez les couleurs si vous le souhaitez, mais ce n'est pas nécessaire.

Queries

Dans cet onglet, nous pourrons lier notre graphique à une requête effectuée dans l'Analytics Manager. Si vous avez déjà essayé de le faire, cliquez sur « Select a Query ».

Sinon, choisissez « Custom Query » et créez une requête directement via l'interface.

Pour afficher un « joli donut », l'idéal serait une seule « Data », et une seule « Scale ». Dans mon exemple, je veux réduire un chiffre d'affaires.

Infos

Dans cette section, nous pourrons donner un nom et une description à notre graphique (optionnel). Saisissez par exemple : « My first chart », dans le champ name.

Vous trouverez également « Linked Dynamic Parameter ». Cette configuration vous permettra bientôt de connecter votre graphique à un datepicker ou une selectbox, afin de filtrer dynamiquement les données affichées par le graphique.

Mode avancé

Ce mode avancé vous permet d'éditer directement le fichier de configuration JSON de votre graphique. Tous les écrans utilisés précédemment sont liés à ce JSON, et nous ne disposons pas encore d'une interface permettant d'effectuer toutes les configurations possibles via ce JSON.

Validez, et votre graphique s'affichera !

:::

Article suivant : Style

Aller plus loin

Si vous avez besoin d'une formation ou d'une assistance technique pour la mise en oeuvre de nos solutions, contactez votre commercial ou cliquez sur ce lien pour obtenir un devis et demander une analyse personnalisée de votre projet à nos experts de l’équipe Professional Services.

Posez vos questions, faites-nous part de vos commentaires et interagissez directement avec l’équipe qui développe la Data Platform sur le canal Discord dédié.

Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre centre d'aide.

Rejoignez notre communauté d'utilisateurs.