Enable mirror status graph resizing

Signed-off-by: Dan McGee <dan@archlinux.org>

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) {