@data-ui/xy-chart/lib/chart/CrossHair.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 _react = _interopRequireDefault(require("react"));

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

var _d3Array = require("d3-array");

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

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

var _shape = require("@vx/shape");

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

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

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 GROUP_STYLE = {
  pointerEvents: 'none'
};
var propTypes = {
  fullHeight: _propTypes.default.bool,
  fullWidth: _propTypes.default.bool,
  circleSize: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  circleFill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  circleStroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  circleStyles: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]))]),
  lineStyles: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
  showCircle: _propTypes.default.bool,
  showMultipleCircles: _propTypes.default.bool,
  showHorizontalLine: _propTypes.default.bool,
  showVerticalLine: _propTypes.default.bool,
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeDasharray: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  // likely injected by parent
  datum: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  series: _propTypes.default.objectOf(_propTypes.default.object),
  getScaledX: _propTypes.default.func,
  getScaledY: _propTypes.default.func,
  xScale: _propTypes.default.func,
  yScale: _propTypes.default.func
};
var defaultProps = {
  circleSize: 4,
  circleFill: _theme.color.grays[7],
  circleStroke: '#ffffff',
  circleStyles: {
    pointerEvents: 'none'
  },
  datum: {},
  getScaledX: null,
  getScaledY: null,
  lineStyles: {
    pointerEvents: 'none'
  },
  fullHeight: false,
  fullWidth: false,
  series: {},
  showCircle: true,
  showMultipleCircles: false,
  showHorizontalLine: true,
  showVerticalLine: true,
  stroke: _theme.color.grays[6],
  strokeDasharray: '5,2',
  strokeWidth: 1,
  xScale: null,
  yScale: null
};

function CrossHair(_ref) {
  var circleFill = _ref.circleFill,
      circleSize = _ref.circleSize,
      circleStroke = _ref.circleStroke,
      circleStyles = _ref.circleStyles,
      datum = _ref.datum,
      getScaledX = _ref.getScaledX,
      getScaledY = _ref.getScaledY,
      fullHeight = _ref.fullHeight,
      fullWidth = _ref.fullWidth,
      lineStyles = _ref.lineStyles,
      series = _ref.series,
      showHorizontalLine = _ref.showHorizontalLine,
      showCircle = _ref.showCircle,
      showMultipleCircles = _ref.showMultipleCircles,
      showVerticalLine = _ref.showVerticalLine,
      stroke = _ref.stroke,
      strokeDasharray = _ref.strokeDasharray,
      strokeWidth = _ref.strokeWidth,
      xScale = _ref.xScale,
      yScale = _ref.yScale;
  if (!xScale || !yScale || !getScaledX || !getScaledY) return null;

  var _extent = (0, _d3Array.extent)(xScale.range()),
      xMin = _extent[0],
      xMax = _extent[1];

  var _extent2 = (0, _d3Array.extent)(yScale.range()),
      yMin = _extent2[0],
      yMax = _extent2[1];

  var circleData = showMultipleCircles && series && Object.keys(series).length > 0 ? Object.keys(series).map(function (seriesKey) {
    return _extends({
      seriesKey: seriesKey
    }, series[seriesKey]);
  }) : [datum];
  var circlePositions = circleData.map(function (d) {
    return {
      x: getScaledX(d),
      y: getScaledY(d)
    };
  });
  return _react.default.createElement(_group.Group, {
    style: GROUP_STYLE
  }, showHorizontalLine && !showMultipleCircles && (0, _chartUtils.isDefined)(circlePositions[0].y) && _react.default.createElement(_shape.Line, {
    from: {
      x: xMin,
      y: circlePositions[0].y
    },
    to: {
      x: fullWidth ? xMax : circlePositions[0].x,
      y: circlePositions[0].y
    },
    style: lineStyles,
    stroke: stroke,
    strokeDasharray: strokeDasharray,
    strokeWidth: strokeWidth
  }), showVerticalLine && (0, _chartUtils.isDefined)(circlePositions[0].x) && _react.default.createElement(_shape.Line, {
    from: {
      x: circlePositions[0].x,
      y: yMax
    },
    to: {
      x: circlePositions[0].x,
      y: fullHeight ? yMin : circlePositions[0].y
    },
    style: lineStyles,
    stroke: stroke,
    strokeDasharray: strokeDasharray,
    strokeWidth: strokeWidth
  }), (showCircle || showMultipleCircles) && circleData.map(function (d, i) {
    var _circlePositions$i = circlePositions[i],
        x = _circlePositions$i.x,
        y = _circlePositions$i.y;
    return (0, _chartUtils.isDefined)(x) && (0, _chartUtils.isDefined)(y) && _react.default.createElement("circle", {
      key: "circle-" + (d.seriesKey || i),
      cx: x,
      cy: y,
      r: (0, _chartUtils.callOrValue)(circleSize, d, i),
      fill: (0, _chartUtils.callOrValue)(circleFill, d, i),
      strokeWidth: 1,
      stroke: (0, _chartUtils.callOrValue)(circleStroke, d, i),
      style: (0, _chartUtils.callOrValue)(circleStyles, d, i)
    });
  }));
}

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