Add tooltip

hitier
1 parent 68fd83a8
Showing 1 changed file with 37 additions and 4 deletions Show diff stats
app/main/static/js/charges.js
@@ -2,7 +2,8 @@ var margin = {top: 30, right: 30, bottom: 130, left: 90},
     width = 1000 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
  
-const tooltip_offset = {dx: 300, dy: 120}
+const tooltip_offset = {dx: margin.left+200, dy: margin.right+90}
+
  
 // TODO: set main scales attr here then domain later
 // const x = d3.scaleBand()
@@ -37,12 +38,41 @@ function build_chart(div_selector, data_url) {
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
+    const tooltip = d3.select(div_selector)
+        .append("div")
+        .style("opacity", 0)
+        .attr("class", "tooltip")
+
+    var mousemove = function (e, d) {
+        tooltip
+            .style("left", (e.pageX - tooltip_offset.dx) + "px")
+            .style("top", (e.pageY - tooltip_offset.dy) + "px")
+    }
+
+    var mouseleave = function (d) {
+        tooltip
+            .transition()
+            .duration(100)
+            .style("opacity", 0)
+    }
+
+    var mouseover = function (e, d) {
+        var category_name = d3.select(this.parentNode).datum().key
+        var category_charge = d.data[category_name]
+        tooltip
+            .transition()
+            .duration(200)
+            .style("opacity", 1);
+        tooltip
+            .html("<b>Categorie:</b> " + category_name + "<br>" + "<b>Charge:</b> " + category_charge + "%")
+            .style("left", (e.pageX - tooltip_offset.dx) + "px")
+            .style("top", (e.pageY - tooltip_offset.dy) + "px")
+    }
+
     d3.csv(data_url).then(data => {
         var services = data.columns.slice(1)
         var periods = d3.map(data, d => d.period)
  
-        // console.log(data)
-
         var stack = d3.stack()
             .keys(services)
         // .order(d3.stackOrderNone)
@@ -112,7 +142,10 @@ function build_chart(div_selector, data_url) {
             // .attr("width", 5)
             .attr("y", d => y(d[1]))
             .attr("height", d => height - y(d[1] - d[0]))
-            .attr("stroke", "black");
+            .attr("stroke", "black")
+            .on("mouseover", mouseover)
+            .on("mousemove", mousemove)
+            .on("mouseleave", mouseleave);
  
     });