Projet 3 : Manipulation de la donnée

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.

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

2. Titre et description

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

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.

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.

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'.

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'.

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.

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.

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

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 ?

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?

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