@data-ui/histogram/lib/series/animated/AnimatedDensitySeries.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 _shape = require("@vx/shape");

var _curve = require("@vx/curve");

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

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

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

var propTypes = {
  densityData: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
  // @TODO shape
  fill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  fillOpacity: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  getX: _propTypes.default.func.isRequired,
  getY: _propTypes.default.func.isRequired,
  horizontal: _propTypes.default.bool,
  keyAccessor: _propTypes.default.func,
  showArea: _propTypes.default.bool,
  showLine: _propTypes.default.bool,
  stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeDasharray: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  strokeLinecap: _propTypes.default.oneOf(['butt', 'square', 'round', 'inherit']),
  strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
  xScale: _propTypes.default.func.isRequired,
  yScale: _propTypes.default.func.isRequired
};
var defaultProps = {
  fill: _theme.chartTheme.colors.default,
  fillOpacity: 0.3,
  horizontal: false,
  showArea: true,
  showLine: true,
  stroke: _theme.chartTheme.colors.default,
  strokeWidth: 2,
  strokeDasharray: null,
  strokeLinecap: 'round',
  keyAccessor: function keyAccessor(d) {
    return d.id;
  }
};
var INDEX_DELAY_MULTIPLIER = 10;

function AnimatedDensitySeries(_ref) {
  var densityData = _ref.densityData,
      fill = _ref.fill,
      fillOpacity = _ref.fillOpacity,
      horizontal = _ref.horizontal,
      keyAccessor = _ref.keyAccessor,
      getX = _ref.getX,
      getY = _ref.getY,
      showArea = _ref.showArea,
      showLine = _ref.showLine,
      stroke = _ref.stroke,
      strokeWidth = _ref.strokeWidth,
      strokeDasharray = _ref.strokeDasharray,
      strokeLinecap = _ref.strokeLinecap,
      xScale = _ref.xScale,
      yScale = _ref.yScale;
  var maxY = Math.max.apply(Math, yScale.range());
  return _react.default.createElement(_reactMove.NodeGroup, {
    data: densityData,
    keyAccessor: keyAccessor,
    start: function start(d) {
      if (horizontal) return {
        x: 0,
        y: yScale.invert ? yScale(getY(d)) : getY(d)
      };
      return {
        x: xScale.invert ? xScale(getX(d)) : getX(d),
        y: maxY
      };
    },
    enter: function enter(d, i) {
      return {
        x: [xScale.invert ? xScale(getX(d)) : getX(d)],
        y: [yScale.invert ? yScale(getY(d)) : getY(d)],
        fill: [d.fill || fill],
        stroke: [d.stroke || stroke],
        timing: {
          duration: 300,
          delay: INDEX_DELAY_MULTIPLIER * i
        }
      };
    },
    update: function update(d, i) {
      return {
        x: [xScale.invert ? xScale(getX(d)) : getX(d)],
        y: [yScale.invert ? yScale(getY(d)) : getY(d)],
        fill: [d.fill || fill],
        stroke: [d.stroke || stroke],
        timing: {
          duration: 300,
          delay: INDEX_DELAY_MULTIPLIER * i
        }
      };
    },
    leave: function leave(d, i) {
      return {
        x: xScale.invert ? xScale(getX(d)) : getX(d),
        y: horizontal ? 0 : maxY,
        timing: {
          duration: 300,
          delay: INDEX_DELAY_MULTIPLIER / 2 * i
        }
      };
    }
  }, function (modifiedData) {
    return _react.default.createElement(_group.Group, {
      style: {
        pointerEvents: 'none'
      }
    }, showArea && _react.default.createElement(_shape.AreaClosed, {
      data: modifiedData,
      x: function x(d) {
        return xScale.invert ? xScale.invert(d.state.x) : d.state.x;
      },
      y: function y(d) {
        return yScale.invert ? yScale.invert(d.state.y) : d.state.y;
      },
      xScale: xScale,
      yScale: yScale,
      fill: fill,
      fillOpacity: fillOpacity,
      stroke: "transparent",
      strokeWidth: strokeWidth,
      curve: _curve.curveBasis
    }), showLine && strokeWidth > 0 && _react.default.createElement(_shape.LinePath, {
      data: modifiedData,
      x: function x(d) {
        return xScale.invert ? xScale.invert(d.state.x) : d.state.x;
      },
      y: function y(d) {
        return yScale.invert ? yScale.invert(d.state.y) : d.state.y;
      },
      xScale: xScale,
      yScale: yScale,
      stroke: stroke,
      strokeWidth: strokeWidth,
      strokeDasharray: strokeDasharray,
      strokeLinecap: strokeLinecap,
      curve: _curve.curveBasis,
      glyph: null
    }));
  });
}

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