'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _shape = require('@vx/shape');

var _mockData = require('@vx/mock-data');

var _curve = require('@vx/curve');

var _gradient = require('@vx/gradient');

var _grid = require('@vx/grid');

var _scale = require('@vx/scale');

var _d3Array = require('d3-array');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _jsxFileName = '/Users/hshoff/Code/vx/packages/vx-demo/components/tiles/area.js';


var stock = _mockData.appleStock.slice(800);

// accessors
var xStock = function xStock(d) {
  return new Date(d.date);
};
var yStock = function yStock(d) {
  return d.close;
};

exports.default = function (_ref) {
  var width = _ref.width,
      height = _ref.height,
      margin = _ref.margin;

  if (width < 10) return null;

  // bounds
  var xMax = width - margin.left - margin.right;
  var yMax = height - margin.top - margin.bottom;

  // scales
  var xScale = (0, _scale.scaleTime)({
    range: [0, xMax],
    domain: (0, _d3Array.extent)(stock, xStock)
  });
  var yScale = (0, _scale.scaleLinear)({
    range: [yMax, 0],
    domain: [0, (0, _d3Array.max)(stock, yStock) + yMax / 3],
    nice: true
  });

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }, _react2.default.createElement('rect', {
    x: 0,
    y: 0,
    width: width,
    height: height,
    fill: '#32deaa',
    rx: 14,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40
    }
  }), _react2.default.createElement('defs', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48
    }
  }, _react2.default.createElement('linearGradient', { id: 'gradient', x1: '0%', y1: '0%', x2: '0%', y2: '100%', __source: {
      fileName: _jsxFileName,
      lineNumber: 49
    }
  }, _react2.default.createElement('stop', { offset: '0%', stopColor: '#FFFFFF', stopOpacity: 1, __source: {
      fileName: _jsxFileName,
      lineNumber: 50
    }
  }), _react2.default.createElement('stop', { offset: '100%', stopColor: '#FFFFFF', stopOpacity: .2, __source: {
      fileName: _jsxFileName,
      lineNumber: 51
    }
  }))), _react2.default.createElement(_grid.GridRows, {
    scale: yScale,
    width: xMax,
    strokeDasharray: '2,2',
    stroke: 'rgba(255,255,255,0.3)',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54
    }
  }), _react2.default.createElement(_grid.GridColumns, {
    scale: xScale,
    height: yMax,
    strokeDasharray: '2,2',
    stroke: 'rgba(255,255,255,0.3)',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60
    }
  }), _react2.default.createElement(_shape.AreaClosed, {
    data: stock,
    xScale: xScale,
    yScale: yScale,
    x: xStock,
    y: yStock,
    strokeWidth: 1,
    stroke: 'url(#gradient)',
    fill: 'url(#gradient)',
    curve: _curve.curveMonotoneX,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 66
    }
  }));
};