@data-ui/xy-chart/esm/series/BarSeries.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 { Bar } from '@vx/shape';
import { FocusBlurHandler } from '@data-ui/shared';
import { Group } from '@vx/group';
import { Text } from '@vx/text';
import PropTypes from 'prop-types';
import React from 'react';
import { color as themeColors, svgLabel } from '@data-ui/theme';
import { barSeriesDataShape } from '../utils/propShapes';
import { callOrValue, isDefined } from '../utils/chartUtils';
import sharedSeriesProps from '../utils/sharedSeriesProps';
var baseLabel = svgLabel.baseLabel;
export var defaultLabelProps = _extends({}, baseLabel, {
  pointerEvents: 'none',
  stroke: '#fff',
  strokeWidth: 2,
  paintOrder: 'stroke',
  fontSize: 12
});

var propTypes = _extends({}, sharedSeriesProps, {
  data: barSeriesDataShape.isRequired,
  defaultLabelProps: PropTypes.object,
  // eslint-disable-line react/forbid-prop-types
  fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  renderLabel: PropTypes.func,
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  horizontal: PropTypes.bool
});

var defaultProps = {
  defaultLabelProps: defaultLabelProps,
  fill: themeColors.default,
  fillOpacity: null,

  /* eslint-disable react/prop-types */
  renderLabel: function renderLabel(_ref) {
    var datum = _ref.datum,
        labelProps = _ref.labelProps;
    return datum.label ? React.createElement(Text, labelProps, datum.label) : null;
  },

  /* eslint-enable react/prop-types */
  stroke: '#FFFFFF',
  strokeWidth: 1,
  horizontal: false
};

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

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

var noEventsStyles = {
  pointerEvents: 'none'
};

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

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

  var _proto = BarSeries.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        data = _this$props.data,
        labelProps = _this$props.defaultLabelProps,
        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,
        renderLabel = _this$props.renderLabel,
        horizontal = _this$props.horizontal;
    if (!xScale || !yScale) return null;
    var valueScale = horizontal ? xScale : yScale;
    var categoryScale = horizontal ? yScale : xScale;
    var barWidth = categoryScale.barWidth || categoryScale.bandwidth && categoryScale.bandwidth() || 0;
    var valueField = horizontal ? x : y;
    var categoryField = horizontal ? y : x;
    var minValue = Math.min.apply(Math, valueScale.domain());
    var minPosition = valueScale(minValue < 0 ? 0 : minValue);
    var categoryOffset = categoryScale.offset || 0;
    var Labels = []; // Labels on top

    return React.createElement(Group, {
      style: disableMouseEvents ? noEventsStyles : null
    }, data.map(function (d, i) {
      var barPosition = categoryScale(categoryField(d)) - categoryOffset;
      var barLength = horizontal ? valueScale(valueField(d)) - minPosition : valueScale(valueField(d)) - minPosition;
      var color = d.fill || callOrValue(fill, d, i);
      var key = "bar-" + barPosition;

      if (renderLabel) {
        var Label = renderLabel({
          datum: d,
          index: i,
          labelProps: _extends({
            key: key
          }, labelProps, {
            x: horizontal ? minPosition + Math.abs(barLength) : barPosition + barWidth / 2,
            y: horizontal ? barPosition + barWidth / 2 : minPosition + Math.min(0, barLength),
            dx: horizontal ? '0.5em' : 0,
            dy: horizontal ? 0 : '-0.74em',
            textAnchor: horizontal ? 'start' : 'middle',
            verticalAnchor: horizontal ? 'middle' : 'end',
            width: horizontal ? null : barWidth
          })
        });
        if (Label) Labels.push(Label);
      }

      return isDefined(horizontal ? d.x : d.y) && React.createElement(FocusBlurHandler, {
        key: key,
        onBlur: disableMouseEvents ? null : onMouseLeave,
        onFocus: disableMouseEvents ? null : function (event) {
          onMouseMove({
            event: event,
            data: data,
            datum: d,
            color: color,
            index: i
          });
        }
      }, React.createElement(Bar, {
        x: horizontal ? minPosition + Math.min(0, barLength) : barPosition,
        y: horizontal ? barPosition : minPosition + Math.min(0, barLength),
        width: horizontal ? Math.abs(barLength) : barWidth,
        height: horizontal ? barWidth : Math.abs(barLength),
        fill: color,
        fillOpacity: d.fillOpacity || callOrValue(fillOpacity, d, i),
        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,
              data: data,
              datum: d,
              color: color,
              index: i
            });
          };
        },
        onMouseMove: disableMouseEvents ? null : onMouseMove && function () {
          return function (event) {
            onMouseMove({
              event: event,
              data: data,
              datum: d,
              color: color,
              index: i
            });
          };
        },
        onMouseLeave: disableMouseEvents ? null : onMouseLeave && function () {
          return onMouseLeave;
        }
      }));
    }), Labels.map(function (Label) {
      return Label;
    }));
  };

  return BarSeries;
}(React.PureComponent);

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