@data-ui/sparkline/lib/annotation/HorizontalReferenceLine.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 _d3Array = require("d3-array");

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 propTypes = {
  reference: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['mean', 'median', '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])),
  getY: _propTypes.default.func,
  xScale: _propTypes.default.func,
  yScale: _propTypes.default.func
};
exports.propTypes = propTypes;
var defaultProps = {
  data: [],
  getY: null,
  LabelComponent: _react.default.createElement(_Label.default, _extends({}, _theme.svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelOffset: 8,
  labelPosition: 'right',
  reference: 'mean',
  renderLabel: null,
  stroke: _theme.color.darkGray,
  strokeDasharray: null,
  strokeLinecap: 'round',
  strokeWidth: 2,
  xScale: null,
  yScale: null
};
exports.defaultProps = defaultProps;

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

HorizontalReferenceLine.propTypes = propTypes;
HorizontalReferenceLine.defaultProps = defaultProps;
HorizontalReferenceLine.displayName = 'ReferenceLine';
var _default = HorizontalReferenceLine;
exports.default = _default;