From 6b44860dcd510d1afc7d6a4f5d123c0b5a4494c7 Mon Sep 17 00:00:00 2001 From: Richard Hitier Date: Sat, 10 Apr 2021 19:01:31 +0200 Subject: [PATCH] Make a draw_line method to run only when needed --- app/main/static/js/charges.js | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------- 1 file changed, 64 insertions(+), 43 deletions(-) diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js index daf54bf..44acbcf 100644 --- a/app/main/static/js/charges.js +++ b/app/main/static/js/charges.js @@ -27,15 +27,27 @@ const dot_radius = 6; // const y = d3.scaleLinear() // .range([height, 0]); // +// x scale from the periods list +const xScale = d3.scaleBand() + .range([0, width]) + .padding(0.2); + +const yScale = d3.scaleLinear() + .range([height, 0]) 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 + } } else if (category == 'service') { var chart_title = "Charges par service" var category_title = "Service" + var draw_total_line = draw_totalcharge_line + } else { + alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !") } const svg = d3.select(div_selector).append("svg") @@ -82,6 +94,7 @@ function build_chart(div_selector, data_url, project_name, category) { .attr("r", dot_radius); mouseleave(d); } + var mouseoverdot = function (e, d) { d3.select(this).transition() .duration(1) @@ -122,15 +135,12 @@ function build_chart(div_selector, data_url, project_name, category) { .text(d => d); } - d3.csv(data_url).then(data => { - // var categories = data.columns.slice(1) - var periods = d3.map(data, d => d.period) - var categories_total_charge = {} - var periods_total_charge = [] - - // First, we build the total charge by period; + function draw_totalcharge_line(data) { + // Build the total charge by period; // it will be used for the line drawing above bars. // + var periods_total_charge = [] + data.forEach(function (d) { // get the list of values for all columns except the first one which is the period name var period_values = Object.values(d).slice(1) @@ -140,11 +150,48 @@ function build_chart(div_selector, data_url, project_name, category) { periods_total_charge.push(row) }); - // Then we filter datas to only keep non zero categori/s + // the line itselet + // + const line = d3.line() + .x(d => (xScale.bandwidth() / 2) + xScale(d.period)) // décalage pour centrer au milieu des barres + .y(d => yScale(d.total)) + .curve(d3.curveMonotoneX); // Fonction de courbe permettant de l'adoucir + + svg.append("path") + .datum(periods_total_charge) + .attr("class", "total-line") + .attr("d", line); + + // data dots at each point + // + svg.selectAll("line-circle") + .data(periods_total_charge) + .enter().append("circle") + .attr("class", "total-circle") + .attr("r", dot_radius) + .attr("cx", function (d) { + return (xScale.bandwidth() / 2) + xScale(d.period) + }) + .attr("cy", function (d) { + return yScale(d.total); + }) + .on("mouseover", mouseoverdot) + .on("mouseleave", mouseleavedot); + ; + + } + + d3.csv(data_url).then(data => { + // var categories = data.columns.slice(1) + var periods = d3.map(data, d => d.period) + xScale.domain(periods) + + // Filter datas to only keep non zero categori/s // // 1- Get the charge sum for each categories over periods // That will leave '0' to categories with no charge at all // + var categories_total_charge = {} data.forEach(function (d) { Object.keys(d).forEach(function (k) { if (categories_total_charge.hasOwnProperty(k)) { @@ -181,12 +228,6 @@ function build_chart(div_selector, data_url, project_name, category) { // Xaxis // - // x scale from the periods list - const xScale = d3.scaleBand() - .domain(periods) - .range([0, width]) - .padding(0.2); - const xAxis = d3.axisBottom(xScale) // Yaxis @@ -199,9 +240,7 @@ function build_chart(div_selector, data_url, project_name, category) { // Enhance it by %ratio to leave room on the top of the graph y_max = y_max * height_ratio - const yScale = d3.scaleLinear() - .range([height, 0]) - .domain([0, y_max]); + yScale.domain([0, y_max]); const yAxis = d3.axisLeft(yScale) .ticks(y_ticks_num) @@ -241,7 +280,10 @@ function build_chart(div_selector, data_url, project_name, category) { .attr("x", -margin.top - 70) .text("Charge (% ETP)") + // // Write chart Title + // + // part 1 svg.append("text") .attr("x", (width / 2)) @@ -257,37 +299,16 @@ function build_chart(div_selector, data_url, project_name, category) { .style("font-size", "12px") .text(chart_title); + // // Draw the total charge line // - const line = d3.line() - .x(d => (xScale.bandwidth() / 2) + xScale(d.period)) // décalage pour centrer au milieu des barres - .y(d => yScale(d.total)) - .curve(d3.curveMonotoneX); // Fonction de courbe permettant de l'adoucir - // the line itselet - svg.append("path") - .datum(periods_total_charge) - .attr("class", "total-line") - .attr("d", line); - - // data dots at each point - svg.selectAll("line-circle") - .data(periods_total_charge) - .enter().append("circle") - .attr("class", "total-circle") - .attr("r", dot_radius) - .attr("cx", function (d) { - return (xScale.bandwidth() / 2) + xScale(d.period) - }) - .attr("cy", function (d) { - return yScale(d.total); - }) - .on("mouseover", mouseoverdot) - .on("mouseleave", mouseleavedot); - ; + draw_total_line(data) + // // Draw the stacked bars // + // first one group for one category containing all bars over periods let groups = svg.selectAll("g.category") .data(stacked_data) @@ -311,6 +332,6 @@ function build_chart(div_selector, data_url, project_name, category) { .on("mouseleave", mouseleave); - }); + }); // end of d3.csv().then({}) } -- libgit2 0.21.2