const stream = fc.randomFinancial().stream();
//const data = stream.take(500);
const data = {
  series: stream.take(50),
  crosshair: []
};

var x = d3.scaleTime();
var y = d3.scaleLinear();

const xExtent = fc.extentDate()
  .accessors([d => d.date])

const yExtent = fc.extentLinear()
  .accessors([d => d.high, d => d.low])
  .pad([0.1, 0.1])


const candlesticks = fc.autoBandwidth(fc.seriesCanvasCandlestick())
			.widthFraction(0.75)
			.crossValue(d => d.date)
			.openValue(d => d.open)
			.highValue(d => d.high)
			.lowValue(d => d.low)
			.closeValue(d => d.close)
 
const crosshair = fc
  .annotationSvgCrosshair()
  .xLabel(o => 'x')
  .yLabel(o => 'y');

const canvasMulti = fc.seriesCanvasMulti()
			.series([candlesticks])
      .mapping((data, index, series) => data.series);

const svgMulti = fc.seriesSvgMulti()
			.series([crosshair])
      .mapping((data, index, series) => data.crosshair);

const chart = fc.chartCartesian(x, y)
  .canvasPlotArea(canvasMulti)
  .svgPlotArea(svgMulti);

function render() {
  d3.select('#zoom-chart')
    .datum(data)
    .call(chart);  
  
   // add the pointer component to the plot-area, re-rendering
  // each time the event fires.
  var pointer = fc.pointer()
    .on('point', (event) => {
      data.crosshair = [event[0]];
      render();
    });

  d3.select('#zoom-chart d3fc-svg.plot-area')
    .call(pointer); 
}

function updateData() {
  chart
    .xDomain(xExtent(data.series))
    .yDomain(yExtent(data.series));

  render();
}

updateData()