TP ManageChart

logo_sist_2022.png



by-nc-sa.png Ce support est mis à disposition sous licence Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International. Pour voir une copie de cette licence, visitez http://creativecommons.org/licenses/by-nc-sa/4.0/.

Introduction

ManageChart est une application web développée par l’UMR LETG CNRS sous le framework PHP Symfony et s’appuyant sur la librairie JavaScript HighCharts. Il s’agit d’un outil permettant la création semi-automatique de graphiques paramétrables à partir de données stockées dans des bases de données MySQL ou PostgreSQL. Les graphiques générés sont accessibles par URI rendant possible leur interrogation dynamique et leur affichage par une application externe comme l’application GeoCMS, également développée par le laboratoire LETG. ManageChart est indépendant de GeoCMS mais les deux applications sont complémentaires.

Démonstration sur ManageChart IUEM / ManageChart Pôle Écla

Présentation de l’application

L’application ManageChart est articulée autour de quatre concepts : les Utilisateurs, les Bases de données, les Requêtes SQL et les Graphiques. Chaque concept dispose d’un onglet pour effectuer les quatre opérations de base de persistance des données : création, consultation, modification et suppression (CRUD - Create, Read, Update, Delete).

Onglet Utilisateurs

L’onglet Utilisateurs permet de gérer les comptes utilisateurs et leurs droits d’accès à l’application. Les droits des utilisateurs sont définis à l’aide de quatre rôles : Visiteur, Scientifique, Scientifique+ et Administrateur. Le rôle Visiteur est le rôle par défaut qui permet d’accèder uniquement à la consultation des graphiques sans être authentifié par l’application. Les trois autres rôles, accessiblent avec authentification, permettent d’accèder ou non à certaines fonctionnalités de l’application comme défini dans le tableau ci-dessous :

GraphiquesRequêtes SQLBases de donnéesUtilisateurs
CRUDCRUDCRUDCRUD
Visiteur✔️
Scientifique✔️
Scientifique+✔️✔️
Administrateur✔️✔️✔️✔️

Onglet Bases de données

L’onglet Bases de données permet d’initialiser des connexions à des bases de données (BD) distantes. Pour établir une connexion à une BD distante, il faut savoir où elle se situe (adresse IP, numéro de port, nom de la BD), il faut connaître son type (PostgreSQL ou MySQL) et il faut pouvoir s’y connecter (identifiant, mot de passe). Ces informations sont renseignées dans un formulaire depuis lequel il est également possible de tester la connexion.

Formulaire de création/modification d'une connexion à une base de données


Les identifiants et mots de passe de connexion aux BD distantes sont chiffrés avant d’être stockés dans la base de données de ManageChart. Le bouton bouton_chiffrement.png permet de générer une nouvelle clé de chiffrement sur le serveur et de rechiffrer tous les identifiants et mots de passe des BD distantes.

Onglet Requêtes SQL

L’onglet Requêtes SQL permet d’extraire et de préformater des données récupérées via les connexions définies dans l’onglet Bases de données. Ces données vont servir d’entrées pour la construction des graphiques et sont extraites des BD distantes grâce à des requêtes écrites dans le langage SQL. Dans ManageChart, un graphique est généré à partir d’un ensemble de points (valeurs X et Y) organisés par séries de données. Les différents champs présents dans le résultat d’une requête vont être associés à un graphique de la manière suivante :

  • 1er champ = valeurs en X
  • 2ème champ = valeurs en Y
  • 3ème champ = séries de données
  • 4ème champ (optionnel) = unités des séries de données

Le nombre de séries de données dans un graphique est défini par le nombre de valeurs uniques présentes dans le 3ème champ du résultat de la requête. Si le 4ème champ optionnel est également défini, il y aura autant de séries de données que de combinaisons uniques entre les 3ème et 4ème champs du résultat de la requête. Ci-dessous le résultat d’une requête avec deux valeurs uniques dans le 3ème champ, ce qui correspondra à deux séries dans le graphique associé :

Résultat d'une requête
avec deux séries
Exemple de graphique associé au résultat de la requête


Les requêtes SQL sont renseignées dans un formulaire depuis lequel il est possible d’obtenir un aperçu du résultat. Le formulaire offre également la possibilité d’ajouter des Attributs spatiaux. « Attribut spatial » est le nom historique, en réalité, il s’agit simplement d’un champ/attribut paramétrable. Ces attributs spatiaux permettent de filtrer les résultats d’une requête sur n’importe quel champ. La valeur de ce champ pourra ensuite être modifiée dans l’URI d’un graphique permettant ainsi de créer un graphique variable en fonction de la valeur du champ.

Formulaire de création/modification d'une requête SQL


Onglet Graphiques

L’onglet Graphiques permet de créer des graphiques grâce aux données préformatées de l’onglet Requêtes SQL. Dans ManageChart, un graphique est composé d’une ou plusieurs séries de données. Ces séries de données sont associées à un ou plusieurs axes Y, eux-mêmes associés à un unique axe X. Le formulaire de création/modification d’un graphique a donc été pensé en trois parties :

  • Informations générales d’un graphique et axe X

Cette partie permet de renseigner les informations globales d’un graphique (titre, sous-titre, crédits, paramètres d’exportation, etc) et de paramétrer son axe X (titre de l’axe, type d’axe, etc).

Formulaire de création/modification d'un graphique
Partie "Informations générales et axe X"


  • Axes Y

Cette partie permet d’ajouter un ou plusieurs axes Y à un graphique. Chaque axe Y peut ensuite être paramétré individuellement en renseignant son titre (champ Titre), son type (champ Type) et sa position (champs Top, Taille et Position opposée). Par défaut, le titre et les graduations d’un axe Y sont placés à gauche du graphique. Le champ Position opposée permet de placer ces informations à droite. Les champs Taille et Top permettent de définir respectivement la taille et la position de départ (par rapport au haut) d’un axe Y en pourcentage de la taille verticale totale du graphique. Par exemple pour avoir un axe Y qui occupe les 3/4 de l’espace et un autre axe Y qui occupe le reste de l’espace, il faudra définir pour le premier axe un Top​/​Taille de 0%/75% et pour le second axe un Top​/​Taille de 75%/25%

Formulaire de création/modification d'un graphique
Partie "Axes Y"


  • Séries

Cette partie permet d’ajouter une ou plusieurs séries de données pour chaque axe Y précédemment défini. Pour ajouter une série de données, il faut sélectionner une Requête SQL dans le champ Requête puis sélectionner la série à ajouter dans le champ Paramètre. Les valeurs du champ Paramètre correspondent à toutes les valeurs uniques du 3ème champ (ou combinaisons uniques des 3ème et 4ème champs) du résultat de la requête sélectionnée dans le champ Requête. Chaque série peut ensuite être paramétrée en renseignant son titre, son type (ligne, courbe, nuage de points, colonne, etc), sa couleur, etc. Il est également possible d’ajouter un type de série particulier : les flags. Les flags sont littéralement des drapeaux que l’on vient placer sur une série ou sur l’axe X pour marquer des points d’intérêt.

Formulaire de création/modification d'un graphique
Partie "Séries"


Le formulaire de création/modification d’un graphique peut varier en fonction du type de graphique sélectionné. En effet, il existe huit différents types de graphiques dans ManageChart:

  • Graphique simple : pour créer des graphiques basiques (courbes, nuages de points, diagrammes en bâtons, etc).
  • Graphique temporel : pour créer des graphiques adaptés à la représentation de séries temporelles.
  • Graphique temporel multi-axes : même graphique que le précédent avec la taille verticale du graphique qui augmente automatiquement en fonction du nombre d’axes Y (les paramètres Top et Taille sont définis automatiquement).
  • Graphique dynamique : ce type de graphique permet de mettre à jour automatiquement l’ensemble des séries de données d’une requête à chaque fois qu’un graphique est visualisé, contrairement aux autres types de graphiques où les séries sont fixées manuellement dans la configuration du graphique.
  • Graphique dynamique temporel : même graphique que le précédent mais adapté aux séries temporelles.
  • Graphique polaire : pour créer des graphiques polaires (un seul axe Y).
  • Graphique circulaire : pour créer des graphiques circulaires (un seul axe Y et une seule série de données).
  • Graphique Heatmap : pour créer des cartes de chaleur (un seul axe Y).
Les différents types de graphiques dans ManageChart


Une fois générés, les graphiques sont visualisables via une URI et donc exportable dans une autre application web en utilisant une iframe (diminutif de « inline frame »). Une iframe est un élément HTML qui permet d’afficher sur une page web un contenu (texte, image, carte, etc) en provenance d’un autre serveur. C’est un contexte de navigation imbriqué qui permet en fait d’obtenir une page HTML intégrée dans une autre. La largeur et la hauteur d’un graphique peuvent être changées depuis l’URI en renseignant un nombre entier ou la valeur auto pour qu’un graphique s’adapte automatiquement à la taille du conteneur dans lequel il est. Si un graphique a été construit à partir d’une requête disposant d’un attribut spatial, la valeur de cet attribut spatial peut également être changée depuis l’URI. La couleur de fond d’un graphique peut être modifiée en ajoutant le paramètre background à la fin de l’URI. Ce paramètre peut prendre comme valeur le nom d’une couleur SVG 1.0 ou la valeur transparent pour qu’un graphique prenne la couleur de fond de la page dans laquelle il est intégré. Ci-dessous le pattern type d’une URI, avec en gras les éléments modifiables :

 .../chart/show/id_graphique/largeur/hauteur/attribut_spatial?background=couleur 

C’est ce système d’URI combiné aux attributs spatiaux qui permet de faire le lien avec l’application GeoCMS.

Prise en main de l’application

Cette partie a pour but d’expliquer la démarche générale pour construire un graphique dans ManageChart. L’objectif est de créer un graphique circulaire pour représenter la donnée poissons DCE. La création de la connexion à la base de données se fera avec le compte administrateur par défaut. La construction de la requête et du graphique sera effectuée avec un compte Scientifique+ qu’il faudra créer.

Création d’un nouvel utilisateur

La première étape consiste à créer un nouvel utilisateur auquel nous attribuerons les droits pour créer des requêtes et des graphiques.

Actions à effectuer :
Se connecter à l’application (http://localhost:81) avec le compte administrateur par défaut admin​/​managechart.

Se rendre sur l’onglet Utilisateurs puis créer un nouvel utilisateur avec les informations suivantes :

  • Nom d’utilisateur : user
  • E-mail : user@ateliersist.fr
  • Mot de passe : user
  • Rôle : Scientific+

Connexion à une base de données

Cette seconde étape a pour but de créer une connexion à la base de données du TP SIST pour notre utilisateur user.

Actions à effectuer :
Se rendre sur l’onglet Bases de données puis créer une nouvelle connexion avec les informations suivantes :

  • Nom de connexion : TP SIST 2022
  • Nom de BDD : TP_sist
  • Type : PostgreSQL
  • Description : Connexion à la base de données du TP SIST 2022
  • Hôte : 10.0.2.15
  • Port : 5432
  • Identifiant : sist
  • Mot de passe : sist

Tester la connexion.
Si la connexion est bonne, l’enregistrer.

Création d’une requête

La troisième étape va permettre de récupérer les données poissons DCE depuis la connexion établie juste avant et de préformater ces données pour pouvoir créer un graphique circulaire. Les données seront récupérées depuis la table poissons :

Table poissons

Dans la table poissons, une ligne représente l’effectif total (eff_tot) d’une espèce (cd_apt, nom_latin_apt) capturée pendant une campagne de pêche (id_campagne). Une campagne de pêche ayant été effectuée sur un lac (code_lac) à une date précise (date_debut_operation_prelevement). Le graphique circulaire que l’on souhaite créer doit permettre de visualiser l’effectif des espèces capturées pour une campagne donnée. Pour récupérer seulement les effectifs et espèces d’une seule campagne, il faudra filtrer le résultat de la requête par campagne avec un attribut spatial.

La requête SQL à créer pour obtenir le graphique souhaité doit renvoyer en 1er champ (axe X) le nom des espèces et en 2ème champ (axe Y) l’effectif total. Par définition, un graphique circulaire ne permet de représenter qu’une seule série de données, il faut donc définir le 3ème champ du résultat de la requête sur une valeur unique pour n’avoir qu’une seule série. On veut également récupérer les identifiants des campagnes mais ils ne pourront pas être en 4ème champ du résultat de la requête car ce dernier sert à définir, avec le 3ème champ, les séries. Il faut donc également définir pour le 4ème champ une valeur unique et récupérer les identifiants des campagnes en 5ème champ. La requête SQL devrait donc ressembler à cela :

SELECT nom_latin_apt, eff_tot, 'effectif' as champ3, 'nb individus' as champ4, id_campagne
FROM tp.poissons
ORDER BY id_campagne

Actions à effectuer :
Se déconnecter du compte administrateur et se connecter avec le compte Scientifique+ user​/​user.
Se rendre sur l’onglet Requêtes SQL puis créer une nouvelle requête avec les informations suivantes :

  • Nom : Effectifs par campagne
  • BDD : TP SIST 2022 - TP_sist - PostgreSQL
  • Requête : cf. au dessus

Ajouter un attribut spatial avec les valeurs suivantes :

  • Nom : id_campagne
  • Type : numeric
  • Valeur de test : 28 (Allos - 2006)
  • Mot clé : WHERE

Tester la requête pour visualiser le résultat.
Si la requête est bonne, l’enregistrer.

Création d’un graphique circulaire

Cette quatrième étape a pour but de créer un graphique circulaire à partir de la requête établie à l’étape précédente.

Actions à effectuer :
Se rendre sur l’onglet Graphiques puis créer un nouveau graphique circulaire.
Remplir la première partie du formulaire avec les informations suivantes :

  • Nom : Effectifs des espèces capturées par campagne piscicole
  • Titre : Effectifs par espèces
  • Type axe-X : Linéaire
  • Crédits : SIST 2022

Laisser la deuxième partie du formulaire sur l’axe Y telle quelle.
Ajouter une série et compléter le champ Requête du formulaire qui vient d’apparaître avec la valeur Effectifs par campagne, les autres champs vont se remplir automatiquement.
Enregistrer le graphique.

Le graphique final devrait ressembler à cela :


Visualisation du graphique

Cette dernière étape va permettre de visualiser le graphique et d’interagir avec.

Actions à effectuer :
Dans l’onglet Graphiques, copié l’URI du graphique créé à l’étape précédente dans un nouvel onglet.
Supprimer la fin de l’URL /{{AttrSpatiaux}} pour afficher le graphique avec sa valeur par défaut (28).
Changer la hauteur et la largeur du graphique dans l’URL pour constater les changements.
Changer l’attribut spatial de la requête en ajoutant par exemple /8 (Pierre-Châtel - 2007) à la fin de l’URL pour constater les changements.
Tester avec d’autres valeurs : 30 (Bimont - 2007), 43 (Pavin - 2005), 154 (Sainte-Croix - 2009).

Pour aller plus loin

Cette partie a pour but d’approfondir les concepts vu précédemment en proposant la création de trois nouveaux types de graphiques : le graphique simple, le graphique dynamique temporel et le graphique polaire.

Graphique simple : données OKP

L’objectif de cette sous-partie est de visualiser les données thermiques issues du modèle OKP avec un graphique simple. Les données seront récupérées depuis la table okp :

Table OKP

La table okp dispose de températures modélisées (parameter_value) pour plusieurs plans d’eau (lake_code). Ces températures ont été modélisées à une date donnée (time_stamp) à trois profondeurs différentes de l’épilimnion et de l’hypolimnion correspondant aux trois quartiles (concat). Pour représenter ces données, nous allons créer un graphique simple à deux axes Y avec sur chaque axe les températures médianes de l’épilimnion et de l’hypolimnion entourées de leurs 1er et 3ème quartiles. Nous allons utiliser des séries en barres d’erreur pour représenter les 1er et 3ème quartiles. Les séries en barres d’erreur disposent d’un format particulier pour leurs valeurs en ordonnées où il faut renseigner les valeurs basses et hautes de la barre d’erreur entre accolades. Les données du modèle OKP ont été modélisées sur plus de 60 ans (depuis 1959). Pour ne pas créer un graphique énorme (ce n’est pas le but ici), nous prendrons seulement les températures modélisées pour le lac de Bimont (code lac = BIM13) en 1959. La connexion à la base de données ayant déjà été faite pendant la création du graphique circulaire, il ne reste plus qu’à créer les requêtes puis le graphique.

La stratification des lacs est la tendance des lacs à former des couches thermiques séparées et distinctes par temps chaud. Les lacs stratifiés présentent généralement trois couches distinctes : l'épilimnion comprenant la couche chaude supérieure, la thermocline (ou métalimnion), couche intermédiaire qui peut changer de profondeur tout au long de la journée, et l'hypolimnion, plus froid, s'étendant jusqu'au fond du lac.
Source : Wikipédia

Création des requêtes

Nous allons avoir besoin de deux requêtes pour créer le graphique :

  • une requête pour récupérer les températures médianes.
  • une requête pour récupérer les températures des 1er et 3ème quartiles correctement formatés entre accolades.

Chaque requête disposera de deux séries, une pour l’épilimnion et une pour l’hypolimnion.

Le formulaire de création/modification de requêtes SQL de ManageChart n’est pas spécialement adapté pour recevoir des requêtes complexes, ce qui va être le cas pour nos deux requêtes. Deux vues materialisées ont donc préalablement été créées pour récupérer et formater correctement les données afin de nous simplifier la tâche lors de la création des requêtes dans ManageChart. La vue matérialisée pour récupérer les températures médianes se nomme okp_values_bim13_1959 et la vue matérialisée pour récupérer les températures des 1er et 3ème quartiles se nomme okp_error_bim13_1959. Les résultats de ces deux vues ressemble à cela :

Résultat de la vue matérialisée
okp_values_bim13_1959
Résultat de la vue matérialisée
okp_error_bim13_1959

Actions à effectuer :
Créer deux requêtes SQL reprenant les données des vues matérialisées en pensant à bien formater les champs de type date comme cela :

 EXTRACT(EPOCH FROM date)*1000 

Création du graphique

Actions à effectuer :
Créer un graphique simple.
Ajouter un premier axe Y sur la partie supérieure du graphique.
Sur cet axe, ajouter deux séries pour représenter la température médiane de l’épilimnion entourée des températures des 1er et 3ème quartiles.
Ajouter un deuxième axe Y sur la partie inférieure du graphique.
Sur cet axe, ajouter deux séries pour représenter la température médiane de l’hypolimnion entourée des températures des 1er et 3ème quartiles.

Le graphique final devrait ressembler à cela :


Graphique dynamique temporel : données thermie RNT

L’objectif de cette sous-partie est de visualiser les données thermiques issues du RNT (Réseau National de suivi des Températures) avec un graphique dynamique temporel. Les données seront récupérées depuis la table rnt :

Table RNT

Dans la table rnt, une ligne représente la température moyenne journalière (t_ana_ajr) à une profondeur (prof_ana) et un jour (dt_ana) donnés sur un lac (cd_station, uid). Pour visualiser ces données, nous allons créer un graphique dynamique temporel. Dans le formulaire de création/modification de ce type de graphique, il n’est pas possible d’ajouter des séries de données, on ajoute seulement une requête SQL. L’aspect dynamique du graphique réside dans le fait que toutes les séries de données pour la requête spécifiée seront chargées automatiquement. L’intérêt est que si une nouvelle série de données apparaît dans la BD, le graphique dynamique va la prendre en compte automatiquement là où il faudrait venir l’ajouter manuellement pour les autres types de graphiques car les séries sont fixées.

Création de la requête

Actions à effectuer :
Créer une requête qui renvoie l’évolution des températures dans le temps pour chaque profondeur.
Ajouter un attribut spatial de type numérique sur l’identifiant du lac (uid) avec comme valeur par défaut 2 (Les Aulnes).

Création du graphique

Pour bien visualiser l’intérêt du graphique dynamique temporel, nous allons créer deux graphique, un graphique temporel classique et un graphique dynamique temporel.

Actions à effectuer :
Créer un graphique dynamique temporel avec la requête définie juste avant.
Créer un graphique temporel en ajoutant toutes les séries de la requête définie précédemment (utiliser le bouton bouton_ajouter_toutes_les_series.png). Les séries ajoutées seront les six séries de l’étang des Aulnes qui a été défini en attribut spatial par défaut dans la requête.
Visualiser les deux graphiques dans deux onglets différents.
Changer la valeur de l’attribut spatial dans l’URL par la valeur 13 qui correspond au lac Pavin bien plus profond que l’étang des Aulnes et donc qui contient plus de séries de données (i.e. profondeurs).
Constater les changements sur les deux graphiques.

Graphique polaire : données hydromorphologie

L’objectif de cette sous-partie est de visualiser les données hydromorphologiques avec un graphique polaire. Les données seront récupérées depuis la table substrat :

Table substrat

La table substrat représente les longueurs (longueur) des différents types de berges (substrat) pour un lac donné (code_lac). L’addition des longueurs de tous les substrats d’un lac donne le périmètre total du lac.
Codes des principaux substrats : VA = Vase, SL = Sable/Limon, GR = Graviers, GA = Galets, BL = Blocs et DA = Dalles.

Création de la requête

Actions à effectuer :
Créer une requête qui renvoie les longeurs de chaque substrat.
Ajouter un attribut spatial de type chaîne de caractères sur le code du lac (code_lac) avec comme valeur par défaut ALL04.

Création du graphique

Action à effectuer :
Créer un graphique polaire avec la requête définie juste avant.

Interaction GeoCMS - Managechart

Cette dernière partie va permettre de lier les applications ManageChart et GeoCMS. L’objectif est d’intégrer le graphique polaire dans la couche Lacs DCE de la catégorie Hydrographie. Nous prenons le graphique polaire car le nom de l’attribut spatial défini pour ce graphique (code_lac) est disponible dans les attributs de la couche Lacs DCE.

Actions à effectuer :
Se connecter au backend de GeoCMS (http://localhost/backend) avec le compte admin​/​admin.
Accèder au formulaire de modification de la couche Lacs DCE dans la catégorie Hydrographie.
Dans le champ Modèle pour l’info-bulle, ajouter un Cadre de contenu incorporé.
Compléter les champs Largeur et Hauteur avec les valeurs 600 et 600.
Compléter le champ URL avec l’URI ci-dessous en remplaçant correctement l’identifiant du graphique polaire.

 http://localhost:81/fr/chart/show/id_graphique_polaire/auto/auto/{{code_lac}}