From 4fd50fa622b13ecc5104919c0e7ed51f64734d92 Mon Sep 17 00:00:00 2001 From: Dan McGee Date: Sun, 14 Apr 2013 15:23:09 -0500 Subject: Tweaks to mirror status chart generation * Use 'jQuery' rather than '$' * Use same colors for URLs in every chart for clarity Signed-off-by: Dan McGee --- mirrors/static/mirror_status.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/mirrors/static/mirror_status.js b/mirrors/static/mirror_status.js index 4a57128a..241f5c61 100644 --- a/mirrors/static/mirror_status.js +++ b/mirrors/static/mirror_status.js @@ -1,13 +1,15 @@ function draw_graphs(location_url, log_url, container_id) { - $.when($.getJSON(location_url), $.getJSON(log_url)) + jQuery.when(jQuery.getJSON(location_url), jQuery.getJSON(log_url)) .then(function(loc_data, log_data) { - $.each(loc_data[0].locations, function(i, val) { - mirror_status(container_id, val, log_data[0]); + /* use the same color selection for a given URL in every graph */ + var color = d3.scale.category10(); + jQuery.each(loc_data[0].locations, function(i, val) { + mirror_status(container_id, val, log_data[0], color); }); }); } -function mirror_status(container_id, check_loc, log_data) { +function mirror_status(container_id, check_loc, log_data, color) { var draw_graph = function(chart_id, data) { var jq_div = jQuery(chart_id); @@ -15,8 +17,7 @@ function mirror_status(container_id, check_loc, log_data) { width = jq_div.width() - margin.left - margin.right, height = jq_div.height() - margin.top - margin.bottom; - var color = d3.scale.category10(), - x = d3.time.scale.utc().range([0, width]), + var x = d3.time.scale.utc().range([0, width]), y = d3.scale.linear().range([height, 0]), x_axis = d3.svg.axis().scale(x).orient("bottom"), y_axis = d3.svg.axis().scale(y).orient("left"); @@ -95,8 +96,9 @@ function mirror_status(container_id, check_loc, log_data) { .text(function(d) { return d.url + "\n" + d.duration.toFixed(3) + " secs\n" + d.check_time.toUTCString(); }); /* add a legend for good measure */ + var active = jQuery.map(data, function(item, i) { return item.url; }); var legend = svg.selectAll(".legend") - .data(color.domain()) + .data(active) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); @@ -149,9 +151,9 @@ function mirror_status(container_id, check_loc, log_data) { /* create the containers, defer the actual graph drawing */ var chart_id = 'status-chart-' + check_loc.id; - $(container_id).append('

' + check_loc.country + ' (' + check_loc.source_ip + '), IPv' + check_loc.ip_version + '

'); - $(container_id).append('
'); - $(container_id).append('
'); + jQuery(container_id).append('

' + check_loc.country + ' (' + check_loc.source_ip + '), IPv' + check_loc.ip_version + '

'); + jQuery(container_id).append('
'); + jQuery(container_id).append('
'); setTimeout(function() { draw_graph('#' + chart_id, cached_data); }, 0); -- cgit v1.2.3-54-g00ecf