<script>
  import { area, curveBasis, extent, max, quantize, interpolateCool, scaleLinear, scalePoint, scaleTime} from 'd3';
  import data from './ridgeline-data' // or pass data to component as prop
  
  const width = $ChartDocs[0].value; // the outer width of the chart, in pixels 
  const overlap = $ChartDocs[1].value; // the overlap between each ridgeline
  const verticalScale = $ChartDocs[2].value; // the vertical spacing between each y axis ticks
  const height = data.series.length * verticalScale;
  const marginTop = $ChartDocs[3].value; // the top margin, in pixels
  const marginRight = $ChartDocs[4].value; // the right margin, in pixels
  const marginBottom = $ChartDocs[5].value; // the bottom margin, in pixels
  const marginLeft = $ChartDocs[6].value; // the left margin, in pixels
  const yAxisOffset = $ChartDocs[7].value; // vertical offset of y-axis labels, in pixels

  const xScale = scaleTime()
    .domain(extent(data.dates))
    .range([marginLeft, width - marginRight]);

  const yScale = scalePoint()
    .domain(data.series.map(d => d.name))
    .range([marginTop, height - marginBottom]);

  const zScale = scaleLinear()
    .domain([0, max(data.series, d => max(d.values))]).nice()
    .range([0, -overlap * yScale.step()]);

  const xTicks = xScale.ticks(width / 80);
  const xTicksFormatted = xTicks.map(xScale.tickFormat());

  const colors = quantize(t => interpolateCool(t * 0.7 + 0.3), data.series.length);

  const areaFunc = area()
    .curve(curveBasis)
    .defined(d => !isNaN(d))
    .x((d, i) => xScale(data.dates[i]))
    .y0(0)
    .y1(d => zScale(d));

  const lineFunc = areaFunc.lineY1();
</script>
  
<div class="scatter_plot_container">
  <svg {width} {height} viewBox="0 0 {width + marginLeft} {height}">
    <g class="y-axis" transform="translate({marginLeft}, 0)">
      {#each data.series as series, i}
        <g class="y-tick" transform="translate({marginLeft - 5}, {yScale(series.name)})">
          <line class="tick-start" x1={marginLeft - 6} x2={marginLeft}/>
          <line class="tick-grid" x1={marginLeft} x2={width - marginLeft - marginRight}/>
          <text y={yAxisOffset}>{series.name}</text>
        </g>
      {/each}
    </g>

    <g class="x-axis" transform="translate(0,{height - marginBottom})">
      {#each xTicks as tick, i}
        <g class="x-tick" transform="translate({marginLeft + xScale(tick)}, 0)">
          <line class="tick-start" stroke='black' y2='6' />
            <text y="20">{xTicksFormatted[i]}</text>
        </g>
      {/each}
    </g>
      
      {#each data.series as series, i}
        <g class='ridgelines' transform="translate({marginLeft}, {yScale(series.name) + 1})">
          <path
              fill={colors[i]}
              d={areaFunc(series.values)}
          ></path>
          <path
              stroke='black'
              fill='none'
              d={lineFunc(series.values)}
          ></path>
        </g>
      {/each}
  </svg>
</div>

<style>
  svg {
    max-width: 100%;
    height: auto;
    height: "intrinsic";
  }

  .y-axis {
    font-size: "10px";
    font-family: sans-serif;
    text-anchor: "end";
  }

  .x-axis {
    font-size: "10px";
    font-family: sans-serif;
    text-anchor: "end";
  }

  .tick-start {
    stroke: black;
    stroke-opacity: 1;
  }

  .tick-grid {
    stroke: black;
    stroke-opacity: 0.2;
    font-size: "11px";
    color: black;
  }

  .x-tick text {
    fill: black;
    text-anchor: middle;
  }

  .y-tick text {
    fill: black;
    text-anchor: end;
  }
</style>

const csv = `Vancouver,50,81,81,81,87,87,93,93,93,93,87,87,93,93,93,93,87,87,76,71,66,66,62,66,71,81,81,76,76,81,81,81,81,81,93,93,93,93,93,87,93,93,93,93,75,75,93,93,93,100,93,93,93,93,93,87,87,87,87,93,93,93,93,93,93,93,93,81,81,81,81,81,81,87,87,87,93,87,93,93,93,87,87,87,87,87,87,87,87,76,76,76,71,66,66,66,66,62,71,87,87,81,81,76,81,81,81,81,81,87,87,87,93,93,93,87,93,87,87,87,87,87,93,93,93,93,93,93,93,93,100,100,93,93,87,87,100,100,100,98,87,59,59,77
Portland,50,97,95,96,92,92,92,92,91,92,91,91,92,91,92,92,92,92,93,93,93,95,95,97,95,98,97,97,97,96,97,96,96,96,97,97,96,97,97,94,95,93,96,92,94,93,95,95,97,96,98,97,99,99,98,98,98,98,98,98,99,99,99,99,100,100,100,100,100,100,100,100,97,98,96,98,95,95,94,96,96,95,95,95,94,94,94,95,94,95,89,91,88,89,84,84,84,83,84,78,80,76,77,72,70,70,69,68,82,77,86,82,96,96,96,96,97,97,97,97,97,98,98,97,98,97,98,97,98,98,98,98,98,98,98,98,98,98,98,98,98,96,96,94
San Francisco,50,87,89,91,93,95,95,97,98,98,99,99,99,100,100,98,98,97,87,89,82,84,74,73,80,77,81,83,88,91,88,92,91,94,92,93,93,94,94,86,89,84,91,82,84,88,90,93,88,94,92,98,93,96,95,99,99,99,100,100,100,100,100,91,94,88,87,80,77,77,73,72,79,75,79,82,87,90,91,96,98,97,100,100,100,100,100,92,95,90,86,81,77,77,72,71,80,76,82,84,92,95,94,99,99,99,100,100,100,100,100,90,93,86,83,76,71,72,66,65,79,73,81,80,93,95,95,98,98,98,99,99,99,100,100,88,92,84,81,72,67,67,61,59
Seattle,50,93,94,94,96,96,95,95,95,95,94,94,95,95,95,95,95,96,95,96,95,94,93,93,91,90,89,95,91,95,91,97,96,97,96,96,95,96,96,96,96,96,97,97,98,97,99,98,99,98,99,95,97,95,97,93,94,93,94,94,96,95,97,96,97,97,94,95,92,97,93,95,95,98,99,98,100,100,100,100,100,100,100,100,100,100,100,98,99,98,96,95,93,92,90,89,90,88,88,86,87,86,88,85,85,92,90,95,91,98,97,96,95,94,94,93,92,94,93,94,94,95,95,96,96,97,96,97,97,97,96,96,97,96,97,96,97,96,96,95,95,95,94,94
Los Angeles,50,38,48,49,62,65,65,69,70,69,71,71,68,69,67,54,56,47,48,35,33,33,29,28,39,34,41,44,53,57,58,63,65,65,67,68,67,68,68,53,58,48,52,37,37,38,37,37,51,47,56,60,71,77,75,83,83,85,85,86,86,88,87,70,76,64,65,49,46,48,44,45,67,60,75,69,91,91,88,90,88,85,83,81,83,79,80,68,73,65,66,55,52,53,49,49,62,57,66,65,77,79,75,79,78,77,74,73,74,72,72,60,64,55,55,44,41,41,38,37,53,46,57,53,69,70,63,67,63,66,59,59,60,60,61,49,53,45,45,35,32,33,29,29
San Diego,50,46,60,54,75,75,74,75,74,73,72,70,65,65,61,55,51,45,46,38,37,36,34,34,48,42,51,49,62,64,64,66,67,72,72,75,74,79,79,61,68,56,61,43,42,45,43,45,62,58,70,67,83,85,84,87,87,88,87,88,88,89,89,77,81,73,76,64,64,62,61,60,75,68,78,73,88,88,86,87,86,86,85,84,85,84,84,74,77,71,70,62,59,59,56,55,73,66,78,71,89,89,87,86,85,85,83,83,82,81,80,67,70,61,64,51,50,49,48,47,67,60,73,64,84,83,82,80,79,76,75,73,66,66,60,55,49,44,46,37,37,36,36,35
Las Vegas,50,27,34,41,48,55,56,65,69,68,73,74,71,73,71,53,56,43,47,28,26,26,23,23,32,28,34,41,46,53,54,63,66,68,72,74,73,76,76,54,62,47,49,29,25,26,21,20,29,25,31,37,43,49,49,57,59,58,61,61,59,59,58,41,44,32,36,19,18,17,15,15,29,23,33,37,48,54,56,64,67,67,71,72,67,70,67,47,49,35,40,19,17,18,16,16,25,22,29,30,39,42,40,45,45,45,45,45,43,43,42,30,33,24,26,14,13,14,12,12,21,18,24,25,33,35,37,40,42,42,45,45,43,44,43,30,33,23,26,12,11,13,11,11
Phoenix,50,35,44,44,55,59,62,65,68,70,73,76,69,75,71,58,58,48,50,36,34,32,30,28,40,34,41,40,50,51,54,55,57,58,60,61,57,60,58,50,50,44,44,37,35,33,31,29,42,35,43,47,56,61,60,67,68,69,70,71,66,68,65,56,55,48,49,39,37,36,34,32,44,38,46,44,55,56,58,59,60,64,65,68,66,70,70,61,63,57,54,47,43,41,37,34,43,37,42,43,50,52,54,57,59,63,64,68,65,70,69,59,61,54,53,43,40,38,35,33,43,37,43,44,52,54,57,59,62,63,66,67,63,66,64,54,54,46,47,36,34,33,31,29
Albuquerque,50,43,48,51,56,60,64,68,71,72,76,78,74,77,74,64,64,56,56,45,43,42,38,37,44,40,44,49,53,57,60,65,68,69,73,75,71,74,72,60,61,52,54,42,40,39,37,36,47,41,48,57,63,72,69,81,82,80,82,81,76,76,73,61,60,51,54,41,39,48,44,49,45,54,53,57,55,57,59,62,64,64,66,67,61,65,61,59,55,53,50,48,46,41,39,36,39,33,34,45,43,51,54,63,68,66,73,74,64,68,62,61,53,51,48,46,44,43,40,38,49,44,51,57,63,70,67,76,77,77,78,78,73,75,72,62,62,54,54,45,42,41,38,36
Denver,50,49,55,53,61,62,61,62,62,61,61,59,53,54,49,44,40,35,34,28,26,35,30,35,36,43,45,48,50,53,48,53,51,49,46,44,45,42,42,34,36,31,32,25,24,30,27,30,29,34,34,44,41,48,48,57,59,56,60,59,51,52,47,40,35,28,30,21,20,21,19,20,31,27,35,42,50,57,64,72,78,79,88,91,90,94,94,76,83,70,61,48,37,41,26,25,61,48,71,53,91,86,85,80,78,75,73,71,74,70,71,63,67,62,60,54,51,56,50,53,59,60,66,61,69,68,63,63,59,63,57,59,55,59,56,49,49,43,42,35,32,33,29,30
San Antonio,50,49,55,58,66,70,71,76,78,79,81,83,66,74,63,68,52,52,49,49,47,47,44,44,54,50,57,57,66,68,70,72,74,79,80,84,69,80,71,70,58,54,53,49,46,46,43,42,50,47,52,61,65,72,72,83,86,83,87,87,80,81,76,67,64,57,56,46,43,42,38,36,47,41,47,58,63,72,73,85,88,88,92,93,86,89,85,72,71,61,61,47,44,44,40,39,53,47,56,59,70,75,79,84,88,87,93,93,87,90,85,77,74,67,65,57,53,54,48,48,58,54,61,59,68,69,70,71,71,72,73,74,72,74,73,70,70,67,64,62,59,63,58,60
Dallas,50,61,68,71,79,84,81,88,87,89,88,90,76,82,73,76,63,61,59,58,56,57,54,54,65,61,69,68,79,81,81,84,84,86,86,87,74,80,72,74,62,60,58,56,54,55,52,52,61,58,64,64,72,74,74,77,78,81,81,83,71,78,70,70,60,57,55,52,49,51,47,47,48,47,48,49,50,51,58,57,62,67,72,77,70,79,76,69,67,61,59,53,50,50,46,45,51,48,52,52,57,58,65,65,70,77,81,88,80,91,88,83,81,76,74,69,66,69,64,65,63,65,64,61,61,59,61,58,59,62,62,65,62,66,65,64,63,62,56,57,52,55,48,48
Houston,50,50,58,61,70,75,75,82,84,84,86,87,71,78,68,71,56,55,50,50,47,50,44,45,58,55,64,64,76,79,78,83,83,84,84,85,70,76,66,69,55,54,50,49,46,50,45,46,54,54,59,67,72,79,75,85,85,85,85,85,72,76,67,68,56,54,50,49,46,47,42,42,58,53,64,68,81,87,83,93,92,92,91,91,81,83,77,72,65,60,59,53,51,54,50,52,59,58,64,66,72,75,79,82,85,84,89,90,79,84,77,74,66,62,62,56,55,56,53,54,54,54,55,60,59,62,64,68,70,69,72,73,77,76,80,72,79,76,72,68,64,65,60,59
Kansas City,50,86,85,85,84,83,89,86,90,89,94,94,91,93,91,85,85,80,78,73,70,71,66,66,71,69,72,76,79,83,83,87,88,86,88,87,88,86,86,81,83,80,76,74,70,76,69,71,73,76,77,73,77,74,75,72,71,78,76,80,74,82,79,76,74,70,67,64,61,61,57,56,56,55,54,54,54,54,55,54,55,55,55,55,56,56,56,53,54,52,51,49,48,52,49,51,54,56,58,55,60,58,57,56,55,59,56,59,56,61,60,60,59,59,56,57,54,54,51,50,52,51,52,53,54,56,62,62,67,66,73,74,62,68,61,66,54,55,51,53,51,53,49,49
Minneapolis,50,78,79,82,83,85,83,87,86,88,86,87,83,85,82,83,79,78,76,76,74,77,73,75,78,79,81,72,79,73,74,67,65,67,65,65,66,67,67,64,66,64,61,60,57,58,54,53,54,53,53,57,56,59,61,64,66,65,69,69,65,67,64,64,61,60,58,57,55,55,52,51,54,52,54,56,57,59,61,63,65,71,71,76,73,80,80,78,78,76,77,75,76,79,78,81,77,81,80,81,79,79,71,74,69,71,63,63,64,63,64,64,65,66,63,65,63,63,61,60,63,61,63,62,65,65,66,66,67,67,68,69,69,70,70,70,71,71,68,69,68,73,69,72
Saint Louis,50,73,75,75,77,78,78,79,79,86,84,89,84,92,91,88,87,85,77,78,72,80,69,72,68,74,73,82,77,82,80,88,89,90,90,91,90,91,90,85,86,82,75,72,67,81,68,76,70,81,80,80,78,77,77,77,76,74,74,73,66,66,61,64,56,56,61,59,62,65,68,70,76,78,82,78,86,84,86,84,84,84,85,85,75,79,72,68,61,56,57,51,50,50,49,48,50,49,51,53,54,56,75,71,85,75,96,94,86,85,79,76,69,65,62,58,55,58,53,53,55,55,56,59,60,62,69,70,75,74,81,82,74,78,73,72,66,63,60,58,55,58,53,54
Chicago,50,87,88,89,89,90,91,92,92,95,95,97,94,98,96,92,91,88,86,82,80,83,80,81,82,83,85,85,87,87,89,89,90,92,93,95,89,93,90,86,83,79,79,74,73,76,73,75,73,75,75,80,77,81,83,87,90,91,95,97,94,98,97,93,93,90,88,85,83,85,81,82,82,83,83,80,82,80,81,78,78,80,79,81,81,83,83,75,78,73,72,65,63,64,61,61,65,63,66,71,73,77,74,80,79,83,80,82,82,85,85,84,85,85,84,83,83,86,84,86,88,90,92,94,96,98,97,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100
Nashville,50,76,81,79,86,86,87,87,87,87,87,87,78,81,75,74,66,64,64,61,60,72,67,74,71,82,82,81,82,82,83,81,82,81,82,81,79,80,78,75,74,71,71,68,67,77,72,79,75,85,85,83,84,83,83,82,81,81,81,81,82,81,82,74,78,73,72,66,64,77,70,78,75,87,88,84,87,84,91,85,89,87,93,93,86,88,84,79,75,70,68,62,59,61,57,58,59,59,59,61,61,62,65,65,68,70,73,75,70,75,73,74,70,70,85,80,89,85,99,99,91,94,88,99,88,94,91,99,99,97,98,96,94,93,91,83,83,77,75,67,64,69,63,66
Indianapolis,50,81,84,81,86,85,83,82,81,82,79,80,75,77,74,77,71,72,71,72,72,82,78,84,79,89,88,86,85,83,88,85,88,88,92,93,89,93,91,85,84,80,76,72,68,71,65,66,59,62,58,59,52,52,54,52,53,59,58,62,55,63,60,62,57,57,53,54,52,58,52,56,51,57,55,54,52,51,54,51,53,69,66,78,66,86,82,70,69,60,62,49,47,47,45,44,45,44,44,45,45,46,51,51,54,61,63,69,78,83,91,81,96,92,87,84,79,83,76,77,74,76,74,75,72,72,75,74,76,74,78,77,76,76,75,72,72,70,69,66,65,67,64,65
Atlanta,50,52,55,59,62,65,66,70,72,71,74,73,64,67,60,62,53,52,49,49,47,53,48,52,57,60,65,63,69,70,69,69,69,69,68,68,60,62,57,57,51,49,47,46,44,49,45,48,59,59,67,68,79,82,81,85,86,87,87,88,77,83,76,72,64,59,57,51,48,59,51,58,64,71,77,73,83,82,82,81,81,81,81,81,72,75,69,69,61,59,55,53,50,56,49,53,67,67,77,73,88,89,88,89,88,89,88,88,77,81,73,74,64,62,58,56,53,58,52,55,68,67,77,74,88,89,88,90,89,90,89,89,79,83,77,80,70,70,71,71,71,69,71,70
Detroit,50,93,94,96,96,98,97,100,100,99,99,99,93,95,90,91,85,84,81,81,78,86,80,84,84,90,91,93,94,96,94,97,97,97,96,96,91,93,90,86,83,80,76,73,69,72,66,67,67,68,68,71,70,71,74,75,77,78,80,81,79,81,80,78,77,75,73,71,70,77,72,76,77,83,85,85,88,89,89,90,91,92,92,93,84,88,82,80,73,70,70,65,65,71,68,72,72,78,79,75,78,76,75,73,72,70,70,68,81,75,83,82,93,95,90,95,92,93,89,88,83,84,79,83,77,78,80,81,82,83,85,86,83,85,84,84,82,82,79,80,78,81,77,78
Jacksonville,50,86,93,90,100,100,100,100,100,100,100,100,86,90,81,83,70,68,68,66,65,75,71,77,82,89,94,91,100,100,100,100,100,100,100,100,86,90,81,80,68,64,64,58,57,71,64,74,77,88,94,91,100,100,100,100,100,100,100,100,81,87,75,75,59,55,55,50,49,63,57,66,73,83,90,86,97,97,98,98,99,98,100,100,85,90,80,77,65,60,62,54,54,67,63,71,75,86,91,89,97,98,98,99,99,99,100,100,86,90,81,78,67,62,63,56,55,64,60,66,76,81,90,85,99,99,99,99,99,98,99,98,85,89,80,76,65,60,62,54,53,63,59,65
Charlotte,50,66,74,75,86,90,87,93,92,92,91,91,80,83,76,76,67,64,62,59,57,66,59,65,71,76,82,77,87,86,86,85,85,85,85,86,72,77,68,67,56,52,49,46,43,50,44,48,56,58,65,68,76,80,80,85,87,84,87,86,73,75,66,64,53,48,45,39,35,44,36,40,47,50,56,59,66,70,68,74,74,75,75,75,59,65,54,58,43,42,41,40,39,47,43,48,58,61,69,65,77,77,82,80,84,81,86,85,74,76,68,69,58,55,53,50,48,54,48,51,57,59,64,64,71,73,73,75,76,79,79,81,71,78,72,72,64,62,77,70,79,80,92,96
Miami,50,97,95,99,96,98,97,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,96,97,95,97,93,94,94,95,96,95,96,95,93,92,91,89,87,85,82,81,78,81,76,77,82,82,85,88,92,95,93,98,98,93,95,92,87,84,81,80,75,73,70,69,66,71,65,67,74,75,80,81,88,90,89,93,93,92,92,92,79,83,74,76,64,63,65,62,63,70,69,74,77,83,86,84,90,90,90,89,90,87,88,87,76,77,70,72,61,60,59,58,57,65,62,67,72,78,83,82,90,91,92,93,95,96,97,98,92,95,91,87,83,79,81,74,74,78,77,79
Pittsburgh,50,70,75,79,85,90,85,92,91,91,89,89,81,83,77,76,69,66,64,61,59,67,61,66,71,76,80,78,85,85,85,85,85,78,81,76,74,69,66,68,64,64,63,64,64,67,65,67,58,64,58,59,51,49,55,51,54,55,59,60,57,60,58,56,54,53,53,50,50,52,51,52,55,56,58,66,66,72,69,78,77,78,77,77,63,68,58,60,47,45,48,45,46,54,53,59,56,65,65,64,65,64,65,64,64,66,66,67,63,67,64,62,60,58,58,55,54,61,58,62,73,74,83,77,91,90,87,87,85,88,85,86,76,82,76,73,66,63,63,58,57,58,56,57
Toronto,50,83,85,88,90,92,93,96,97,97,99,99,93,96,92,88,84,81,80,76,74,84,79,85,83,92,93,92,94,94,97,96,98,97,100,100,94,96,93,90,86,84,83,80,79,80,78,78,76,77,76,78,76,77,77,78,79,79,80,80,78,79,78,77,76,75,76,74,75,77,77,78,83,84,87,90,94,97,95,100,100,100,100,100,96,97,95,92,90,87,86,83,81,84,81,82,83,84,85,82,84,83,87,83,85,87,89,90,86,90,88,85,83,81,88,83,87,84,90,89,88,87,86,88,85,86,88,88,90,90,92,93,89,91,89,85,84,81,82,77,77,80,79,81
Philadelphia,50,81,80,81,79,80,80,81,81,80,81,81,74,76,71,70,64,62,61,58,56,58,55,56,53,55,53,60,55,59,59,65,66,72,72,76,60,71,61,66,52,52,51,51,50,52,50,51,50,52,51,57,55,58,56,61,62,55,57,53,53,48,46,44,43,41,42,39,39,41,40,42,47,47,51,53,57,60,59,64,64,65,65,66,55,60,53,55,45,44,43,42,41,56,50,59,54,69,69,72,71,73,76,78,81,82,86,88,68,76,63,66,48,46,48,44,45,49,48,52,55,58,62,62,67,68,70,72,73,74,76,77,69,73,68,70,62,62,71,68,74,77,83,88
New York,50,81,87,81,71,66,76,76,71,76,76,71,76,66,62,62,58,51,55,55,48,42,40,45,45,59,48,48,47,50,50,54,58,57,57,57,57,53,50,50,44,42,39,40,37,42,42,45,48,51,55,55,55,51,51,59,62,62,62,54,54,54,38,38,36,33,36,36,36,38,41,41,41,47,47,47,50,50,50,61,61,57,61,61,61,61,57,54,50,44,36,36,34,31,41,41,38,38,50,58,58,58,62,62,62,62,71,71,76,76,72,59,59,46,45,43,46,52,52,63,63,63,77,77,77,87,87,82,87,87,87,87,87,87,82,68,68,56,56,32,32,42,62,76
Montreal,50,87,87,75,81,87,87,87,81,81,87,87,93,87,81,81,62,62,57,57,62,62,62,66,66,75,75,81,86,93,87,87,87,87,87,87,75,75,70,70,71,71,66,66,71,87,93,87,87,87,93,87,81,87,87,87,93,93,93,87,81,91,91,71,71,81,81,71,76,70,70,70,70,70,75,75,75,70,81,75,75,71,75,75,75,75,75,66,66,62,62,62,62,62,66,70,70,70,81,81,81,81,81,87,87,93,93,87,87,87,93,93,93,81,76,76,76,62,81,71,71,71,71,93,93,87,87,100,93,93,93,93,93,93,93,76,67,50,47,47,50,57,57,57
Boston,50,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,95,96,93,90,87,83,85,80,79,84,82,84,82,87,86,86,85,85,90,89,92,92,96,97,91,94,91,90,86,84,88,85,86,86,89,89,90,90,91,92,92,94,95,96,97,97,98,99,94,95,92,88,85,81,83,77,77,79,78,80,86,86,91,91,97,98,98,100,100,99,99,99,93,94,90,88,83,81,83,79,79,81,81,82,84,85,87,87,89,90,90,91,91,90,91,91,88,88,86,84,81,79,80,77,76,85,81,87`;

const dates = [
  '2014-10-24T00:00',
  '2014-10-24T01:00',
  '2014-10-24T02:00',
  '2014-10-24T03:00',
  '2014-10-24T04:00',
  '2014-10-24T05:00',
  '2014-10-24T06:00',
  '2014-10-24T07:00',
  '2014-10-24T08:00',
  '2014-10-24T09:00',
  '2014-10-24T10:00',
  '2014-10-24T11:00',
  '2014-10-24T12:00',
  '2014-10-24T13:00',
  '2014-10-24T14:00',
  '2014-10-24T15:00',
  '2014-10-24T16:00',
  '2014-10-24T17:00',
  '2014-10-24T18:00',
  '2014-10-24T19:00',
  '2014-10-24T20:00',
  '2014-10-24T21:00',
  '2014-10-24T22:00',
  '2014-10-24T23:00',
  '2014-10-25T00:00',
  '2014-10-25T01:00',
  '2014-10-25T02:00',
  '2014-10-25T03:00',
  '2014-10-25T04:00',
  '2014-10-25T05:00',
  '2014-10-25T06:00',
  '2014-10-25T07:00',
  '2014-10-25T08:00',
  '2014-10-25T09:00',
  '2014-10-25T10:00',
  '2014-10-25T11:00',
  '2014-10-25T12:00',
  '2014-10-25T13:00',
  '2014-10-25T14:00',
  '2014-10-25T15:00',
  '2014-10-25T16:00',
  '2014-10-25T17:00',
  '2014-10-25T18:00',
  '2014-10-25T19:00',
  '2014-10-25T20:00',
  '2014-10-25T21:00',
  '2014-10-25T22:00',
  '2014-10-25T23:00',
  '2014-10-26T00:00',
  '2014-10-26T01:00',
  '2014-10-26T02:00',
  '2014-10-26T03:00',
  '2014-10-26T04:00',
  '2014-10-26T05:00',
  '2014-10-26T06:00',
  '2014-10-26T07:00',
  '2014-10-26T08:00',
  '2014-10-26T09:00',
  '2014-10-26T10:00',
  '2014-10-26T11:00',
  '2014-10-26T12:00',
  '2014-10-26T13:00',
  '2014-10-26T14:00',
  '2014-10-26T15:00',
  '2014-10-26T16:00',
  '2014-10-26T17:00',
  '2014-10-26T18:00',
  '2014-10-26T19:00',
  '2014-10-26T20:00',
  '2014-10-26T21:00',
  '2014-10-26T22:00',
  '2014-10-26T23:00',
  '2014-10-27T00:00',
  '2014-10-27T01:00',
  '2014-10-27T02:00',
  '2014-10-27T03:00',
  '2014-10-27T04:00',
  '2014-10-27T05:00',
  '2014-10-27T06:00',
  '2014-10-27T07:00',
  '2014-10-27T08:00',
  '2014-10-27T09:00',
  '2014-10-27T10:00',
  '2014-10-27T11:00',
  '2014-10-27T12:00',
  '2014-10-27T13:00',
  '2014-10-27T14:00',
  '2014-10-27T15:00',
  '2014-10-27T16:00',
  '2014-10-27T17:00',
  '2014-10-27T18:00',
  '2014-10-27T19:00',
  '2014-10-27T20:00',
  '2014-10-27T21:00',
  '2014-10-27T22:00',
  '2014-10-27T23:00',
  '2014-10-28T00:00',
  '2014-10-28T01:00',
  '2014-10-28T02:00',
  '2014-10-28T03:00',
  '2014-10-28T04:00',
  '2014-10-28T05:00',
  '2014-10-28T06:00',
  '2014-10-28T07:00',
  '2014-10-28T08:00',
  '2014-10-28T09:00',
  '2014-10-28T10:00',
  '2014-10-28T11:00',
  '2014-10-28T12:00',
  '2014-10-28T13:00',
  '2014-10-28T14:00',
  '2014-10-28T15:00',
  '2014-10-28T16:00',
  '2014-10-28T17:00',
  '2014-10-28T18:00',
  '2014-10-28T19:00',
  '2014-10-28T20:00',
  '2014-10-28T21:00',
  '2014-10-28T22:00',
  '2014-10-28T23:00',
  '2014-10-29T00:00',
  '2014-10-29T01:00',
  '2014-10-29T02:00',
  '2014-10-29T03:00',
  '2014-10-29T04:00',
  '2014-10-29T05:00',
  '2014-10-29T06:00',
  '2014-10-29T07:00',
  '2014-10-29T08:00',
  '2014-10-29T09:00',
  '2014-10-29T10:00',
  '2014-10-29T11:00',
  '2014-10-29T12:00',
  '2014-10-29T13:00',
  '2014-10-29T14:00',
  '2014-10-29T15:00',
  '2014-10-29T16:00',
  '2014-10-29T17:00',
  '2014-10-29T18:00',
  '2014-10-29T19:00',
  '2014-10-29T20:00',
  '2014-10-29T21:00',
  '2014-10-29T22:00',
  '2014-10-29T23:00'
];

const formattedDates = dates.map((el) => new Date(el));

const seriesData = csv.split('\n').map(row => {
  const rowData = row.split(',');
  return { name: rowData[0], values: rowData.slice(1) };
});

export default {
  'dates': formattedDates,
  'series': seriesData
};

const csv = '
  title, value, value, value, value, //add csv columns values
  title, value, value, value, value, //add csv columns values
  title, value, value, value, value, //add csv columns values
  title, value, value, value, value, //add csv columns values
  //add additional csv rows
'

const data = [
  'date',
  'date',
  'date',
  'date',
  //add additional dates based on numer of csv values
]

    
const formattedDates = dates.map((el) => new Date(el));

const seriesData = csv.split('
').map(row => {
  const rowData = row.split(',');
  return { name: rowData[0], values: rowData.slice(1) };
});

export default {
  'dates': formattedDates,
  'series': seriesData
};