'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

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

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

var _threshold = require('@vx/threshold');

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

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

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

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

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/threshold.js';


var parseDate = (0, _d3TimeFormat.timeParse)('%Y%m%d');

// accessors
var date = function date(d) {
  return parseDate(d.date);
};
var ny = function ny(d) {
  return d['New York'];
};
var sf = function sf(d) {
  return d['San Francisco'];
};

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

  function Thresholds() {
    (0, _classCallCheck3.default)(this, Thresholds);

    return (0, _possibleConstructorReturn3.default)(this, (Thresholds.__proto__ || (0, _getPrototypeOf2.default)(Thresholds)).apply(this, arguments));
  }

  (0, _createClass3.default)(Thresholds, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          width = _props.width,
          height = _props.height,
          margin = _props.margin,
          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: [Math.min.apply(Math, (0, _toConsumableArray3.default)(_mockData.cityTemperature.map(date))), Math.max.apply(Math, (0, _toConsumableArray3.default)(_mockData.cityTemperature.map(date)))]
      });
      var yScale = (0, _scale.scaleLinear)({
        range: [yMax, 0],
        domain: [Math.min.apply(Math, (0, _toConsumableArray3.default)(_mockData.cityTemperature.map(function (d) {
          return Math.min(ny(d), sf(d));
        }))), Math.max.apply(Math, (0, _toConsumableArray3.default)(_mockData.cityTemperature.map(function (d) {
          return Math.max(ny(d), sf(d));
        })))],
        nice: true
      });

      return _react2.default.createElement('div', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 43
        }
      }, _react2.default.createElement('svg', { width: width, height: height, __source: {
          fileName: _jsxFileName,
          lineNumber: 44
        }
      }, _react2.default.createElement('rect', { x: 0, y: 0, width: width, height: height, fill: '#f3f3f3', rx: 14, __source: {
          fileName: _jsxFileName,
          lineNumber: 45
        }
      }), _react2.default.createElement(_group.Group, { left: margin.left, top: margin.top, __source: {
          fileName: _jsxFileName,
          lineNumber: 46
        }
      }, _react2.default.createElement(_grid.GridRows, { scale: yScale, width: xMax, height: yMax, stroke: '#e0e0e0', __source: {
          fileName: _jsxFileName,
          lineNumber: 47
        }
      }), _react2.default.createElement(_grid.GridColumns, { scale: xScale, width: xMax, height: yMax, stroke: '#e0e0e0', __source: {
          fileName: _jsxFileName,
          lineNumber: 48
        }
      }), _react2.default.createElement('line', { x1: xMax, x2: xMax, y1: 0, y2: yMax, stroke: '#e0e0e0', __source: {
          fileName: _jsxFileName,
          lineNumber: 49
        }
      }), _react2.default.createElement(_axis.AxisBottom, { top: yMax, scale: xScale, numTicks: width > 520 ? 10 : 5, __source: {
          fileName: _jsxFileName,
          lineNumber: 50
        }
      }), _react2.default.createElement(_axis.AxisLeft, { scale: yScale, __source: {
          fileName: _jsxFileName,
          lineNumber: 51
        }
      }), _react2.default.createElement('text', { x: '-70', y: '15', transform: 'rotate(-90)', fontSize: 10, __source: {
          fileName: _jsxFileName,
          lineNumber: 52
        }
      }, 'Temperature (\xB0F)'), _react2.default.createElement(_threshold.Threshold, {
        data: _mockData.cityTemperature,
        x: date,
        y0: ny,
        y1: sf,
        xScale: xScale,
        yScale: yScale,
        clipAboveTo: 0,
        clipBelowTo: yMax,
        curve: _curve.curveBasis,
        belowAreaProps: {
          fill: 'red',
          fillOpacity: 0.4
        },
        aboveAreaProps: {
          fill: 'green',
          fillOpacity: 0.4
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 55
        }
      }), _react2.default.createElement(_shape.LinePath, {
        data: _mockData.cityTemperature,
        curve: _curve.curveBasis,
        x: date,
        y: sf,
        xScale: xScale,
        yScale: yScale,
        stroke: '#000',
        strokeWidth: 1.5,
        strokeOpacity: 0.8,
        strokeDasharray: '1,2',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74
        }
      }), _react2.default.createElement(_shape.LinePath, {
        data: _mockData.cityTemperature,
        curve: _curve.curveBasis,
        x: date,
        y: ny,
        xScale: xScale,
        yScale: yScale,
        stroke: '#000',
        strokeWidth: 1.5,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 86
        }
      }))));
    }
  }]);

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

exports.default = Thresholds;
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 