Commit 2a36f990fa5091702effde669b089596fe922d57
1 parent
dffcf5b7
Exists in
master
and in
4 other branches
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") |