From 682f719c268be1a0f4617dcbc9375af7494b20e0 Mon Sep 17 00:00:00 2001
From: p2312013 <amira.rabehi@etu.univ-lyon1.fr>
Date: Mon, 13 Jan 2025 22:30:02 +0100
Subject: [PATCH] Integration et Amelioration des visu
---
frontend/index.html | 6 +++
static/css/style.css | 13 +++++-
static/js/main.js | 104 ++++++++++++++++++++++++++++++++++---------
3 files changed, 100 insertions(+), 23 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 663d3b9..9e18fb3 100644
--- a/frontend/index.html
+++ b/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><</button>
+ <span id="distanceCurrentYear" class="font-weight-bold" style="font-size: 1.5rem;">2024</span>
+ <button id="distanceNextYear" class="btn btn-outline-dark">></button>
+ </div>
+
<div id="distance-visualization" style="position: relative;"></div>
<div id="distance-slider-container" style="margin-top: 20px;"></div>
</div>
diff --git a/static/css/style.css b/static/css/style.css
index b707ec4..748eeb1 100644
--- a/static/css/style.css
+++ b/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 */
diff --git a/static/js/main.js b/static/js/main.js
index 6c9cee6..22596e3 100644
--- a/static/js/main.js
+++ b/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);
- });
+
});
}
--
GitLab