@data-ui/histogram/lib/series/BarSeries.js

React + d3 library for creating histograms

"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 _theme = require("@data-ui/theme");

var _group = require("@vx/group");

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

var _AnimatedBarSeries = _interopRequireDefault(require("./animated/AnimatedBarSeries"));

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var propTypes = {
  animated: _propTypes.default.bool,
  rawData: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
  // eslint-disable-line react/no-unused-prop-types
  binnedData: _propShapes.binnedDataShape,
  fill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  fillOpacity: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  horizontal: _propTypes.default.bool,
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  valueKey: _propTypes.default.string,
  onClick: _propTypes.default.func,
  // likely injected by parent Histogram
  binScale: _propTypes.default.func,
  valueScale: _propTypes.default.func,
  onMouseMove: _propTypes.default.func,
  onMouseLeave: _propTypes.default.func
};
exports.propTypes = propTypes;
var defaultProps = {
  animated: true,
  rawData: [],
  binnedData: [],
  binScale: null,
  fill: _theme.chartTheme.colors.default,
  fillOpacity: 0.7,
  horizontal: false,
  onClick: null,
  onMouseMove: null,
  onMouseLeave: null,
  stroke: '#FFFFFF',
  strokeWidth: 1,
  valueKey: 'count',
  valueScale: null
};
exports.defaultProps = defaultProps;

function BarSeries(_ref) {
  var animated = _ref.animated,
      binnedData = _ref.binnedData,
      binScale = _ref.binScale,
      fill = _ref.fill,
      fillOpacity = _ref.fillOpacity,
      horizontal = _ref.horizontal,
      onClick = _ref.onClick,
      onMouseMove = _ref.onMouseMove,
      onMouseLeave = _ref.onMouseLeave,
      stroke = _ref.stroke,
      strokeWidth = _ref.strokeWidth,
      valueKey = _ref.valueKey,
      valueScale = _ref.valueScale;
  if (!binScale || !valueScale || !binnedData || binnedData.length === 0) return null;
  var maxBarLength = Math.max.apply(Math, valueScale.range());
  return _react.default.createElement(_group.Group, null, animated && _react.default.createElement(_AnimatedBarSeries.default, {
    binnedData: binnedData,
    binScale: binScale,
    horizontal: horizontal,
    fill: fill,
    fillOpacity: fillOpacity,
    onClick: onClick,
    onMouseMove: onMouseMove,
    onMouseLeave: onMouseLeave,
    stroke: stroke,
    strokeWidth: strokeWidth,
    valueKey: valueKey,
    valueScale: valueScale
  }), !animated && binnedData.map(function (d, i) {
    var binPosition = binScale(d.bin || (horizontal ? d.bin1 : d.bin0));
    var barLength = horizontal ? valueScale(d[valueKey]) : maxBarLength - valueScale(d[valueKey]);
    var barWidth = binScale.bandwidth ? binScale.bandwidth() // categorical
    : Math.abs(binScale(binnedData[i].bin1) - binScale(binnedData[i].bin0)); // numeric

    var color = d.fill || (0, _callOrValue.default)(fill, d, i);
    return _react.default.createElement(_shape.Bar, {
      key: "bar-" + binPosition,
      x: horizontal ? 0 : binPosition,
      y: horizontal ? binPosition : maxBarLength - barLength,
      width: horizontal ? barLength : barWidth,
      height: horizontal ? barWidth : barLength,
      fill: color,
      fillOpacity: typeof fillOpacity === 'undefined' ? (0, _callOrValue.default)(fillOpacity, d, i) : fillOpacity,
      stroke: d.stroke || (0, _callOrValue.default)(stroke, d, i),
      strokeWidth: d.strokeWidth || (0, _callOrValue.default)(strokeWidth, d, i),
      onClick: onClick && function () {
        return function (event) {
          onClick({
            event: event,
            data: binnedData,
            datum: d,
            color: color,
            index: i
          });
        };
      },
      onMouseMove: onMouseMove && function () {
        return function (event) {
          onMouseMove({
            event: event,
            data: binnedData,
            datum: d,
            color: color,
            index: i
          });
        };
      },
      onMouseLeave: onMouseLeave && function () {
        return onMouseLeave;
      }
    });
  }));
}

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