Draw the total categorie's charge curve

hitier
1 parent 7c1b38be
Showing 2 changed files with 53 additions and 13 deletions Show diff stats
app/main/static/css/charges.css
app/main/static/js/charges.js
+.line {
+    fill: none;
+    stroke: orangered;
+    stroke-width: 2px;
+    z-index: -1;
+}
+
 .horizontalY {
     /*fill : none;*/
-    shape-rendering : crispEdges;
-    stroke : lightgrey;
-    stroke-width : 1px;
+    shape-rendering: crispEdges;
+    stroke: lightgrey;
+    stroke-width: 1px;
 }
+
 .horizontalY0 {
-    stroke-width : 0px;
+    stroke-width: 0px;
 }
  
 #charge_table,
@@ -103,9 +103,25 @@ function build_chart(div_selector, data_url, project_name, category) {
         // var categories = data.columns.slice(1)
         var periods = d3.map(data, d => d.period)
         var categories_total_charge = {}
+        var periods_total_charge = []
  
-        // Get the charge sum for each categories over periods
+        // First, we build the total charge by period;
+        // it will be used for the line drawing above bars.
+        //
+        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)
+            var row = {}
+            row['period'] = d.period
+            row['total'] = d3.sum(period_values)
+            periods_total_charge.push(row)
+        });
+
+        // Then we 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
+        //
         data.forEach(function (d) {
             Object.keys(d).forEach(function (k) {
                     if (categories_total_charge.hasOwnProperty(k)) {
@@ -117,7 +133,8 @@ function build_chart(div_selector, data_url, project_name, category) {
             )
         })
  
-        // Now, filter only categories that have some charge
+        // 2- Now, filter only categories that have a non-zero charge
+        //
         var categories = []
         for (var key in categories_total_charge) {
             if (categories_total_charge[key] > 0) {
@@ -125,12 +142,14 @@ function build_chart(div_selector, data_url, project_name, category) {
             }
         }
  
-        // This forme list is the color_scale domain.
+        // This former list we use as color_scale domain.
         // And that allows us to build the legend
+        //
         color_scale.domain(categories)
         addlegend(color_scale)
  
-        // Build the stacked data for stacked bars
+        // Now build the stacked data for stacked bars
+        //
         var stack = d3.stack()
             .keys(categories)
         // .order(d3.stackOrderNone)
@@ -140,17 +159,17 @@ function build_chart(div_selector, data_url, project_name, category) {
         // Xaxis
         //
         // x scale from the periods list
-        const x = d3.scaleBand()
+        const xScale = d3.scaleBand()
             .domain(periods)
             .range([0, width])
             .padding(0.2);
  
-        const xAxis = d3.axisBottom(x)
+        const xAxis = d3.axisBottom(xScale)
  
         // Yaxis
         //
         // Get the max y to plot
-        y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
+        var y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
         if (y_max == 0) {
             y_max = 100
         }
@@ -215,6 +234,18 @@ 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
+
+        svg.append("path")
+            .datum(periods_total_charge)
+            .attr("class", "line")
+            .attr("d", line);
+
         // Draw the stacked bars
         //
         // first one group for one category containing all bars over periods
@@ -230,8 +261,8 @@ function build_chart(div_selector, data_url, project_name, category) {
             .enter()
             .append("rect")
             .attr("class", "bar")
-            .attr("x", d => x(d.data.period))
-            .attr("width", x.bandwidth())
+            .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]))
@@ -239,6 +270,7 @@ function build_chart(div_selector, data_url, project_name, category) {
             .on("mousemove", mousemove)
             .on("mouseleave", mouseleave);
  
+
     });
  
 }