ajout de changement d'analyse dynamic

frontend/index.html

@@ -87,7 +87,7 @@
     <div class="container">
       <div class="row align-items-center">
         <!-- Texte à gauche -->
-        <div class="col-md-6" data-aos="fade-right">
+        <div id="analysis-content-steps" class="col-md-6" data-aos="fade-right">
           <h3>Analyse des Pas des Utilisateurs</h3>
           <p>
             Cette visualisation illustre les données sur le nombre de pas effectués par les utilisateurs
@@ -130,7 +130,7 @@
           <div id="distance-slider-container" style="margin-top: 20px;"></div>
         </div>
         <!-- Texte à droite -->
-        <div class="col-md-6 order-md-2" data-aos="fade-left">
+        <div id="analysis-content-distanceCalories" class="col-md-6 order-md-2" data-aos="fade-left">
           <h3>Analyse de la Distance Parcourue</h3>
           <p>
             Découvrez comment la distance parcourue est liée aux calories brûlées pour chaque utilisateur.
@@ -151,7 +151,7 @@
     <div class="container">
       <div class="row align-items-center">
         <!-- Texte à gauche -->
-        <div class="col-md-6" data-aos="fade-right">
+        <div id="analysis-content-calories" class="col-md-6" data-aos="fade-right">
           <h3>Analyse des Calories Brûlées</h3>
           <p>
             Cette visualisation explore les calories brûlées par chaque utilisateur au fil des mois.

static/js/main.js

@@ -5,6 +5,89 @@
 * Author: BootstrapMade.com
 * License: https://bootstrapmade.com/license/
 */
+const analyses = {
+  steps: {
+    2022: `
+      <h3>2022 : Une année de progression générale</h3>
+      <ul>
+        <li><strong>Corentin :</strong> Pic impressionnant de 10 500 pas, le plus actif de l'année.</li>
+        <li><strong>Anis :</strong> Progression régulière avec une constance remarquable.</li>
+        <li><strong>Maya :</strong> Montée progressive culminant en fin d'année.</li>
+      </ul>
+      <p>Tous les utilisateurs montrent une augmentation continue de leur activité, avec Corentin en tête, suivi d'Anis et de Maya.</p>
+    `,
+    2023: `
+      <h3>2023 : Analyse des habitudes de marche</h3>
+      <ul>
+        <li><strong>Anis :</strong> Domine l'année avec un pic de 11 500 pas en mars, mais baisse notable en été.</li>
+        <li><strong>Corentin :</strong> Activité croissante dès février, mais baisse hivernale.</li>
+        <li><strong>Maya :</strong> Rythme stable avec une hausse estivale due à ses jobs étudiants.</li>
+        <li><strong>Amira :</strong> Moins active avec des données partielles, baisse notable en fin d'année.</li>
+      </ul>
+      <p>Des tendances saisonnières et des obligations personnelles influencent l'activité de marche.</p>
+    `,
+    2024: `
+      <h3>2024 : Une année de comportements variés</h3>
+      <ul>
+        <li><strong>Corentin :</strong> Forte activité en décembre, dépassant les 10 000 pas.</li>
+        <li><strong>Anis :</strong> Régularité tout au long de l'année avec des variations en fin d'année.</li>
+        <li><strong>Maya :</strong> Baisse liée au stress des examens en fin d'année.</li>
+        <li><strong>Amira :</strong> Activité faible, mais légèrement accrue en été.</li>
+      </ul>
+      <p>Des tendances saisonnières comme la baisse hivernale et le pic de décembre sont observées.</p>
+    `,
+  },
+  distanceCalories: {
+    2023: `
+      <h3>2023 : Distance et calories</h3>
+      <ul>
+        <li><strong>Anis :</strong> Leader incontesté, atteignant un pic en mars avec 484 calories brûlées.</li>
+        <li><strong>Corentin :</strong> Activité constante, avec une hausse estivale marquée.</li>
+        <li><strong>Maya et Amira :</strong> Moins actives, mais hausse notable en fin d'année.</li>
+      </ul>
+      <p>Les tendances montrent des variations saisonnières avec des pics en été et en décembre.</p>
+    `,
+    2024: `
+      <h3>2024 : Comparaison distance-calories</h3>
+      <ul>
+        <li><strong>Anis :</strong> Plus actif, avec 6,73 km parcourus et 484 calories brûlées en mai.</li>
+        <li><strong>Corentin :</strong> Activité accrue en décembre, mais reste derrière Anis.</li>
+        <li><strong>Maya et Amira :</strong> Activité moindre, avec une hausse en décembre liée aux fêtes.</li>
+      </ul>
+      <p>Les mois de faible activité varient selon les utilisateurs, sans tendance claire.</p>
+    `,
+  },
+  calories: {
+    2023: `
+      <h3>2023 : Analyse des calories brûlées</h3>
+      <ul>
+        <li><strong>Anis :</strong> Pic de 500 calories brûlées en mars, régularité tout au long de l'année.</li>
+        <li><strong>Corentin :</strong> Activité stable, légère baisse estivale.</li>
+        <li><strong>Maya :</strong> Constance avec un pic à 110 calories en septembre.</li>
+        <li><strong>Amira :</strong> Progression vers la fin d'année, pic à 100 calories en décembre.</li>
+      </ul>
+      <p>Une fin d'année plus active pour tout le monde.</p>
+    `,
+    2024: `
+      <h3>2024 : Analyse des calories</h3>
+      <ul>
+        <li><strong>Anis :</strong> Leader incontesté avec un pic de 450 calories en mai.</li>
+        <li><strong>Corentin :</strong> Efforts notables, pic à 300 calories en avril et décembre.</li>
+        <li><strong>Maya :</strong> Activité régulière entre 100 et 145 calories par mois.</li>
+        <li><strong>Amira :</strong> Plus sédentaire, mais pic exceptionnel de 150 calories en septembre.</li>
+      </ul>
+      <p>Les résultats reflètent des dynamiques variées entre les membres.</p>
+    `,
+  },
+};
+function updateAnalysis(visualization, year) {
+  const container = document.getElementById("analysis-content-" + visualization);
+  if (analyses[visualization] && analyses[visualization][year]) {
+    container.innerHTML = analyses[visualization][year];
+  } else {
+    container.innerHTML = "<p>Analyse indisponible pour cette année.</p>";
+  }
+}
 
 (function() {
   "use strict";
@@ -264,6 +347,7 @@ function renderStepsVisualization() {
                   const newYear = years[currentYearIndex - 1];
                   stepsCurrentYearDisplay.textContent = newYear;
                   updateVisualization(newYear);
+                  updateAnalysis("steps", newYear);
 
                   stepsNextYearBtn.disabled = false;
                   if (currentYearIndex - 1 === 0) {
@@ -278,7 +362,7 @@ function renderStepsVisualization() {
                   const newYear = years[currentYearIndex + 1];
                   stepsCurrentYearDisplay.textContent = newYear;
                   updateVisualization(newYear);
-
+                  updateAnalysis("steps", newYear);
                   stepsPrevYearBtn.disabled = false;
                   if (currentYearIndex + 1 === years.length - 1) {
                       stepsNextYearBtn.disabled = true;
@@ -433,6 +517,7 @@ prevYearBtn.addEventListener("click", () => {
         const newYear = years[currentYearIndex - 1];
         currentYearDisplay.textContent = newYear;
         updateVisualization(newYear);
+        updateAnalysis("distanceCalories", newYear);
 
         // Activer/désactiver les boutons
         nextYearBtn.disabled = false;
@@ -448,6 +533,7 @@ nextYearBtn.addEventListener("click", () => {
         const newYear = years[currentYearIndex + 1];
         currentYearDisplay.textContent = newYear;
         updateVisualization(newYear);
+        updateAnalysis("distanceCalories", newYear);
 
         // Activer/désactiver les boutons
         prevYearBtn.disabled = false;
@@ -637,7 +723,7 @@ prevYearBtn.addEventListener("click", () => {
         const newYear = years[currentYearIndex - 1];
         currentYearDisplay.textContent = newYear;
         updateVisualization(newYear);
-
+        updateAnalysis("calories", newYear);
         // Activer/désactiver les boutons
         nextYearBtn.disabled = false;
         if (currentYearIndex - 1 === 0) {
@@ -652,6 +738,7 @@ nextYearBtn.addEventListener("click", () => {
         const newYear = years[currentYearIndex + 1];
         currentYearDisplay.textContent = newYear;
         updateVisualization(newYear);
+        updateAnalysis("calories", newYear);
 
         // Activer/désactiver les boutons
         prevYearBtn.disabled = false;