summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan McGee <dan@archlinux.org>2012-11-10 23:12:15 +0100
committerDan McGee <dan@archlinux.org>2012-11-10 23:12:15 +0100
commitaeeb4718e83cd2f82d94b1aa0c0ba36ba21a2b37 (patch)
tree6f629305688b54d2e954216833460991b8954bc5
parent07d2fc5d358992a52908cccbbca4a11d01e98da3 (diff)
downloadarchweb-aeeb4718e83cd2f82d94b1aa0c0ba36ba21a2b37.tar.gz
archweb-aeeb4718e83cd2f82d94b1aa0c0ba36ba21a2b37.tar.xz
Enable mirror status graph resizing
Signed-off-by: Dan McGee <dan@archlinux.org>
-rw-r--r--mirrors/static/mirror_status.js43
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) {