From: Lunar <lunar@anargeek.net>
Date: Sun, 17 Nov 2013 21:25:59 +0000 (+0100)
Subject: Services : ajout des graphs de bande passante
X-Git-Url: https://nos-oignons.net/gitweb/website.git/commitdiff_plain/a867a8d6f023db7d9265ceef1c9260ecb7d2cfb0?ds=sidebyside
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 60b5552..4683683 100644
--- 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>