@data-ui/xy-chart/esm/series/StackedAreaSeries.js

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

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

import React from 'react';
import PropTypes from 'prop-types';
import { Group } from '@vx/group';
import { Stack } from '@vx/shape';
import { color } from '@data-ui/theme';
import interpolatorLookup from '../utils/interpolatorLookup';
import { callOrValue, isDefined } from '../utils/chartUtils';
import findClosestDatum from '../utils/findClosestDatum';
import { lineSeriesDataShape, interpolationShape } from '../utils/propShapes';
import sharedSeriesProps from '../utils/sharedSeriesProps';

var propTypes = _extends({}, sharedSeriesProps, {
  data: lineSeriesDataShape.isRequired,
  fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  interpolation: interpolationShape,
  stackKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
  stackFills: PropTypes.arrayOf(PropTypes.string),
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number])
});

var defaultProps = {
  fillOpacity: 0.7,
  interpolation: 'monotoneX',
  stackFills: color.categories,
  stroke: '#fff',
  strokeWidth: 1
};

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

var _y = function y0(d) {
  return d && d[0];
};

var _y2 = function y1(d) {
  return d && d[1];
};

var defined = function defined(d) {
  return isDefined(d[0]) && isDefined(d[1]);
};

var noEventsStyles = {
  pointerEvents: 'none'
};

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

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

  var _proto = StackedAreaSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        disableMouseEvents = _this$props.disableMouseEvents,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        margin = _this$props.margin,
        stackKeys = _this$props.stackKeys,
        stackFills = _this$props.stackFills,
        _fillOpacity = _this$props.fillOpacity,
        _stroke = _this$props.stroke,
        _strokeWidth = _this$props.strokeWidth,
        interpolation = _this$props.interpolation,
        onClick = _this$props.onClick,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave;
    if (!xScale || !yScale) return null;
    return React.createElement(Group, {
      style: disableMouseEvents ? noEventsStyles : null
    }, React.createElement(Stack, {
      data: data,
      x: function x(d) {
        return xScale(_x(d.data));
      },
      y0: function y0(d) {
        return yScale(_y(d));
      },
      y1: function y1(d) {
        return yScale(_y2(d));
      },
      keys: stackKeys,
      fill: function fill(_ref) {
        var index = _ref.index;
        return stackFills[index];
      },
      fillOpacity: function fillOpacity(_ref2) {
        var index = _ref2.index,
            datum = _ref2.datum;
        return callOrValue(_fillOpacity, {
          datum: datum,
          index: index
        });
      },
      stroke: function stroke(_ref3) {
        var datum = _ref3.datum,
            index = _ref3.index;
        return callOrValue(_stroke, {
          datum: datum,
          index: index
        });
      },
      strokeWidth: function strokeWidth(_ref4) {
        var datum = _ref4.datum,
            index = _ref4.index;
        return callOrValue(_strokeWidth, {
          datum: datum,
          index: index
        });
      },
      curve: interpolatorLookup[interpolation] || interpolatorLookup.monotoneX,
      defined: defined,
      onClick: disableMouseEvents ? null : onClick && function (_ref5) {
        var series = _ref5.series,
            index = _ref5.index;
        return function (event) {
          var datum = findClosestDatum({
            data: series,
            getX: function getX(d) {
              return _x(d.data);
            },
            event: event,
            xScale: xScale,
            marginLeft: margin.left
          });
          onClick({
            event: event,
            data: data,
            seriesKey: series.key,
            datum: datum && datum.data,
            color: stackFills[index]
          });
        };
      },
      onMouseMove: disableMouseEvents ? null : onMouseMove && function (_ref6) {
        var series = _ref6.series,
            index = _ref6.index;
        return function (event) {
          var datum = findClosestDatum({
            data: series,
            getX: function getX(d) {
              return _x(d.data);
            },
            event: event,
            xScale: xScale,
            marginLeft: margin.left
          });
          onMouseMove({
            event: event,
            data: data,
            seriesKey: series.key,
            datum: datum && datum.data,
            color: stackFills[index]
          });
        };
      },
      onMouseLeave: disableMouseEvents ? null : function () {
        return onMouseLeave;
      }
    }));
  };

  return StackedAreaSeries;
}(React.PureComponent);

export { StackedAreaSeries as default };
StackedAreaSeries.propTypes = propTypes;
StackedAreaSeries.defaultProps = defaultProps;
StackedAreaSeries.displayName = 'StackedAreaSeries';