Make a draw_categories_bars method to run only when needed

hitier
1 parent 6b44860d
Showing 1 changed file with 34 additions and 23 deletions Show diff stats
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({})