From b15e4db521e9b53ce00bb1db04b4142cd9fba600 Mon Sep 17 00:00:00 2001
From: Richard Hitier <hitier.richard@gmail.com>
Date: Mon, 15 Mar 2021 15:42:19 +0100
Subject: [PATCH] Tooltip on mouseover on bar

---
 app/main/templates/agent.html | 222 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------
 1 file changed, 111 insertions(+), 111 deletions(-)

diff --git a/app/main/templates/agent.html b/app/main/templates/agent.html
index bf06ac8..89ab2ef 100644
--- a/app/main/templates/agent.html
+++ b/app/main/templates/agent.html
@@ -1,122 +1,122 @@
 {% extends "base_page.html" %}
 
 {% block more_heads %}
-  <style type="text/css">
-    #charge_chart {
-      background-color: #fAfAfA;
-      border: 1pt solid black;
-      display: inline-block;
-    }
-    rect.bar:hover {
-      fill: dimgrey;
-    }
-    rect.bar {
-      fill: rgb(127,127,159);
-    }
-  </style>
+<style type="text/css">
+  #charge_div {
+    background-color: #fAfAfA;
+    border: 1pt solid black;
+    display: inline-block;
+  }
+
+  rect.bar:hover {
+    fill: dimgrey;
+  }
+
+  rect.bar {
+    fill: rgb(127, 127, 159);
+  }
+
+  .tooltip {
+    position: absolute;
+    opacity: 0.8;
+    z-index: 1000;
+    text-align: left;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    padding: 8px;
+    color: #fff;
+    background-color: #000;
+    font: 12px sans-serif;
+    max-width: 300px;
+  }
+
+</style>
 {% endblock %}
 
 {% block content %}
-  <div id="charge_div"></div>
-  <svg height="500" id="charge_chart" width="900"></svg>
+<div id="charge_div"></div>
 {% endblock %}
 
 
 {% block more_scripts %}
-  {% include 'd3js-includes.html' %}
-<!--  <script>-->
-
-<!--    // Update…-->
-<!--    d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {-->
-<!--      var charge = d3.select("#charge_div")-->
-<!--          .selectAll("p")-->
-<!--          .data(data)-->
-<!--          .text(function (d) {-->
-<!--            return d;-->
-<!--          });-->
-<!--      // Enter…-->
-<!--      charge.enter().append("p")-->
-<!--          .text(function (d) {-->
-<!--            return d.periode + ", " + d.charge;-->
-<!--          });-->
-<!--    })-->
-<!--  </script>-->
-  <script>
-
-    const margin = {top: 40, right: 40, bottom: 90, left: 120},
-        width = 900 - margin.left - margin.right,
-        height = 500 - margin.top - margin.bottom;
-
-    const x = d3.scaleBand()
-        .range([0, width])
-        .padding(0.1);
-
-    const y = d3.scaleLinear()
-        .range([height, 0]);
-    const svg = d3.select("#charge_chart").append("svg")
-        .attr("id", "svg")
-        .attr("width", width + margin.left + margin.right)
-        .attr("height", height + margin.top + margin.bottom)
-        .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-    const div = d3.select("body").append("div")
-        .attr("class", "tooltip")
-        .style("opacity", 0);
-
-    // On demande à D3JS de charger notre fichier
-    d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {
-      // Conversion des caractères en nombres
-      console.log(data)
-      data.forEach(d => d.charge = +d.charge);
-
-      // Mise en relation du scale avec les données de notre fichier
-      // Pour l'axe X, c'est la liste des pays
-      // Pour l'axe Y, c'est le max des charge
-      x.domain(data.map(d => d.periode));
-      y.domain([0, d3.max(data, d => d.charge)]);
-
-      // Ajout de l'axe X au SVG
-      // Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG
-      // Selection des noeuds text, positionnement puis rotation
-      svg.append("g")
-          .attr("transform", "translate(0," + height + ")")
-          .call(d3.axisBottom(x).tickSize(0))
-          .selectAll("text")
-          .style("text-anchor", "end")
-          .attr("dx", "-.8em")
-          .attr("dy", ".15em")
-          .attr("transform", "rotate(-65)");
-
-      // Ajout de l'axe Y au SVG avec 6 éléments de légende en utilisant la fonction ticks (sinon D3JS en place autant qu'il peut).
-      svg.append("g")
-          .call(d3.axisLeft(y).ticks(6));
-
-      // Ajout des bars en utilisant les données de notre fichier data.tsv
-      // La largeur de la barre est déterminée par la fonction x
-      // La hauteur par la fonction y en tenant compte de la charge
-      // La gestion des events de la souris pour le popup
-      svg.selectAll(".bar")
-          .data(data)
-          .enter().append("rect")
-          .attr("class", "bar")
-          .attr("x", d => x(d.periode))
-          .attr("width", x.bandwidth())
-          .attr("y", d => y(d.charge))
-          .attr("height", d => height - y(d.charge))
-          // .on("mouseover", function (d) {
-          //   div.transition()
-          //       .duration(200)
-          //       .style("opacity", .9);
-          //   div.html("Population : " + d.charge)
-          //       .style("left", (d3.event.pageX + 10) + "px")
-          //       .style("top", (d3.event.pageY - 50) + "px");
-          // })
-          // .on("mouseout", function (d) {
-          //   div.transition()
-          //       .duration(500)
-          //       .style("opacity", 0);
-          // });
-    });
-  </script>
+{% include 'd3js-includes.html' %}
+<script>
+
+  const margin = {top: 40, right: 40, bottom: 90, left: 120},
+      width = 900 - margin.left - margin.right,
+      height = 500 - margin.top - margin.bottom;
+
+  const x = d3.scaleBand()
+      .range([0, width])
+      .padding(0.1);
+
+  const y = d3.scaleLinear()
+      .range([height, 0]);
+
+  const svg = d3.select("#charge_div").append("svg")
+      .attr("id", "svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+  const div = d3.select("body").append("div")
+      .attr("class", "tooltip")
+      .style("opacity", 0);
+
+  // On demande à D3JS de charger notre fichier
+  d3.json("{{url_for('main.charge_agent', agent_id=agent.id)}}").then(data => {
+    // Conversion des caractères en nombres
+    data.forEach(d => d.charge = +d.charge);
+
+    // Mise en relation du scale avec les données de notre fichier
+    // Pour l'axe X, c'est la liste des pays
+    // Pour l'axe Y, c'est le max des charge
+    x.domain(data.map(d => d.periode));
+    y.domain([0, d3.max(data, d => d.charge)]);
+
+    // Ajout de l'axe X au SVG
+    // Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG
+    // Selection des noeuds text, positionnement puis rotation
+    svg.append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x).tickSize(10))
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("dx", "-.8em")
+        .attr("dy", ".15em")
+        .attr("transform", "rotate(-65)");
+
+    // Ajout de l'axe Y au SVG avec 6 éléments de légende en utilisant la fonction ticks (sinon D3JS en place autant qu'il peut).
+    svg.append("g")
+        .call(d3.axisLeft(y).ticks(6));
+
+    // Ajout des bars en utilisant les données de notre fichier data.tsv
+    // La largeur de la barre est déterminée par la fonction x
+    // La hauteur par la fonction y en tenant compte de la charge
+    // La gestion des events de la souris pour le popup
+    svg.selectAll(".bar")
+        .data(data)
+        .enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", d => x(d.periode))
+        .attr("width", x.bandwidth())
+        .attr("y", d => y(d.charge))
+        .attr("height", d => height - y(d.charge))
+        .on("mouseover", function (e, d) {
+          div.transition()
+              .duration(200)
+              .style("opacity", .9);
+          div.html("Charge: " + d.charge)
+              .style("left", (e.x + 10) + "px")
+              .style("top", (e.y - 50) + "px");
+        })
+        .on("mouseout", function (d) {
+          div.transition()
+              .duration(500)
+              .style("opacity", 0);
+        });
+  });
+</script>
 {% endblock %}
--
libgit2 0.21.2