<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="teststyle.css" rel="stylesheet" type='text/css'>
<style>

body {
  overflow-y:scroll;
  font-family: Arial;
}

text {
  font: 12px sans-serif;
}

</style>
<body class='with-transitions'>
<div class='navigation'>
          Tests:
          <a href="lineChartTest.html">Line Chart</a>
          <a href="stackedAreaChartTest.html">Stacked Area</a>
          <a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
          <a href="ScatterChartTest.html">Scatter</a>
          <a href="realTimeChartTest.html">Real time test</a>
  </div>
<div class='chart third' id="test1">
  <h2>Standard Pie Chart</h2>
  <svg></svg>
</div>

<div class='chart third' id="test2">
  <h2>Donut pie chart</h2>
  <svg></svg>
</div>

<div class='chart third' id="test3">
  <h2>Pie chart with 30 series'</h2>
  <svg></svg>
</div>

<div class='chart third' id='test7'>
  <h2>Pie chart with percent label type</h2>
  <svg></svg>
</div>

<div class='chart third' id="test4">
  <h2>Empty array passed in</h2>
  <svg></svg>
</div>

<div class='chart third' id="test5">
  <h2>Series' have only zero values</h2>
  <svg></svg>
</div>

<div class='chart third' id="test6">
  <h2>NaN, null, undefined values passed in</h2>
  <svg></svg>
</div>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/pie.js"></script>
<script src="../src/models/pieChart.js"></script>
<script src="../src/utils.js"></script>
<script>

var testdata = [
    {
      key: "One",
      y: 5
    },
    {
      key: "Two",
      y: 2
    },
    {
      key: "Three",
      y: 9
    },
    {
      key: "Four",
      y: 7
    },
    {
      key: "Five",
      y: 4
    },
    {
      key: "Six",
      y: 3
    },
    {
      key: "Seven",
      y: .5
    }
  ];

function thirtySeries() {
  var data = [];
  for(var i =0; i < 30; i++) {
    data.push({
      key: "Series-" + i,
      y: Math.floor(Math.random() * 100)
    });
  }
  return data;
}

function defaultChart(containerId, data, labelType) {
  nv.addGraph(function() {
      var width = 500,
          height = 500;

      var chart = nv.models.pieChart()
          .x(function(d) { return d.key })
          .y(function(d) { return d.y })
          .color(d3.scale.category10().range())
          .width(width)
          .height(height)
          .labelType(labelType)
          ;

        d3.select("#" + containerId + " svg")
            .datum(data)
          .transition().duration(1200)
            .attr('width', width)
            .attr('height', height)
            .call(chart);

      nv.utils.windowResize(chart.update);
      return chart;
  });
}

//Adds donut pie chart.
nv.addGraph(function() {

    var width = 500,
        height = 500;

    var chart = nv.models.pieChart()
        .x(function(d) { return d.key })
        .color(d3.scale.category10().range())
        .width(width)
        .height(height)
        .donut(true);

    chart.pie
        .startAngle(function(d) { return d.startAngle/2 -Math.PI/2 })
        .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 });

      d3.select("#test2 svg")
          .datum(testdata)
        .transition().duration(1200)
          .attr('width', width)
          .attr('height', height)
          .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

defaultChart("test1", testdata);
defaultChart("test3", thirtySeries());
defaultChart("test4",[]);
defaultChart("test5",[{key: "Zero series", y: 0}, {key: "Zero series 2", y: 0}]);
defaultChart("test6", [
      {key: "Undefined", y: undefined},
      {key: "Nan", y: NaN},
      {key: "null", y: null},
      {key: "zero", y: 0}
  ])

defaultChart("test7",testdata, "percent");
</script>