From a48677c466a7aa1445def41b9c8b743484297f2e Mon Sep 17 00:00:00 2001 From: Richard Hitier Date: Sat, 10 Apr 2021 19:09:59 +0200 Subject: [PATCH] Make a draw_categories_bars method to run only when needed --- app/main/static/js/charges.js | 57 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 23 deletions(-) diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js index 44acbcf..017c5de 100644 --- a/app/main/static/js/charges.js +++ b/app/main/static/js/charges.js @@ -40,12 +40,13 @@ function build_chart(div_selector, data_url, project_name, category) { if (category == 'capacity') { var chart_title = "Charges par fonction" var category_title = "Fonction" - var draw_total_line = function(data){ //do nothing - } + var draw_total_line = function (data) { } + var draw_categories_bars = draw_categories_grouped } else if (category == 'service') { var chart_title = "Charges par service" var category_title = "Service" var draw_total_line = draw_totalcharge_line + var draw_categories_bars = draw_categories_stacked } else { alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !") } @@ -135,6 +136,36 @@ function build_chart(div_selector, data_url, project_name, category) { .text(d => d); } + function draw_categories_grouped(data){ + // do nothing at the moment + console.log("HEY grouped ") + } + + function draw_categories_stacked(stacked_data) { + // first one group for one category containing all bars over periods + let groups = svg.selectAll("g.category") + .data(stacked_data) + .enter() + .append("g") + .style("fill", (d) => color_scale(d.key)); + + // then each period/category bar + let rect = groups.selectAll("rect") + .data(d => d) + .enter() + .append("rect") + .attr("class", "bar") + .attr("x", d => xScale(d.data.period)) + .attr("width", xScale.bandwidth()) + // .attr("width", 5) + .attr("y", d => yScale(d[1])) + .attr("height", d => height - yScale(d[1] - d[0])) + .on("mouseover", mouseover) + .on("mousemove", mousemove) + .on("mouseleave", mouseleave); + + } + function draw_totalcharge_line(data) { // Build the total charge by period; // it will be used for the line drawing above bars. @@ -309,27 +340,7 @@ function build_chart(div_selector, data_url, project_name, category) { // Draw the stacked bars // - // first one group for one category containing all bars over periods - let groups = svg.selectAll("g.category") - .data(stacked_data) - .enter() - .append("g") - .style("fill", (d) => color_scale(d.key)); - - // then each period/category bar - let rect = groups.selectAll("rect") - .data(d => d) - .enter() - .append("rect") - .attr("class", "bar") - .attr("x", d => xScale(d.data.period)) - .attr("width", xScale.bandwidth()) - // .attr("width", 5) - .attr("y", d => yScale(d[1])) - .attr("height", d => height - yScale(d[1] - d[0])) - .on("mouseover", mouseover) - .on("mousemove", mousemove) - .on("mouseleave", mouseleave); + draw_categories_bars(stacked_data) }); // end of d3.csv().then({}) -- libgit2 0.21.2