From 0695303cae83e524ca5b4db159b2c1e1adcb9f24 Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Wed, 11 Dec 2013 23:15:30 +0000 Subject: Got sort by name/value buttons working and committing before trying to put some of the d3 code into a function --- .../wqflask/static/new/javascript/bar_chart.coffee | 198 ++++++++++++++------- wqflask/wqflask/static/new/javascript/bar_chart.js | 109 ++++++------ .../javascript/get_traits_from_collection.coffee | 1 + .../new/javascript/get_traits_from_collection.js | 2 + .../templates/show_trait_statistics_new.html | 18 +- 5 files changed, 197 insertions(+), 131 deletions(-) (limited to 'wqflask') diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee index 6af14687..f59d947d 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee @@ -60,75 +60,138 @@ class Bar_Chart ) - d3.select(".update_bar_chart").on("click", => - sort_by = $('.update_bar_chart.active').val() - console.log("sort_by: ", sort_by) - if @attributes.length > 0 - attribute = $("#color_attribute").val() - if sort_by = "value" - console.log("sorting by value") - #if $("#update_bar_chart").html() == 'Sort By Value' - #$("#update_bar_chart").html('Sort By Name') - sortItems = (a, b) -> - return a[1] - b[1] - - @svg.selectAll(".bar") - .data(@sorted_samples()) - .transition() - .duration(1000) - .attr("y", (d) => - - return @y_scale(d[1]) - ) - .attr("height", (d) => - return @plot_height - @y_scale(d[1]) - ) - .style("fill", (d) => - if @attributes.length > 0 - return @attr_color_dict[attribute][d[2][attribute]] - else - return "steelblue" - ) - .select("title") - .text((d) => - return d[1] - ) - sorted_sample_names = (sample[0] for sample in @sorted_samples()) - x_scale = d3.scale.ordinal() - .domain(sorted_sample_names) - .rangeBands([0, @plot_width], .1) - $('.x.axis').remove() - @add_x_axis(x_scale) - else - console.log("sorting by name") - #$("#update_bar_chart").html('Sort By Value') - @svg.selectAll(".bar") - .data(@samples) - .transition() - .duration(1000) - .attr("y", (d) => - return @y_scale(d[1]) - ) - .attr("height", (d) => - return @plot_height - @y_scale(d[1]) - ) - .style("fill", (d) => - if @attributes.length > 0 - return @attr_color_dict[attribute][d[2][attribute]] - else - return "steelblue" - ) - .select("title") - .text((d) => - return d[1] - ) - x_scale = d3.scale.ordinal() - .domain(@sample_names) - .rangeBands([0, @plot_width], .1) - $('.x.axis').remove() - @add_x_axis(x_scale) + + $(".sort_by_value").on("click", => + console.log("sorting by value") + sortItems = (a, b) -> + return a[1] - b[1] + + @svg.selectAll(".bar") + .data(@sorted_samples()) + .transition() + .duration(1000) + .attr("y", (d) => + return @y_scale(d[1]) + ) + .attr("height", (d) => + return @plot_height - @y_scale(d[1]) + ) + .style("fill", (d) => + if @attributes.length > 0 + return @attr_color_dict[attribute][d[2][attribute]] + else + return "steelblue" + ) + .select("title") + .text((d) => + return d[1] + ) + sorted_sample_names = (sample[0] for sample in @sorted_samples()) + x_scale = d3.scale.ordinal() + .domain(sorted_sample_names) + .rangeBands([0, @plot_width], .1) + $('.x.axis').remove() + @add_x_axis(x_scale) + ) + + $(".sort_by_name").on("click", => + console.log("sorting by name") + #$("#update_bar_chart").html('Sort By Value') + @svg.selectAll(".bar") + .data(@samples) + .transition() + .duration(1000) + .attr("y", (d) => + return @y_scale(d[1]) + ) + .attr("height", (d) => + return @plot_height - @y_scale(d[1]) + ) + .style("fill", (d) => + if @attributes.length > 0 + return @attr_color_dict[attribute][d[2][attribute]] + else + return "steelblue" + ) + .select("title") + .text((d) => + return d[1] + ) + x_scale = d3.scale.ordinal() + .domain(@sample_names) + .rangeBands([0, @plot_width], .1) + $('.x.axis').remove() + @add_x_axis(x_scale) ) + #d3.select(".update_bar_chart").on("click", => + # console.log("THIS IS:", $(this)) + # sort_by = $(this).val() + # console.log("sort_by: ", sort_by) + # if @attributes.length > 0 + # attribute = $("#color_attribute").val() + # if sort_by = "value" + # console.log("sorting by value") + # sortItems = (a, b) -> + # return a[1] - b[1] + # + # @svg.selectAll(".bar") + # .data(@sorted_samples()) + # .transition() + # .duration(1000) + # .attr("y", (d) => + # + # return @y_scale(d[1]) + # ) + # .attr("height", (d) => + # return @plot_height - @y_scale(d[1]) + # ) + # .style("fill", (d) => + # if @attributes.length > 0 + # return @attr_color_dict[attribute][d[2][attribute]] + # else + # return "steelblue" + # ) + # .select("title") + # .text((d) => + # return d[1] + # ) + # sorted_sample_names = (sample[0] for sample in @sorted_samples()) + # x_scale = d3.scale.ordinal() + # .domain(sorted_sample_names) + # .rangeBands([0, @plot_width], .1) + # $('.x.axis').remove() + # @add_x_axis(x_scale) + # else + # console.log("sorting by name") + # #$("#update_bar_chart").html('Sort By Value') + # @svg.selectAll(".bar") + # .data(@samples) + # .transition() + # .duration(1000) + # .attr("y", (d) => + # return @y_scale(d[1]) + # ) + # .attr("height", (d) => + # return @plot_height - @y_scale(d[1]) + # ) + # .style("fill", (d) => + # if @attributes.length > 0 + # return @attr_color_dict[attribute][d[2][attribute]] + # else + # return "steelblue" + # ) + # .select("title") + # .text((d) => + # return d[1] + # ) + # x_scale = d3.scale.ordinal() + # .domain(@sample_names) + # .rangeBands([0, @plot_width], .1) + # $('.x.axis').remove() + # @add_x_axis(x_scale) + #) + d3.select("#color_by_trait").on("click", => @open_trait_selection() @@ -367,7 +430,6 @@ class Bar_Chart return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] ) - trim_values: (trait_sample_data) -> trimmed_samples = {} diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index 17bada7e..63a71857 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -70,63 +70,58 @@ } return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]); }); - d3.select(".update_bar_chart").on("click", function() { - var attribute, sortItems, sort_by, sorted_sample_names, x_scale; - sort_by = $('.update_bar_chart.active').val(); - console.log("sort_by: ", sort_by); - if (_this.attributes.length > 0) { - attribute = $("#color_attribute").val(); - } - if (sort_by = "value") { - console.log("sorting by value"); - sortItems = function(a, b) { - return a[1] - b[1]; - }; - _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).attr("y", function(d) { - return _this.y_scale(d[1]); - }).attr("height", function(d) { - return _this.plot_height - _this.y_scale(d[1]); - }).style("fill", function(d) { - if (_this.attributes.length > 0) { - return _this.attr_color_dict[attribute][d[2][attribute]]; - } else { - return "steelblue"; - } - }).select("title").text(function(d) { - return d[1]; - }); - sorted_sample_names = (function() { - var _i, _len, _ref, _results; - _ref = this.sorted_samples(); - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - sample = _ref[_i]; - _results.push(sample[0]); - } - return _results; - }).call(_this); - x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1); - $('.x.axis').remove(); - return _this.add_x_axis(x_scale); - } else { - console.log("sorting by name"); - _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) { - return _this.y_scale(d[1]); - }).attr("height", function(d) { - return _this.plot_height - _this.y_scale(d[1]); - }).style("fill", function(d) { - if (_this.attributes.length > 0) { - return _this.attr_color_dict[attribute][d[2][attribute]]; - } else { - return "steelblue"; - } - }).select("title").text(function(d) { - return d[1]; - }); - x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1); - $('.x.axis').remove(); - return _this.add_x_axis(x_scale); - } + $(".sort_by_value").on("click", function() { + var sortItems, sorted_sample_names, x_scale; + console.log("sorting by value"); + sortItems = function(a, b) { + return a[1] - b[1]; + }; + _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).attr("y", function(d) { + return _this.y_scale(d[1]); + }).attr("height", function(d) { + return _this.plot_height - _this.y_scale(d[1]); + }).style("fill", function(d) { + if (_this.attributes.length > 0) { + return _this.attr_color_dict[attribute][d[2][attribute]]; + } else { + return "steelblue"; + } + }).select("title").text(function(d) { + return d[1]; + }); + sorted_sample_names = (function() { + var _i, _len, _ref, _results; + _ref = this.sorted_samples(); + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + sample = _ref[_i]; + _results.push(sample[0]); + } + return _results; + }).call(_this); + x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1); + $('.x.axis').remove(); + return _this.add_x_axis(x_scale); + }); + $(".sort_by_name").on("click", function() { + var x_scale; + console.log("sorting by name"); + _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) { + return _this.y_scale(d[1]); + }).attr("height", function(d) { + return _this.plot_height - _this.y_scale(d[1]); + }).style("fill", function(d) { + if (_this.attributes.length > 0) { + return _this.attr_color_dict[attribute][d[2][attribute]]; + } else { + return "steelblue"; + } + }).select("title").text(function(d) { + return d[1]; + }); + x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1); + $('.x.axis').remove(); + return _this.add_x_axis(x_scale); }); d3.select("#color_by_trait").on("click", function() { return _this.open_trait_selection(); diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee index 43a518b3..db398809 100644 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee @@ -30,6 +30,7 @@ trait_click = () -> url: this_trait_url, success: color_by_trait ) + $.colorbox.close() color_by_trait = (trait_sample_data, textStatus, jqXHR) -> #trait_sample_data = trait_sample_data diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js index 137a6ce8..fac543f8 100644 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js @@ -38,6 +38,8 @@ }); }; + $.colorbox.close(); + color_by_trait = function(trait_sample_data, textStatus, jqXHR) { return root.bar_chart.color_by_trait(trait_sample_data); }; diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html index e658484e..6d6b1d24 100644 --- a/wqflask/wqflask/templates/show_trait_statistics_new.html +++ b/wqflask/wqflask/templates/show_trait_statistics_new.html @@ -31,16 +31,22 @@ {% endif %} -
- - +
+ +
- +
+ +
-- cgit v1.2.3