Commit 2a36f990fa5091702effde669b089596fe922d57

Authored by hitier
1 parent dffcf5b7

Remove tooltip hover on area

Showing 1 changed file with 19 additions and 17 deletions   Show diff stats
app/main/static/js/charges.js
@@ -37,6 +37,10 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -37,6 +37,10 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
37 var draw_total_line = () => void 0; 37 var draw_total_line = () => void 0;
38 var draw_categories_bars = () => void 0; 38 var draw_categories_bars = () => void 0;
39 39
  40 + var mouseoverlegend = category_mouseoverlegend;
  41 + var mouseleavelegend = category_mouseleavelegend;
  42 +
  43 +
40 if (category_type == 'capacity') { 44 if (category_type == 'capacity') {
41 chart_title = "Charges par fonction" 45 chart_title = "Charges par fonction"
42 category_title = "Fonction" 46 category_title = "Fonction"
@@ -61,6 +65,8 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -61,6 +65,8 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
61 category_title = "Projet" 65 category_title = "Projet"
62 draw_areas = draw_projects_areas 66 draw_areas = draw_projects_areas
63 colorScale = d3.scaleOrdinal(d3.schemeTableau10); 67 colorScale = d3.scaleOrdinal(d3.schemeTableau10);
  68 + mouseoverlegend = () => void 0;
  69 + mouseleavelegend = () => void 0;
64 } else { 70 } else {
65 alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !") 71 alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
66 } 72 }
@@ -143,6 +149,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -143,6 +149,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
143 var category_name = d3.select(this.parentNode).datum().key 149 var category_name = d3.select(this.parentNode).datum().key
144 var category_charge = d.data[category_name] 150 var category_charge = d.data[category_name]
145 show_tooltip(e, category_name, category_charge) 151 show_tooltip(e, category_name, category_charge)
  152 + console.log("HELLO")
146 } 153 }
147 154
148 var mouseovergrouped = function (e, d) { 155 var mouseovergrouped = function (e, d) {
@@ -182,34 +189,34 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -182,34 +189,34 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
182 .style("top", (e.pageY - tooltip_offset_dot.dy) + "px") 189 .style("top", (e.pageY - tooltip_offset_dot.dy) + "px")
183 } 190 }
184 191
185 - function mouseoverlegend() { 192 + function category_mouseoverlegend() {
186 var legend_category = $(this).attr("class"); 193 var legend_category = $(this).attr("class");
187 var bar_category = document.getElementsByClassName(legend_category); 194 var bar_category = document.getElementsByClassName(legend_category);
188 if (bar_category[0].tagName === "g") { 195 if (bar_category[0].tagName === "g") {
189 var rect_to_hover = bar_category[0].children; 196 var rect_to_hover = bar_category[0].children;
190 (bar_category[1].children[0]).classList.add("brillance"); 197 (bar_category[1].children[0]).classList.add("brillance");
191 - for (var i=0;i<rect_to_hover.length;i++) { 198 + for (var i = 0; i < rect_to_hover.length; i++) {
192 rect_to_hover[i].classList.add("brillance"); 199 rect_to_hover[i].classList.add("brillance");
193 } 200 }
194 } else { 201 } else {
195 - for (var i=0;i<bar_category.length;i++) { 202 + for (var i = 0; i < bar_category.length; i++) {
196 bar_category[i].classList.add("brillance"); 203 bar_category[i].classList.add("brillance");
197 } 204 }
198 } 205 }
199 } 206 }
200 207
201 - function mouseleavelegend() { 208 + function category_mouseleavelegend() {
202 var legend_category = $(this).attr("class"); 209 var legend_category = $(this).attr("class");
203 var bar_category = document.getElementsByClassName(legend_category); 210 var bar_category = document.getElementsByClassName(legend_category);
204 if (bar_category[0].tagName === "g") { 211 if (bar_category[0].tagName === "g") {
205 var rect_to_hover = bar_category[0].children; 212 var rect_to_hover = bar_category[0].children;
206 (bar_category[1].children[0]).classList.remove("brillance"); 213 (bar_category[1].children[0]).classList.remove("brillance");
207 - for (var i=0;i<rect_to_hover.length;i++) { 214 + for (var i = 0; i < rect_to_hover.length; i++) {
208 rect_to_hover[i].classList.remove("brillance"); 215 rect_to_hover[i].classList.remove("brillance");
209 } 216 }
210 } else { 217 } else {
211 var lenght_i = bar_category.length - 1; 218 var lenght_i = bar_category.length - 1;
212 - for (var i=lenght_i;i>=0;i--) { 219 + for (var i = lenght_i; i >= 0; i--) {
213 bar_category[i].classList.remove("brillance"); 220 bar_category[i].classList.remove("brillance");
214 } 221 }
215 } 222 }
@@ -235,7 +242,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -235,7 +242,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
235 .data(legend_keys) 242 .data(legend_keys)
236 .enter() 243 .enter()
237 .append('g') 244 .append('g')
238 - .attr('class', d=>d) 245 + .attr('class', d => d)
239 .on("mouseover", mouseoverlegend) 246 .on("mouseover", mouseoverlegend)
240 .on("mouseleave", mouseleavelegend); 247 .on("mouseleave", mouseleavelegend);
241 248
@@ -257,8 +264,8 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -257,8 +264,8 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
257 xpos; 264 xpos;
258 265
259 // Get Max legend key length for later display 266 // Get Max legend key length for later display
260 - const text_length_list = legend.selectAll('text.legend')._groups.map(el=>el[0].getComputedTextLength())  
261 - const keycol_length = Math.max(...text_length_list) + 40 267 + const text_length_list = legend.selectAll('text.legend')._groups.map(el => el[0].getComputedTextLength())
  268 + const keycol_length = Math.max(...text_length_list) + 40
262 269
263 legend 270 legend
264 .attr("transform", function (d, i) { 271 .attr("transform", function (d, i) {
@@ -347,7 +354,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -347,7 +354,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
347 354
348 } 355 }
349 356
350 - function ymax_from_stacked(stacked_data){ 357 + function ymax_from_stacked(stacked_data) {
351 358
352 // Get the max y to plot 359 // Get the max y to plot
353 // If no data at all, force to 0 360 // If no data at all, force to 0
@@ -377,7 +384,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -377,7 +384,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
377 var stacked_data = stack(data) 384 var stacked_data = stack(data)
378 385
379 const y_max = ymax_from_stacked(stacked_data); 386 const y_max = ymax_from_stacked(stacked_data);
380 - yScale.domain([0, y_max ]); 387 + yScale.domain([0, y_max]);
381 388
382 const area = d3.area() 389 const area = d3.area()
383 .x(d => xScale(d.data.period)) 390 .x(d => xScale(d.data.period))
@@ -395,11 +402,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -395,11 +402,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
395 .append("title") 402 .append("title")
396 .text(({key}) => key); 403 .text(({key}) => key);
397 404
398 - paths.selectAll("area")  
399 - .on("mouseover", mouseover)  
400 - .on("mousemove", mousemove)  
401 - .on("mouseleave", mouseleave);  
402 -  
403 } 405 }
404 406
405 407
@@ -414,7 +416,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -414,7 +416,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
414 var stacked_data = stack(data) 416 var stacked_data = stack(data)
415 417
416 const y_max = ymax_from_stacked(stacked_data); 418 const y_max = ymax_from_stacked(stacked_data);
417 - yScale.domain([0, y_max ]); 419 + yScale.domain([0, y_max]);
418 420
419 // first draw one group for one category containing all bars over periods 421 // first draw one group for one category containing all bars over periods
420 let groups = svg.selectAll("g.category") 422 let groups = svg.selectAll("g.category")