@data-ui/sparkline/esm/annotation/HorizontalReferenceLine.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); }

import PropTypes from 'prop-types';
import React from 'react';
import { mean, median, max, min } from 'd3-array';
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';
export var propTypes = {
  reference: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['mean', 'median', '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])),
  getY: PropTypes.func,
  xScale: PropTypes.func,
  yScale: PropTypes.func
};
export var defaultProps = {
  data: [],
  getY: null,
  LabelComponent: React.createElement(Label, _extends({}, svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelOffset: 8,
  labelPosition: 'right',
  reference: 'mean',
  renderLabel: null,
  stroke: color.darkGray,
  strokeDasharray: null,
  strokeLinecap: 'round',
  strokeWidth: 2,
  xScale: null,
  yScale: null
};

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

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

  var _proto = HorizontalReferenceLine.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        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 || !data.length) return null;

    var _xScale$range = xScale.range(),
        x0 = _xScale$range[0],
        x1 = _xScale$range[1];

    var refNumber = reference;
    if (reference === 'mean') refNumber = mean(data, getY);
    if (reference === 'median') refNumber = median(data, getY);
    if (reference === 'max') refNumber = max(data, getY);
    if (reference === 'min') refNumber = min(data, getY);
    var scaledRef = yScale(refNumber);
    var fromPoint = new Point({
      x: x0,
      y: scaledRef
    });
    var toPoint = new Point({
      x: x1,
      y: scaledRef
    });
    var label = renderLabel && renderLabel(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 HorizontalReferenceLine;
}(React.PureComponent);

HorizontalReferenceLine.propTypes = propTypes;
HorizontalReferenceLine.defaultProps = defaultProps;
HorizontalReferenceLine.displayName = 'ReferenceLine';
export default HorizontalReferenceLine;