diff --git a/frontend/index.html b/frontend/index.html
index b7d4f1fb65d234fcdc931f75f86a57ecf92fb08c..9370fb80a9026cc36a98a812a206548d71d71067 100644
--- a/frontend/index.html
+++ b/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.
diff --git a/static/js/main.js b/static/js/main.js
index 329664230903b19797bb0580db4926dee59ecf72..c9e38472add0cbae45eced8b880e8badd1a73bfc 100644
--- a/static/js/main.js
+++ b/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;