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

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

"use strict";

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

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

var _shared = require("@data-ui/shared");

var _group = require("@vx/group");

var _text = require("@vx/text");

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

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

var _chartUtils = require("../utils/chartUtils");

var _GlyphDotComponent = _interopRequireDefault(require("../glyph/GlyphDotComponent"));

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

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

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, {
  data: _propShapes.pointSeriesDataShape.isRequired,
  defaultLabelProps: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  pointComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element]),
  fill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  fillOpacity: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  renderLabel: _propTypes.default.func,
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  strokeDasharray: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  size: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number])
});

exports.propTypes = propTypes;
var baseLabel = _theme.svgLabel.baseLabel;

var defaultLabelProps = _extends({}, baseLabel, {
  textAnchor: 'start',
  verticalAnchor: 'start',
  dx: '0.25em',
  dy: '0.25em',
  pointerEvents: 'none',
  stroke: '#fff',
  strokeWidth: 2,
  paintOrder: 'stroke',
  fontSize: 12
});

exports.defaultLabelProps = defaultLabelProps;
var defaultProps = {
  defaultLabelProps: defaultLabelProps,

  /* eslint-disable react/prop-types */
  renderLabel: function renderLabel(_ref) {
    var datum = _ref.datum,
        labelProps = _ref.labelProps;
    return datum.label ? _react.default.createElement(_text.Text, labelProps, datum.label) : null;
  },

  /* eslint-enable react/prop-types */
  pointComponent: _GlyphDotComponent.default,
  size: 4,
  fill: _theme.color.default,
  fillOpacity: 0.8,
  stroke: '#FFFFFF',
  strokeDasharray: null,
  strokeWidth: 1
};
exports.defaultProps = defaultProps;
var noEventsStyles = {
  pointerEvents: 'none'
};

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

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

  var _proto = PointSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        labelProps = _this$props.defaultLabelProps,
        disableMouseEvents = _this$props.disableMouseEvents,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        renderLabel = _this$props.renderLabel,
        size = _this$props.size,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        strokeDasharray = _this$props.strokeDasharray,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        onClick = _this$props.onClick,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave,
        pointComponent = _this$props.pointComponent;
    if (!xScale || !yScale) return null;
    var Labels = [];
    return _react.default.createElement(_group.Group, {
      style: disableMouseEvents ? noEventsStyles : null
    }, data.map(function (d, i) {
      var xVal = d.x;
      var yVal = d.y;
      var defined = (0, _chartUtils.isDefined)(xVal) && (0, _chartUtils.isDefined)(yVal);
      var x = xScale(xVal);
      var y = yScale(yVal);
      var computedFill = d.fill || (0, _chartUtils.callOrValue)(fill, d, i);
      var key = d.x + "-" + i;
      var computedSize = d.size || (0, _chartUtils.callOrValue)(size, d, i);
      var computedFillOpacity = d.fillOpacity || (0, _chartUtils.callOrValue)(fillOpacity, d, i);
      var computedStroke = d.stroke || (0, _chartUtils.callOrValue)(stroke, d, i);
      var computedStrokeWidth = d.strokeWidth || (0, _chartUtils.callOrValue)(strokeWidth, d, i);
      var computedStrokeDasharray = d.strokeDasharray || (0, _chartUtils.callOrValue)(strokeDasharray, d, i);

      if (defined && renderLabel) {
        var Label = renderLabel({
          datum: d,
          index: i,
          labelProps: _extends({
            key: key
          }, labelProps, {
            x: x,
            y: y
          })
        });
        if (Label) Labels.push(Label);
      }

      var props = {
        x: x,
        y: y,
        size: computedSize,
        fill: computedFill,
        fillOpacity: computedFillOpacity,
        stroke: computedStroke,
        strokeWidth: computedStrokeWidth,
        strokeDasharray: computedStrokeDasharray,
        onClick: disableMouseEvents ? null : onClick,
        onMouseMove: disableMouseEvents ? null : onMouseMove,
        onMouseLeave: disableMouseEvents ? null : onMouseLeave,
        data: data,
        datum: d
      };
      return defined && _react.default.createElement(_shared.FocusBlurHandler, {
        key: key,
        xlinkHref: "#",
        onBlur: disableMouseEvents ? null : props.onMouseLeave,
        onFocus: disableMouseEvents ? null : function (event) {
          onMouseMove({
            event: event,
            data: data,
            datum: d,
            color: computedFill,
            index: i
          });
        }
      }, _react.default.createElement(pointComponent, props));
    }), Labels.map(function (Label) {
      return Label;
    }));
  };

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

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