<div class="canvas"></div>

.area {
    fill: url(#area-gradient);
}

.line {
    fill: none;
    stroke: rgb(101, 60, 163);
    stroke-width: 2px;
}

const data = [
  {
    "date": "2018-01-02",
    "high": 102.45999908447,
    "low": 102.12999725342,
    "open": 102.36000061035,
    "close": 102.38999938965,
    "volume": 881200
  },
  {
    "date": "2018-01-03",
    "high": 102.90000152588,
    "low": 102.38999938965,
    "open": 102.55000305176,
    "close": 102.86000061035,
    "volume": 1218200
  },
  {
    "date": "2018-01-04",
    "high": 103.48000335693,
    "low": 103.15000152588,
    "open": 103.16000366211,
    "close": 103.25,
    "volume": 1757800
  },
  {
    "date": "2018-01-05",
    "high": 104.05000305176,
    "low": 103.55000305176,
    "open": 103.66999816895,
    "close": 104.01999664307,
    "volume": 750900
  }
]

data.forEach(d => {
  // console.log(d.date)
  // console.log(new Date(d.date))

  d.date = new Date(d.date)
})

const width = 960
const height = 500

console.log(data)

const svg = d3
  .select(document.querySelector('.canvas'))
  .append('svg')
  .attr('width', width)
  .attr('height', height)

const xValue = d => d.date
const yValue = d => d.close

const margin = { top: 60, right: 40, bottom: 88, left: 105 }
const innerWidth = width - margin.left - margin.right
const innerHeight = height - margin.top - margin.bottom

console.log(d3.extent(data))

const xScale = d3
  .scaleTime()
  .domain(d3.extent(data, xValue))
  .range([0, innerWidth])
  .nice()

const yScale = d3
  .scaleLinear()
  .domain(d3.extent(data, yValue))
  // .domain([0, d3.max(data, yValue)])
  .range([innerHeight, 0])
  .nice()

const g = svg.append('g')
  .attr('transform', `translate(${margin.left},${margin.top})`);

const xAxis = d3
  .axisBottom(xScale)
  .ticks(6)
  .tickSize(-innerHeight)
  .tickPadding(15)

const yAxisTickFormat = number => d3.format('.1s')(number).replace('G', 'B')

const yAxis = d3
  .axisLeft(yScale)
  .tickSize(-innerWidth)
  .tickPadding(10)
  .tickFormat(yAxisTickFormat)

const yAxisG = g.append('g').call(yAxis)
yAxisG.selectAll('.domain').remove()

const xAxisG = g.append('g').call(xAxis)
.attr('transform', `translate(0,${innerHeight})`)
xAxisG.select('.domain').remove()

const areaGenerator = d3.area()
  .x(d => xScale(xValue(d)))
  .y0(innerHeight)
  .y1(d => yScale(yValue(d)))
  .curve(d3.curveBasis)

const lineGenerator = d3.line()
  .x(d => xScale(xValue(d)))
  .y(d => yScale(yValue(d)))
  .curve(d3.curveBasis)

// set the gradient
svg
  .append('linearGradient')
  .attr('id', 'area-gradient')
  .attr('gradientUnits', 'userSpaceOnUse')
  .attr('x1', 0).attr('y1', 0)
  .attr('x2', 0).attr('y2', height)
  .selectAll('stop')
  .data([
    {offset: '0%', color: 'rgba(0, 0, 0, 0.5)'},
    {offset: '100%', color: 'rgba(0, 0, 0, 0)'}
  ])
  .enter().append('stop')
  .attr('offset', function(d) { return d.offset })
  .attr('stop-color', function(d) { return d.color })

g.append('path')
  .attr('class', 'line-path')
  .attr('class', 'area')
  .attr('d', areaGenerator(data))

g.append('path')
  .attr('class', 'line-path')
  .attr('class', 'line')
  .attr('d', lineGenerator(data))