'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _group = require('@vx/group');

var _group2 = _interopRequireDefault(_group);

var _axis = require('@vx/axis');

var _axis2 = _interopRequireDefault(_axis);

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

var _mockData2 = _interopRequireDefault(_mockData);

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

var _scale2 = _interopRequireDefault(_scale);

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

var _shape2 = _interopRequireDefault(_shape);

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

var _grid2 = _interopRequireDefault(_grid);

var _responsive = require('@vx/responsive');

var _responsive2 = _interopRequireDefault(_responsive);

var _text = require('@vx/text');

var _text2 = _interopRequireDefault(_text);

var _pattern = require('@vx/pattern');

var _pattern2 = _interopRequireDefault(_pattern);

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

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

function numTicksForHeight(height) {
  if (height <= 300) return 3;
  if (300 < height && height <= 600) return 5;
  return 10;
}

function numTicksForWidth(width) {
  if (width <= 300) return 2;
  if (300 < width && width <= 400) return 5;
  return 10;
}

function SimpleAreaChart(_ref) {
  var margin = _ref.margin,
      data = _ref.data,
      screenWidth = _ref.screenWidth,
      screenHeight = _ref.screenHeight;

  var stock = _mockData2.default.appleStock;

  var width = screenWidth / 1.5;
  var height = width / 2;

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

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

  // scales
  var xStockScale = _scale2.default.scaleTime({
    range: [0, xMax],
    domain: (0, _d3Array.extent)(stock, xStock)
  });
  var yStockScale = _scale2.default.scaleLinear({
    range: [yMax, 0],
    domain: [0, (0, _d3Array.max)(stock, yStock)],
    nice: true
  });

  return _react2.default.createElement(
    'svg',
    { height: height, width: width },
    _react2.default.createElement(
      'defs',
      null,
      _react2.default.createElement(
        'linearGradient',
        { id: 'linear', x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
        _react2.default.createElement('stop', { offset: '0%', stopColor: 'rgba(181, 49, 206, 1.000)' }),
        _react2.default.createElement('stop', { offset: '100%', stopColor: 'rgba(1, 179, 239, 1.000)' })
      )
    ),
    _react2.default.createElement(_pattern2.default.Circles, {
      id: 'myPattern',
      width: 20,
      height: 20,
      fill: 'black',
      radius: 4,
      background: 'darkorange',
      complement: true
    }),
    _react2.default.createElement('rect', {
      width: width,
      height: height,
      stroke: 'black',
      strokeWidth: 1,
      fill: 'none'
    }),
    _react2.default.createElement(
      _group2.default,
      { top: margin.top, left: margin.left },
      _react2.default.createElement(
        'text',
        {
          dy: -margin.top / 3,
          fontSize: '16',
          fontFamily: 'Arial',
          fill: 'black'
        },
        'Simple area chart'
      ),
      _react2.default.createElement(_grid2.default.Rows, {
        scale: yStockScale,
        width: xMax,
        strokeDasharray: '2,2',
        numTicks: numTicksForHeight(height)
      }),
      _react2.default.createElement(_shape2.default.AreaClosed, {
        data: stock,
        xScale: xStockScale,
        yScale: yStockScale,
        x: xStock,
        y: yStock,
        strokeWidth: 2,
        stroke: 'url(#linear)',
        fill: 'url(#myPattern)'
      })
    ),
    _react2.default.createElement(_axis2.default.AxisBottom, {
      top: height - margin.bottom,
      left: margin.left,
      scale: xStockScale,
      numTicks: numTicksForWidth(width),
      label: 'date'
    }),
    _react2.default.createElement(_axis2.default.AxisLeft, {
      top: margin.top,
      left: margin.left,
      scale: yStockScale,
      numTicks: numTicksForHeight(height),
      label: 'close price ($)',
      hideAxisLine: true,
      hideTicks: true,
      hideZero: true
    })
  );
}

exports.default = _responsive2.default.withScreenSize(SimpleAreaChart);