[[!meta script="assets/relays"]]
[[!meta script="assets/d3/d3.v3.min"]]

<style type="text/css">

.arc path {
  stroke: #fff;
}

</style>

<div style="float: left; width: 45%">
  <h2 style="text-align: center;">Consensus weight</h2>
  <div id="consensus-pie"></div>
</div>
<div style="float: left; width: 45%; margin-left: 3%">
  <h2 style="text-align: center;">Exit probability</h2>
  <div id="exit-pie"></div>
</div>
<div style="clear: left;"></div>

<script type="text/javascript">

var width = 250,
    height = 250,
    radius = Math.min(width, height) / 2,
    formatPercent = d3.format(".2%");

var color_nos_oignons = "#ffa430";
var color_others = "#57075f";

var arc = d3.svg.arc()
    .outerRadius(radius - 30)
    .innerRadius(radius - 80);

var labelRadius = radius - 15;

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.frac; });

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

var search_terms = "";
nos_oignons_relays.forEach(function(r) {
  search_terms += " $" + r.fingerprint
});

function PieDrawer() { };
PieDrawer.prototype.getSelector = undefined;
PieDrawer.prototype.getFieldName = undefined;
PieDrawer.prototype.getField = undefined;
PieDrawer.prototype.draw = function() {
  var svg = d3.select(this.getSelector()).append("svg")
      .style("margin", "auto")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var text = svg.append("text")
      .attr("text-anchor", "middle")
      .attr("dy", ".35em")
      .text("Loading…");

  var field_getter = this.getField;
  d3.json(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;
          }
        }
      });
    });
    var frac_others = 1 - frac_nos_oignons;

    data = [ { name: 'Nos oignons', frac: frac_nos_oignons, color: color_nos_oignons, },
             { name: 'Others',      frac: frac_others,      color: color_others }, ];

    text.text(formatPercent(data[0].frac));

    var g = svg.selectAll(".arc")
        .data(pie(data))
      .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return d.data.color; });

  });
}

function ConsensusPieDrawer() { };
ConsensusPieDrawer.prototype = new PieDrawer();
ConsensusPieDrawer.prototype.getSelector = function() {
  return "#consensus-pie";
};
ConsensusPieDrawer.prototype.getFieldName = function() {
  return "consensus_weight_fraction";
};
ConsensusPieDrawer.prototype.getField = function(r) {
  return r.consensus_weight_fraction;
};

function ExitPieDrawer() { };
ExitPieDrawer.prototype = new PieDrawer();
ExitPieDrawer.prototype.getSelector = function() {
  return "#exit-pie";
};
ExitPieDrawer.prototype.getFieldName = function() {
  return "exit_probability";
};
ExitPieDrawer.prototype.getField = function(r) {
  return r.exit_probability;
};

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

</script>