Services : ajout des graphs de bande passante

Le code est sûrement à refactoriser et à mettre aux bons endroits du site.

diff --git a/Services/Participation.html b/Services/Participation.html
index 60b5552290792dec8c24e5d938a78c4c7a14184a..4683683657e4f82e85a79d0a07aab5e02303c837 100644 (file)
--- a/Services/Participation.html
+++ b/Services/Participation.html
@@ -123,3 +123,184 @@ new ConsensusPieDrawer().draw();
 new ExitPieDrawer().draw();
 
 </script>
+
+<h2>Bandwidth</h2>
+
+<h3>3 days / read</h3>
+<div id="bandwidth-3d-read"></div>
+<h3>3 days / write</h3>
+<div id="bandwidth-3d-write"></div>
+<h3>1 week / read</h3>
+<div id="bandwidth-1w-read"></div>
+<h3>1 week / write</h3>
+<div id="bandwidth-1w-write"></div>
+<h3>1 month / read</h3>
+<div id="bandwidth-1m-read"></div>
+<h3>1 month / write</h3>
+<div id="bandwidth-1m-write"></div>
+<h3>3 months / read</h3>
+<div id="bandwidth-3m-read"></div>
+<h3>3 months / write</h3>
+<div id="bandwidth-3m-write"></div>
+<h3>1 year / read</h3>
+<div id="bandwidth-1y-read"></div>
+<h3>1 year / write</h3>
+<div id="bandwidth-1y-write"></div>
+
+<style type="text/css">
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.relay text {
+  text-anchor: end;
+}
+
+</style>
+
+<script type="text/javascript">
+
+var margin = {top: 50, right: 90, bottom: 90, left: 90},
+    width = 600 - margin.left - margin.right,
+    height = 300 - margin.top - margin.bottom;
+
+var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
+    bwFormatter = d3.format(".2r");
+
+var x = d3.time.scale()
+    .range([0, width]);
+
+var y = d3.scale.linear()
+    .range([height, 0]);
+
+var color = d3.scale.category20();
+
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom");
+
+var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient("left")
+    .tickFormat(function(d) { return bwFormatter(d * 8 / (1000 * 1000)) + "Mbit/s"; });
+
+var area = d3.svg.area()
+    .x(function(d) { return x(d.date); })
+    .y0(function(d) { return y(d.y0); })
+    .y1(function(d) { return y(d.y0 + d.y); });
+
+var stack = d3.layout.stack()
+    .values(function(d) { return d.values; });
+
+var onionoo_url = "https://onionoo.torproject.org/bandwidth?type=relay&contact=adminsys@nos-oignons.net";
+
+function draw_bandwidth_graph(raw_data, selector, direction, period) {
+  var svg = d3.select(selector).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 + ")");
+
+  var valid_fingerprints = [];
+  nos_oignons_relays.forEach(function(r) {
+    var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == r.fingerprint; })[0];
+    if (relay_data && relay_data[direction][period]) {
+      valid_fingerprints.push(r.fingerprint);
+    }
+  });
+  color.domain(valid_fingerprints);
+
+  var minTime = d3.min(raw_data.relays.map(function(d) { return d[direction][period] && parseTime(d[direction][period].first); }));
+  var maxTime = d3.max(raw_data.relays.map(function(d) { return d[direction][period] && parseTime(d[direction][period].last); }));
+  var maxTotalBandwidth = 0;
+
+  var data = stack(color.domain().map(function(fingerprint) {
+    var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == fingerprint; })[0];
+    var history = relay_data[direction][period];
+
+    var values = [];
+    var first = parseTime(history.first);
+    var last = parseTime(history.last);
+    var i = 0;
+    for (var current = minTime; current <= maxTime; current = d3.time.second.offset(current, history.interval)) {
+      var value;
+      if (current < first || current > last) {
+        value = 0;
+      } else {
+        value = history.factor * history.values[i++];
+      }
+      values.push({ date: current, y: value });
+    }
+
+    maxTotalBandwidth = maxTotalBandwidth + history.factor * d3.max(history.values);
+
+    return {
+      fingerprint: fingerprint,
+      values: values,
+    };
+  }));
+  x.domain([minTime, maxTime]);
+  y.domain([0, maxTotalBandwidth]);
+
+  var relay = svg.selectAll(".relay")
+      .data(data)
+    .enter().append("g")
+      .attr("class", "relay");
+
+  relay.append("path")
+      .attr("class", "area")
+      .attr("d", function(d) { return area(d.values); })
+      .style("fill", function(d) { return color(d.fingerprint); });
+
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis)
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("transform", "rotate(-90) translate(-10, 0)");
+
+  svg.append("g")
+      .attr("class", "y axis")
+      .call(yAxis);
+
+  var legend = svg.selectAll(".legend")
+      .data(color.domain().slice().reverse())
+    .enter().append("g")
+      .attr("class", "legend")
+      .attr("transform", function(d, i) { return "translate(0," + ((i * 20) - margin.top) + ")"; });
+
+  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 nos_oignons_relays.filter(function(r) { return r.fingerprint == d; })[0].name;
+      });
+};
+
+d3.json(onionoo_url, function(error, raw_data) {
+  draw_bandwidth_graph(raw_data, "#bandwidth-3d-read", "read_history", "3_days");
+  draw_bandwidth_graph(raw_data, "#bandwidth-3d-write", "write_history", "3_days");
+  draw_bandwidth_graph(raw_data, "#bandwidth-1w-read", "read_history", "1_week");
+  draw_bandwidth_graph(raw_data, "#bandwidth-1w-write", "write_history", "1_week");
+  draw_bandwidth_graph(raw_data, "#bandwidth-1m-read", "read_history", "1_month");
+  draw_bandwidth_graph(raw_data, "#bandwidth-1m-write", "write_history", "1_month");
+  draw_bandwidth_graph(raw_data, "#bandwidth-3m-read", "read_history", "3_months");
+  draw_bandwidth_graph(raw_data, "#bandwidth-3m-write", "write_history", "3_months");
+  draw_bandwidth_graph(raw_data, "#bandwidth-1y-read", "read_history", "1_year");
+  draw_bandwidth_graph(raw_data, "#bandwidth-1y-write", "write_history", "1_year");
+});
+
+</script>