X-Git-Url: https://nos-oignons.org/gitweb/website.git/blobdiff_plain/6e0449e71ad3e000b771489dbf45514b243e3f76..HEAD:/assets/weights_graphs.js

diff --git a/assets/weights_graphs.js b/assets/weights_graphs.js
index 71a9fa3..8a30862 100644
--- a/assets/weights_graphs.js
+++ b/assets/weights_graphs.js
@@ -11,33 +11,37 @@ WeightsDrawer.margin = {top: 50, right: 10, bottom: 90, left: 130};
 WeightsDrawer.width = 600 - WeightsDrawer.margin.left - WeightsDrawer.margin.right;
 WeightsDrawer.height = 400 - WeightsDrawer.margin.top - WeightsDrawer.margin.bottom;
 
-WeightsDrawer.parseTime = d3.timeFormat("%Y-%m-%d %H:%M:%S").parse;
-WeightsDrawer.percentFormatter = d3.format("2%");
+WeightsDrawer.parseTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
+WeightsDrawer.percentFormatter = d3.format(".2%");
 
-WeightsDrawer.x = d3.timeDay
+WeightsDrawer.x = d3.time.scale()
     .range([0, WeightsDrawer.width]);
 
-WeightsDrawer.y = d3.scaleLinear()
+WeightsDrawer.y = d3.scale.linear()
     .range([WeightsDrawer.height, 0]);
 
-WeightsDrawer.xAxis = d3.axisBottom(WeightsDrawer.x);
+WeightsDrawer.xAxis = d3.svg.axis()
+    .scale(WeightsDrawer.x)
+    .orient("bottom");
 
-WeightsDrawer.yAxis = d3.axisLeft(WeightsDrawer.y)
+WeightsDrawer.yAxis = d3.svg.axis()
+    .scale(WeightsDrawer.y)
+    .orient("left")
     .tickFormat(function(d) { return (d == 0) ? "" : WeightsDrawer.percentFormatter(d); });
 
-WeightsDrawer.area = d3.area()
+WeightsDrawer.area = d3.svg.area()
     .x(function(d) { return WeightsDrawer.x(d.date); })
     .y0(function(d) { return WeightsDrawer.y(d.y0); })
     .y1(function(d) { return WeightsDrawer.y(d.y0 + d.y); });
 
-WeightsDrawer.stack = d3.stack()
-    .value(function(d) { return d.values; });
+WeightsDrawer.stack = d3.layout.stack()
+    .values(function(d) { return d.values; });
 
-WeightsDrawer.onionoo_url = "https://onionoo.torproject.org/weights?type=relay&contact=adminsys@nos-oignons.net";
+WeightsDrawer.onionoo_url = "https://onionoo.torproject.org/weights?type=relay&contact=%20%20%20%200x9F29C15D42A8B6F3";
 
 WeightsDrawer.periods = [
     { id: "1_month", label: L10n.t_1_month },
-    { id: "3_months", label: L10n.t_3_months },
+    { id: "6_months", label: L10n.t_6_months },
     { id: "1_year", label: L10n.t_1_year },
     { id: "5_years", label: L10n.t_5_years },
   ];
@@ -64,7 +68,7 @@ WeightsDrawer.extract_values = function(history, interval, minTime, maxTime) {
   return values;
 }
 
-WeightsDrawer.color = d3.scaleOrdinal();
+WeightsDrawer.color = d3.scale.ordinal();
 WeightsDrawer.color.domain(nos_oignons_relays.map(function(r) {return r.fingerprint}));
 WeightsDrawer.color.range(nos_oignons_relays.map(function(r) {return r.color}));
 
@@ -96,7 +100,11 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) {
     }
   });
 
-  drawer.svg = d3.select(drawer.selector).append("svg")
+  var wrapper = d3.select(drawer.selector).append("div")
+      .style("display", "flex")
+      .style("align-items", "flex-start");
+
+  drawer.svg = wrapper.append("svg")
       .attr("width", WeightsDrawer.width + WeightsDrawer.margin.left + WeightsDrawer.margin.right)
       .attr("height", WeightsDrawer.height + WeightsDrawer.margin.top + WeightsDrawer.margin.bottom)
     .append("g")
@@ -184,26 +192,32 @@ WeightsDrawer.prototype.draw_weights_graph = function(raw_data) {
       .attr("class", "y axis")
       .call(WeightsDrawer.yAxis);
 
-  var legend = drawer.svg.selectAll(".legend")
-      .data(WeightsDrawer.color.domain().slice().reverse())
-    .enter().append("g")
-      .attr("class", "legend")
-      .attr("transform", function(d, i) { return "translate(0," + ((i * 20) - WeightsDrawer.margin.top) + ")"; });
-
-  legend.append("rect")
-      .attr("x", WeightsDrawer.width - 18)
-      .attr("width", 18)
-      .attr("height", 18)
-      .style("fill", WeightsDrawer.color);
-
-  legend.append("text")
-      .attr("x", WeightsDrawer.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;
-      });
+  var legendDiv = wrapper.append("div")
+      .style("overflow-y", "auto")
+      .style("max-height", (WeightsDrawer.height + WeightsDrawer.margin.top + WeightsDrawer.margin.bottom) + "px")
+      .style("min-width", "90px")
+      .style("padding-left", "10px")
+      .style("padding-top", WeightsDrawer.margin.top + "px")
+      .style("box-sizing", "border-box");
+
+  WeightsDrawer.color.domain().slice().reverse().forEach(function(d) {
+    var name = nos_oignons_relays.filter(function(r) { return r.fingerprint == d; })[0].name;
+    var item = legendDiv.append("div")
+        .style("display", "flex")
+        .style("align-items", "center")
+        .style("margin-bottom", "3px")
+        .style("white-space", "nowrap");
+    item.append("span")
+        .style("display", "inline-block")
+        .style("width", "14px")
+        .style("min-width", "14px")
+        .style("height", "14px")
+        .style("background-color", WeightsDrawer.color(d))
+        .style("margin-right", "5px");
+    item.append("span")
+        .style("font-size", "11px")
+        .text(name);
+  });
 };
 
 WeightsDrawer.prototype.refresh_graph = function() {