diff options
| -rw-r--r-- | mirrors/static/mirror_status.js | 97 | ||||
| -rw-r--r-- | sitestatic/archweb.css | 11 | ||||
| -rw-r--r-- | templates/mirrors/mirror_details.html | 7 |
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 0000000..1c510ce --- /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 2a91c39..24a0f12 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 1817584..32ef8a7 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 %} |