@data-ui/sparkline/lib/series/LineSeries.js

React + d3 library for creating sparklines

"use strict";

exports.__esModule = true;
exports.default = exports.defaultProps = exports.propTypes = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

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

var _Group = _interopRequireDefault(require("@vx/group/build/Group"));

var _LinePath = _interopRequireDefault(require("@vx/shape/build/shapes/LinePath"));

var _AreaClosed = _interopRequireDefault(require("@vx/shape/build/shapes/AreaClosed"));

var _theme = require("@data-ui/theme");

var _defined2 = _interopRequireDefault(require("../utils/defined"));

var _findClosestDatum2 = _interopRequireDefault(require("../utils/findClosestDatum"));

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var propTypes = {
  curve: _propTypes.default.oneOf(['linear', 'cardinal', 'basis', 'monotoneX']),
  fill: _propTypes.default.string,
  fillOpacity: _propTypes.default.number,
  onMouseMove: _propTypes.default.func,
  onMouseLeave: _propTypes.default.func,
  showArea: _propTypes.default.bool,
  showLine: _propTypes.default.bool,
  stroke: _propTypes.default.string,
  strokeDasharray: _propTypes.default.string,
  strokeLinecap: _propTypes.default.oneOf(['butt', 'square', 'round', 'inherit']),
  strokeWidth: _propTypes.default.number,
  // all likely passed by the parent chart
  data: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object])),
  getX: _propTypes.default.func,
  getY: _propTypes.default.func,
  xScale: _propTypes.default.func,
  yScale: _propTypes.default.func,
  margin: _propTypes.default.shape({
    top: _propTypes.default.number,
    right: _propTypes.default.number,
    bottom: _propTypes.default.number,
    left: _propTypes.default.number
  })
};
exports.propTypes = propTypes;
var defaultProps = {
  curve: 'monotoneX',
  data: [],
  fill: _theme.color.default,
  fillOpacity: 0.3,
  getX: null,
  getY: null,
  onMouseMove: null,
  onMouseLeave: null,
  showArea: false,
  showLine: true,
  stroke: _theme.color.default,
  strokeWidth: 2,
  strokeDasharray: null,
  strokeLinecap: 'round',
  xScale: null,
  yScale: null,
  margin: {}
};
exports.defaultProps = defaultProps;
var CURVE_LOOKUP = {
  linear: _curve.curveLinear,
  basis: _curve.curveBasis,
  cardinal: _curve.curveCardinal,
  monotoneX: _curve.curveMonotoneX
};

var LineSeries =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(LineSeries, _React$PureComponent);

  function LineSeries() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = LineSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        curve = _this$props.curve,
        data = _this$props.data,
        getX = _this$props.getX,
        getY = _this$props.getY,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave,
        showArea = _this$props.showArea,
        showLine = _this$props.showLine,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        strokeDasharray = _this$props.strokeDasharray,
        strokeLinecap = _this$props.strokeLinecap,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        margin = _this$props.margin;
    if (!xScale || !yScale || !getX || !getY || !data.length) return null;
    var curveFunc = CURVE_LOOKUP[curve];
    return _react.default.createElement(_Group.default, {
      onMouseMove: onMouseMove && function (event) {
        var _findClosestDatum = (0, _findClosestDatum2.default)({
          data: data,
          getX: getX,
          event: event,
          xScale: xScale,
          marginLeft: margin.left
        }),
            datum = _findClosestDatum.datum,
            index = _findClosestDatum.index;

        onMouseMove({
          event: event,
          data: data,
          datum: datum,
          index: index,
          color: fill
        });
      },
      onMouseLeave: onMouseLeave
    }, showArea && _react.default.createElement(_AreaClosed.default, {
      data: data,
      x: getX,
      y: getY,
      xScale: xScale,
      yScale: yScale,
      fill: fill,
      fillOpacity: fillOpacity,
      stroke: "transparent",
      strokeWidth: strokeWidth,
      curve: curveFunc,
      defined: function defined(d) {
        return (0, _defined2.default)(getY(d));
      }
    }), showLine && strokeWidth > 0 && _react.default.createElement(_LinePath.default, {
      data: data,
      x: getX,
      y: getY,
      xScale: xScale,
      yScale: yScale,
      stroke: stroke,
      strokeWidth: strokeWidth,
      strokeDasharray: strokeDasharray,
      strokeLinecap: strokeLinecap,
      curve: curveFunc,
      glyph: null,
      defined: function defined(d) {
        return (0, _defined2.default)(getY(d));
      }
    }));
  };

  return LineSeries;
}(_react.default.PureComponent);

LineSeries.propTypes = propTypes;
LineSeries.defaultProps = defaultProps;
LineSeries.displayName = 'LineSeries';
var _default = LineSeries;
exports.default = _default;