From 07d2fc5d358992a52908cccbbca4a11d01e98da3 Mon Sep 17 00:00:00 2001
From: Dan McGee <dan@archlinux.org>
Date: Sat, 10 Nov 2012 15:41:09 -0600
Subject: 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>
---
 mirrors/static/mirror_status.js       | 97 +++++++++++++++++++++++++++++++++++
 sitestatic/archweb.css                | 11 ++++
 templates/mirrors/mirror_details.html |  7 +++
 3 files changed, 115 insertions(+)
 create mode 100644 mirrors/static/mirror_status.js

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 @@ <h3>Available URLs</h3>
             {% 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 %}
-- 
cgit v1.2.3-54-g00ecf