Enable mirror status graph resizing
Signed-off-by: Dan McGee <dan@archlinux.org>
This commit is contained in:
parent
07d2fc5d35
commit
aeeb4718e8
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user