improved legend

Now the legend is always positioned on top, so that no overlapping
with the plot occurs and it's always visible.
The legend is now composed of spans, not an SVG anymore.
Also increased the legend font size to 20px.

4 files changed, 42 insertions, 70 deletions

diff --git a/wqflask/wqflask/static/new/css/bar_chart.css b/wqflask/wqflask/static/new/css/bar_chart.css
index 78d31eee..0dda47c4 100755
--- a/wqflask/wqflask/static/new/css/bar_chart.css
+++ b/wqflask/wqflask/static/new/css/bar_chart.css
@@ -9,6 +9,10 @@
   fill: steelblue;

   shape-rendering: crispEdges;

 }

+

+#legend-left, #legend-right {

+  font-size: 20px;

+}

 /*

 .x.axis path {

   display: none;

diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 8c958e7d..c91918b2 100755
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -238,13 +238,13 @@ class Bar_Chart
     draw_legend: () ->
         $('#legend-left').html(@minimum_values[@attribute])
         $('#legend-right').html(@maximum_values[@attribute])
-        svg_html = '<svg height="10" width="90"> \
-                        <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> \
-                        <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> \
-                        <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> \
-                        <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> \
-                        <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> \
-                        <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> \
+        svg_html = '<svg height="15" width="120"> \
+                        <rect x="0" width="20" height="15" style="fill: rgb(0, 0, 0);"></rect> \
+                        <rect x="20" width="20" height="15" style="fill: rgb(50, 0, 0);"></rect> \
+                        <rect x="40" width="20" height="15" style="fill: rgb(100, 0, 0);"></rect> \
+                        <rect x="60" width="20" height="15" style="fill: rgb(150, 0, 0);"></rect> \
+                        <rect x="80" width="20" height="15" style="fill: rgb(200, 0, 0);"></rect> \
+                        <rect x="100" width="20" height="15" style="fill: rgb(255, 0, 0);"></rect> \
                     </svg>'
         console.log("svg_html:", svg_html)
         $('#legend-colors').html(svg_html)
@@ -403,40 +403,20 @@ class Bar_Chart
         console.log("sorted:", sorted)
         return sorted
 
-    # FIXME: better positioning of the legend
     add_legend: (attribute, distinct_vals) ->
-        legend = @svg.append("g")
-            .attr("class", "legend")
-            .attr("height", 100)
-            .attr("width", 100)
-            .attr('transform', 'translate(-20,50)')
-
-        legend_rect = legend.selectAll('rect')
-                        .data(distinct_vals)
-                        .enter()
-                        .append("rect")
-                        .attr("x", @plot_width - 65)
-                        .attr("width", 10)
-                        .attr("height", 10)
-                        .attr("y", (d, i) =>
-                            return i * 20
-                        )
-                        .style("fill", (d) =>
-                            console.log("TEST:", @attr_color_dict[attribute][d])
-                            return @attr_color_dict[attribute][d]
-                        )
-
-        legend_text = legend.selectAll('text')
-                        .data(distinct_vals)
-                        .enter()
-                        .append("text")
-                        .attr("x", @plot_width - 52)
-                        .attr("y", (d, i) =>
-                            return i*20 + 9    
-                        )
-                        .text((d) =>
-                            return d
-                        )
+        legend_span = d3.select('#bar_chart_legend')
+            .append('div').style('word-wrap', 'break-word')
+            .attr('class', 'legend').selectAll('span')
+            .data(distinct_vals)
+          .enter().append('span').style({'word-wrap': 'normal', 'display': 'inline-block'})
+
+        legend_span.append('span')
+            .style("background-color", (d) =>
+                return @attr_color_dict[attribute][d]
+            )
+            .style({'display': 'inline-block', 'width': '15px', 'height': '15px',\
+                    'margin': '0px 5px 0px 15px'})
+        legend_span.append('span').text((d) => return d).style('font-size', '20px')
 
     open_trait_selection: () ->
         $('#collections_holder').load('/collections/list?color_by_trait #collections_list', =>
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index c392acc8..d20a8615 100755
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -262,7 +262,7 @@
       var svg_html;
       $('#legend-left').html(this.minimum_values[this.attribute]);
       $('#legend-right').html(this.maximum_values[this.attribute]);
-      svg_html = '<svg height="10" width="90"> <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect> <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect> <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect> <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect> <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect> <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect> </svg>';
+      svg_html = '<svg height="15" width="120"> <rect x="0" width="20" height="15" style="fill: rgb(0, 0, 0);"></rect> <rect x="20" width="20" height="15" style="fill: rgb(50, 0, 0);"></rect> <rect x="40" width="20" height="15" style="fill: rgb(100, 0, 0);"></rect> <rect x="60" width="20" height="15" style="fill: rgb(150, 0, 0);"></rect> <rect x="80" width="20" height="15" style="fill: rgb(200, 0, 0);"></rect> <rect x="100" width="20" height="15" style="fill: rgb(255, 0, 0);"></rect> </svg>';
       console.log("svg_html:", svg_html);
       return $('#legend-colors').html(svg_html);
     };
@@ -466,27 +466,26 @@
     };
 
     Bar_Chart.prototype.add_legend = function(attribute, distinct_vals) {
-      var legend, legend_rect, legend_text;
-      legend = this.svg.append("g").attr("class", "legend").attr("height", 100).attr("width", 100).attr('transform', 'translate(-20,50)');
-      legend_rect = legend.selectAll('rect').data(distinct_vals).enter().append("rect").attr("x", this.plot_width - 65).attr("width", 10).attr("height", 10).attr("y", (function(_this) {
-        return function(d, i) {
-          return i * 20;
-        };
-      })(this)).style("fill", (function(_this) {
+      var legend_span;
+      legend_span = d3.select('#bar_chart_legend').append('div').style('word-wrap', 'break-word').attr('class', 'legend').selectAll('span').data(distinct_vals).enter().append('span').style({
+        'word-wrap': 'normal',
+        'display': 'inline-block'
+      });
+      legend_span.append('span').style("background-color", (function(_this) {
         return function(d) {
-          console.log("TEST:", _this.attr_color_dict[attribute][d]);
           return _this.attr_color_dict[attribute][d];
         };
-      })(this));
-      return legend_text = legend.selectAll('text').data(distinct_vals).enter().append("text").attr("x", this.plot_width - 52).attr("y", (function(_this) {
-        return function(d, i) {
-          return i * 20 + 9;
-        };
-      })(this)).text((function(_this) {
+      })(this)).style({
+        'display': 'inline-block',
+        'width': '15px',
+        'height': '15px',
+        'margin': '0px 5px 0px 15px'
+      });
+      return legend_span.append('span').text((function(_this) {
         return function(d) {
           return d;
         };
-      })(this));
+      })(this)).style('font-size', '20px');
     };
 
     Bar_Chart.prototype.open_trait_selection = function() {
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index f2ebbbef..54bd79f2 100755
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -80,20 +80,9 @@
                         </div>
                     </div>
                         <div class="row" style="height: 0px">
-                          <div id="bar_chart_legend" style="margin-left: 900px; margin-top:50px; positive: relative;">
+                          <div id="bar_chart_legend" style="margin-left: 150px; margin-top:50px; positive: relative;">
                             <span id="legend-left"></span>
-                            <span id="legend-colors">
-                            <!--
-                              <svg height="10" width="90">
-                                <rect x="0" width="15" height="10" style="fill: rgb(0, 0, 0);"></rect>
-                                <rect x="15" width="15" height="10" style="fill: rgb(50, 0, 0);"></rect>
-                                <rect x="30" width="15" height="10" style="fill: rgb(100, 0, 0);"></rect>
-                                <rect x="45" width="15" height="10" style="fill: rgb(150, 0, 0);"></rect>
-                                <rect x="60" width="15" height="10" style="fill: rgb(200, 0, 0);"></rect>
-                                <rect x="75" width="15" height="10" style="fill: rgb(255, 0, 0);"></rect>
-                              </svg>
-                            -->
-                            </span>
+                            <span id="legend-colors"></span>
                             <span id="legend-right"></span>
                           </div>
                         </div>
@@ -140,4 +129,4 @@
         <div id="collections_holder"></div>
     </div>
    
-</div>
\ No newline at end of file
+</div>