@data-ui/xy-chart/esm/series/AreaSeries.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 { Area, LinePath } from '@vx/shape';
import { color } from '@data-ui/theme';
import { FocusBlurHandler } from '@data-ui/shared';
import { Group } from '@vx/group';
import PropTypes from 'prop-types';
import React from 'react';
import { areaSeriesDataShape, interpolationShape } from '../utils/propShapes';
import { callOrValue, isDefined } from '../utils/chartUtils';
import findClosestDatum from '../utils/findClosestDatum';
import interpolatorLookup from '../utils/interpolatorLookup';
import sharedSeriesProps from '../utils/sharedSeriesProps';

var propTypes = _extends({}, sharedSeriesProps, {
  data: areaSeriesDataShape.isRequired,
  fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  interpolation: interpolationShape,
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeDasharray: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round', 'inherit'])
});

var defaultProps = {
  interpolation: 'monotoneX',
  stroke: color.default,
  strokeWidth: 3,
  strokeDasharray: null,
  strokeLinecap: 'round',
  fill: color.default,
  fillOpacity: 0.3
};

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

var getY = function getY(d) {
  return d && d.y;
};

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

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

var definedClosed = function definedClosed(d) {
  return isDefined(getY(d));
};

var definedOpen = function definedOpen(d) {
  return isDefined(getY0(d)) && isDefined(getY1(d));
};

var noEventsStyles = {
  pointerEvents: 'none'
};

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

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

  var _proto = AreaSeries.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,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        strokeDasharray = _this$props.strokeDasharray,
        strokeLinecap = _this$props.strokeLinecap,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        interpolation = _this$props.interpolation,
        onClick = _this$props.onClick,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave;
    if (!xScale || !yScale) return null;
    var datum0 = data[0] || {};
    var isClosed = !definedOpen(datum0);
    var yMin = yScale.domain()[0];
    var y0 = isClosed ? function () {
      return yMin;
    } : getY0;
    var y1 = isClosed ? getY : getY1;
    var defined = isClosed ? definedClosed : definedOpen;
    var strokeDasharrayValue = callOrValue(strokeDasharray, data);
    var strokeValue = callOrValue(stroke, data);
    var strokeWidthValue = callOrValue(strokeWidth, data);
    var fillValue = callOrValue(fill, data);
    var curve = interpolatorLookup[interpolation] || interpolatorLookup.monotoneX;
    return React.createElement(Group, {
      style: disableMouseEvents ? noEventsStyles : null,
      onClick: disableMouseEvents ? null : onClick && function (event) {
        var d = findClosestDatum({
          data: data,
          getX: x,
          event: event,
          xScale: xScale,
          marginLeft: margin.left
        });
        onClick({
          event: event,
          data: data,
          datum: d,
          color: fillValue
        });
      },
      onMouseMove: disableMouseEvents ? null : onMouseMove && function (event) {
        var d = findClosestDatum({
          data: data,
          getX: x,
          event: event,
          xScale: xScale,
          marginLeft: margin.left
        });
        onMouseMove({
          event: event,
          data: data,
          datum: d,
          color: fillValue
        });
      },
      onMouseLeave: disableMouseEvents ? null : onMouseLeave
    }, React.createElement(Area, {
      data: data,
      x: x,
      y0: y0,
      y1: y1,
      xScale: xScale,
      yScale: yScale,
      fill: fillValue,
      fillOpacity: callOrValue(fillOpacity, data),
      stroke: "transparent",
      strokeWidth: strokeWidthValue,
      curve: curve,
      defined: defined
    }), strokeWidthValue > 0 && !isClosed && React.createElement(LinePath, {
      data: data,
      x: x,
      y: y0,
      xScale: xScale,
      yScale: yScale,
      stroke: strokeValue,
      strokeWidth: strokeWidthValue,
      strokeDasharray: strokeDasharrayValue,
      strokeLinecap: strokeLinecap,
      curve: curve,
      glyph: null,
      defined: defined
    }), React.createElement(LinePath, {
      data: data,
      x: x,
      y: y1,
      xScale: xScale,
      yScale: yScale,
      stroke: strokeValue,
      strokeWidth: strokeWidthValue,
      strokeDasharray: strokeDasharrayValue,
      strokeLinecap: strokeLinecap,
      curve: curve,
      defined: defined,
      glyph: function glyph(d, i) {
        return React.createElement(FocusBlurHandler, {
          key: "areapoint-" + i,
          onBlur: disableMouseEvents ? null : onMouseLeave,
          onFocus: disableMouseEvents ? null : function (event) {
            onMouseMove({
              event: event,
              data: data,
              datum: d,
              color: strokeValue,
              index: i
            });
          }
        });
      }
    }));
  };

  return AreaSeries;
}(React.PureComponent);

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