Projet DashBoard G2F

Ce projet cherche à exploiter pleinement les capacités offertes par la technologie DGE-DataGrandEst. Pour ce faire, il s'appuie sur l'intégration et l'utilisation des données fournies par géo2france, en se concentrant spécifiquement sur le jeu de données arbre-plan. En utilisant cette technologie et ces données, le projet cherche à fournir des solutions innovantes dans la dataviz. Il utilise différentes bibliothèques comme mentionné ci-dessous :

✂️ Les outils utilisés :

• animation : AOS-michalsnik
• mise en forme : bootstrap5.2
• lire fichier CSV PapaParse

L'utilisation de l'IDE visual studio code avec l'extension better comments est conseillé pour une meilleure lisibilité du code.

📂Les différents répertoires :

• Dist contient toutes les bibliothèques, framework ou librairies nécessaires au projet.
• img contient les images du projet.
• data contient les données.
• doc contient la documentation du projet
• js contient les scripts JavaScript.
• style contient les styles css pour les pages web.

📝 Les fichiers principaux :

• dist/global.css Fichier style pour l'outils DGE.
• index.html Page d'acceuil du site : dashboard avec l'outil DGE
• example.html Page secondaire du site
• style/style.css Fichier style pour les paged HTML.
• style/checkbox-darkmode.css Fichier style du bouton pour changer de mode d'affichage (light -dark)

🖍️ Les couleurs avec bootstrap :

Les couleurs du projet sont celle de bootstrap. Pour rajouter une couleur a un élément il suffit de lui rajouter une classe.

💡 La classe est composé de : élément - NomCouleur

Ci-dessous exemple de couleur bootstrap pour un arrière-plan :

Il existe de nombreuse autres couleurs bootstrap, pour plus d'informations je vous invite à regarder la documentation.

📅 Les tableaux sous bootstrap :

Sous Bootstrap5 chaque ligne est composée de 12 slots.

💡 Un élément de la page (comme une image) peut prendre un nombre de slot sur la ligne. Si l'élément prend 6 slots alors il prendra la moitié de la page.

Dans le code, pour chaque ligne j'explique en commentaire comment est organisée chaque ligne. Ci-dessous la légende :

• x correspond à un slot remplis
• - à un slot vide
• | à un changement de colonne

Pour le responsive :

• lg = écran large
• sm : écran small

Pour plus d'infos sur les tableaux bootstrap : Grid system

📊 Les graphiques avec l'outil DGE :

Pour la création de graphique, je vous laisse aller vous renseigner sur la documentation officielle de DataGrandEst qui est très bien faite.

🎨 Le style

Le fichier dist/global.css permet de modifier les graphiques réalisé à partir de l'outil DGE.

💡 L'utilisation de ce fichier nécessite le paramètre localcss à TRUE ou 1 et nommer l'identifiant du grahique par dge-type-light (exemple : dge-figure-light).

🗒️ Utilisation liste déroulante

Pour modifier la liste déroulante, il faut modifier le fichier js/list.js.

• La fonction selectVille est executer lorsque l'utilisateur click sur la liste ou le chargment de la page(avec cookie). Il sera ainsi possible de mettre à jour les données dans cette fonction.
• Pour changer les champs dans la liste déroulante. Il faut modifier dans la fonction papaParse : data.nomchampsCSV

🧩 Remarques importantes :

L'outil DGE est incapable de lire les fichiers CSV avec des colonnes :

• avec un tiret (-)
• avec un espace
• avec un accent
• qui commence par un chiffre

Le zoom lorsque du passage de la souris(class="zoom-1") peut ne pas être compatible avec un DGE-chart.

💡 Si création d'un nouveau carousel : pensez à changer l'ID de celui-ci puis reporté cet ID sur les flèches de navigation