Enable mirror status graph resizing

Signed-off-by: Dan McGee <dan@archlinux.org>
This commit is contained in:
Dan McGee 2012-11-10 16:12:15 -06:00
parent 07d2fc5d35
commit aeeb4718e8

View File

@ -1,20 +1,10 @@
function mirror_status(chart_id, data_url) { function mirror_status(chart_id, data_url) {
d3.json(data_url, function(json) { var jq_div = jQuery(chart_id);
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 draw_graph = function(data) {
var margin = {top: 20, right: 20, bottom: 30, left: 40}, var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 1200 - margin.left - margin.right, width = jq_div.width() - margin.left - margin.right,
height = 450 - margin.top - margin.bottom; height = jq_div.height() - margin.top - margin.bottom;
var color = d3.scale.category20(), var color = d3.scale.category20(),
x = d3.time.scale.utc().range([0, width]), 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"), x_axis = d3.svg.axis().scale(x).orient("bottom"),
y_axis = d3.svg.axis().scale(y).orient("left"); 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") var svg = d3.select(chart_id).append("svg")
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) .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); 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(); y.domain(d3.extent(data, function(d) { return d.duration; })).nice();
/* build the axis lines... */
svg.append("g") svg.append("g")
.attr("class", "x axis") .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")") .attr("transform", "translate(0," + height + ")")
@ -53,6 +46,7 @@ function mirror_status(chart_id, data_url) {
.style("text-anchor", "end") .style("text-anchor", "end")
.text("Duration (seconds)"); .text("Duration (seconds)");
/* ...then the points themselves. */
svg.selectAll(".dot") svg.selectAll(".dot")
.data(data) .data(data)
.enter() .enter()
@ -63,6 +57,7 @@ function mirror_status(chart_id, data_url) {
.attr("cy", function(d) { return y(d.duration); }) .attr("cy", function(d) { return y(d.duration); })
.style("fill", function(d) { return color(d.url); }); .style("fill", function(d) { return color(d.url); });
/* add a legend for good measure */
var legend = svg.selectAll(".legend") var legend = svg.selectAll(".legend")
.data(color.domain()) .data(color.domain())
.enter().append("g") .enter().append("g")
@ -81,12 +76,30 @@ function mirror_status(chart_id, data_url) {
.attr("dy", ".35em") .attr("dy", ".35em")
.style("text-anchor", "end") .style("text-anchor", "end")
.text(function(d) { return d; }); .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 resize_timeout = null;
var real_resize = function() { var real_resize = function() {
resize_timeout = null; resize_timeout = null;
/* TODO: implement resize */ draw_graph(cached_data);
}; };
jQuery(window).resize(function() { jQuery(window).resize(function() {
if (resize_timeout) { if (resize_timeout) {