Make a draw_line method to run only when needed

hitier
1 parent 01429777
Showing 1 changed file with 64 additions and 43 deletions Show diff stats
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({})
  
 }