@data-ui/sparkline/lib/annotation/BandLine.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 _Bar = _interopRequireDefault(require("@vx/shape/build/shapes/Bar"));

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

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

var propTypes = {
  band: _propTypes.default.oneOfType([_propTypes.default.shape({
    from: _propTypes.default.shape({
      // @TODO check that it's a length of 2
      x: _propTypes.default.number,
      y: _propTypes.default.number
    }),
    to: _propTypes.default.shape({
      // @TODO check that it's a length of 2
      x: _propTypes.default.number,
      y: _propTypes.default.number
    })
  }), _propTypes.default.oneOf(['innerquartiles'])]),
  fill: _propTypes.default.string,
  fillOpacity: _propTypes.default.number,
  stroke: _propTypes.default.string,
  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 = {
  band: 'innerquartiles',
  data: [],
  fill: _theme.color.lightGray,
  fillOpacity: 0.5,
  getY: null,
  stroke: 'transparent',
  strokeWidth: 0,
  xScale: null,
  yScale: null
};
exports.defaultProps = defaultProps;

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

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

  var _proto = BandLine.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        band = _this$props.band,
        data = _this$props.data,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        getY = _this$props.getY,
        stroke = _this$props.stroke,
        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 _yScale$range = yScale.range(),
        y1 = _yScale$range[0],
        y0 = _yScale$range[1];

    var x = 0;
    var y = 0;
    var width = 0;
    var height = 0;

    if (band === 'innerquartiles') {
      var sortedData = [].concat(data).sort(function (a, b) {
        return parseFloat(getY(a)) - parseFloat(getY(b));
      });
      var lowerQuartile = yScale((0, _d3Array.quantile)(sortedData, 0.25, getY)); // eslint-disable-line no-magic-numbers

      var upperQuartile = yScale((0, _d3Array.quantile)(sortedData, 0.75, getY)); // eslint-disable-line no-magic-numbers

      y = Math.min(lowerQuartile, upperQuartile);
      height = Math.abs(upperQuartile - lowerQuartile);
      x = x0;
      width = x1 - x0;
    } else {
      // input points are assumed to be values so we must scale them
      var yFrom = typeof band.from.y === 'undefined' ? y0 : yScale(band.from.y);
      var yTo = typeof band.to.y === 'undefined' ? y1 : yScale(band.to.y);
      y = Math.min(yFrom, yTo);
      height = Math.abs(yFrom - yTo);
      x = typeof band.from.x === 'undefined' ? x0 : xScale(band.from.x);
      width = (typeof band.to.x === 'undefined' ? x1 : xScale(band.to.x)) - x;
    }

    return _react.default.createElement(_Bar.default, {
      x: x,
      y: y,
      width: width,
      height: height,
      fill: fill,
      fillOpacity: fillOpacity,
      stroke: stroke,
      strokeWidth: strokeWidth
    });
  };

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

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