From 069a51028c77ea1a8a0efef43c9a8eb1931bf5a7 Mon Sep 17 00:00:00 2001
From: Richard Hitier <hitier.richard@gmail.com>
Date: Wed, 7 Apr 2021 09:27:49 +0200
Subject: [PATCH] Fixed tooltip

---
 app/main/static/css/charges.css |  1 +
 app/main/static/js/charges.js   | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/main/static/css/charges.css b/app/main/static/css/charges.css
index b265676..47ab5f3 100644
--- a/app/main/static/css/charges.css
+++ b/app/main/static/css/charges.css
@@ -44,4 +44,5 @@ rect.bar:hover {
     color: black;
     /*font: 12px sans-serif;*/
     max-width: 300px;
+    pointer-events: none;
 }
diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js
index d1d8f84..635b5ea 100644
--- a/app/main/static/js/charges.js
+++ b/app/main/static/js/charges.js
@@ -2,7 +2,7 @@ var margin = {top: 60, right: 30, bottom: 130, left: 90},
     width = 1000 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
 
-const tooltip_offset = {dx: margin.left+200, dy: margin.right+90}
+const tooltip_offset = {dx: 0, dy: 100}
 
 
 // TODO: set main scales attr here then domain later
@@ -33,8 +33,10 @@ function build_chart(div_selector, data_url,  project_name, category) {
 
     if( category == 'capacity'){
         var chart_title = "Charges par fonction"
+        var category_title = "Fonction"
     } else if ( category == 'service'){
         var chart_title = "Charges par service"
+        var category_title = "Service"
     }
 
     const svg = d3.select(div_selector).append("svg")
@@ -44,7 +46,7 @@ function build_chart(div_selector, data_url,  project_name, category) {
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-    const tooltip = d3.select(div_selector)
+    const tooltip = d3.select('html')
         .append("div")
         .style("opacity", 0)
         .attr("class", "tooltip")
@@ -70,7 +72,7 @@ function build_chart(div_selector, data_url,  project_name, category) {
             .duration(200)
             .style("opacity", 1);
         tooltip
-            .html("<b>Categorie:</b> " + category_name + "<br>" + "<b>Charge:</b> " + category_charge + "%")
+            .html("<b>"+category_title+":</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")
     }
@@ -88,7 +90,7 @@ function build_chart(div_selector, data_url,  project_name, category) {
         const x = d3.scaleBand()
             .domain(periods)
             .range([0, width])
-            .padding(0.5);
+            .padding(0.2);
 
         // Get the max y to plot
         y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
--
libgit2 0.21.2