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];