[TP] Projet 3 : Manipulation de la donnée


Pour ce TP, nous allons voir comment utiliser la visualisation de type 'Table' pour sublimer nos données.

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 que vous allez apprendre dans cette section :

    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: defaut, 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 defaut 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)