// JS
var chart;
JSC.fetch('./resources/NYMonthlyWeather.csv')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    chart = renderChart(
      makeSeries(JSC.csv2Json(text))
    );
  });

function renderChart(series) {
  return JSC.chart('chartDiv', {
    annotations: [
      {
        label_text:
          '<b>New York Temperature, 2018</b>',
        position: 'top left'
      }
    ],
    legend: {
      template: '%icon %name',
      position: 'top right'
    },
    defaultTooltip_label_text:
      '<b>%xValue</b><br>%points',
    defaultPoint: {
      tooltip: '%SeriesName: <b>%yValue in</b>',
      outline_width: 0,
      marker_outline_width: 0
    },
    defaultAxis_alternateGridFill: 'none',
    yAxis: [
      {
        id: 'y1',
        defaultTick: {
          label_text: '%value°F',
          line_visible: false
        },
        scale_range: [0, 100]
      },
      {
        id: 'y2',
        orientation: 'right',
        defaultTick: {
          enabled: false
          //label_text: '%value in'
        },
        scale_range: [0, 60]
      }
    ],
    xAxis: {
      scale: {
        type: 'time',
        interval: { unit: 'month', multiplier: 1 }
      },
      defaultTick_line_visible: false,
      formatString: 'MMM',
      crosshair_enabled: true
    },
    series: series
  });
}

function makeSeries(data) {
  var key = JSC.nest().key('month');
  return [
    {
      name: 'Min/Max',
      type: 'area spline',
      yAxis: 'y1',
      color: '#e0c8ff',
      line_width: 0,
      defaultPoint: {
        tooltip:
          '%SeriesName: <b>{%yStart:n0}°F - {%yValue:n0}°F</b>',
        marker_visible: false,
        focusGlow_width: 0
      },
      points: key
        .pointRollup(function(key, val) {
          var values = val[0];
          return {
            x: parseInt(key),
            y: [values.min_temp, values.max_temp]
          };
        })
        .points(data)
    },
    {
      name: 'Average',
      color: '#a87dec',
      line_color: 'currentColor',
      type: 'line',
      yAxis: 'y1',
      defaultPoint: {
        tooltip:
          '%SeriesName: <b>{%yValue:n0}°F</b>',

        marker: {
          type: 'circle',
          fill: 'white',
          outline: {
            width: 3,
            color: 'currentColor'
          }
        }
      },
      points: key.rollup('avg_temp').points(data)
    },
    {
      name: 'Precipitation',
      type: 'column solid',
      yAxis: 'y2',
      color: '#8cc3ff',
      points: key.rollup('precip').points(data)
    },
    {
      name: 'Daily Max Precipitation',
      type: 'marker',
      yAxis: 'y2',
      defaultPoint_marker_type: 'diamond',
      color: '#6599ff',
      points: key
        .rollup('max_precip')
        .points(data)
    }
  ];
}
month,max_temp,avg_temp,min_temp,precip,max_precip
1/1/2018,60,32,6,2.12,0.69
2/1/2018,79,42,17,5.03,1.28
3/1/2018,60,41,29,3.44,1.76
4/1/2018,82,50,32,5.02,2.5
5/1/2018,93,68,50,3.24,0.64
6/1/2018,96,73,52,3.61,1.48
7/1/2018,97,80,64,5.28,1.6
8/1/2018,98,81,68,6.66,1.95
9/1/2018,96,73,57,5.89,1.99
10/1/2018,82,60,42,3.02,1.01
11/1/2018,71,46,17,7.09,1.11
12/1/2018,62,41,26,6.9,1.69