/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// Create D3 simulation and collision force
var simulation = d3.forceSimulation();
var collisionForce = d3.forceCollide();

// Update bullet positions on tick
simulation.on("tick", function() {
  updatePositions();
});

// updtate positions
function updatePositions() {
  am5.array.each(nodes, function(node) {
    var circle = node.circle;
    // Instead of setting `x` we use `dx`, as `x` is set by the chart
    // each time chart changes its size or something else changes
    circle.setAll({
      dx: node.x - circle.x(),
    })

    node.fy = circle.y(); // `y` might change when div changes its size
  });
}


// nodes array which will be used by simulation
var nodes = [];

// Adds nodes to the nodes array
function addNode(dataItem) {
  var bullets = dataItem.bullets;
  if (bullets) {
    var bullet = bullets[0];
    if (bullet) {
      var circle = bullet.get("sprite");

      if (circle) {
        // We use `fy` for vertical position as we don't want `y` to change.
        // For a horizontal chart, set `fx` instead of `fy`
        var node = {
          x: circle.x(),
          fy: circle.y(),
          circle: circle
        };
        nodes.push(node);
      }
    }
  }
}

// Updates collision forces
function updateForces() {
  simulation.force("collision", collisionForce);

  collisionForce.radius(function(node) {
    var circle = node.circle;
    return circle.get("radius", 1) + 1; // 1 add 1 for padding
  });
}


// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelY: "zoomXY",
  pinchZoomX: true,
  pinchZoomY: true
}));


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererX.new(root, {}),
  visible: false
}));

xAxis.get("renderer").grid.template.set("forceHidden", true);

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {}),
  extraMin: 0.01,
  extraMax: 0.01
}));

yAxis.get("renderer").grid.template.set("forceHidden", true);

// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.LineSeries.new(root, {
  calculateAggregates: true,
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "y",
  valueXField: "x",
  valueField: "value"
}));

series.strokes.template.set("visible", false);


// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
var circleTemplate = am5.Template.new({});

series.bullets.push(function() {
  var bulletCircle = am5.Circle.new(root, {
    radius: 5,
    fill: series.get("fill"),
    fillOpacity: 0.8,
    tooltipText: "{y}",
    tooltipY: 0,
  }, circleTemplate);

  bulletCircle.states.create("hover", {
    fill: chart.get("colors").getIndex(4)
  })

  return am5.Bullet.new(root, {
    sprite: bulletCircle
  });
});


// Add heat rule
// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
// this makes radius different, depending on the value.
// remove if you want all circles to be of the same size
series.set("heatRules", [{
  target: circleTemplate,
  min: 2,
  max: 9,
  dataField: "value",
  key: "radius"
}]);

// Set data
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data

// Generate random data
var data = [];
for (var i = 0; i < 500; i++) {
  data.push({
    y: am5.math.round(Math.random() * 50 + 100, 2),
    x: 0,
    value: Math.round(Math.random() * 10)
  });
}

series.data.setAll(data);

// Update forces whenever data is parsed
series.events.on("datavalidated", function() {
  // Needs a timeout as bullets are created a bit later
  setTimeout(function() {
    am5.array.each(series.dataItems, function(dataItem) {
      addNode(dataItem);
    })
    simulation.nodes(nodes);
    updateForces();
  }, 500)
});

// Update bullet positions when chart bounds change
chart.plotContainer.events.on("boundschanged", function() {
  updateForces();
  simulation.restart();
});


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/

chart.appear(1000, 100);