@data-ui/xy-chart/esm/series/CirclePackSeries.js

A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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 React from 'react';
import PropTypes from 'prop-types';
import { extent as d3Extent } from 'd3-array';
import PointSeries, { propTypes as pointSeriesPropTypes, defaultProps as pointSeriesDefaultProps } from './PointSeries';
import computeCirclePack from '../utils/computeCirclePack';
var DEFAULT_POINT_SIZE = 4;
var CIRCLE_PACK_LAYOUT_TIMEOUT = 10;

var propTypes = _extends({}, pointSeriesPropTypes, {
  data: PropTypes.arrayOf(PropTypes.shape({
    // x should be anything sortable
    x: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.instanceOf(Date)]),
    size: PropTypes.number
  })).isRequired,
  layoutCallback: PropTypes.func,
  layout: PropTypes.func
});

var defaultProps = _extends({}, pointSeriesDefaultProps, {
  size: function size(d) {
    return d.size || DEFAULT_POINT_SIZE;
  },
  layoutCallback: null,
  layout: computeCirclePack
});

var CirclePackSeries =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(CirclePackSeries, _React$PureComponent);

  function CirclePackSeries(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.computeCirclePack = _this.computeCirclePack.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.state = {
      data: _this.computeCirclePack(props)
    };
    return _this;
  }

  var _proto = CirclePackSeries.prototype;

  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var _this2 = this;

    // eslint-disable-next-line react/destructuring-assignment
    if (['data', 'xScale', 'size'].some(function (prop) {
      return _this2.props[prop] !== nextProps[prop];
    })) {
      this.setState({
        data: this.computeCirclePack(nextProps)
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.timeout) clearTimeout(this.timeout);
  };

  _proto.computeCirclePack = function computeCirclePack(_ref) {
    var rawData = _ref.data,
        xScale = _ref.xScale,
        yScale = _ref.yScale,
        size = _ref.size,
        layoutCallback = _ref.layoutCallback,
        layout = _ref.layout;
    var data = layout(rawData, xScale, size); // callback enables the user to re-set the chart height if there is overflow

    if (layoutCallback) {
      if (this.timeout) clearTimeout(this.timeout);

      var _d3Extent = d3Extent(data, function (d) {
        return d.y;
      }),
          min = _d3Extent[0],
          max = _d3Extent[1];

      this.timeout = setTimeout(function () {
        layoutCallback({
          range: [min, max],
          domain: [yScale(min), yScale(max)]
        });
      }, CIRCLE_PACK_LAYOUT_TIMEOUT);
    }

    return data;
  };

  _proto.render = function render() {
    var data = this.state.data;
    return React.createElement(PointSeries, _extends({}, this.props, {
      data: data
    }));
  };

  return CirclePackSeries;
}(React.PureComponent);

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