graphnion.*.draw: Passage à l'API basée sur les promesses

[website.git] / assets / pie_graphs.js

diff --git a/assets/pie_graphs.js b/assets/pie_graphs.js
index e607fa5c9649d82948a55340e4806e79e0272688..5349961a490b448e750357f57d09b6f8d7b9c8ef 100644 (file)
--- a/assets/pie_graphs.js
+++ b/assets/pie_graphs.js
@@ -9,13 +9,13 @@ PieDrawer.formatPercent = d3.format(".2%");
 PieDrawer.color_nos_oignons = "#ffa430";
 PieDrawer.color_others = "#57075f";
 
-PieDrawer.arc = d3.svg.arc()
+PieDrawer.arc = d3.arc()
     .outerRadius(PieDrawer.radius - 10)
     .innerRadius(PieDrawer.radius - 40);
 
 PieDrawer.labelRadius = PieDrawer.radius - 15;
 
-PieDrawer.pie = d3.layout.pie()
+PieDrawer.pie = d3.pie()
     .sort(null)
     .value(function(d) { return d.frac; });
 
@@ -37,33 +37,34 @@ PieDrawer.prototype.draw = function() {
       .text(L10n.loading);
 
   var field_getter = this.getField;
-  d3.json(PieDrawer.onionoo_url + "&fields=fingerprint," + this.getFieldName(), function(error, raw_data) {
-    var frac_nos_oignons = 0;
-    raw_data['relays'].forEach(function(d) {
-      nos_oignons_relays.forEach(function(r) {
-        if (r.fingerprint == d.fingerprint) {
-          var value = field_getter(d);
-          if (value) {
-            frac_nos_oignons += value;
+  d3.json(PieDrawer.onionoo_url + "&fields=fingerprint," + this.getFieldName())
+    .then(function(raw_data) {
+      var frac_nos_oignons = 0;
+      raw_data['relays'].forEach(function(d) {
+        nos_oignons_relays.forEach(function(r) {
+          if (r.fingerprint == d.fingerprint) {
+            var value = field_getter(d);
+            if (value) {
+              frac_nos_oignons += value;
+            }
           }
-        }
+        });
       });
-    });
-    var frac_others = 1 - frac_nos_oignons;
+      var frac_others = 1 - frac_nos_oignons;
 
-    data = [ { name: L10n.nos_oignons, frac: frac_nos_oignons, color: PieDrawer.color_nos_oignons, },
-             { name: L10n.others,      frac: frac_others,      color: PieDrawer.color_others }, ];
+      data = [ { name: L10n.nos_oignons, frac: frac_nos_oignons, color: PieDrawer.color_nos_oignons, },
+               { name: L10n.others,      frac: frac_others,      color: PieDrawer.color_others }, ];
 
-    text.text(PieDrawer.formatPercent(data[0].frac));
+      text.text(PieDrawer.formatPercent(data[0].frac));
 
-    var g = svg.selectAll(".arc")
-        .data(PieDrawer.pie(data))
-      .enter().append("g")
-        .attr("class", "arc");
+      var g = svg.selectAll(".arc")
+          .data(PieDrawer.pie(data))
+        .enter().append("g")
+          .attr("class", "arc");
 
-    g.append("path")
-        .attr("d", PieDrawer.arc)
-        .style("fill", function(d) { return d.data.color; });
+      g.append("path")
+          .attr("d", PieDrawer.arc)
+          .style("fill", function(d) { return d.data.color; });
 
   });
 }