@data-ui/histogram/lib/series/animated/AnimatedBarSeries.js

React + d3 library for creating histograms

"use strict";

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

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

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

var _reactMove = require("react-move");

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

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

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

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

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

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

var propTypes = {
  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,
  keyAccessor: _propTypes.default.func
};
var defaultProps = {
  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,
  keyAccessor: function keyAccessor(d) {
    return d.id;
  }
};
var INDEX_DELAY_MULTIPLIER = 10;

var getBin = function getBin(d) {
  return typeof d.bin === 'undefined' ? d.bin0 : d.bin;
};

var getBin1 = function getBin1(d) {
  return typeof d.bin === 'undefined' ? d.bin1 : d.bin;
};

function AnimatedBarSeries(_ref) {
  var binnedData = _ref.binnedData,
      valueScale = _ref.valueScale,
      binScale = _ref.binScale,
      horizontal = _ref.horizontal,
      keyAccessor = _ref.keyAccessor,
      fill = _ref.fill,
      fillOpacity = _ref.fillOpacity,
      onClick = _ref.onClick,
      onMouseMove = _ref.onMouseMove,
      onMouseLeave = _ref.onMouseLeave,
      stroke = _ref.stroke,
      strokeWidth = _ref.strokeWidth,
      valueKey = _ref.valueKey;
  var maxBarLength = Math.max.apply(Math, valueScale.range()); // compute once and use throughout

  var barWidths = binnedData.map(function (_, i) {
    return binScale.bandwidth ? binScale.bandwidth() // categorical
    : Math.abs(binScale(binnedData[i].bin1) - binScale(binnedData[i].bin0));
  } // numeric
  );

  var getValue = function getValue(d) {
    return d[valueKey];
  };

  var getX = horizontal ? getValue : getBin;
  var getY = horizontal ? getBin1 : getValue;
  var xScale = horizontal ? valueScale : binScale;
  var yScale = horizontal ? binScale : valueScale;
  return _react.default.createElement(_reactMove.NodeGroup, {
    data: binnedData,
    keyAccessor: keyAccessor,
    start: function start(d, i) {
      return {
        x: horizontal ? 0 : xScale(getX(d)),
        y: horizontal ? yScale(getY(d)) : maxBarLength,
        fill: d.fill || (0, _callOrValue.default)(fill, d, i),
        width: horizontal ? 0 : barWidths[i],
        height: horizontal ? barWidths[i] : 0
      };
    },
    enter: function enter(d, i) {
      return {
        x: [horizontal ? 0 : xScale(getX(d))],
        y: [yScale(getY(d))],
        width: [horizontal ? xScale(getX(d)) : barWidths[i]],
        height: [horizontal ? barWidths[i] : maxBarLength - yScale(getY(d))],
        fill: [d.fill || (0, _callOrValue.default)(fill, d, i)],
        stroke: [d.stroke || (0, _callOrValue.default)(stroke, d, i)],
        timing: {
          duration: 300,
          delay: INDEX_DELAY_MULTIPLIER * i
        }
      };
    },
    update: function update(d, i) {
      return {
        x: [horizontal ? 0 : xScale(getX(d))],
        y: [yScale(getY(d))],
        width: [horizontal ? xScale(getX(d)) : barWidths[i]],
        height: [horizontal ? barWidths[i] : maxBarLength - yScale(getY(d))],
        fill: [d.fill || (0, _callOrValue.default)(fill, d, i)],
        stroke: [d.stroke || (0, _callOrValue.default)(stroke, d, i)],
        timing: {
          duration: 300,
          delay: INDEX_DELAY_MULTIPLIER * i
        }
      };
    },
    leave: function leave(d, i) {
      return {
        x: horizontal ? 0 : xScale(getX(d)),
        y: horizontal ? yScale(getY(d)) : maxBarLength,
        width: horizontal ? 0 : barWidths[i],
        height: horizontal ? barWidths[i] : 0,
        timing: {
          duration: 300,
          delay: INDEX_DELAY_MULTIPLIER / 2 * i
        }
      };
    }
  }, function (data) {
    return _react.default.createElement(_group.Group, null, data.map(function (modifiedDatum, i) {
      var key = modifiedDatum.key,
          rawDatum = modifiedDatum.data,
          d = modifiedDatum.state;
      return _react.default.createElement(_shape.Bar, {
        key: "bar" + key,
        x: d.x,
        y: d.y,
        width: d.width,
        height: d.height,
        fill: d.fill,
        stroke: d.stroke,
        fillOpacity: typeof fillOpacity === 'undefined' ? (0, _callOrValue.default)(fillOpacity, rawDatum, i) : fillOpacity,
        strokeWidth: rawDatum.strokeWidth || (0, _callOrValue.default)(strokeWidth, rawDatum, i),
        onClick: onClick && function () {
          return function (event) {
            onClick({
              event: event,
              datum: rawDatum,
              data: binnedData,
              color: d.fill,
              index: i
            });
          };
        },
        onMouseMove: onMouseMove && function () {
          return function (event) {
            onMouseMove({
              event: event,
              datum: rawDatum,
              data: binnedData,
              color: d.fill,
              index: i
            });
          };
        },
        onMouseLeave: onMouseLeave && function () {
          return onMouseLeave;
        }
      });
    }));
  });
}

AnimatedBarSeries.propTypes = propTypes;
AnimatedBarSeries.defaultProps = defaultProps;
var _default = AnimatedBarSeries;
exports.default = _default;