diff options
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> |