Add color legend

hitier
1 parent 3c21ae9f
Showing 2 changed files with 90 additions and 33 deletions Show diff stats
app/main/static/css/charges.css
app/main/static/js/charges.js
@@ -18,6 +18,15 @@
     display: inline-block;
 }
  
+text.legend {
+    font-size: 12px;
+}
+
+rect.legend {
+    stroke: white;
+    stroke-width: 0.5pt;
+}
+
 rect.bar {
     stroke: white;
     stroke-width: 0.5pt;
@@ -27,7 +36,6 @@ rect.bar:hover {
     -webkit-filter: brightness(1.5);
     -moz-filter: brightness(1.5);
     filter: brightness(1.5);
-    stroke-width: 0;
 }
  
 .tooltip {
-var margin = {top: 60, right: 30, bottom: 130, left: 90},
-    width = 1000 - margin.left - margin.right,
+const margin = {top: 60, right: 270, bottom: 100, left: 90},
+    width = 1200 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
  
 const tooltip_offset = {dx: 0, dy: 100}
  
+const color_scale = d3.scaleOrdinal(d3.schemeCategory10);
+
+const legend_cell_size = 15;
  
 // TODO: set main scales attr here then domain later
 // const x = d3.scaleBand()
@@ -14,19 +17,6 @@ const tooltip_offset = {dx: 0, dy: 100}
 //     .range([height, 0]);
 //
  
-var color = d3.scaleOrdinal()
-    .range(["#4e79a7",
-        "#f28e2c",
-        "#e15759",
-        "#76b7b2",
-        "#59a14f",
-        "#edc949",
-        "#af7aa1",
-        "#ff9da7",
-        "#9c755f",
-        "#bab0ab"
-    ]);
-
 function build_chart(div_selector, data_url, project_name, category) {
  
     if (category == 'capacity') {
@@ -75,38 +65,99 @@ function build_chart(div_selector, data_url, project_name, category) {
             .style("top", (e.pageY - tooltip_offset.dy) + "px")
     }
  
+    var addlegend = function (color_scale) {
+
+        let reverse_keys = color_scale.domain().reverse();
+
+        let legend = svg.append('g')
+            .attr('transform', 'translate(850, -30)');
+
+        legend.selectAll()
+            .data(reverse_keys)
+            .enter().append('rect')
+            .attr('height', legend_cell_size + 'px')
+            .attr('width', legend_cell_size + 'px')
+            .attr('class', 'legend')
+            .attr('x', 5)
+            .attr('y', (d, i) => i * legend_cell_size)
+            .style("fill", d => color_scale(d));
+
+        legend.selectAll()
+            .data(reverse_keys)
+            .enter().append('text')
+            .attr("transform", (d, i) => "translate(30, " + (i * legend_cell_size + legend_cell_size / 1.6) + ")")
+            .attr('class', 'legend')
+            // .style("font-size", "10px")
+            // .style("font-weight", "bold")
+            .style("fill", "black")
+            .text(d => d);
+    }
+
     d3.csv(data_url).then(data => {
-        var services = data.columns.slice(1)
+        // var categories = data.columns.slice(1)
         var periods = d3.map(data, d => d.period)
+        var categories_total_charge = {}
+
+        // 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)) {
+                        categories_total_charge[k] += +d[k]
+                    } else {
+                        categories_total_charge[k] = 0
+                    }
+                }
+            )
+        })
+
+        // Now, filter only categories that have some charge
+        var categories = []
+        for (var key in categories_total_charge) {
+            if (categories_total_charge[key] > 0) {
+                categories.push(key)
+            }
+        }
+
+        // This forme list is the 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
         var stack = d3.stack()
-            .keys(services)
+            .keys(categories)
         // .order(d3.stackOrderNone)
         // .offset(d3.stackOffsetNone);
         var stacked_data = stack(data)
  
+        // Xaxis
+        //
+        // x scale from the periods list
         const x = d3.scaleBand()
             .domain(periods)
             .range([0, width])
             .padding(0.2);
  
+        const xAxis = d3.axisBottom(x)
+
+        // Yaxis
+        //
         // Get the max y to plot
         y_max = d3.max(stacked_data[stacked_data.length - 1], d => d[1]);
         if (y_max == 0) {
             y_max = 100
         }
-        // Enhance it by 20% to leave room on the top of the graph
+        // Enhance it by 10% to leave room on the top of the graph
         y_max = y_max * 1.1
  
         const y = d3.scaleLinear()
             .range([height, 0])
             .domain([0, y_max]);
  
-        // Sur l'axe horizontal, on filtre les dates afficher
-        const xAxis = d3.axisBottom(x)
-        // .tickValues(x.domain().filter(d => (d.includes("06/0") || d.includes("21/0"))));
-
         const yAxis = d3.axisLeft(y)
+
+        // Draw Xaxis
         svg.append("g")
             .attr("class", "x axis")
             .attr("transform", "translate(0," + height + ")")
@@ -117,17 +168,12 @@ function build_chart(div_selector, data_url, project_name, category) {
             .attr("dy", ".15em")
             .attr("transform", "rotate(-65)");
  
+        // Draw Yaxis
         svg.append("g")
             .attr("class", "y axis")
             .call(yAxis)
-        // .append("text")
-        // .attr("fill", "#000")
-        // .attr("transform", "rotate(-90)")
-        // .attr("y", 6)
-        // .attr("dy", "0.91em")
-        // .style("text-anchor", "end")
-        // .text("rate");
  
+        // Write Y axis title
         svg.append("text")
             .attr("text-anchor", "end")
             .attr("transform", "rotate(-90)")
@@ -135,14 +181,15 @@ 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))
             .attr("y", 0 - (margin.top / 2) - 10)
             .attr("text-anchor", "middle")
             .style("font-size", "16px")
             .text(project_name);
-
-
+        // part 2
         svg.append("text")
             .attr("x", (width / 2))
             .attr("y", 0 - (margin.top / 2) + 10)
@@ -150,11 +197,13 @@ function build_chart(div_selector, data_url, project_name, category) {
             .style("font-size", "12px")
             .text(chart_title);
  
+        // Draw the stacked bars
+        //
         let groups = svg.selectAll("g.category")
             .data(stacked_data)
             .enter()
             .append("g")
-            .style("fill", (d) => color(d.key));
+            .style("fill", (d) => color_scale(d.key));
  
         let rect = groups.selectAll("rect")
             .data(d => d)