@data-ui/xy-chart/lib/series/AreaDifferenceSeries.js

A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui

"use strict";

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

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

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

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

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

var _interpolatorLookup = _interopRequireDefault(require("../utils/interpolatorLookup"));

var _propShapes = require("../utils/propShapes");

var _sharedSeriesProps = _interopRequireDefault(require("../utils/sharedSeriesProps"));

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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; }

function _extends() { _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; }; return _extends.apply(this, arguments); }

var propTypes = _extends({}, _sharedSeriesProps.default, {
  children: _propTypes.default.node.isRequired,
  // AreaSeries type
  interpolation: _propShapes.interpolationShape
});

var defaultProps = {
  interpolation: 'monotoneX'
};
var DEFAULT_OPACITY = 0.4;

var getX = function getX(d) {
  return d.x;
};

var getY0 = function getY0(d) {
  return d.y0;
};

var getY1 = function getY1(d) {
  return d.y1;
};

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

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

  var _proto = AreaDifferenceSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        disableMouseEvents = _this$props.disableMouseEvents,
        interpolation = _this$props.interpolation,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        onClick = _this$props.onClick,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave,
        children = _this$props.children,
        margin = _this$props.margin;
    if (!xScale || !yScale) return null;

    var childArray = _react.Children.toArray(children);

    var child1 = childArray[0],
        child2 = childArray[1];

    if (childArray.length !== 2 || child1.type.displayName !== 'AreaSeries' || child2.type.displayName !== 'AreaSeries') {
      console.warn('AreaDifferenceSeries expects exactly two AreaSeries children');
      return null;
    }

    var _child1$props = child1.props,
        data1 = _child1$props.data,
        fill1 = _child1$props.fill,
        opacity1 = _child1$props.fillOpacity;
    var _child2$props = child2.props,
        data2 = _child2$props.data,
        fill2 = _child2$props.fill,
        opacity2 = _child2$props.fillOpacity;

    if (data1.length !== data2.length) {
      console.warn('AreaDifferenceSeries children should have the same data length');
      return null;
    }

    var curve = _interpolatorLookup.default[interpolation] || _interpolatorLookup.default.monotoneX;
    var yExtent = yScale.range();
    var mergedData = data1.map(function (d, i) {
      return {
        x: d.x,
        y0: d.y,
        y1: data2[i].y
      };
    });
    return _react.default.createElement("g", null, _react.default.createElement(_threshold.Threshold, {
      data: mergedData,
      x: getX,
      y0: getY0,
      y1: getY1,
      xScale: xScale,
      yScale: yScale,
      clipAboveTo: Math.min.apply(Math, yExtent),
      clipBelowTo: Math.max.apply(Math, yExtent),
      curve: curve,
      aboveAreaProps: {
        fill: fill1 || _theme.color.categories[0],
        fillOpacity: opacity1 || DEFAULT_OPACITY
      },
      belowAreaProps: {
        fill: fill2 || _theme.color.categories[0],
        fillOpacity: opacity2 || DEFAULT_OPACITY
      }
    }), childArray.map(function (Child) {
      return _react.default.cloneElement(Child, {
        xScale: xScale,
        yScale: yScale,
        onClick: onClick,
        onMouseMove: onMouseMove,
        onMouseLeave: onMouseLeave,
        interpolation: interpolation,
        disableMouseEvents: Child.props.disableMouseEvents || disableMouseEvents,
        fill: 'transparent',
        margin: margin
      });
    }));
  };

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

exports.default = AreaDifferenceSeries;
AreaDifferenceSeries.propTypes = propTypes;
AreaDifferenceSeries.defaultProps = defaultProps;
AreaDifferenceSeries.displayName = 'AreaDifferenceSeries';