New draw_categories_grouped() method called on capacities

hitier
1 parent a48677c4
Showing 1 changed file with 91 additions and 48 deletions Show diff stats
app/main/static/js/charges.js
@@ -10,7 +10,7 @@ const height_ratio = 1.2
 const tooltip_offset = {dx: 0, dy: 100}
 const tooltip_offset_dot = {dx: 20, dy: 60}
-const color_scale = d3.scaleOrdinal(d3.schemeCategory10);
+const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
 const y_ticks_num = 5
@@ -37,16 +37,20 @@ const yScale = d3.scaleLinear()
 function build_chart(div_selector, data_url, project_name, category) {
+    var chart_title = ""
+    var category_title = ""
+    var draw_total_line = function(data, categories){}
+    var draw_categories_bars = function(data, categories){}
     if (category == 'capacity') {
-        var chart_title = "Charges par fonction"
-        var category_title = "Fonction"
-        var draw_total_line = function (data) { }
-        var draw_categories_bars = draw_categories_grouped
+        chart_title = "Charges par fonction"
+        category_title = "Fonction"
+        //draw_total_line
+        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
+        chart_title = "Charges par service"
+        category_title = "Service"
+        draw_total_line = draw_totalcharge_line
+        draw_categories_bars = draw_categories_stacked
     } else {
         alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
     }
@@ -136,18 +140,72 @@ 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_grouped(data, categories) {
+
+        // Another scale for subgroup position
+        var xCategories = d3.scaleBand()
+            .domain(categories)
+            .range([0, xScale.bandwidth()])
+            .padding([0.05])
+
+        svg.append("g")
+            .selectAll("g")
+            // Enter in data = loop group per group
+            .data(data)
+            .enter()
+            .append("g")
+            .attr("transform", function (d) {
+                return "translate(" + xScale(d.period) + ",0)";
+            })
+            .selectAll("rect")
+            .data(function (d) {
+                return categories.map(function (key) {
+                    return {key: key, value: d[key]};
+                });
+            })
+            .enter().append("rect")
+            .attr("x", function (d) {
+                return xCategories(d.key);
+            })
+            .attr("y", function (d) {
+                return yScale(d.value);
+            })
+            .attr("width", xCategories.bandwidth())
+            .attr("height", function (d) {
+                return height - yScale(d.value);
+            })
+            .attr("fill", function (d) {
+                return colorScale(d.key);
+            });
+
     }
-    function draw_categories_stacked(stacked_data) {
+    function draw_categories_stacked(data, categories) {
+
+        // Now build the stacked data for stacked bars
+        //
+        var stack = d3.stack()
+            .keys(categories)
+        // .order(d3.stackOrderNone)
+        // .offset(d3.stackOffsetNone);
+        var stacked_data = stack(data)
+
+        // Get the max y to plot
+        var y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
+        if (y_max == 0) {
+            y_max = 100
+        }
+        // Enhance it by %ratio to leave room on the top of the graph
+        y_max = y_max * height_ratio
+
+        yScale.domain([0, y_max]);
+
         // 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));
+            .style("fill", (d) => colorScale(d.key));
         // then each period/category bar
         let rect = groups.selectAll("rect")
@@ -191,7 +249,8 @@ function build_chart(div_selector, data_url, project_name, category) {
         svg.append("path")
             .datum(periods_total_charge)
             .attr("class", "total-line")
-            .attr("d", line);
+            .attr("d", line)
+            .lower();// set it below bars if called after
         // data dots at each point
         //
@@ -207,7 +266,8 @@ function build_chart(div_selector, data_url, project_name, category) {
                 return yScale(d.total);
             })
             .on("mouseover", mouseoverdot)
-            .on("mouseleave", mouseleavedot);
+            .on("mouseleave", mouseleavedot)
+            .lower();// set it below bars if called after
         ;
     }
@@ -243,19 +303,22 @@ function build_chart(div_selector, data_url, project_name, category) {
             }
         }
-        // This former list we use as color_scale domain.
-        // And that allows us to build the legend
         //
-        color_scale.domain(categories)
-        addlegend(color_scale)
+        // Draw the  bars, stacked or group
+        //
+        draw_categories_bars(data, categories)
-        // Now build the stacked data for stacked bars
         //
-        var stack = d3.stack()
-            .keys(categories)
-        // .order(d3.stackOrderNone)
-        // .offset(d3.stackOffsetNone);
-        var stacked_data = stack(data)
+        //  Draw the total charge line ( may be)
+        //
+        draw_total_line(data, categories)
+
+        //
+        // This former list we use as color_scale domain.
+        // And that allows us to build the legend
+        //
+        colorScale.domain(categories)
+        addlegend(colorScale)
         // Xaxis
         //
@@ -263,15 +326,6 @@ function build_chart(div_selector, data_url, project_name, category) {
         // Yaxis
         //
-        // Get the max y to plot
-        var y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
-        if (y_max == 0) {
-            y_max = 100
-        }
-        // Enhance it by %ratio to leave room on the top of the graph
-        y_max = y_max * height_ratio
-
-        yScale.domain([0, y_max]);
         const yAxis = d3.axisLeft(yScale)
             .ticks(y_ticks_num)
@@ -302,6 +356,7 @@ function build_chart(div_selector, data_url, project_name, category) {
             .attr("x2", width)
             .attr("y1", d => yScale(d))
             .attr("y2", d => yScale(d))
+            .lower();// set it below bars if called after
         // Write Y axis title
         svg.append("text")
@@ -309,7 +364,7 @@ function build_chart(div_selector, data_url, project_name, category) {
             .attr("transform", "rotate(-90)")
             .attr("y", -margin.left + 40)
             .attr("x", -margin.top - 70)
-            .text("Charge (% ETP)")
+            .text("Charge (% ETP)");
         //
         // Write chart Title
@@ -330,18 +385,6 @@ function build_chart(div_selector, data_url, project_name, category) {
             .style("font-size", "12px")
             .text(chart_title);
-        //
-        //  Draw the total charge line
-        //
-
-        draw_total_line(data)
-
-        //
-        // Draw the stacked bars
-        //
-
-        draw_categories_bars(stacked_data)
-
     }); // end of d3.csv().then({})