'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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 _tooltip = require('@vx/tooltip');

var _event = require('@vx/event');

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

var _d3TimeFormat = require('d3-time-format');

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);
var formatDate = (0, _d3TimeFormat.timeFormat)("%b %d, '%y");

// accessors
var xStock = function xStock(d) {
  return new Date(d.date);
};
var yStock = function yStock(d) {
  return d.close;
};
var bisectDate = (0, _d3Array.bisector)(function (d) {
  return new Date(d.date);
}).left;

var Area = function (_React$Component) {
  (0, _inherits3.default)(Area, _React$Component);

  function Area(props) {
    (0, _classCallCheck3.default)(this, Area);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Area.__proto__ || (0, _getPrototypeOf2.default)(Area)).call(this, props));

    _this.handleTooltip = _this.handleTooltip.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Area, [{
    key: 'handleTooltip',
    value: function handleTooltip(_ref) {
      var event = _ref.event,
          data = _ref.data,
          xStock = _ref.xStock,
          xScale = _ref.xScale,
          yScale = _ref.yScale;
      var showTooltip = this.props.showTooltip;

      var _localPoint = (0, _event.localPoint)(event),
          x = _localPoint.x;

      var x0 = xScale.invert(x);
      var index = bisectDate(data, x0, 1);
      var d0 = data[index - 1];
      var d1 = data[index];
      var d = d0;
      if (d1 && d1.date) {
        d = x0 - xStock(d0.date) > xStock(d1.date) - x0 ? d1 : d0;
      }
      showTooltip({
        tooltipData: d,
        tooltipLeft: x,
        tooltipTop: yScale(d.close)
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          width = _props.width,
          height = _props.height,
          margin = _props.margin,
          showTooltip = _props.showTooltip,
          hideTooltip = _props.hideTooltip,
          tooltipData = _props.tooltipData,
          tooltipTop = _props.tooltipTop,
          tooltipLeft = _props.tooltipLeft,
          events = _props.events;

      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('div', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 73
        }
      }, _react2.default.createElement('svg', { ref: function ref(s) {
          return _this2.svg = s;
        }, width: width, height: height, __source: {
          fileName: _jsxFileName,
          lineNumber: 74
        }
      }, _react2.default.createElement('rect', { x: 0, y: 0, width: width, height: height, fill: '#32deaa', rx: 14, __source: {
          fileName: _jsxFileName,
          lineNumber: 75
        }
      }), _react2.default.createElement('defs', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 76
        }
      }, _react2.default.createElement('linearGradient', { id: 'gradient', x1: '0%', y1: '0%', x2: '0%', y2: '100%', __source: {
          fileName: _jsxFileName,
          lineNumber: 77
        }
      }, _react2.default.createElement('stop', { offset: '0%', stopColor: '#FFFFFF', stopOpacity: 1, __source: {
          fileName: _jsxFileName,
          lineNumber: 78
        }
      }), _react2.default.createElement('stop', { offset: '100%', stopColor: '#FFFFFF', stopOpacity: 0.2, __source: {
          fileName: _jsxFileName,
          lineNumber: 79
        }
      }))), _react2.default.createElement(_grid.GridRows, {
        lineStyle: { pointerEvents: 'none' },
        scale: yScale,
        width: xMax,
        strokeDasharray: '2,2',
        stroke: 'rgba(255,255,255,0.3)',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 82
        }
      }), _react2.default.createElement(_grid.GridColumns, {
        lineStyle: { pointerEvents: 'none' },
        scale: xScale,
        height: yMax,
        strokeDasharray: '2,2',
        stroke: 'rgba(255,255,255,0.3)',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89
        }
      }), _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: 96
        }
      }), _react2.default.createElement(_shape.Bar, {
        x: 0,
        y: 0,
        width: width,
        height: height,
        fill: 'transparent',
        rx: 14,
        data: stock,
        onTouchStart: function onTouchStart(data) {
          return function (event) {
            return _this2.handleTooltip({
              event: event,
              data: data,
              xStock: xStock,
              xScale: xScale,
              yScale: yScale
            });
          };
        },
        onTouchMove: function onTouchMove(data) {
          return function (event) {
            return _this2.handleTooltip({
              event: event,
              data: data,
              xStock: xStock,
              xScale: xScale,
              yScale: yScale
            });
          };
        },
        onMouseMove: function onMouseMove(data) {
          return function (event) {
            return _this2.handleTooltip({
              event: event,
              data: data,
              xStock: xStock,
              xScale: xScale,
              yScale: yScale
            });
          };
        },
        onMouseLeave: function onMouseLeave(data) {
          return function (event) {
            return hideTooltip();
          };
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 107
        }
      }), tooltipData && _react2.default.createElement('g', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 142
        }
      }, _react2.default.createElement(_shape.Line, {
        from: { x: tooltipLeft, y: 0 },
        to: { x: tooltipLeft, y: yMax },
        stroke: 'rgba(92, 119, 235, 1.000)',
        strokeWidth: 2,
        style: { pointerEvents: 'none' },
        strokeDasharray: '2,2',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 143
        }
      }), _react2.default.createElement('circle', {
        cx: tooltipLeft,
        cy: tooltipTop + 1,
        r: 4,
        fill: 'black',
        fillOpacity: 0.1,
        stroke: 'black',
        strokeOpacity: 0.1,
        strokeWidth: 2,
        style: { pointerEvents: 'none' },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 151
        }
      }), _react2.default.createElement('circle', {
        cx: tooltipLeft,
        cy: tooltipTop,
        r: 4,
        fill: 'rgba(92, 119, 235, 1.000)',
        stroke: 'white',
        strokeWidth: 2,
        style: { pointerEvents: 'none' },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 162
        }
      }))), tooltipData && _react2.default.createElement('div', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 175
        }
      }, _react2.default.createElement(_tooltip.Tooltip, {
        top: tooltipTop - 12,
        left: tooltipLeft + 12,
        style: {
          backgroundColor: 'rgba(92, 119, 235, 1.000)',
          color: 'white'
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 176
        }
      }, '$' + yStock(tooltipData)), _react2.default.createElement(_tooltip.Tooltip, {
        top: yMax - 14,
        left: tooltipLeft,
        style: {
          transform: 'translateX(-50%)'
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 186
        }
      }, formatDate(xStock(tooltipData)))));
    }
  }]);

  return Area;
}(_react2.default.Component);

exports.default = (0, _tooltip.withTooltip)(Area);
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 