aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.coffee172
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.js108
2 files changed, 160 insertions, 120 deletions
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index f59d947d..e1bb36e1 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -2,6 +2,7 @@ root = exports ? this
class Bar_Chart
constructor: (@sample_list, @sample_group) ->
+ @sort_by = "name"
@get_samples()
console.log("sample names:", @sample_names)
if @sample_attr_vals.length > 0
@@ -28,18 +29,19 @@ class Bar_Chart
@create_graph()
d3.select("#color_attribute").on("change", =>
- attribute = $("#color_attribute").val()
+ @attribute = $("#color_attribute").val()
console.log("attr_color_dict:", @attr_color_dict)
- if $("#update_bar_chart").html() == 'Sort By Name'
+ #if $("#update_bar_chart").html() == 'Sort By Name'
+ if @sort_by = "name"
@svg.selectAll(".bar")
.data(@sorted_samples())
.transition()
.duration(1000)
.style("fill", (d) =>
- if attribute == "None"
+ if @attribute == "None"
return "steelblue"
else
- return @attr_color_dict[attribute][d[2][attribute]]
+ return @attr_color_dict[@attribute][d[2][@attribute]]
)
.select("title")
.text((d) =>
@@ -51,79 +53,85 @@ class Bar_Chart
.transition()
.duration(1000)
.style("fill", (d) =>
- if attribute == "None"
+ if @attribute == "None"
return "steelblue"
else
- return @attr_color_dict[attribute][d[2][attribute]]
+ return @attr_color_dict[@attribute][d[2][@attribute]]
)
- @add_legend(attribute, @distinct_attr_vals[attribute])
+ @add_legend(@attribute, @distinct_attr_vals[@attribute])
)
-
-
-
+
$(".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 = "value"
+ if @attributes.length > 0
+ @attribute = $("#color_attribute").val()
+ #sortItems = (a, b) ->
+ # return a[1] - b[1]
+ @rebuild_bar_graph(@sorted_samples())
+ #@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])
+ # )
+ # .select("title")
+ # .text((d) =>
+ # return d[1]
+ # )
+ # #.style("fill", (d) =>
+ # # if @attributes.length > 0
+ # # return @attr_color_dict[attribute][d[2][attribute]]
+ # # else
+ # # return "steelblue"
+ # #)
+ #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)
+ @sort_by = "name"
+ if @attributes.length > 0
+ @attribute = $("#color_attribute").val()
+ @rebuild_bar_graph(@samples)
+ #@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])
+ # )
+ # .select("title")
+ # .text((d) =>
+ # return d[1]
+ # )
+ # .style("fill", (d) =>
+ # if @attributes.length > 0
+ # return @attr_color_dict[attribute][d[2][attribute]]
+ # else
+ # return "steelblue"
+ # )
+ #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()
@@ -197,6 +205,40 @@ class Bar_Chart
)
+
+ rebuild_bar_graph: (samples) ->
+ console.log("samples:", samples)
+ @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])
+ )
+ .select("title")
+ .text((d) =>
+ return d[1]
+ )
+ .style("fill", (d) =>
+ if @attributes.length > 0 and @attribute != "None"
+ console.log("@attribute:", @attribute)
+ console.log("d[2]", d[2])
+ console.log("the_color:", @attr_color_dict[@attribute][d[2][@attribute]])
+ return @attr_color_dict[@attribute][d[2][@attribute]]
+ else
+ return "steelblue"
+ )
+ sample_names = (sample[0] for sample in samples)
+ console.log("sample_names2:", sample_names)
+ x_scale = d3.scale.ordinal()
+ .domain(sample_names)
+ .rangeBands([0, @plot_width], .1)
+ $('.x.axis').remove()
+ @add_x_axis(x_scale)
+
get_attr_color_dict: (vals) ->
@attr_color_dict = {}
console.log("vals:", vals)
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 63a71857..b02ee1da 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -13,6 +13,7 @@
_this = this;
this.sample_list = sample_list;
this.sample_group = sample_group;
+ this.sort_by = "name";
this.get_samples();
console.log("sample names:", this.sample_names);
if (this.sample_attr_vals.length > 0) {
@@ -46,88 +47,85 @@
this.create_scales();
this.create_graph();
d3.select("#color_attribute").on("change", function() {
- var attribute;
- attribute = $("#color_attribute").val();
+ _this.attribute = $("#color_attribute").val();
console.log("attr_color_dict:", _this.attr_color_dict);
- if ($("#update_bar_chart").html() === 'Sort By Name') {
+ if (_this.sort_by = "name") {
_this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
- if (attribute === "None") {
+ if (_this.attribute === "None") {
return "steelblue";
} else {
- return _this.attr_color_dict[attribute][d[2][attribute]];
+ return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
}
}).select("title").text(function(d) {
return d[1];
});
} else {
_this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) {
- if (attribute === "None") {
+ if (_this.attribute === "None") {
return "steelblue";
} else {
- return _this.attr_color_dict[attribute][d[2][attribute]];
+ return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
}
});
}
- return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]);
+ return _this.add_legend(_this.attribute, _this.distinct_attr_vals[_this.attribute]);
});
$(".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);
+ _this.sort_by = "value";
+ if (_this.attributes.length > 0) {
+ _this.attribute = $("#color_attribute").val();
+ }
+ return _this.rebuild_bar_graph(_this.sorted_samples());
});
$(".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);
+ _this.sort_by = "name";
+ if (_this.attributes.length > 0) {
+ _this.attribute = $("#color_attribute").val();
+ }
+ return _this.rebuild_bar_graph(_this.samples);
});
d3.select("#color_by_trait").on("click", function() {
return _this.open_trait_selection();
});
}
+ Bar_Chart.prototype.rebuild_bar_graph = function(samples) {
+ var sample, sample_names, x_scale,
+ _this = this;
+ console.log("samples:", samples);
+ this.svg.selectAll(".bar").data(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]);
+ }).select("title").text(function(d) {
+ return d[1];
+ }).style("fill", function(d) {
+ if (_this.attributes.length > 0 && _this.attribute !== "None") {
+ console.log("@attribute:", _this.attribute);
+ console.log("d[2]", d[2]);
+ console.log("the_color:", _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]);
+ return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
+ } else {
+ return "steelblue";
+ }
+ });
+ sample_names = (function() {
+ var _i, _len, _results;
+ _results = [];
+ for (_i = 0, _len = samples.length; _i < _len; _i++) {
+ sample = samples[_i];
+ _results.push(sample[0]);
+ }
+ return _results;
+ })();
+ console.log("sample_names2:", sample_names);
+ x_scale = d3.scale.ordinal().domain(sample_names).rangeBands([0, this.plot_width], .1);
+ $('.x.axis').remove();
+ return this.add_x_axis(x_scale);
+ };
+
Bar_Chart.prototype.get_attr_color_dict = function(vals) {
var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _results,
_this = this;
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-23 23:17:11 +0000