diff options
| -rw-r--r-- | mirrors/static/mirror_status.js | 43 |
1 files changed, 28 insertions, 15 deletions
diff --git a/mirrors/static/mirror_status.js b/mirrors/static/mirror_status.js index 1c510ce..277d3c8 100644 --- a/mirrors/static/mirror_status.js +++ b/mirrors/static/mirror_status.js @@ -1,20 +1,10 @@ function mirror_status(chart_id, data_url) { - d3.json(data_url, function(json) { - data = jQuery.map(json['urls'], - function(url, i) { - return jQuery.map(url['logs'], - function(log, j) { - return { - url: url['url'], - duration: log['duration'], - check_time: new Date(log['check_time']) - }; - }); - }); + var jq_div = jQuery(chart_id); + var draw_graph = function(data) { var margin = {top: 20, right: 20, bottom: 30, left: 40}, - width = 1200 - margin.left - margin.right, - height = 450 - margin.top - margin.bottom; + width = jq_div.width() - margin.left - margin.right, + height = jq_div.height() - margin.top - margin.bottom; var color = d3.scale.category20(), x = d3.time.scale.utc().range([0, width]), @@ -22,6 +12,8 @@ function mirror_status(chart_id, data_url) { x_axis = d3.svg.axis().scale(x).orient("bottom"), y_axis = d3.svg.axis().scale(y).orient("left"); + /* remove any existing graph first if we are redrawing after resize */ + d3.select(chart_id).select("svg").remove(); var svg = d3.select(chart_id).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) @@ -31,6 +23,7 @@ function mirror_status(chart_id, data_url) { x.domain(d3.extent(data, function(d) { return d.check_time; })).nice(d3.time.hour); y.domain(d3.extent(data, function(d) { return d.duration; })).nice(); + /* build the axis lines... */ svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") @@ -53,6 +46,7 @@ function mirror_status(chart_id, data_url) { .style("text-anchor", "end") .text("Duration (seconds)"); + /* ...then the points themselves. */ svg.selectAll(".dot") .data(data) .enter() @@ -63,6 +57,7 @@ function mirror_status(chart_id, data_url) { .attr("cy", function(d) { return y(d.duration); }) .style("fill", function(d) { return color(d.url); }); + /* add a legend for good measure */ var legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") @@ -81,12 +76,30 @@ function mirror_status(chart_id, data_url) { .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; }); + }; + + /* invoke the data-fetch + first draw */ + var cached_data = null; + d3.json(data_url, function(json) { + cached_data = jQuery.map(json['urls'], + function(url, i) { + return jQuery.map(url['logs'], + function(log, j) { + return { + url: url['url'], + duration: log['duration'], + check_time: new Date(log['check_time']) + }; + }); + }); + draw_graph(cached_data); }); + /* then hook up a resize handler to redraw if necessary */ var resize_timeout = null; var real_resize = function() { resize_timeout = null; - /* TODO: implement resize */ + draw_graph(cached_data); }; jQuery(window).resize(function() { if (resize_timeout) { |