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

React + d3 library for creating sparklines

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

/* eslint complexity: ['error', 12] */
import PropTypes from 'prop-types';
import React from 'react';
import Group from '@vx/group/build/Group';
import Line from '@vx/shape/build/shapes/Line';
import Point from '@vx/point/build/Point';
import { color, svgLabel } from '@data-ui/theme';
import Label from './Label';
import positionLabel from '../utils/positionLabel';
var ZERO_DELTA = 0.00001;
export var propTypes = {
  reference: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['first', 'last', 'min', 'max'])]),
  LabelComponent: PropTypes.element,
  labelOffset: PropTypes.number,
  labelPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  renderLabel: PropTypes.func,
  stroke: PropTypes.string,
  strokeDasharray: PropTypes.string,
  strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round', 'inherit']),
  strokeWidth: PropTypes.number,
  // all likely passed by the parent chart
  data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])),
  getX: PropTypes.func,
  getY: PropTypes.func,
  xScale: PropTypes.func,
  yScale: PropTypes.func
};
export var defaultProps = {
  data: [],
  getX: null,
  getY: null,
  LabelComponent: React.createElement(Label, _extends({}, svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelOffset: 10,
  labelPosition: 'top',
  reference: 'last',
  renderLabel: null,
  stroke: color.darkGray,
  strokeDasharray: null,
  strokeLinecap: 'round',
  strokeWidth: 2,
  xScale: null,
  yScale: null
};

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({
      x: scaledRef,
      y: y1
    });
    var toPoint = new Point({
      x: scaledRef,
      y: y0
    });
    var label = renderLabel && renderLabel(datum && getY(datum) || refNumber);
    return React.createElement(Group, {
      style: {
        pointerEvents: 'none'
      }
    }, React.createElement(Line, {
      from: fromPoint,
      to: toPoint,
      stroke: stroke,
      strokeDasharray: strokeDasharray,
      strokeLinecap: strokeLinecap,
      strokeWidth: strokeWidth,
      vectorEffect: "non-scaling-stroke"
    }), label && React.cloneElement(LabelComponent, _extends({
      x: toPoint.x,
      y: toPoint.y
    }, positionLabel(labelPosition, labelOffset), {
      label: label
    })));
  };

  return VerticalReferenceLine;
}(React.PureComponent);

VerticalReferenceLine.propTypes = propTypes;
VerticalReferenceLine.defaultProps = defaultProps;
VerticalReferenceLine.displayName = 'VerticalReferenceLine';
export default VerticalReferenceLine;