Add horizontal legend for graphs

Anais Amato · hitier
1 parent ef5fae02
Showing 1 changed file with 55 additions and 20 deletions Show diff stats
app/main/static/js/charges.js
@@ -6,9 +6,9 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
  
     const main_elt = document.getElementById("main")
  
-    const margin = {top: 60, right: 350, bottom: 100, left: 90},
+    const margin = {top: 60, right: 150, bottom: 200, left: 90},
         width = main_elt.offsetWidth * 0.95 - margin.left - margin.right,
-        height = 500 - margin.top - margin.bottom;
+        height = 600 - margin.top - margin.bottom;
  
     const height_ratio = 1.2;    // how murch room to give above chart for lisibility
  
@@ -17,8 +17,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
  
     const y_ticks_num = 5        // dont show to many y ticks for lisibility
  
-    const legend_cell_size = 15; // size of legend colored scare
-    const legend_x = width + 20; // begin legend a bit after the end of the chart
+    const legendRectSize = 15; // size of rectangle in legend
+
+    // const legend_cell_size = 15; // size of legend colored scare
+    // const legend_x = width + 20; // begin legend a bit after the end of the chart
+    // const legend_y = 600 - margin.bottom + 20; // begin legend a bit after the end of the chart
  
     const dot_radius = 6;        // size of total line dot
  
@@ -131,28 +134,60 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
  
     var addlegend = function (color_scale) {
  
+        // add horizontal legend
         let reverse_keys = color_scale.domain().reverse();
+        var legendSpacing = 5;
  
-        let legend = svg.append('g')
-            .attr('transform', 'translate(' + legend_x + ', -30)');
+        var legendWrap = svg.append('g')
+            .attr('width', '100%')
+            .attr('class', 'legendwrap');
  
-        legend.selectAll()
+        var legend = svg.select('.legendwrap').selectAll('.legend')
             .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));
+            .enter()
+            .append('g')
+            .attr('class', 'legend');
  
-        legend.selectAll()
-            .data(reverse_keys)
-            .enter().append('text')
-            .attr("transform", (d, i) => "translate(30, " + (i * legend_cell_size + legend_cell_size / 1.6) + ")")
+        legend.append('rect')
+            .attr('width', legendRectSize)
+            .attr('height', legendRectSize)
+            .style('fill', color_scale)
+            .style('stroke', color_scale);
+
+        legend.append('text')
             .attr('class', 'legend')
-            .style("fill", "black")
-            .text(d => d);
+            .attr('x', legendRectSize + legendSpacing * 1.5)
+            .attr('y', 13)
+            .text(function(d) {
+                return d;
+            });
+
+        var ypos = 0,
+            newxpos = 0,
+            maxwidth = 0,
+            xpos;
+
+        legend
+            .attr("transform", function(d, i) {
+                var length = d3.select(this).select("text").node().getComputedTextLength() + 40;
+                xpos = newxpos;
+                if (width < xpos + length) {
+                    newxpos = xpos = 0;
+                    ypos += 30;
+                }
+                newxpos += length;
+                if (newxpos > maxwidth) maxwidth = newxpos;
+
+                return 'translate(' + xpos + ',' + ypos + ')';
+
+            });
+
+
+        legendWrap
+            .attr("transform", function(d, i) {
+                return "translate(0 ," + (height + 100) + ")";
+            });
+
     }
  
     function draw_categories_grouped(data, categories) {