diff --git a/frontend/index.html b/frontend/index.html
index bb5524e04de0d5ddbbca73296f4de6f5d1cab0c1..c24fdc4313ec5353bd5a204e199cf5ad85cceb5d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -160,25 +160,26 @@
<!-- Visualisation à gauche -->
<div class="col-md-6 order-md-1">
<div class="d-flex justify-content-between align-items-center">
- <button id="prevYear" class="btn btn-success"> < </button>
- <span id="currentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
- <button id="nextYear" class="btn btn-success"> > </button>
+ <button id="sleepPrevYear" class="btn btn-success"> < </button>
+ <span id="sleepCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
+ <button id="sleepNextYear" class="btn btn-success"> > </button>
</div>
<div id="sleep-visualization" style="position: relative;"></div>
</div>
<!-- Texte à droite -->
- <div class="col-md-6 order-md-2" data-aos="fade-left">
- <h3>Analyse des Heures de Sommeil</h3>
- <p>
- Cette visualisation met en évidence les heures de sommeil moyennes par mois pour chaque utilisateur.
- Utilisez le slider pour explorer les données par année et visualiser les tendances individuelles.
+ <div id="analysis-content-sleep" class="col-md-6 order-md-2" data-aos="fade-left">
+ <h3>2024 : Analyse des habitudes de sommeil</h3>
+ <p style="font-size: 0.95em;">
+ En 2024, <strong>Amira</strong> se distingue comme la meilleure dormeuse, maintenant une moyenne de 6 heures de sommeil par nuit, même en période de stress comme les examens. <strong>Anis</strong>, quant à lui, affiche une constance exemplaire avec un rythme stable et régulier tout au long de l'année, reflétant une bonne gestion de son emploi du temps.
</p>
- <ul>
- <li><i class="bi bi-check"></i> Analyse des heures de sommeil moyen par mois et par année.</li>
- <li><i class="bi bi-check"></i> Comparaison entre utilisateurs.</li>
- <li><i class="bi bi-check"></i> Détails interactifs par jour pour un mois donné.</li>
- </ul>
+ <p style="font-size: 0.95em;">
+ À l'opposé, <strong>Maya</strong> enregistre les durées de sommeil les plus faibles, atteignant un minimum de 0,70 heure en décembre, probablement en raison de la pression académique. <strong>Corentin</strong>, de son côté, présente un sommeil plus variable, oscillant selon les mois sans réelle régularité.
+ </p>
+ <p style="font-size: 0.95em;">
+ Cette analyse met en évidence des différences marquées dans les habitudes de sommeil, offrant des pistes d’amélioration adaptées aux besoins de chaque membre.
+ </p>
+
</div>
diff --git a/static/js/main.js b/static/js/main.js
index 96416b4fa225b12b391cb561f595124a584e968f..ba96fe135bc59f4ecfcc1a232f947a56c8b8079a 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -50,6 +50,58 @@ const analyses = {
<p style="font-size: 0.95em;">En 2024, les habitudes de sommeil des membres du groupe révèlent des tendances intéressantes. <strong>Amira</strong> se distingue comme la plus grande dormeuse, dépassant régulièrement les autres membres avec une moyenne de 6 heures de sommeil par nuit en décembre. Même lors des périodes stressantes, comme les examens, elle parvient à maintenir un bon niveau de sommeil. <strong>Anis</strong>, quant à lui, présente un sommeil stable et régulier tout au long de l'année, offrant une constance comparable à celle d'Amira malgré ses activités physiques soutenues. À l'inverse, <strong>Maya</strong> est celle qui dort le moins, enregistrant en décembre une durée de sommeil minimale de seulement 0,70 heure, probablement en raison des nuits blanches liées aux examens. Enfin, <strong>Corentin</strong> présente un sommeil plus variable, sans tendance marquée, ses habitudes de sommeil oscillant au fil des mois.</p>
`,
},
+ sleep: {
+ 2021:`<h3>2021 : Analyse des habitudes de sommeil </h3>
+<p>
+ En 2021, <strong>Corentin</strong> affiche un sommeil stable avec une moyenne d'environ 4 heures par nuit, bien que de légères variations soient visibles en été et en hiver. <strong>Maya</strong>, en revanche, enregistre les durées de sommeil les plus faibles, restant généralement en dessous de 3 heures par nuit, reflétant un rythme de vie chargé ou des difficultés à maintenir un équilibre travail-repos.
+</p>
+<p>
+ Les données pour <strong>Anis</strong> et <strong>Amira</strong> ne sont pas disponibles cette année, limitant l'analyse comparative avec les autres membres. Globalement, cette année est marquée par une continuité dans les habitudes de Corentin et les défis constants rencontrés par Maya.
+</p>
+`,
+ 2022: `
+ <h3>2022 : Analyse des habitudes de sommeil</h3>
+ <p style="font-size: 0.95em;">
+ <strong>Corentin</strong>, en 2022, est l'un des deux membres ayant utilisé l'application Santé, avec Maya. Il présente un sommeil relativement stable tout au long de l'année, bien qu'il n'atteigne pas les niveaux de sommeil observés chez <strong>Amira</strong> ou <strong>Anis</strong> dans les années suivantes. Cette stabilité reflète une gestion correcte de ses habitudes, malgré quelques variations légères.
+ </p>
+ <p style="font-size: 0.95em;">
+ <strong>Maya</strong>, fidèle à ses habitudes, dort le moins parmi les membres. En 2022, ses heures de sommeil restent faibles tout au long de l'année, sans variation notable. Elle continue de montrer une tendance constante à avoir des nuits courtes, souvent dues à un emploi du temps exigeant.
+ </p>
+ `,
+ 2023: `
+ <h3>2023 : Analyse des habitudes de sommeil</h3>
+ <p style="font-size: 0.95em;">
+ <strong>Amira</strong> reste la plus grande dormeuse du groupe en 2023, dépassant les autres membres avec un sommeil régulier et assez long tout au long de l'année. Elle maintient une bonne hygiène de sommeil, reflétant une constance notable dans ses habitudes.
+ </p>
+ <p style="font-size: 0.95em;">
+ <strong>Corentin</strong> se classe en deuxième position, enregistrant un sommeil relativement stable, bien qu'il ne dépasse pas celui d'Amira. Ses habitudes de sommeil sont solides, mais ne connaissent pas les mêmes pics que celles d'Amira, démontrant une régularité appréciable.
+ </p>
+ <p style="font-size: 0.95em;">
+ Les données de sommeil pour <strong>Anis</strong> étant manquantes pour cette année, il est difficile de tirer des conclusions sur ses habitudes de sommeil. Ce manque de données souligne l'importance d'un suivi régulier pour mieux comprendre ses tendances.
+ </p>
+ <p style="font-size: 0.95em;">
+ <strong>Maya</strong>, fidèle à elle-même, est celle qui dort le moins en 2023. Ses heures de sommeil restent faibles tout au long de l'année, avec des périodes de très faible repos, reflétant les défis qu'elle rencontre pour maintenir un bon équilibre entre ses responsabilités et son repos.
+ </p>`,
+ 2024: `
+ <h3>2024 : Analyse des habitudes de sommeil</h3>
+ <p style="font-size: 0.95em;">
+ En 2024, <strong>Amira</strong> se distingue comme la membre du groupe ayant le meilleur sommeil tout au long de l'année. Elle dépasse régulièrement les autres, atteignant une moyenne impressionnante de 6 heures de sommeil par nuit en décembre. Même en période de stress, notamment lors des examens, Amira parvient à maintenir un bon équilibre entre ses activités et son repos, démontrant l'importance d'une bonne hygiène de sommeil pour la santé et la performance.
+ </p>
+ <p style="font-size: 0.95em;">
+ <strong>Anis</strong> se démarque par une constance exemplaire dans ses habitudes de sommeil. Tout au long de l'année, il conserve un rythme stable et suffisant, démontrant une bonne gestion de son temps malgré des activités physiques régulières. Son sommeil régulier reflète une discipline qui contribue à son bien-être général et à son efficacité dans ses activités quotidiennes.
+ </p>
+ <p style="font-size: 0.95em;">
+ À l'autre extrême, <strong>Maya</strong> enregistre les durées de sommeil les plus faibles parmi les membres du groupe. En décembre, elle atteint un minimum alarmant de 0,70 heure, marquée par des nuits souvent blanches. Ces résultats semblent corrélés à des périodes de forte pression, notamment les examens, soulignant les défis auxquels elle fait face pour concilier ses responsabilités académiques et son repos.
+ </p>
+ <p style="font-size: 0.95em;">
+ Le sommeil de <strong>Corentin</strong>, quant à lui, est caractérisé par une grande variabilité. Ses habitudes oscillent au fil des mois, sans véritable régularité. Cette instabilité pourrait être influencée par des facteurs externes ou un emploi du temps moins structuré, montrant un contraste notable par rapport à la stabilité d'Anis ou à la constance d'Amira.
+ </p>
+ <p style="font-size: 0.95em;">
+ Cette analyse met en lumière les différences notables dans les habitudes de sommeil au sein du groupe, tout en offrant une perspective sur les défis et les opportunités d’amélioration pour chaque membre.
+ </p>
+ `,
+
+ },
};
function updateAnalysis(visualization, year) {
const container = document.getElementById("analysis-content-" + visualization);
@@ -869,53 +921,52 @@ function renderSleepVisualization() {
// Définir les années et la plage d'affichage
const years = [2021, 2022, 2023, 2024];
-
-
// Créer le slider
- // Ajoutez les boutons Bootstrap pour naviguer entre les années
-
-
+ const prevYearBtn = document.getElementById("sleepPrevYear");
+const nextYearBtn = document.getElementById("sleepNextYear");
+const currentYearDisplay = document.getElementById("sleepCurrentYear");
// Gestion des événements des boutons
-let currentYearIndex = years.indexOf(2024); // Année initiale
+prevYearBtn.addEventListener("click", () => {
+ const currentYearIndex = years.indexOf(parseInt(currentYearDisplay.textContent));
+ if (currentYearIndex > 0) {
+ const newYear = years[currentYearIndex - 1];
+ currentYearDisplay.textContent = newYear;
+ updateVisualization(newYear); // Affiche la visualisation pour 2024 (par défaut)
+updateAnalysis("sleep", newYear); // Assure que l'analyse correspondante est également affichée
-// Fonction pour mettre à jour l'état des boutons
-function updateButtonStates() {
- if (currentYearIndex <= 0) {
- document.getElementById("prevYear").style.display = "hidden"; // Cacher le bouton précédent
- } else {
- document.getElementById("prevYear").style.display = "inline-block"; // Réafficher le bouton précédent
+ // Activer/désactiver les boutons
+ nextYearBtn.disabled = false;
+ if (currentYearIndex - 1 === 0) {
+ prevYearBtn.disabled = true;
+ }
}
+});
- if (currentYearIndex >= years.length - 1) {
- document.getElementById("nextYear").style.display = "hidden"; // Cacher le bouton suivant
- } else {
- document.getElementById("nextYear").style.display = "inline-block"; // Réafficher le bouton suivant
- }
-}
+nextYearBtn.addEventListener("click", () => {
+ const currentYearIndex = years.indexOf(parseInt(currentYearDisplay.textContent));
+ if (currentYearIndex < years.length - 1) {
+ const newYear = years[currentYearIndex + 1];
+ currentYearDisplay.textContent = newYear;
+ updateVisualization(newYear); // Affiche la visualisation pour 2024 (par défaut)
+updateAnalysis("sleep", newYear); // Assure que l'analyse correspondante est également affichée
-// Initialiser l'état des boutons
-updateButtonStates();
-// Événement pour le bouton précédent
-document.getElementById("prevYear").addEventListener("click", () => {
- if (currentYearIndex > 0) {
- currentYearIndex--;
- document.getElementById("currentYear").textContent = years[currentYearIndex];
- updateVisualization(years[currentYearIndex]);
- updateButtonStates(); // Mettre à jour l'état des boutons
+ // Activer/désactiver les boutons
+ prevYearBtn.disabled = false;
+ if (currentYearIndex + 1 === years.length - 1) {
+ nextYearBtn.disabled = true;
+ }
}
});
-// Événement pour le bouton suivant
-document.getElementById("nextYear").addEventListener("click", () => {
- if (currentYearIndex < years.length - 1) {
- currentYearIndex++;
- document.getElementById("currentYear").textContent = years[currentYearIndex];
- updateVisualization(years[currentYearIndex]);
- updateButtonStates(); // Mettre à jour l'état des boutons
- }
-});
+// Initialisation des boutons
+prevYearBtn.disabled = years.indexOf(parseInt(currentYearDisplay.textContent)) === 0;
+nextYearBtn.disabled = years.indexOf(parseInt(currentYearDisplay.textContent)) === years.length - 1;
+
+
+
+
// Tooltip
const tooltip = d3.select("body").append("div")