PDC-IRAP / pdc-web

Commit 069a51028c77ea1a8a0efef43c9a8eb1931bf5a7

Authored by hitier
1 parent a414f355
Exists in master and in 4 other branches Develop, TEST, dev, othauvin

Fixed tooltip

Showing 2 changed files with 7 additions and 4 deletions   Show diff stats
Inline Side-by-side
app/main/static/css/charges.css
  Diff comments   View file @069a510
... ... @@ -44,4 +44,5 @@ rect.bar:hover {
44 44 color: black;
45 45 /*font: 12px sans-serif;*/
46 46 max-width: 300px;
  47 + pointer-events: none;
47 48 }
... ...
app/main/static/js/charges.js
  Diff comments   View file @069a510
... ... @@ -2,7 +2,7 @@ var margin = {top: 60, right: 30, bottom: 130, left: 90},
2 2 width = 1000 - margin.left - margin.right,
3 3 height = 500 - margin.top - margin.bottom;
4 4  
5   -const tooltip_offset = {dx: margin.left+200, dy: margin.right+90}
  5 +const tooltip_offset = {dx: 0, dy: 100}
6 6  
7 7  
8 8 // TODO: set main scales attr here then domain later
... ... @@ -33,8 +33,10 @@ function build_chart(div_selector, data_url, project_name, category) {
33 33  
34 34 if( category == 'capacity'){
35 35 var chart_title = "Charges par fonction"
  36 + var category_title = "Fonction"
36 37 } else if ( category == 'service'){
37 38 var chart_title = "Charges par service"
  39 + var category_title = "Service"
38 40 }
39 41  
40 42 const svg = d3.select(div_selector).append("svg")
... ... @@ -44,7 +46,7 @@ function build_chart(div_selector, data_url, project_name, category) {
44 46 .append("g")
45 47 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
46 48  
47   - const tooltip = d3.select(div_selector)
  49 + const tooltip = d3.select('html')
48 50 .append("div")
49 51 .style("opacity", 0)
50 52 .attr("class", "tooltip")
... ... @@ -70,7 +72,7 @@ function build_chart(div_selector, data_url, project_name, category) {
70 72 .duration(200)
71 73 .style("opacity", 1);
72 74 tooltip
73   - .html("<b>Categorie:</b> " + category_name + "<br>" + "<b>Charge:</b> " + category_charge + "%")
  75 + .html("<b>"+category_title+":</b> " + category_name + "<br>" + "<b>Charge:</b> " + category_charge + "%")
74 76 .style("left", (e.pageX - tooltip_offset.dx) + "px")
75 77 .style("top", (e.pageY - tooltip_offset.dy) + "px")
76 78 }
... ... @@ -88,7 +90,7 @@ function build_chart(div_selector, data_url, project_name, category) {
88 90 const x = d3.scaleBand()
89 91 .domain(periods)
90 92 .range([0, width])
91   - .padding(0.5);
  93 + .padding(0.2);
92 94  
93 95 // Get the max y to plot
94 96 y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
... ...