diff options
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/histogram.coffee | 22 | ||||
| -rwxr-xr-x | wqflask/wqflask/static/new/javascript/histogram.js | 35 |
2 files changed, 34 insertions, 23 deletions
diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee index 879c0fb8..b27a389e 100755 --- a/wqflask/wqflask/static/new/javascript/histogram.coffee +++ b/wqflask/wqflask/static/new/javascript/histogram.coffee @@ -4,7 +4,6 @@ class Histogram constructor: (@sample_list, @sample_group) ->
@sort_by = "name"
@format_count = d3.format(",.0f") #a formatter for counts
- @get_sample_vals()
@margin = {top: 10, right: 30, bottom: 30, left: 30}
@plot_width = 960 - @margin.left - @margin.right
@@ -12,21 +11,25 @@ class Histogram @x_buffer = @plot_width/20
@y_buffer = @plot_height/20
+ @plot_height -= @y_buffer
+
+ @redraw(@sample_list)
+ redraw: (sample_list) ->
+ @get_sample_vals(sample_list)
@y_min = d3.min(@sample_vals)
@y_max = d3.max(@sample_vals) * 1.1
-
- @plot_height -= @y_buffer
+
@create_x_scale()
@get_histogram_data()
@create_y_scale()
+ $("#histogram").empty()
@svg = @create_svg()
-
@create_graph()
- get_sample_vals: () ->
- @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
+ get_sample_vals: (sample_list) ->
+ @sample_vals = (sample.value for sample in sample_list when sample.value != null)
create_svg: () ->
svg = d3.select("#histogram")
@@ -113,17 +116,20 @@ class Histogram .attr("class", "bar")
.attr("transform", (d) =>
return "translate(" + @x_scale(d.x) + "," + @y_scale(d.y) + ")")
+
+ rect_width = @x_scale(@histogram_data[0].x + @histogram_data[0].dx) -
+ @x_scale(@histogram_data[0].x)
bar.append("rect")
.attr("x", 1)
- .attr("width", @x_scale(@histogram_data[0].x + @histogram_data[0].dx) - 1)
+ .attr("width", rect_width - 1)
.attr("height", (d) =>
return @plot_height - @y_scale(d.y)
)
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
- .attr("x", @x_scale(@histogram_data[0].dx)/2)
+ .attr("x", rect_width / 2)
.attr("text-anchor", "middle")
.style("fill", "#fff")
.text((d) =>
diff --git a/wqflask/wqflask/static/new/javascript/histogram.js b/wqflask/wqflask/static/new/javascript/histogram.js index 3ab5eefa..94144661 100755 --- a/wqflask/wqflask/static/new/javascript/histogram.js +++ b/wqflask/wqflask/static/new/javascript/histogram.js @@ -5,12 +5,11 @@ root = typeof exports !== "undefined" && exports !== null ? exports : this; Histogram = (function() { - function Histogram(sample_list, sample_group) { - this.sample_list = sample_list; + function Histogram(sample_list1, sample_group) { + this.sample_list = sample_list1; this.sample_group = sample_group; this.sort_by = "name"; this.format_count = d3.format(",.0f"); - this.get_sample_vals(); this.margin = { top: 10, right: 30, @@ -21,30 +20,35 @@ this.plot_height = 500 - this.margin.top - this.margin.bottom; this.x_buffer = this.plot_width / 20; this.y_buffer = this.plot_height / 20; + this.plot_height -= this.y_buffer; + this.redraw(this.sample_list); + } + + Histogram.prototype.redraw = function(sample_list) { + this.get_sample_vals(sample_list); this.y_min = d3.min(this.sample_vals); this.y_max = d3.max(this.sample_vals) * 1.1; - this.plot_height -= this.y_buffer; this.create_x_scale(); this.get_histogram_data(); this.create_y_scale(); + $("#histogram").empty(); this.svg = this.create_svg(); - this.create_graph(); - } + return this.create_graph(); + }; - Histogram.prototype.get_sample_vals = function() { + Histogram.prototype.get_sample_vals = function(sample_list) { var sample; return this.sample_vals = (function() { - var i, len, ref, results; - ref = this.sample_list; + var i, len, results; results = []; - for (i = 0, len = ref.length; i < len; i++) { - sample = ref[i]; + for (i = 0, len = sample_list.length; i < len; i++) { + sample = sample_list[i]; if (sample.value !== null) { results.push(sample.value); } } return results; - }).call(this); + })(); }; Histogram.prototype.create_svg = function() { @@ -97,19 +101,20 @@ }; Histogram.prototype.add_bars = function() { - var bar; + var bar, rect_width; console.log("bar_width:", this.x_scale(this.histogram_data[0].dx)); bar = this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", (function(_this) { return function(d) { return "translate(" + _this.x_scale(d.x) + "," + _this.y_scale(d.y) + ")"; }; })(this)); - bar.append("rect").attr("x", 1).attr("width", this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - 1).attr("height", (function(_this) { + rect_width = this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - this.x_scale(this.histogram_data[0].x); + bar.append("rect").attr("x", 1).attr("width", rect_width - 1).attr("height", (function(_this) { return function(d) { return _this.plot_height - _this.y_scale(d.y); }; })(this)); - return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", this.x_scale(this.histogram_data[0].dx) / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) { + return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", rect_width / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) { return function(d) { var bar_height; bar_height = _this.plot_height - _this.y_scale(d.y); |