@data-ui/sparkline/esm/series/BarSeries.js

React + d3 library for creating sparklines

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 PropTypes from 'prop-types';
import React from 'react';
import Group from '@vx/group/build/Group';
import Bar from '@vx/shape/build/shapes/Bar';
import { color, svgLabel } from '@data-ui/theme';
import Label from '../annotation/Label';
import callOrValue from '../utils/callOrValue';
import positionLabel from '../utils/positionLabel';
export var propTypes = {
  fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  LabelComponent: PropTypes.element,
  labelOffset: PropTypes.number,
  labelPosition: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(['top', 'right', 'bottom', 'left'])]),
  onMouseMove: PropTypes.func,
  onMouseLeave: PropTypes.func,
  renderLabel: PropTypes.func,
  // (val, i) => node
  stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
  // all likely passed by the parent chart
  data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])),
  getX: PropTypes.func,
  getY: PropTypes.func,
  xScale: PropTypes.func,
  yScale: PropTypes.func
};
export var defaultProps = {
  data: [],
  fill: color.default,
  fillOpacity: 0.7,
  getX: null,
  getY: null,
  labelOffset: 8,
  LabelComponent: React.createElement(Label, _extends({}, svgLabel.baseTickLabel, {
    stroke: "#fff"
  })),
  labelPosition: 'top',
  onMouseMove: null,
  onMouseLeave: null,
  renderLabel: null,
  stroke: '#fff',
  strokeWidth: 1,
  xScale: null,
  yScale: null
};

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.createElement(Group, 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 = callOrValue(d.fill || fill, yVal, i);

      if (label) {
        labels.push(_extends({
          key: key,
          label: label,
          x: x,
          y: y
        }, positionLabel(callOrValue(labelPosition, yVal, i), labelOffset)));
      }

      return React.createElement(Bar, {
        key: key,
        x: x - barWidth / 2,
        y: y,
        width: barWidth,
        height: maxBarHeight - y,
        fill: fillValue,
        fillOpacity: callOrValue(typeof d.fillOpacity === 'undefined' ? fillOpacity : d.fillOpacity, yVal, i),
        stroke: callOrValue(d.stroke || stroke, yVal, i),
        strokeWidth: callOrValue(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.cloneElement(LabelComponent, labelProps);
    }));
  };

  return BarSeries;
}(React.PureComponent);

BarSeries.propTypes = propTypes;
BarSeries.defaultProps = defaultProps;
BarSeries.displayName = 'BarSeries';
export default BarSeries;