Integration et Amelioration des visu

frontend/index.html

@@ -120,6 +120,12 @@
       <div class="row align-items-center">
         <!-- Visualisation à gauche -->
         <div class="col-md-6 order-md-1">
+          <div id="distance-buttons-container" class="d-flex justify-content-between align-items-center">
+            <button id="distancePrevYear" class="btn btn-outline-dark" disabled>&lt;</button>
+            <span id="distanceCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
+            <button id="distanceNextYear" class="btn btn-outline-dark">&gt;</button>
+        </div>
+        
           <div id="distance-visualization" style="position: relative;"></div>
           <div id="distance-slider-container" style="margin-top: 20px;"></div>
         </div>

static/css/style.css

@@ -2044,7 +2044,18 @@ button:hover {
   transform: translate(-50%, -50%); /* Centrer autour de la souris */
   z-index: 9999;
 }
-
+.tooltip-distance {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
+  color: white; /* Texte blanc */
+  padding: 5px 10px;
+  border-radius: 5px; /* Bordures arrondies */
+  font-size: 12px;
+  pointer-events: none; /* Empêche l'interaction avec le tooltip */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre */
+  transform: translate(-50%, -50%); /* Centrer autour de la souris */
+  z-index: 9999;
+}
 
 /* Visu 5 */
 /* Sleep and Activity Analysis */

static/js/main.js

@@ -422,17 +422,47 @@ function renderDistanceVisualization() {
               .attr("transform", `translate(${margin.left},${margin.top})`);
 
           const years = [2023, 2024];
-          const sliderContainer = d3.select("#distance-slider-container");
+          const prevYearBtn = document.getElementById("distancePrevYear");
+const nextYearBtn = document.getElementById("distanceNextYear");
+const currentYearDisplay = document.getElementById("distanceCurrentYear");
 
-          const rangeSlider = sliderContainer.append("input")
-              .attr("type", "range")
-              .attr("min", 0)
-              .attr("max", years.length - 1)
-              .attr("value", years.indexOf(2024))
-              .style("width", "40%");
+// Gestion des événements des boutons
+prevYearBtn.addEventListener("click", () => {
+    const currentYearIndex = years.indexOf(parseInt(currentYearDisplay.textContent));
+    if (currentYearIndex > 0) {
+        const newYear = years[currentYearIndex - 1];
+        currentYearDisplay.textContent = newYear;
+        updateVisualization(newYear);
 
-          const yearDisplay = sliderContainer.append("span")
-              .text(years[years.indexOf(2024)]);
+        // Activer/désactiver les boutons
+        nextYearBtn.disabled = false;
+        if (currentYearIndex - 1 === 0) {
+            prevYearBtn.disabled = true;
+        }
+    }
+});
+
+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);
+
+        // Activer/désactiver les boutons
+        prevYearBtn.disabled = false;
+        if (currentYearIndex + 1 === years.length - 1) {
+            nextYearBtn.disabled = true;
+        }
+    }
+});
+
+// Initialisation des boutons
+prevYearBtn.disabled = years.indexOf(parseInt(currentYearDisplay.textContent)) === 0;
+nextYearBtn.disabled = years.indexOf(parseInt(currentYearDisplay.textContent)) === years.length - 1;
+
+
+          
 
           const tooltip = d3.select("body").append("div")
               .attr("class", "tooltip-distance")
@@ -521,24 +551,54 @@ function renderDistanceVisualization() {
                       })
                       .style("opacity", 0.7)
                       .on("mouseover", function(event, d) {
-                          tooltip.transition().duration(200).style("opacity", .9);
-                          tooltip.html(`Mois : ${d.month}<br>Distance : ${d[`Distance_${member}`]} km<br>Calories : ${d[`Calories_${member}`]} cal`)
-                              .style("left", (event.pageX + 5) + "px")
-                              .style("top", (event.pageY - 28) + "px");
-                      })
-                      .on("mouseout", function() {
-                          tooltip.transition().duration(500).style("opacity", 0);
-                      });
+    tooltip.transition().duration(200).style("opacity", 0.9);
+    const monthFormatted = d3.timeFormat("%B")(parseDate(d.month)); // Formatage du mois
+    const distance = d[`Distance_${member}`] ? d[`Distance_${member}`].toFixed(2) : "Pas de données";
+    const calories = d[`Calories_${member}`] ? d[`Calories_${member}`].toFixed(2) : "Pas de données";
+
+    tooltip.html(`
+        <strong>${member}</strong><br>
+        Mois : ${monthFormatted}<br>
+        Distance : ${distance} km<br>
+        Calories : ${calories} cal
+    `)
+    .style("left", `${event.pageX + 10}px`)
+    .style("top", `${event.pageY - 28}px`);
+})
+.on("mousemove", function(event) {
+    tooltip.style("left", `${event.pageX + 10}px`).style("top", `${event.pageY - 28}px`);
+})
+.on("mouseout", function() {
+    tooltip.transition().duration(500).style("opacity", 0);
+});
+// Ajouter une légende horizontale sous le graphique
+const legend = svg.append("g")
+    .attr("transform", `translate(${width / 2 - (members.length * 110) / 2}, ${height + 90})`); // Positionnement horizontal centré
+
+members.forEach((member, i) => {
+    const legendGroup = legend.append("g")
+        .attr("transform", `translate(${i * 100}, 0)`); // Espacement horizontal entre les éléments
+
+    // Rectangle coloré pour la légende
+    legendGroup.append("rect")
+        .attr("width", 15)
+        .attr("height", 15)
+        .attr("fill", colorMap[member])
+        .style("opacity", 0.8);
+
+    // Texte descriptif à côté du rectangle
+    legendGroup.append("text")
+        .attr("x", 20) // Décalage horizontal par rapport au rectangle
+        .attr("y", 12) // Alignement vertical au centre
+        .style("font-size", "12px")
+        .text(member);
+});
               });
           }
 
           updateVisualization(years[1]);
 
-          rangeSlider.on("input", function() {
-              const selectedYear = years[this.value];
-              yearDisplay.text(selectedYear);
-              updateVisualization(selectedYear);
-          });
+          
       });
 }