@data-ui/xy-chart/esm/series/IntervalSeries.js

A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui

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 React from 'react';
import PropTypes from 'prop-types';
import { Bar } from '@vx/shape';
import { color } from '@data-ui/theme';
import { FocusBlurHandler } from '@data-ui/shared';
import { Group } from '@vx/group';
import { intervalSeriesDataShape } from '../utils/propShapes';
import { callOrValue } from '../utils/chartUtils';
import sharedSeriesProps from '../utils/sharedSeriesProps';

var propTypes = _extends({}, sharedSeriesProps, {
  data: intervalSeriesDataShape.isRequired,
  fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  fillOpacity: PropTypes.number,
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number])
});

var defaultProps = {
  fill: color.default,
  fillOpacity: 1,
  stroke: 'none',
  strokeWidth: 1
};

var x0 = function x0(d) {
  return d.x0;
};

var x1 = function x1(d) {
  return d.x1;
};

var noEventsStyles = {
  pointerEvents: 'none'
};

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

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

  var _proto = IntervalSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        disableMouseEvents = _this$props.disableMouseEvents,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale,
        onClick = _this$props.onClick,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave;
    if (!xScale || !yScale) return null;
    var barHeight = (yScale.range() || [0])[0];
    return React.createElement(Group, {
      style: disableMouseEvents ? noEventsStyles : null
    }, data.map(function (d, i) {
      var x = xScale(x0(d));
      var barWidth = xScale(x1(d)) - x;
      var intervalFill = d.fill || callOrValue(fill, d, i);
      return React.createElement(FocusBlurHandler, {
        key: "interval-" + x,
        onBlur: disableMouseEvents ? null : onMouseLeave,
        onFocus: disableMouseEvents ? null : function (event) {
          onMouseMove({
            event: event,
            datum: d,
            index: i,
            data: data,
            color: intervalFill
          });
        }
      }, React.createElement(Bar, {
        x: x,
        y: 0,
        width: barWidth,
        height: barHeight,
        fill: intervalFill,
        fillOpacity: fillOpacity,
        stroke: d.stroke || callOrValue(stroke, d, i),
        strokeWidth: d.strokeWidth || callOrValue(strokeWidth, d, i),
        onClick: disableMouseEvents ? null : onClick && function () {
          return function (event) {
            onClick({
              event: event,
              datum: d,
              index: i,
              data: data,
              color: intervalFill
            });
          };
        },
        onMouseMove: disableMouseEvents ? null : onMouseMove && function () {
          return function (event) {
            onMouseMove({
              event: event,
              datum: d,
              index: i,
              data: data,
              color: intervalFill
            });
          };
        },
        onMouseLeave: disableMouseEvents ? null : onMouseLeave && function () {
          return onMouseLeave;
        }
      }));
    }));
  };

  return IntervalSeries;
}(React.PureComponent);

export { IntervalSeries as default };
IntervalSeries.propTypes = propTypes;
IntervalSeries.defaultProps = defaultProps;
IntervalSeries.displayName = 'IntervalSeries';