@data-ui/sparkline/lib/annotation/VerticalReferenceLine.js

React + d3 library for creating sparklines

"use strict";

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

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

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

var _Group = _interopRequireDefault(require("@vx/group/build/Group"));

var _Line = _interopRequireDefault(require("@vx/shape/build/shapes/Line"));

var _Point = _interopRequireDefault(require("@vx/point/build/Point"));

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

var _Label = _interopRequireDefault(require("./Label"));

var _positionLabel = _interopRequireDefault(require("../utils/positionLabel"));

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 ZERO_DELTA = 0.00001;
var propTypes = {
  reference: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['first', 'last', 'min', 'max'])]),
  LabelComponent: _propTypes.default.element,
  labelOffset: _propTypes.default.number,
  labelPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
  renderLabel: _propTypes.default.func,
  stroke: _propTypes.default.string,
  strokeDasharray: _propTypes.default.string,
  strokeLinecap: _propTypes.default.oneOf(['butt', 'square', 'round', 'inherit']),
  strokeWidth: _propTypes.default.number,
  // all likely passed by the parent chart
  data: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object])),
  getX: _propTypes.default.func,
  getY: _propTypes.default.func,
  xScale: _propTypes.default.func,
  yScale: _propTypes.default.func
};
exports.propTypes = propTypes;
var defaultProps = {
  data: [],
  getX: null,
  getY: null,
  LabelComponent: _react.default.createElement(_Label.default, _extends({}, _theme.svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelOffset: 10,
  labelPosition: 'top',
  reference: 'last',
  renderLabel: null,
  stroke: _theme.color.darkGray,
  strokeDasharray: null,
  strokeLinecap: 'round',
  strokeWidth: 2,
  xScale: null,
  yScale: null
};
exports.defaultProps = defaultProps;

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

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

  var _proto = VerticalReferenceLine.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        getX = _this$props.getX,
        getY = _this$props.getY,
        LabelComponent = _this$props.LabelComponent,
        labelOffset = _this$props.labelOffset,
        labelPosition = _this$props.labelPosition,
        reference = _this$props.reference,
        renderLabel = _this$props.renderLabel,
        stroke = _this$props.stroke,
        strokeDasharray = _this$props.strokeDasharray,
        strokeLinecap = _this$props.strokeLinecap,
        strokeWidth = _this$props.strokeWidth,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale;
    if (!xScale || !yScale || !getY || !getX || !data.length) return null;

    var _yScale$range = yScale.range(),
        y1 = _yScale$range[0],
        y0 = _yScale$range[1];

    var _yScale$domain = yScale.domain(),
        yMin = _yScale$domain[0],
        yMax = _yScale$domain[1]; // use a number if passed, else find the index based on the ref type


    var index = reference;

    if (typeof reference !== 'number') {
      index = data.findIndex(function (d, i) {
        return reference === 'first' && i === 0 || reference === 'last' && i === data.length - 1 || reference === 'min' && Math.abs(getY(d) - yMin) < ZERO_DELTA || reference === 'max' && Math.abs(getY(d) - yMax) < ZERO_DELTA;
      });
    }

    var datum = data[index]; // use passed value if no datum, this enables custom x values

    var refNumber = datum ? getX(datum) : index;
    var scaledRef = xScale(refNumber);
    var fromPoint = new _Point.default({
      x: scaledRef,
      y: y1
    });
    var toPoint = new _Point.default({
      x: scaledRef,
      y: y0
    });
    var label = renderLabel && renderLabel(datum && getY(datum) || refNumber);
    return _react.default.createElement(_Group.default, {
      style: {
        pointerEvents: 'none'
      }
    }, _react.default.createElement(_Line.default, {
      from: fromPoint,
      to: toPoint,
      stroke: stroke,
      strokeDasharray: strokeDasharray,
      strokeLinecap: strokeLinecap,
      strokeWidth: strokeWidth,
      vectorEffect: "non-scaling-stroke"
    }), label && _react.default.cloneElement(LabelComponent, _extends({
      x: toPoint.x,
      y: toPoint.y
    }, (0, _positionLabel.default)(labelPosition, labelOffset), {
      label: label
    })));
  };

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

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