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

body {
  overflow-y:scroll;
}

</style>
<body>

<br> <br> <br> <br> <br>

<div class="gallery" id="chart"></div>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/bullet.js"></script>
<script>

var width = 960,
    height = 55,
    margin = {top: 5, right: 40, bottom: 20, left: 120};

var chart = nv.models.bullet()
    .width(width - margin.right - margin.left)
    .height(height - margin.top - margin.bottom);


  data = [
  {"title":"Revenue","subtitle":"US$, in thousands","ranges":[-150,-225,-300],"measures":[-220],"markers":[-250]}
  /*
  //TODO: fix the tooltip offset if multiple
  ,
  {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21],"markers":[26]},
  {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550]},
  {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000],"markers":[1000]},
  {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
  */
];

  //TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
  var vis = d3.select("#chart").selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("class", "bullet nvd3")
      .attr("width", width)
      .attr("height", height)
    //.append("g")
      //.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

  vis
      .transition()
      .duration(1000)
      .call(chart);


  window.transition = function() {
    vis.datum(randomize);

    vis
      .transition()
      .duration(1000)
      .call(chart);
  };


function randomize(d) {
  if (!d.randomizer) d.randomizer = randomizer(d);
  d.ranges = d.ranges.map(d.randomizer);
  d.markers = d.markers.map(d.randomizer);
  d.measures = d.measures.map(d.randomizer);
  return d;
}

function randomizer(d) {
  var k = d3.max(d.ranges) * .2;
  return function(d) {
    return Math.max(0, d + k * (Math.random() - .5));
  };
}


d3.select('body').on('click', window.transition);


</script>