recharts/lib/shape/Curve.js

React charts

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _class2, _temp; /**
                             * @fileOverview Curve
                             */

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _d3Shape = require('d3-shape');

var _d3Shape2 = _interopRequireDefault(_d3Shape);

var _pureRenderDecorator = require('pure-render-decorator');

var _pureRenderDecorator2 = _interopRequireDefault(_pureRenderDecorator);

var _ReactUtils = require('../util/ReactUtils');

var _ReactUtils2 = _interopRequireDefault(_ReactUtils);

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Curve = (0, _pureRenderDecorator2.default)(_class = (_temp = _class2 = function (_Component) {
  _inherits(Curve, _Component);

  function Curve() {
    _classCallCheck(this, Curve);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(Curve).apply(this, arguments));
  }

  _createClass(Curve, [{
    key: 'getCurveFactory',
    value: function getCurveFactory(type) {
      var name = 'curve' + type.slice(0, 1).toUpperCase() + type.slice(1);

      return _d3Shape2.default[name];
    }

    /**
     * Calculate the path of curve
     * @return {String} path
     */

  }, {
    key: 'getPath',
    value: function getPath() {
      var _props = this.props;
      var type = _props.type;
      var points = _props.points;
      var baseLine = _props.baseLine;
      var baseLineType = _props.baseLineType;

      var l = _d3Shape2.default.line().x(function (p) {
        return p.x;
      }).y(function (p) {
        return p.y;
      }).defined(function (p) {
        return p.x === +p.x && p.y === +p.y;
      }).curve(this.getCurveFactory(type));
      var len = points.length;
      var curvePath = l(points);

      if (!curvePath) {
        return '';
      }

      if (baseLineType === 'curve' && baseLine && baseLine.length) {
        var revese = baseLine.reduce(function (result, entry) {
          return [entry].concat(_toConsumableArray(result));
        }, []);
        var revesePath = this.fliterMouseToSeg(l(revese) || '');

        curvePath += 'L' + revese[0].x + ' ' + revese[0].y + revesePath + 'Z';
      } else if (baseLineType === 'horizontal' && baseLine === +baseLine) {
        curvePath += 'L' + points[len - 1].x + ' ' + baseLine + 'L' + points[0].x + ' ' + baseLine + 'Z';
      } else if (baseLineType === 'vertical' && baseLine === +baseLine) {
        curvePath += 'L' + baseLine + ' ' + points[len - 1].y + 'L' + baseLine + ' ' + points[0].y + 'Z';
      }

      return curvePath;
    }
  }, {
    key: 'fliterMouseToSeg',
    value: function fliterMouseToSeg(path) {
      var reg = /[CSLHVcslhv]/;
      var res = reg.exec(path);

      if (res && res.length) {
        var index = path.indexOf(res[0]);

        return path.slice(index);
      }

      return path;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props;
      var className = _props2.className;
      var points = _props2.points;
      var type = _props2.type;
      var onClick = _props2.onClick;
      var onMouseEnter = _props2.onMouseEnter;
      var onMouseLeave = _props2.onMouseLeave;

      if (!points || !points.length) {
        return null;
      }

      return _react2.default.createElement('path', _extends({}, _ReactUtils2.default.getPresentationAttributes(this.props), {
        className: 'recharts-curve ' + (className || ''),
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        onClick: onClick,
        d: this.getPath()
      }));
    }
  }]);

  return Curve;
}(_react.Component), _class2.displayName = 'Curve', _class2.propTypes = _extends({}, _ReactUtils.PRESENTATION_ATTRIBUTES, {
  className: _react.PropTypes.string,
  type: _react.PropTypes.oneOf(['linear', 'monotone', 'step', 'stepBefore', 'stepAfter']),
  onMouseEnter: _react.PropTypes.func,
  onMouseLeave: _react.PropTypes.func,
  onClick: _react.PropTypes.func,
  baseLineType: _react.PropTypes.oneOf(['horizontal', 'vertical', 'curve']),
  baseLine: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.array]),
  points: _react.PropTypes.arrayOf(_react.PropTypes.object)
}), _class2.defaultProps = {
  type: 'linear',
  stroke: '#000',
  fill: 'none',
  strokeWidth: 1,
  strokeDasharray: 'none',
  points: [],
  onClick: function onClick() {},
  onMouseEnter: function onMouseEnter() {},
  onMouseLeave: function onMouseLeave() {}
}, _temp)) || _class;

exports.default = Curve;