@data-ui/xy-chart/lib/series/GroupedBarSeries.js

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

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _shape = require("@vx/shape");

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

var _propShapes = require("../utils/propShapes");

var _getScaleForAccessor = require("../utils/getScaleForAccessor");

var _sharedSeriesProps = _interopRequireDefault(require("../utils/sharedSeriesProps"));

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 = _extends({}, _sharedSeriesProps.default, {
  data: _propShapes.groupedBarSeriesDataShape.isRequired,
  groupKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
  groupFills: _propTypes.default.arrayOf(_propTypes.default.string),
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  groupPadding: _propTypes.default.number // see https://github.com/d3/d3-scale#band-scales

});

var defaultProps = {
  groupFills: _theme.color.categories,
  groupPadding: 0.1,
  stroke: 'none',
  strokeWidth: 1
};

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

var noEventsStyles = {
  pointerEvents: 'none'
};

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

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

  var _proto = GroupedBarSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        disableMouseEvents = _this$props.disableMouseEvents,
        groupKeys = _this$props.groupKeys,
        groupFills = _this$props.groupFills,
        groupPadding = _this$props.groupPadding,
        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;

    if (!xScale.bandwidth) {
      // @todo figure this out/be more graceful
      throw new Error("'GroupedBarSeries' requires a 'band' type xScale");
    }

    var maxHeight = (yScale.range() || [0])[0];

    var x1Scale = _getScaleForAccessor.scaleTypeToScale.band({
      rangeRound: [0, xScale.bandwidth()],
      domain: groupKeys,
      padding: groupPadding
    });

    var zScale = _getScaleForAccessor.scaleTypeToScale.ordinal({
      range: groupFills,
      domain: groupKeys
    });

    return _react.default.createElement(_shape.BarGroup, {
      style: disableMouseEvents ? noEventsStyles : null,
      data: data,
      keys: groupKeys,
      height: maxHeight,
      x0: x,
      x0Scale: xScale,
      x1Scale: x1Scale,
      yScale: yScale,
      zScale: zScale,
      rx: 2,
      stroke: stroke,
      strokeWidth: strokeWidth,
      onClick: disableMouseEvents ? null : onClick && function (d) {
        return function (event) {
          var seriesKey = d.key,
              datum = d.data;
          onClick({
            event: event,
            data: data,
            datum: datum,
            seriesKey: seriesKey,
            color: zScale(seriesKey)
          });
        };
      },
      onMouseMove: disableMouseEvents ? null : onMouseMove && function (d) {
        return function (event) {
          var key = d.key,
              datum = d.data;
          onMouseMove({
            event: event,
            data: data,
            datum: datum,
            seriesKey: key,
            color: zScale(key)
          });
        };
      },
      onMouseLeave: disableMouseEvents ? null : onMouseLeave && function () {
        return onMouseLeave;
      }
    });
  };

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

exports.default = GroupedBarSeries;
GroupedBarSeries.propTypes = propTypes;
GroupedBarSeries.defaultProps = defaultProps;
GroupedBarSeries.displayName = 'GroupedBarSeries';