summaryrefslogtreecommitdiff
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
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>
-rw-r--r--mirrors/static/mirror_status.js97
-rw-r--r--sitestatic/archweb.css11
-rw-r--r--templates/mirrors/mirror_details.html7
3 files changed, 115 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);
+ });
+}
diff --git a/sitestatic/archweb.css b/sitestatic/archweb.css
index 2a91c393..24a0f121 100644
--- a/sitestatic/archweb.css
+++ b/sitestatic/archweb.css
@@ -877,6 +877,17 @@ table td.country {
display: inline;
}
+#visualize-mirror .axis path,
+#visualize-mirror .axis line {
+ fill: none;
+ stroke: #000;
+ shape-rendering: crispEdges;
+}
+
+#visualize-mirror .dot {
+ stroke: #000;
+}
+
/* dev/TU biographies */
#arch-bio-toc {
width: 75%;
diff --git a/templates/mirrors/mirror_details.html b/templates/mirrors/mirror_details.html
index 18175845..32ef8a7a 100644
--- a/templates/mirrors/mirror_details.html
+++ b/templates/mirrors/mirror_details.html
@@ -104,14 +104,21 @@
{% endfor %}
</tbody>
</table>
+
+ <h3>Mirror Status Chart</h3>
+
+ <div id="visualize-mirror" class="visualize-chart"></div>
</div>
{% load cdn %}{% jquery %}{% jquery_tablesorter %}
+<script type="text/javascript" src="{% static "d3.v2.min.js" %}"></script>
<script type="text/javascript" src="{% static "archweb.js" %}"></script>
+<script type="text/javascript" src="{% static "mirror_status.js" %}"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#available_urls:has(tbody tr)").tablesorter(
{widgets: ['zebra'], sortList: [[0,0]],
headers: { 6: { sorter: 'mostlydigit' }, 7: { sorter: 'mostlydigit' }, 8: { sorter: 'mostlydigit' } } });
+ mirror_status("#visualize-mirror", "./json/");
});
</script>
{% endblock %}