Projet 3 : Manipulation de la donnée avec correction

Ce que vous allez apprendre dans ce TP

• Récupérer les données au format JSON
• Comprendre la notion de paramètres par défaut
• Surcharger les paramètres par défaut
• Configurer un alignement en fonction d'un critère précis
• Afficher une image à la place de l'URL de cette dernière
• Afficher une gauge à la place de la valeur de cette dernière
• Appliquer un 'Tresholds'
• Appliquer un 'Value mappings'
• Ajouter un lien dynamique
• Modifier le nom des colonnes
• Modifier l'ordre des colonnes
• Masquer une colonne
• Modifier le nom des colonnes

Introduction #

Ce projet a pour objectif de vous apprendre à manipuler visualisation sous forme de tableau et à y appliquer différentes transformations: alignement, tri, image, ...

INFORMATION : La visualisation de type tableau à le même fonctionnement par défaut que les tableurs par exemple il alignera toujours les nombres sur la droite et les textes sur la gauche.

Pour cela, on va travailler avec ces données(Voir les données) et les afficher sous cette forme Dans Grafana (Voir le rendu souhaité)

Requêtes #

Ce que vous allez apprendre dans cette section

• Récupérer les données au format JSON

1. Récupérer les données

   Vous devez utiliser la source de donnee Infinity pour récupérer les données sur le repository à l'adresse : https://github.com/RousselTM/grafana-formation/blob/main/tp/data/projet3.json.

   INFORMATION : Pour être utilisable au format JSON il doit être transformé en RAW.

   Pour cela, vous devez ouvrir l'URL fourni. Dans la page github, il vous suffit de cliquer 'Raw' et vous obtiendrez une nouvelle URL (https://raw.githubusercontent.com/RousselTM/grafana-formation/refs/heads/main/tp/data/projet3.json) au format RAW. Cette dernière est utilisable Dans Grafana.

   INFORMATION : La procédure peut changer en fonction de l'outil : Gitlab, Azure DevOps, ...

Visualisations #

Ce que vous allez apprendre dans cette section

• Comprendre la notion de paramètres par défaut
• Surcharger les paramètres par défaut
• Configurer un alignement en fonction d'un critère précis
• Afficher une image à la place de l'URL de cette dernière
• Afficher une gauge à la place de la valeur de cette dernière
• Appliquer un 'Tresholds'
• Appliquer un 'Value mappings'
• Ajouter un lien dynamique
• Modifier le nom des colonnes

1. Type de visualisation

   Vous devez choisir une visualisation qui correspond à une représentation sous forme de tableau

   Pour cela, vous devez choisir, Dans la partie 'Visualization' le type 'Table' qui correspond à un affichage sous forme de tableau

2. Titre et description

   Vous devez définir, pour la visualisation, comme titre 'Mon premier tableau' et comme description 'Description de mon premier tableau'

   Pour cela, vous devez remplir, Dans la partie 'Visualization', le champ 'Title' et 'Description'

3. L'alignement

   Vous devez modifier l'alignement par défaut pour qu'il corresponde à l'image du résultat attendu. Le contenu de toutes les cellules sont centrées à l'exception du champ 'category' qui a un alignement à droite.

   Vous disposez de plusieurs méthodes pour le faire. Mais la bonne pratique est de modifier le paramètre d'alignement par défaut à 'center' et de positionner un alignement spécifique pour 'category'. Pour cela, Dans la partie 'Visualization', vous devez sélectionner 'Center' Dans l'option 'Column alignment'. Ainsi, il ne vous reste plus qu'à créer une règle de surcharge. Vous disposez d'un bouton d'ajout tout en bas de la partie 'Visualization' mais Dans certaines versions, vous pouvez avoir un bouton d'onglet Dans 'Overides'. Vous devez cliquer sur 'Add field override' et suivre ces étapes :

   1. Sélectionner 'Fields with name' : comme on connaît d'avance le nom du champ.
   2. Sélectionner 'category' : comme demandé Dans la consigne
   3. Cliquer sur 'Add override property'.
   4. Sélectionner 'Column alignment'.
   5. Sélectionner 'Right'(droite) : comme demandé Dans la consigne

   INFORMATION : Lorsque vous surchargez une option, Grafana vous l'informe en ajoutant un point de couleur (bleu, orange, ...) juste après le titre de l'option.

4. Le renommage

   Vous devez utiliser la partie 'Visualization' pour renommer la colonne 'category' en 'Catégorie'.

   INFORMATION : Plus bas on vera qu'on peut faire la même action avec une autre méthode: les transformations.

   Pour cela, on va ajouter une nouvelle regle de surcharge. Comme il y a déjà une regle sur ce champ, on ne va pas ajouter une nouvelle regle mais Dans la regle d'alignement précédente, on va ajouter une nouvelle propriété. Vous devez cliquer sur 'Add override property' et suivre ces étapes :

   1. Sélectionner 'Standard options > Display name'.
   2. Saisir 'Catégorie' : comme demandé Dans la consigne

5. Les liens

   Grafana vous permet de créer l'interactivité Dans votre tableau avec les liens. Vous devez donc ajouter un lien pour que lorsqu'on clique sur une ligne il renvoie sur la page de la formation. Le lien doit être donc être sous la forme https://elearning.rousseltm.fr/training_chapter?id=ID, sahant que 'ID' doit correspondre au contenu du champ 'id'.

   Pour cela, Dans la même partie 'Visualization', vous devez ajouter un lien 'Add link' Dans la section 'Data links and actions'.

6. Le 'Mapping'

   Grafana vous permet de transformer le contenu de votre représentation. Vous devez créer un mapping pour demander à Grafana de transformer le texte 'true' en 'Oui' et 'false' en 'Non'. Vous devez aussi indiquer que les valeurs 'Oui' ont la couleur 'violette' et 'Non' la couleur transparente. On combinera aussi un 'override' pour lui demander à Grafana d'afficher toute la ligne en fonction de la couleur de la colonne 'certification'.

   Pour cela, Dans la même partie 'Visualization', vous devez ajouter un lien 'Add value mappings' Dans la section 'Value mappings'. Dans la fenêtre qui s'ouvre, on va donc ajouter deux mapping avec respectivement comme valeur :
   - true :
   

   • Value : true
   • Display text: Oui
   • Color: violette

   
   - false :
   

   • Value : false
   • Display text: Non
   • Color: transparent

7. Le 'Tresholds'

   Grafana vous permet de colorier des nombres en fonction de leurs valeurs. Vous devez donc ajouter des 'Tresholds' pour qu'il colore les nombres sous cette forme : rouge: défaut, orange: > 50000, jaune: > 700000, vert: > 800000.

   Pour cela, Dans la même partie 'Visualization', Dans la section 'Tresholds', vous devez ajouter plusieus 'Tresholds' avec comme 'Base' le rouge et chaque autre couleur avec la valeur demandée

8. Mode coloration

   Grafana vous permet de colorier (texte ou fond) une cellule, une ligne en fonction d'une valeur. Vous devez donc demander à Grafana de colorer la ligne en fonction du contenu de la 'certification' et lui demande de l'appliquer à toute la ligne. Pour rappel, Dans l'étape précédente on avait défini deux couleurs donc pas besoin de les préciser.

   Comme cela concerne toutes les colonnes, on n'a pas besoin d'ajouter un 'override' on l'applique donc à tout le tableau. Pour cela, Dans la même partie 'Visualization', Dans la section 'Cell options', vous devez le positionner 'Cell type' à 'Colored backgroubd' et activer l'option 'Apply to entire row'

9. Mode jauge

   Grafana vous permet d'afficher un nombre sous forme de jauge pour visuelement comparer des valeurs. Vous devez donc afficher le nombre de vue (colonne vues) en mode jauge

   On ne peut pas l'appliquer en général car il concerne uniquement la colonne 'Vues'. Vous devez donc ajouter un 'override' sur ce dernier et le faire sur la propriété 'Cell options > Cell type' et positionner 'Gauge'

Transformations #

Ce que vous allez apprendre dans cette section

• Modifier l'ordre des colonnes
• Masquer une colonne
• Modifier le nom des colonnes

1. La méthode HTTP

   En fonction de l'appel que vous souhaitez faire, Dans la documentationde l'API, on vous indiquera la méthode à utiliser.

   INFORMATION : Par défaut Infinity va envoyer vos requêtes avec la méthode 'GET'. Vous devez trouver l'option pour la modifier ?

   Pour cela, juste à côte du champ URL, vous devez cliquer sur le bouton 'HTTP method, Query, Headers'. Une fois la fenetre ouverte, vous allez Dans l'onglet 'Method & Body' et positionner la méthode qui correspond au endpoint renseigné Dans le champ URL.

2. L'authentification

3. L'entête accept

   Grafana va se baser sur 'curl' pour requêter vos URLs pour le plugin infinity. En fonction du format que vous souhaitez obtenir il faut donc le demander à l'API via une entête.

   INFORMATION : Je vous invite à vous renseigner sur les différentes valeurs mais Dans notre cas la clé(key) c'est 'accept' et comme valeur(value):

   • JSON : application/json
   • CSV : text/csv

   Comment configurer ce paramètre Dans Grafana pour le plugin Infinity?

   Pour cela, juste à côte du champs URL, vous devez cliquer sur le bouton 'HTTP method, Query, Headers'. Une fois la fenetre ouverte, vous allez Dans l'onglet 'Headers'

Niveau de difficulté : ●●●○○ (3/5)