// JS
var chart;
JSC.fetch('./resources/appleProductsSales.csv')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    renderChart(JSC.csv2Json(text));
  });
function renderChart(data) {
  var series = [
    {
      name: 'Comulative Devices sold',
      type: 'area',
      points: JSC.nest()
        .key('date')
        .rollup('total_units_sold')
        .points(data)
    },
    {
      name: 'Active Devices',
      type: 'line',
      color: 'lightgray',
      points: JSC.nest()
        .key('date')
        .rollup('active_devices')
        .points(data)
    }
  ];
  chart = JSC.chart('chartDiv', {
    debug: true,
    title: {
      label: {
        text: 'Cumulative Devices (thousands)'
      },
      position: 'center'
    },
    defaultPoint_marker_type: 'none',
    legend_visible: false,
    xAxis: [
      {
        id: 'mainX',
        defaultTick: {
          label_rotate: 90,
          gridLine_visible: false
        }
      },
      {
        // Distance from the chart area edge. Negative values offset the axis towards the middle of the chart area.
        caOffset: -50,
        scale_syncWith: 'mainX',
        defaultTick_enabled: false,
        customTicks: [
          {
            value: ['Q4 2013', 'Q4 2018'],
            rangeMode: 'measure',
            label: {
              text: 'LIFESPAN',
              color: 'white'
            },
            line_color: 'white'
          }
        ]
      }
    ],
    yAxis: [
      {
        defaultTick: {
          enabled: false,
          rangeMode: 'measure',
          gridLine_visible: false
        },
        alternateGridFill: 'none',
        id: 'mainY',
        orientation: 'opposite',
        // Distance from the chart area edge. Negative values offset the axis towards the middle of the chart area.
        caOffset: -55,
        customTicks: [
          {
            value: 1471.63,
            label_text: 'Active'
          },
          {
            value: 2443.54,
            label_text: 'Sold'
          },
          {
            value: [1471.63, 2443.54],
            label_text: 'Retired'
          }
        ]
      },
      {
        scale_syncWith: 'mainY',
        defaultTick_line_visible: false
      }
    ],
    series: series
  });
}