@data-ui/sparkline/lib/series/BarSeries.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 _Group = _interopRequireDefault(require("@vx/group/build/Group"));

var _Bar = _interopRequireDefault(require("@vx/shape/build/shapes/Bar"));

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

var _Label = _interopRequireDefault(require("../annotation/Label"));

var _callOrValue = _interopRequireDefault(require("../utils/callOrValue"));

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 = {
  fill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  fillOpacity: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  LabelComponent: _propTypes.default.element,
  labelOffset: _propTypes.default.number,
  labelPosition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['top', 'right', 'bottom', 'left'])]),
  onMouseMove: _propTypes.default.func,
  onMouseLeave: _propTypes.default.func,
  renderLabel: _propTypes.default.func,
  // (val, i) => node
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  // all likely passed by the parent chart
  data: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object])),
  getX: _propTypes.default.func,
  getY: _propTypes.default.func,
  xScale: _propTypes.default.func,
  yScale: _propTypes.default.func
};
exports.propTypes = propTypes;
var defaultProps = {
  data: [],
  fill: _theme.color.default,
  fillOpacity: 0.7,
  getX: null,
  getY: null,
  labelOffset: 8,
  LabelComponent: _react.default.createElement(_Label.default, _extends({}, _theme.svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelPosition: 'top',
  onMouseMove: null,
  onMouseLeave: null,
  renderLabel: null,
  stroke: '#fff',
  strokeWidth: 1,
  xScale: null,
  yScale: null
};
exports.defaultProps = defaultProps;

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,
        getX = _this$props.getX,
        getY = _this$props.getY,
        fill = _this$props.fill,
        fillOpacity = _this$props.fillOpacity,
        labelOffset = _this$props.labelOffset,
        LabelComponent = _this$props.LabelComponent,
        labelPosition = _this$props.labelPosition,
        onMouseMove = _this$props.onMouseMove,
        onMouseLeave = _this$props.onMouseLeave,
        renderLabel = _this$props.renderLabel,
        stroke = _this$props.stroke,
        strokeWidth = _this$props.strokeWidth,
        xScale = _this$props.xScale,
        yScale = _this$props.yScale;
    if (!xScale || !yScale || !getX || !getY || !data.length) return null;
    var barWidth = Math.max(1, Math.max.apply(Math, xScale.range()) / data.length - 1);
    var maxBarHeight = Math.max.apply(Math, yScale.range());
    var labels = []; // render labels as top-most layer

    return _react.default.createElement(_Group.default, null, data.map(function (d, i) {
      var yVal = getY(d);
      var x = xScale(getX(d));
      var y = yScale(yVal);
      var key = "bar-" + x + "-" + y + "-" + i;
      var label = renderLabel && renderLabel(yVal, i);
      var fillValue = (0, _callOrValue.default)(d.fill || fill, yVal, i);

      if (label) {
        labels.push(_extends({
          key: key,
          label: label,
          x: x,
          y: y
        }, (0, _positionLabel.default)((0, _callOrValue.default)(labelPosition, yVal, i), labelOffset)));
      }

      return _react.default.createElement(_Bar.default, {
        key: key,
        x: x - barWidth / 2,
        y: y,
        width: barWidth,
        height: maxBarHeight - y,
        fill: fillValue,
        fillOpacity: (0, _callOrValue.default)(typeof d.fillOpacity === 'undefined' ? fillOpacity : d.fillOpacity, yVal, i),
        stroke: (0, _callOrValue.default)(d.stroke || stroke, yVal, i),
        strokeWidth: (0, _callOrValue.default)(d.strokeWidth || strokeWidth, yVal, i),
        onMouseMove: onMouseMove && function () {
          return function (event) {
            onMouseMove({
              event: event,
              data: data,
              datum: d,
              index: i,
              color: fillValue
            });
          };
        },
        onMouseLeave: onMouseLeave && function () {
          return onMouseLeave;
        }
      });
    }), labels.map(function (labelProps) {
      return _react.default.cloneElement(LabelComponent, labelProps);
    }));
  };

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

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