recharts - npm Package Compare versions

Comparing version 2.0.10 to 2.1.0

CHANGELOG.md

@@ -1,5 +0,14 @@
-## 2.0.10 (jul 13, 2021)
+## 2.1.0 (aug 10, 2021)
 
 ### feat
 
+- Wrap ResponsiveContainer with forwardRef
+
+### fix
+
+- Fix for recharts issue #1787
+- Add chart type to tooltip payload
+## 2.0.10 (jul 13, 2021)
+### feat
+
 - Feat: Allow automated axis padding for "gap" and "no-gap" for barcharts with continuous axis #2457
@@ -6,0 +15,0 @@ - Passthrough position attribute on createLabeledScales

es6/component/ResponsiveContainer.js

@@ -1,27 +0,15 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-import _debounce from "lodash/debounce";
-
 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); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 /**
@@ -31,167 +19,138 @@ * @fileOverview Wrapper component to make charts adapt to the size of parent * DOM
 import classNames from 'classnames';
-import React, { Component } from 'react';
+import { default as lodashDebounce } from 'lodash/debounce';
+import React, { forwardRef, cloneElement, useState, useImperativeHandle, useRef, useEffect } from 'react';
 import ReactResizeDetector from 'react-resize-detector/build/withPolyfill';
 import { isPercent } from '../util/DataUtils';
 import { warn } from '../util/LogUtils';
-export var ResponsiveContainer = /*#__PURE__*/function (_Component) {
-  _inherits(ResponsiveContainer, _Component);
+export var ResponsiveContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var aspect = _ref.aspect,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '100%' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '100%' : _ref$height,
+      minWidth = _ref.minWidth,
+      minHeight = _ref.minHeight,
+      maxHeight = _ref.maxHeight,
+      children = _ref.children,
+      _ref$debounce = _ref.debounce,
+      debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
+      id = _ref.id,
+      className = _ref.className;
 
-  var _super = _createSuper(ResponsiveContainer);
+  var _useState = useState({
+    containerWidth: -1,
+    containerHeight: -1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      sizes = _useState2[0],
+      setSizes = _useState2[1];
 
-  function ResponsiveContainer(props) {
-    var _this;
+  var containerRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return containerRef;
+  }, [containerRef]);
+  var mounted;
 
-    _classCallCheck(this, ResponsiveContainer);
+  var getContainerSize = function getContainerSize() {
+    if (!containerRef.current) {
+      return null;
+    }
 
-    _this = _super.call(this, props);
-    _this.handleResize = void 0;
-    _this.mounted = void 0;
-    _this.containerRef = void 0;
+    return {
+      containerWidth: containerRef.current.clientWidth,
+      containerHeight: containerRef.current.clientHeight
+    };
+  };
 
-    _this.updateDimensionsImmediate = function () {
-      if (!_this.mounted) {
-        return;
-      }
+  var updateDimensionsImmediate = function updateDimensionsImmediate() {
+    if (!mounted) {
+      return;
+    }
 
-      var newSize = _this.getContainerSize();
+    var newSize = getContainerSize();
 
-      if (newSize) {
-        var _this$state = _this.state,
-            oldWidth = _this$state.containerWidth,
-            oldHeight = _this$state.containerHeight;
-        var containerWidth = newSize.containerWidth,
-            containerHeight = newSize.containerHeight;
+    if (newSize) {
+      var oldWidth = sizes.containerWidth,
+          oldHeight = sizes.containerHeight;
+      var containerWidth = newSize.containerWidth,
+          containerHeight = newSize.containerHeight;
 
-        if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
-          _this.setState({
-            containerWidth: containerWidth,
-            containerHeight: containerHeight
-          });
-        }
+      if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
+        setSizes({
+          containerWidth: containerWidth,
+          containerHeight: containerHeight
+        });
       }
-    };
+    }
+  };
 
-    _this.state = {
-      containerWidth: -1,
-      containerHeight: -1
-    };
-    _this.handleResize = props.debounce > 0 ? _debounce(_this.updateDimensionsImmediate, props.debounce) : _this.updateDimensionsImmediate;
-    _this.containerRef = /*#__PURE__*/React.createRef();
-    return _this;
-  }
-  /* eslint-disable  react/no-did-mount-set-state */
+  var handleResize = debounce > 0 ? lodashDebounce(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
 
+  var renderChart = function renderChart() {
+    var containerWidth = sizes.containerWidth,
+        containerHeight = sizes.containerHeight;
 
-  _createClass(ResponsiveContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.mounted = true;
-      var size = this.getContainerSize();
-
-      if (size) {
-        this.setState(size);
-      }
+    if (containerWidth < 0 || containerHeight < 0) {
+      return null;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "getContainerSize",
-    value: function getContainerSize() {
-      if (!this.containerRef.current) {
-        return null;
-      }
 
-      return {
-        containerWidth: this.containerRef.current.clientWidth,
-        containerHeight: this.containerRef.current.clientHeight
-      };
-    }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$state2 = this.state,
-          containerWidth = _this$state2.containerWidth,
-          containerHeight = _this$state2.containerHeight;
+    warn(isPercent(width) || isPercent(height), "The width(%s) and height(%s) are both fixed numbers,\n       maybe you don't need to use a ResponsiveContainer.", width, height);
+    warn(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);
+    var calculatedWidth = isPercent(width) ? containerWidth : width;
+    var calculatedHeight = isPercent(height) ? containerHeight : height;
 
-      if (containerWidth < 0 || containerHeight < 0) {
-        return null;
-      }
+    if (aspect && aspect > 0) {
+      // Preserve the desired aspect ratio
+      if (calculatedWidth) {
+        // Will default to using width for aspect ratio
+        calculatedHeight = calculatedWidth / aspect;
+      } else if (calculatedHeight) {
+        // But we should also take height into consideration
+        calculatedWidth = calculatedHeight * aspect;
+      } // if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
 
-      var _this$props = this.props,
-          aspect = _this$props.aspect,
-          width = _this$props.width,
-          height = _this$props.height,
-          minWidth = _this$props.minWidth,
-          minHeight = _this$props.minHeight,
-          maxHeight = _this$props.maxHeight,
-          children = _this$props.children;
-      warn(isPercent(width) || isPercent(height), "The width(%s) and height(%s) are both fixed numbers,\n       maybe you don't need to use a ResponsiveContainer.", width, height);
-      warn(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);
-      var calculatedWidth = isPercent(width) ? containerWidth : width;
-      var calculatedHeight = isPercent(height) ? containerHeight : height;
 
-      if (aspect && aspect > 0) {
-        // Preserve the desired aspect ratio
-        if (calculatedWidth) {
-          // Will default to using width for aspect ratio
-          calculatedHeight = calculatedWidth / aspect;
-        } else if (calculatedHeight) {
-          // But we should also take height into consideration
-          calculatedWidth = calculatedHeight * aspect;
-        } // if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
+      if (maxHeight && calculatedHeight > maxHeight) {
+        calculatedHeight = maxHeight;
+      }
+    }
 
+    warn(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
+    return /*#__PURE__*/cloneElement(children, {
+      width: calculatedWidth,
+      height: calculatedHeight
+    });
+  };
 
-        if (maxHeight && calculatedHeight > maxHeight) {
-          calculatedHeight = maxHeight;
-        }
-      }
+  useEffect(function () {
+    mounted = true;
+    var size = getContainerSize();
 
-      warn(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
-      return /*#__PURE__*/React.cloneElement(children, {
-        width: calculatedWidth,
-        height: calculatedHeight
-      });
+    if (size) {
+      setSizes(size);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          minWidth = _this$props2.minWidth,
-          minHeight = _this$props2.minHeight,
-          width = _this$props2.width,
-          height = _this$props2.height,
-          maxHeight = _this$props2.maxHeight,
-          id = _this$props2.id,
-          className = _this$props2.className;
-      var style = {
-        width: width,
-        height: height,
-        minWidth: minWidth,
-        minHeight: minHeight,
-        maxHeight: maxHeight
-      };
-      return /*#__PURE__*/React.createElement(ReactResizeDetector, {
-        handleWidth: true,
-        handleHeight: true,
-        onResize: this.handleResize,
-        targetRef: this.containerRef
-      }, /*#__PURE__*/React.createElement("div", _extends({}, id != null ? {
-        id: "".concat(id)
-      } : {}, {
-        className: classNames('recharts-responsive-container', className),
-        style: style,
-        ref: this.containerRef
-      }), this.renderChart()));
-    }
-  }]);
 
-  return ResponsiveContainer;
-}(Component);
-ResponsiveContainer.defaultProps = {
-  width: '100%',
-  height: '100%',
-  debounce: 0
-};
+    return function () {
+      mounted = false;
+    };
+  }, []);
+  var style = {
+    width: width,
+    height: height,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxHeight: maxHeight
+  };
+  return /*#__PURE__*/React.createElement(ReactResizeDetector, {
+    handleWidth: true,
+    handleHeight: true,
+    onResize: handleResize,
+    targetRef: containerRef
+  }, /*#__PURE__*/React.createElement("div", _extends({}, id != null ? {
+    id: "".concat(id)
+  } : {}, {
+    className: classNames('recharts-responsive-container', className),
+    style: style,
+    ref: containerRef
+  }), renderChart()));
+});

es6/util/ChartUtils.js

@@ -1142,3 +1142,4 @@ import _isEqual from "lodash/isEqual";
       formatter = _graphicalItem$props.formatter,
-      tooltipType = _graphicalItem$props.tooltipType;
+      tooltipType = _graphicalItem$props.tooltipType,
+      chartType = _graphicalItem$props.chartType;
   return _objectSpread(_objectSpread({}, filterProps(graphicalItem)), {}, {
@@ -1152,4 +1153,5 @@ dataKey: dataKey,
     type: tooltipType,
-    payload: payload
+    payload: payload,
+    chartType: chartType
   });
 };

lib/component/ResponsiveContainer.js

@@ -10,6 +10,6 @@ "use strict";
 
-var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _react = _interopRequireWildcard(require("react"));
@@ -31,185 +31,146 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+var ResponsiveContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var aspect = _ref.aspect,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '100%' : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '100%' : _ref$height,
+      minWidth = _ref.minWidth,
+      minHeight = _ref.minHeight,
+      maxHeight = _ref.maxHeight,
+      children = _ref.children,
+      _ref$debounce = _ref.debounce,
+      debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
+      id = _ref.id,
+      className = _ref.className;
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+  var _useState = (0, _react.useState)({
+    containerWidth: -1,
+    containerHeight: -1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      sizes = _useState2[0],
+      setSizes = _useState2[1];
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return containerRef;
+  }, [containerRef]);
+  var mounted;
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  var getContainerSize = function getContainerSize() {
+    if (!containerRef.current) {
+      return null;
+    }
 
-var ResponsiveContainer = /*#__PURE__*/function (_Component) {
-  _inherits(ResponsiveContainer, _Component);
+    return {
+      containerWidth: containerRef.current.clientWidth,
+      containerHeight: containerRef.current.clientHeight
+    };
+  };
 
-  var _super = _createSuper(ResponsiveContainer);
+  var updateDimensionsImmediate = function updateDimensionsImmediate() {
+    if (!mounted) {
+      return;
+    }
 
-  function ResponsiveContainer(props) {
-    var _this;
+    var newSize = getContainerSize();
 
-    _classCallCheck(this, ResponsiveContainer);
+    if (newSize) {
+      var oldWidth = sizes.containerWidth,
+          oldHeight = sizes.containerHeight;
+      var containerWidth = newSize.containerWidth,
+          containerHeight = newSize.containerHeight;
 
-    _this = _super.call(this, props);
-    _this.handleResize = void 0;
-    _this.mounted = void 0;
-    _this.containerRef = void 0;
-
-    _this.updateDimensionsImmediate = function () {
-      if (!_this.mounted) {
-        return;
+      if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
+        setSizes({
+          containerWidth: containerWidth,
+          containerHeight: containerHeight
+        });
       }
+    }
+  };
 
-      var newSize = _this.getContainerSize();
+  var handleResize = debounce > 0 ? (0, _debounce["default"])(updateDimensionsImmediate, debounce) : updateDimensionsImmediate;
 
-      if (newSize) {
-        var _this$state = _this.state,
-            oldWidth = _this$state.containerWidth,
-            oldHeight = _this$state.containerHeight;
-        var containerWidth = newSize.containerWidth,
-            containerHeight = newSize.containerHeight;
+  var renderChart = function renderChart() {
+    var containerWidth = sizes.containerWidth,
+        containerHeight = sizes.containerHeight;
 
-        if (containerWidth !== oldWidth || containerHeight !== oldHeight) {
-          _this.setState({
-            containerWidth: containerWidth,
-            containerHeight: containerHeight
-          });
-        }
-      }
-    };
+    if (containerWidth < 0 || containerHeight < 0) {
+      return null;
+    }
 
-    _this.state = {
-      containerWidth: -1,
-      containerHeight: -1
-    };
-    _this.handleResize = props.debounce > 0 ? (0, _debounce2["default"])(_this.updateDimensionsImmediate, props.debounce) : _this.updateDimensionsImmediate;
-    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
-    return _this;
-  }
-  /* eslint-disable  react/no-did-mount-set-state */
+    (0, _LogUtils.warn)((0, _DataUtils.isPercent)(width) || (0, _DataUtils.isPercent)(height), "The width(%s) and height(%s) are both fixed numbers,\n       maybe you don't need to use a ResponsiveContainer.", width, height);
+    (0, _LogUtils.warn)(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);
+    var calculatedWidth = (0, _DataUtils.isPercent)(width) ? containerWidth : width;
+    var calculatedHeight = (0, _DataUtils.isPercent)(height) ? containerHeight : height;
 
+    if (aspect && aspect > 0) {
+      // Preserve the desired aspect ratio
+      if (calculatedWidth) {
+        // Will default to using width for aspect ratio
+        calculatedHeight = calculatedWidth / aspect;
+      } else if (calculatedHeight) {
+        // But we should also take height into consideration
+        calculatedWidth = calculatedHeight * aspect;
+      } // if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
 
-  _createClass(ResponsiveContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.mounted = true;
-      var size = this.getContainerSize();
 
-      if (size) {
-        this.setState(size);
+      if (maxHeight && calculatedHeight > maxHeight) {
+        calculatedHeight = maxHeight;
       }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "getContainerSize",
-    value: function getContainerSize() {
-      if (!this.containerRef.current) {
-        return null;
-      }
 
-      return {
-        containerWidth: this.containerRef.current.clientWidth,
-        containerHeight: this.containerRef.current.clientHeight
-      };
-    }
-  }, {
-    key: "renderChart",
-    value: function renderChart() {
-      var _this$state2 = this.state,
-          containerWidth = _this$state2.containerWidth,
-          containerHeight = _this$state2.containerHeight;
+    (0, _LogUtils.warn)(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
+    return /*#__PURE__*/(0, _react.cloneElement)(children, {
+      width: calculatedWidth,
+      height: calculatedHeight
+    });
+  };
 
-      if (containerWidth < 0 || containerHeight < 0) {
-        return null;
-      }
+  (0, _react.useEffect)(function () {
+    mounted = true;
+    var size = getContainerSize();
 
-      var _this$props = this.props,
-          aspect = _this$props.aspect,
-          width = _this$props.width,
-          height = _this$props.height,
-          minWidth = _this$props.minWidth,
-          minHeight = _this$props.minHeight,
-          maxHeight = _this$props.maxHeight,
-          children = _this$props.children;
-      (0, _LogUtils.warn)((0, _DataUtils.isPercent)(width) || (0, _DataUtils.isPercent)(height), "The width(%s) and height(%s) are both fixed numbers,\n       maybe you don't need to use a ResponsiveContainer.", width, height);
-      (0, _LogUtils.warn)(!aspect || aspect > 0, 'The aspect(%s) must be greater than zero.', aspect);
-      var calculatedWidth = (0, _DataUtils.isPercent)(width) ? containerWidth : width;
-      var calculatedHeight = (0, _DataUtils.isPercent)(height) ? containerHeight : height;
-
-      if (aspect && aspect > 0) {
-        // Preserve the desired aspect ratio
-        if (calculatedWidth) {
-          // Will default to using width for aspect ratio
-          calculatedHeight = calculatedWidth / aspect;
-        } else if (calculatedHeight) {
-          // But we should also take height into consideration
-          calculatedWidth = calculatedHeight * aspect;
-        } // if maxHeight is set, overwrite if calculatedHeight is greater than maxHeight
-
-
-        if (maxHeight && calculatedHeight > maxHeight) {
-          calculatedHeight = maxHeight;
-        }
-      }
-
-      (0, _LogUtils.warn)(calculatedWidth > 0 || calculatedHeight > 0, "The width(%s) and height(%s) of chart should be greater than 0,\n       please check the style of container, or the props width(%s) and height(%s),\n       or add a minWidth(%s) or minHeight(%s) or use aspect(%s) to control the\n       height and width.", calculatedWidth, calculatedHeight, width, height, minWidth, minHeight, aspect);
-      return /*#__PURE__*/_react["default"].cloneElement(children, {
-        width: calculatedWidth,
-        height: calculatedHeight
-      });
+    if (size) {
+      setSizes(size);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          minWidth = _this$props2.minWidth,
-          minHeight = _this$props2.minHeight,
-          width = _this$props2.width,
-          height = _this$props2.height,
-          maxHeight = _this$props2.maxHeight,
-          id = _this$props2.id,
-          className = _this$props2.className;
-      var style = {
-        width: width,
-        height: height,
-        minWidth: minWidth,
-        minHeight: minHeight,
-        maxHeight: maxHeight
-      };
-      return /*#__PURE__*/_react["default"].createElement(_withPolyfill["default"], {
-        handleWidth: true,
-        handleHeight: true,
-        onResize: this.handleResize,
-        targetRef: this.containerRef
-      }, /*#__PURE__*/_react["default"].createElement("div", _extends({}, id != null ? {
-        id: "".concat(id)
-      } : {}, {
-        className: (0, _classnames["default"])('recharts-responsive-container', className),
-        style: style,
-        ref: this.containerRef
-      }), this.renderChart()));
-    }
-  }]);
 
-  return ResponsiveContainer;
-}(_react.Component);
-
-exports.ResponsiveContainer = ResponsiveContainer;
-ResponsiveContainer.defaultProps = {
-  width: '100%',
-  height: '100%',
-  debounce: 0
-};
+    return function () {
+      mounted = false;
+    };
+  }, []);
+  var style = {
+    width: width,
+    height: height,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxHeight: maxHeight
+  };
+  return /*#__PURE__*/_react["default"].createElement(_withPolyfill["default"], {
+    handleWidth: true,
+    handleHeight: true,
+    onResize: handleResize,
+    targetRef: containerRef
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({}, id != null ? {
+    id: "".concat(id)
+  } : {}, {
+    className: (0, _classnames["default"])('recharts-responsive-container', className),
+    style: style,
+    ref: containerRef
+  }), renderChart()));
+});
+exports.ResponsiveContainer = ResponsiveContainer;

lib/util/ChartUtils.js

@@ -1270,3 +1270,4 @@ "use strict";
       formatter = _graphicalItem$props.formatter,
-      tooltipType = _graphicalItem$props.tooltipType;
+      tooltipType = _graphicalItem$props.tooltipType,
+      chartType = _graphicalItem$props.chartType;
   return _objectSpread(_objectSpread({}, (0, _types.filterProps)(graphicalItem)), {}, {
@@ -1280,3 +1281,4 @@ dataKey: dataKey,
     type: tooltipType,
-    payload: payload
+    payload: payload,
+    chartType: chartType
   });
@@ -1283,0 +1285,0 @@ };

package.json

 {
   "name": "recharts",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "description": "React charts",
@@ -34,3 +34,3 @@ "main": "lib/index",
     "autofix": "eslint './src/**/*.?(ts|tsx)' --fix",
-    "analyse": "cross-env NODE_ENV=analyse webpack src/index.ts -o umd/Recharts.js",
+    "analyse": "cross-env NODE_ENV=analyse webpack ./src/index.ts -o umd/Recharts.js",
     "tsc": "tsc"
@@ -37,0 +37,0 @@ },

src/util/ChartUtils.ts

@@ -1141,3 +1141,3 @@ import _ from 'lodash';
 export const getTooltipItem = (graphicalItem: any, payload: any) => {
-  const { dataKey, name, unit, formatter, tooltipType } = graphicalItem.props;
+  const { dataKey, name, unit, formatter, tooltipType, chartType } = graphicalItem.props;
 
@@ -1154,3 +1154,4 @@ return {
     payload,
+    chartType,
   };
 };

types/component/DefaultTooltipContent.d.ts

@@ -15,2 +15,3 @@ import { PureComponent, CSSProperties, ReactNode } from 'react';
     payload?: any;
+    chartType?: string;
 }
@@ -17,0 +18,0 @@ export interface Props<TValue extends ValueType, TName extends NameType> {

types/component/ResponsiveContainer.d.ts

@@ -1,2 +0,2 @@
-import React, { Component, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 export interface Props {
@@ -14,26 +14,2 @@ aspect?: number;
 }
-interface State {
-    containerWidth: number;
-    containerHeight: number;
-}
-export declare class ResponsiveContainer extends Component<Props, State> {
-    static defaultProps: {
-        width: string;
-        height: string;
-        debounce: number;
-    };
-    private handleResize;
-    private mounted;
-    private containerRef;
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    getContainerSize(): {
-        containerWidth: number;
-        containerHeight: number;
-    };
-    updateDimensionsImmediate: () => void;
-    renderChart(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    render(): JSX.Element;
-}
-export {};
+export declare const ResponsiveContainer: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;

types/util/ChartUtils.d.ts

@@ -92,3 +92,4 @@ import { ReactElement, ReactNode } from 'react';
     payload: any;
+    chartType: any;
 };
 export {};

No alert changes

Improved metrics

Total package byte prevSize

5294341

increased by0.3%

Worsened metrics

Lines of code

55909

decreased by-0.17%

No dependency changes