Enhance agent charge tooltip

hitier
1 parent 1b604951
Showing 1 changed file with 79 additions and 44 deletions Show diff stats
app/main/templates/agent.html
@@ -18,16 +18,17 @@
  
   .tooltip {
     position: absolute;
-    opacity: 0.8;
+    opacity: 1.0;
     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;
+    padding: 10px;
+    border: 1px solid;
+    background-color: white;
+    color: black;
+    /*font: 12px sans-serif;*/
     max-width: 300px;
   }
  
@@ -61,21 +62,37 @@
       .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 => {
  
     // waiting for structure of the form:
     //
+    // {
+    // '2014_S1': {'4Q++': None,
+    //          'Activité service C2L': None,
+    //          'Activité service COMCL': None,
+    //          .
+    //           ...},
+    // '2014_S2': {'4Q++': None,
+    //          'Activité service C2L': None,
+    //          .
+    //          .
+    //          .
+    // '2021_S2': {'4Q++': None,
+    //          .
+    //          .
+    //          'Test IAS': None,
+    //          'cahier des charges DT insu': None,
+    //          'ŒIL': None
+    //          }
+    //   }
+
+
     var periods = Object.keys(data)
     var first_stacked_charges = Object.values(data)[0]
     var projects = Object.keys(first_stacked_charges)
-    console.log(projects)
  
-    // periods = data
     var x = d3.scaleBand()
         .domain(periods)
         .range([0, width])
@@ -109,33 +126,62 @@
           "#800080",
         ]);
  
-    var stack_generator = d3.stack()
-        .keys(projects)
+    var stack_generator = d3.stack().keys(projects)
  
+    // Building a list of dict, with projects as keys, like in the input dat,
+    // but with a new key, 'period' wich value is the period string for that line
+    // This is need for the d3js stack_generator function
     var stackable_data = []
-    Object.keys(data).forEach( function (period){
+    Object.keys(data).forEach(function (period) {
       line = data[period];
-      line['period']=period;
+      line['period'] = period;
       stackable_data.push(line)
     });
  
     var stacked_data = stack_generator(stackable_data)
  
-    // var sel = d3.select("#demo2")
-    //     .select('g')
-    //     .selectAll('g.series')
-    //     .data(stackedSeries)
-    //     .join('g')
-    //     .classed('series', true)
-    //     .style('fill', (d) => colorScale(d.key));
-    //
-    // sel.selectAll('rect')
-    //     .data((d) => d)
-    //     .join('rect')
-    //     .attr('width', 40)
-    //     .attr('y', (d) => yScale(d[1]))
-    //     .attr('x', (d) => xScale(d.data.month) - 20)
-    //     .attr('height', (d) => yScale(d[0]) - yScale(d[1]));
+
+    // ----------------
+    // Create a tooltip
+    // ----------------
+    var tooltip = d3.select("#charge_div")
+        .append("div")
+        .style("opacity", 0)
+        .attr("class", "tooltip")
+
+    // // Three function that change the tooltip when user hover / move / leave a cell
+    // var mouseover = function (d) {
+    //   var subgroupName = d3.select(this.parentNode).datum().key;
+    //   // var subgroupValue = d.data[subgroupName];
+    //   tooltip
+    //       .html("subgroup: " + subgroupName + "<br>" + "Value: " + subgroupValue)
+    //       .style("opacity", 1)
+    // }
+
+    var mousemove = function (e, d) {
+      tooltip
+          .style("left", (e.x - 400) + "px")
+          .style("top", (e.y - 90) + "px")
+    }
+
+    var mouseleave = function (d) {
+      tooltip
+          .transition()
+          .duration(100)
+          .style("opacity", 0)
+    }
+
+    var mouseover = function (e, d) {
+      var project_name = d3.select(this.parentNode).datum().key
+      var project_charge = d.data[project_name]
+      tooltip.transition()
+          .duration(200)
+          .style("opacity", 1);
+      tooltip
+          .html("Project: " + project_name + "<br>" + "Charge: " + project_charge+"%")
+          .style("left", (e.x - 400) + "px")
+          .style("top", (e.y - 90) + "px");
+    }
  
     svg.append('g')
         .selectAll('g')
@@ -152,21 +198,10 @@
         .attr("y", d => y(d[1]))
         .attr("height", d => y(d[0]) - y(d[1]))
         .attr("width", x.bandwidth())
-
-        .on("mouseover", function (e, d) {
-          console.log(d)
-          div.transition()
-              .duration(200)
-              .style("opacity", .9);
-          div.html("Charge: " + d)
-              .style("left", (e.x + 10) + "px")
-              .style("top", (e.y - 50) + "px");
-        })
-        .on("mouseout", function (d) {
-          div.transition()
-              .duration(500)
-              .style("opacity", 0);
-        });
+        .attr("stroke", "black")
+        .on("mouseover", mouseover)
+        .on("mousemove", mousemove)
+        .on("mouseleave", mouseleave);
   });
 </script>
 {% endblock %}