summaryrefslogtreecommitdiff
path: root/mirrors/static
diff options
context:
space:
mode:
authorDan McGee <dan@archlinux.org>2012-11-10 15:41:09 -0600
committerDan McGee <dan@archlinux.org>2012-11-10 15:41:09 -0600
commit07d2fc5d358992a52908cccbbca4a11d01e98da3 (patch)
tree735357c0f23f80dcce3866f50afcf38c1a9202d8 /mirrors/static
parent86102c6e645451c03e3e576060eba7f93350bf6b (diff)
Add initial version of mirror status chart
Still have some hardcoded stuff to rip out and replace to make this a bit more dynamic on things like sizing, but for now, this is a great start. Signed-off-by: Dan McGee <dan@archlinux.org>
Diffstat (limited to 'mirrors/static')
-rw-r--r--mirrors/static/mirror_status.js97
1 files changed, 97 insertions, 0 deletions
diff --git a/mirrors/static/mirror_status.js b/mirrors/static/mirror_status.js
new file mode 100644
index 00000000..1c510cee
--- /dev/null
+++ b/mirrors/static/mirror_status.js
@@ -0,0 +1,97 @@
+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 margin = {top: 20, right: 20, bottom: 30, left: 40},
+ width = 1200 - margin.left - margin.right,
+ height = 450 - margin.top - margin.bottom;
+
+ var color = d3.scale.category20(),
+ 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");
+
+ var svg = d3.select(chart_id).append("svg")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .append("g")
+ .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+ 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();
+
+ svg.append("g")
+ .attr("class", "x axis")
+ .attr("transform", "translate(0," + height + ")")
+ .call(x_axis)
+ .append("text")
+ .attr("class", "label")
+ .attr("x", width)
+ .attr("y", -6)
+ .style("text-anchor", "end")
+ .text("Check Time (UTC)");
+
+ svg.append("g")
+ .attr("class", "y axis")
+ .call(y_axis)
+ .append("text")
+ .attr("class", "label")
+ .attr("transform", "rotate(-90)")
+ .attr("y", 6)
+ .attr("dy", ".71em")
+ .style("text-anchor", "end")
+ .text("Duration (seconds)");
+
+ svg.selectAll(".dot")
+ .data(data)
+ .enter()
+ .append("circle")
+ .attr("class", "dot")
+ .attr("r", 3.5)
+ .attr("cx", function(d) { return x(d.check_time); })
+ .attr("cy", function(d) { return y(d.duration); })
+ .style("fill", function(d) { return color(d.url); });
+
+ var legend = svg.selectAll(".legend")
+ .data(color.domain())
+ .enter().append("g")
+ .attr("class", "legend")
+ .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+ legend.append("rect")
+ .attr("x", width - 18)
+ .attr("width", 18)
+ .attr("height", 18)
+ .style("fill", color);
+
+ legend.append("text")
+ .attr("x", width - 24)
+ .attr("y", 9)
+ .attr("dy", ".35em")
+ .style("text-anchor", "end")
+ .text(function(d) { return d; });
+ });
+
+ var resize_timeout = null;
+ var real_resize = function() {
+ resize_timeout = null;
+ /* TODO: implement resize */
+ };
+ jQuery(window).resize(function() {
+ if (resize_timeout) {
+ clearTimeout(resize_timeout);
+ }
+ resize_timeout = setTimeout(real_resize, 200);
+ });
+}