aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.coffee198
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.js109
-rw-r--r--wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee1
-rw-r--r--wqflask/wqflask/static/new/javascript/get_traits_from_collection.js2
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics_new.html18
5 files changed, 197 insertions, 131 deletions
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 @@
</select>
</div>
{% endif %}
- <div id="update_bar_chart" class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn btn-default update_bar_chart active" value="name">Sort By Name</button>
- <button type="button" class="btn btn-default update_bar_chart" value="value">Sort By Value</button>
+ <div id="update_bar_chart" class="btn-group">
+ <button type="button" class="btn btn-default sort_by_name" value="name">
+ <i class="icon-resize-horizontal"></i> Sort By Name
+ </button>
+ <button type="button" class="btn btn-default sort_by_value" value="value">
+ <i class="icon-signal"></i> Sort By Value
+ </button>
</div>
<!-- <button type="button" class="btn" id="update_bar_chart">
<i class="icon-resize-vertical"></i> Sort By Value
</button>-->
- <button type="button" class="btn" id="color_by_trait">
- <i class="icon-tint"></i> Color by Trait
- </button>
+ <div class="btn-group">
+ <button type="button" class="btn" id="color_by_trait">
+ <i class="icon-tint"></i> Color by Trait
+ </button>
+ </div>
<div id="bar_chart_container">
<div id="bar_chart"></div>
</div>