Read/write sur le même graph et animations pour la durée

diff --git a/Services/Participation.html b/Services/Participation.html
index aa935da4ce979ef2387fc27065d0b14e18d7e2d6..e3edb6522be22ee7f6f66499fea1a8d91f1cfdc2 100644 (file)
--- a/Services/Participation.html
+++ b/Services/Participation.html
@@ -118,10 +118,10 @@ ExitPieDrawer.prototype.getFieldName = function() {
 ExitPieDrawer.prototype.getField = function(r) {
   return r.exit_probability;
 };
 ExitPieDrawer.prototype.getField = function(r) {
   return r.exit_probability;
 };

-
+/*

 new ConsensusPieDrawer().draw();
 new ExitPieDrawer().draw();
 new ConsensusPieDrawer().draw();
 new ExitPieDrawer().draw();

-
+*/

 </script>
 
 <h2>Bandwidth</h2>
 </script>
 
 <h2>Bandwidth</h2>


@@ -156,16 +156,12 @@ new ExitPieDrawer().draw();
   shape-rendering: crispEdges;
 }
 
   shape-rendering: crispEdges;
 }
 

-.relay text {
-  text-anchor: end;
-}
-

 </style>
 
 <script type="text/javascript">
 
 </style>
 
 <script type="text/javascript">
 

-var margin = {top: 50, right: 90, bottom: 90, left: 100},
-    width = 600 - margin.left - margin.right,
+var margin = {top: 50, right: 90, bottom: 90, left: 130},
+    width = 700 - margin.left - margin.right,

     height = 400 - margin.top - margin.bottom;
 
 var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
     height = 400 - margin.top - margin.bottom;
 
 var parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse,


@@ -186,19 +182,35 @@ var xAxis = d3.svg.axis()
 var yAxis = d3.svg.axis()
     .scale(y)
     .orient("left")
 var yAxis = d3.svg.axis()
     .scale(y)
     .orient("left")

-    .tickFormat(function(d) { return bwFormatter(d) + " Mbit/s"; });
+    .tickFormat(function(d) { return (d == 0) ? "" : bwFormatter(Math.abs(d)) + " Mbit/s " + ((d > 0) ? "in" : "out"); });

 
 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 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 read_stack = d3.layout.stack()
+    .values(function(d) { console.log(JSON.stringify(d)); return d.read_values; });
+var write_stack = d3.layout.stack()
+    .values(function(d) { console.log(JSON.stringify(d)); return d.write_values; })
+    .y(function(d) { return -d.y; });

 
 var onionoo_url = "https://onionoo.torproject.org/bandwidth?type=relay&contact=adminsys@nos-oignons.net";
 
 
 var onionoo_url = "https://onionoo.torproject.org/bandwidth?type=relay&contact=adminsys@nos-oignons.net";
 

-function draw_bandwidth_graph(raw_data, selector, direction, period) {
+function extract_values(history, minTime, maxTime) {
+  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)) {
+    if (first <= current && current <= last) {
+      values.push({ date: current, y: history.factor * history.values[i++] * 8 / 1000000 });
+    }
+  }
+  return values;
+}
+
+function draw_bandwidth_graph(raw_data, selector, period) {

   var svg = d3.select(selector).append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
   var svg = d3.select(selector).append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)


@@ -208,48 +220,59 @@ function draw_bandwidth_graph(raw_data, selector, direction, period) {
   var valid_fingerprints = [];
   nos_oignons_relays.forEach(function(r) {
     var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == r.fingerprint; })[0];
   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]) {
+    if (relay_data && relay_data['read_history'][period] && relay_data['write_history'][period]) {

       valid_fingerprints.push(r.fingerprint);
     }
   });
   color.domain(valid_fingerprints);
 
       valid_fingerprints.push(r.fingerprint);
     }
   });
   color.domain(valid_fingerprints);
 

-  var minTime = d3.max(raw_data.relays.map(function(d) { return d[direction][period] && parseTime(d[direction][period].first); }));
-  var maxTime = d3.min(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)) {
-      if (first <= current && current <= last) {
-        values.push({ date: current, y: history.factor * history.values[i++] * 8 / 1000000 });
-      }
-    }
-
-    maxTotalBandwidth = maxTotalBandwidth + d3.max(values.map(function(d) { return d.y; }));
+  var minTime = d3.max(raw_data.relays.map(function(d) {
+        return d['read_history'][period] && parseTime(d['read_history'][period].first) &&
+               d['write_history'][period] && parseTime(d['write_history'][period].first);
+      }));
+  var maxTime = d3.min(raw_data.relays.map(function(d) {
+        return d['read_history'][period] && parseTime(d['read_history'][period].last) &&
+               d['write_history'][period] && parseTime(d['write_history'][period].last);
+      }));
+  var maxReadBandwidth = 0;
+  var maxWriteBandwidth = 0;
+
+  var data = color.domain().map(function(fingerprint) {
+        var relay_data = raw_data["relays"].filter(function(d) { return d.fingerprint == fingerprint; })[0];
+        var read_history = relay_data['read_history'][period];
+        var write_history = relay_data['write_history'][period];
+        var read_values = extract_values(read_history, minTime, maxTime);
+        var write_values = extract_values(write_history, minTime, maxTime);
+
+        maxReadBandwidth = maxReadBandwidth + d3.max(read_values.map(function(d) { return d.y; }));
+        maxWriteBandwidth = maxWriteBandwidth + d3.max(write_values.map(function(d) { return d.y; }));
+
+        return {
+          fingerprint: fingerprint,
+          read_values: read_values,
+          write_values: write_values,
+        };
+      });

 
 

-    return {
-      fingerprint: fingerprint,
-      values: values,
-    };
-  }));

   x.domain([minTime, maxTime]);
   x.domain([minTime, maxTime]);

-  y.domain([0, maxTotalBandwidth]);
+  y.domain([-maxWriteBandwidth, maxReadBandwidth]);

 
 

-  var relay = svg.selectAll(".relay")
-      .data(data)
+  var read_graph = svg.selectAll(".read_graph")
+      .data(read_stack(data))

     .enter().append("g")
     .enter().append("g")

-      .attr("class", "relay");
+      .attr("class", "read_graph");
+  read_graph.append("path")
+      .attr("class", "area")
+      .attr("d", function(d) { return area(d.read_values); })
+      .style("fill", function(d) { return color(d.fingerprint); });

 
 

-  relay.append("path")
+  var write_graph = svg.selectAll(".write_graph")
+      .data(write_stack(data))
+    .enter().append("g")
+      .attr("class", "write_graph");
+  write_graph.append("path")

       .attr("class", "area")
       .attr("class", "area")

-      .attr("d", function(d) { return area(d.values); })
+      .attr("d", function(d) { return area(d.write_values); })

       .style("fill", function(d) { return color(d.fingerprint); });
 
   svg.append("g")
       .style("fill", function(d) { return color(d.fingerprint); });
 
   svg.append("g")


@@ -287,7 +310,9 @@ function draw_bandwidth_graph(raw_data, selector, direction, period) {
 };
 
 d3.json(onionoo_url, function(error, raw_data) {
 };
 
 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-read", "3_days");
+  draw_bandwidth_graph(raw_data, "#bandwidth-3d-read", "3_months");
+/*

   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-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");


@@ -297,6 +322,7 @@ d3.json(onionoo_url, function(error, raw_data) {
   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");
   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>
 });
 
 </script>