dtable-statistic 4.3.6 → 4.3.8

package/es/stat-view/pivot-table/index.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _baseChart = _interopRequireDefault(require("../base-chart"));
 var _oneDimensionTableNoNumericColumns = _interopRequireDefault(require("./one-dimension-table-no-numeric-columns"));
 var _twoDimensionTable = _interopRequireDefault(require("./two-dimension-table"));
@@ -93,10 +93,10 @@ class PivotTable extends _baseChart.default {
         const {
           format
         } = data || {};
-        return (0, _dtableStore.getDateDisplayString)(summaryValue.replace(/[T|Z]/g, ' '), format);
+        return (0, _dtableUtils.getDateDisplayString)(summaryValue.replace(/[T|Z]/g, ' '), format);
       }
       if (typeof summaryValue !== 'number') return summaryValue;
-      return (0, _dtableStore.getNumberDisplayString)(summaryValue, data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT);
+      return (0, _dtableUtils.getNumberDisplayString)(summaryValue, data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT);
     };
     this.getStatData = () => {
       const {
@@ -110,9 +110,9 @@ class PivotTable extends _baseChart.default {
         summary_column_key
       } = statItem;
       const table = getTableById(table_id);
-      const groupbyColumn = groupby_column_key && _dtableStore.TableUtils.getTableColumnByKey(table, groupby_column_key);
-      const columnGroupbyColumn = column_groupby_column_key && _dtableStore.TableUtils.getTableColumnByKey(table, column_groupby_column_key);
-      const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      const groupbyColumn = groupby_column_key && (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
+      const columnGroupbyColumn = column_groupby_column_key && (0, _dtableUtils.getTableColumnByKey)(table, column_groupby_column_key);
+      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
       return {
         pivotResult: this.state.statData,
         statisticTableColumns: table.columns,

package/es/stat-view/pivot-table/one-dimension-table-no-numeric-columns.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
 var _utils = require("../../utils");
 var _constants = require("../../constants");
@@ -43,8 +43,8 @@ class OneDimensionTableNoNumericColumns extends _react.PureComponent {
         view_id
       } = statItem;
       const table = getTableById(table_id);
-      const view = _dtableStore.Views.getViewById(table.views, view_id);
-      const rows = !_dtableStore.Views.isArchiveView(view) ? recordsList.flat() : [];
+      const view = (0, _dtableUtils.getViewById)(table.views, view_id);
+      const rows = !(0, _dtableUtils.isArchiveView)(view) ? recordsList.flat() : [];
       _this.props.toggleStatisticRecordsDialog({
         rows
       }, _this.props.statItem, {
@@ -89,7 +89,7 @@ class OneDimensionTableNoNumericColumns extends _react.PureComponent {
         summary_method,
         display_total = true
       } = statItem;
-      const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
       const columnTotal = getSummaryValueDisplayString(summaryColumn, pivot_columns_total['total'], summary_method);
       const isValidTColumnTotal = this.props.isValidValue(columnTotal);
       let pivotColumnCells = [];
@@ -139,7 +139,7 @@ class OneDimensionTableNoNumericColumns extends _react.PureComponent {
       groupby_column_key
     } = statItem;
     const table = getTableById(table_id);
-    const groupByColumn = groupby_column_key && _dtableStore.TableUtils.getTableColumnByKey(table, groupby_column_key);
+    const groupByColumn = groupby_column_key && (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
     return /*#__PURE__*/_react.default.createElement("table", {
       style: {
         color: textColor

package/es/stat-view/pivot-table/one-dimension-table-with-numeric-columns.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
 var _utils = require("../../utils");
 var _constants = require("../../constants");
@@ -42,7 +42,7 @@ class OneDimensionTableWithNumericColumns extends _react.PureComponent {
         column_groupby_column_key
       } = statItem;
       const statisticTableColumns = table.columns;
-      const columnGroupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+      const columnGroupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, column_groupby_column_key);
       const {
         name: groupName
       } = groupbyColumn;
@@ -157,7 +157,7 @@ class OneDimensionTableWithNumericColumns extends _react.PureComponent {
       groupby_column_key
     } = statItem;
     const table = getTableById(table_id);
-    const groupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, groupby_column_key);
+    const groupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
     if (!groupbyColumn) return '';
     return /*#__PURE__*/_react.default.createElement("table", {
       style: {

package/es/stat-view/pivot-table/pivot-table-display-name.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _utils = require("../../utils");
 var _commonUtils = require("../../utils/common-utils");
 var _constants = require("../../constants");
@@ -59,11 +59,11 @@ class PivotTableDisplayName extends _react.default.Component {
       } = window.app.state;
       let displayName;
       switch (type) {
-        case _dtableStore.CellType.SINGLE_SELECT:
-        case _dtableStore.CellType.MULTIPLE_SELECT:
+        case _dtableUtils.CellType.SINGLE_SELECT:
+        case _dtableUtils.CellType.MULTIPLE_SELECT:
           {
             let options = (0, _utils.getSelectColumnOptions)(column);
-            let option = (0, _dtableStore.getOption)(options, value) || {};
+            let option = (0, _dtableUtils.getOption)(options, value) || {};
             let {
               name: optionName,
               color,
@@ -80,25 +80,25 @@ class PivotTableDisplayName extends _react.default.Component {
             }, optionName);
             break;
           }
-        case _dtableStore.CellType.CREATOR:
-        case _dtableStore.CellType.COLLABORATOR:
-        case _dtableStore.CellType.LAST_MODIFIER:
+        case _dtableUtils.CellType.CREATOR:
+        case _dtableUtils.CellType.COLLABORATOR:
+        case _dtableUtils.CellType.LAST_MODIFIER:
           {
             displayName = /*#__PURE__*/_react.default.createElement(Collaborator, {
               collaborator: this.state.user
             });
             break;
           }
-        case _dtableStore.CellType.NUMBER:
+        case _dtableUtils.CellType.NUMBER:
           {
-            const displayValue = (0, _dtableStore.isNumber)(value) ? (0, _dtableStore.getNumberDisplayString)(value, data) : value;
+            const displayValue = (0, _dtableUtils.isNumber)(value) ? (0, _dtableUtils.getNumberDisplayString)(value, data) : value;
             displayName = /*#__PURE__*/_react.default.createElement("div", {
               title: displayValue,
               "aria-label": displayValue
             }, displayValue);
             break;
           }
-        case _dtableStore.CellType.LINK:
+        case _dtableUtils.CellType.LINK:
           {
             const displayValue = (0, _utils.getClientFormulaDisplayString)(Array.isArray(value) ? value : [value], data, {
               collaborators
@@ -112,22 +112,22 @@ class PivotTableDisplayName extends _react.default.Component {
             }, displayValue);
             break;
           }
-        case _dtableStore.CellType.FORMULA:
-        case _dtableStore.CellType.LINK_FORMULA:
+        case _dtableUtils.CellType.FORMULA:
+        case _dtableUtils.CellType.LINK_FORMULA:
           {
             let displayValue = value;
             let {
               result_type,
               array_type
             } = data || {};
-            if (result_type === _dtableStore.FORMULA_RESULT_TYPE.NUMBER) {
+            if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.NUMBER) {
               let valueNumber = parseFloat(value);
-              displayValue = (0, _dtableStore.isNumber)(valueNumber) ? (0, _dtableStore.getNumberDisplayString)(valueNumber, data) : value;
-            } else if (result_type === _dtableStore.FORMULA_RESULT_TYPE.ARRAY) {
-              if (_dtableStore.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+              displayValue = (0, _dtableUtils.isNumber)(valueNumber) ? (0, _dtableUtils.getNumberDisplayString)(valueNumber, data) : value;
+            } else if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
+              if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
                 const currentCollaborators = Array.isArray(value) ? value : [value];
                 displayValue = currentCollaborators.map(email => {
-                  let user = array_type === _dtableStore.CellType.COLLABORATOR ? (0, _dtableStore.getCollaborator)(collaborators, email) : (0, _utils.getKnownCreatorByEmail)(collaborators, email);
+                  let user = array_type === _dtableUtils.CellType.COLLABORATOR ? (0, _dtableUtils.getCollaborator)(collaborators, email) : (0, _utils.getKnownCreatorByEmail)(collaborators, email);
                   return (user || {}).name;
                 });
                 displayValue = displayValue + '';
@@ -163,7 +163,7 @@ class PivotTableDisplayName extends _react.default.Component {
     const {
       type
     } = column;
-    if (!_dtableStore.COLLABORATOR_COLUMN_TYPES.includes(type)) return;
+    if (!_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(type)) return;
     this.updateUser(value);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -174,7 +174,7 @@ class PivotTableDisplayName extends _react.default.Component {
     const {
       type
     } = column;
-    if (!_dtableStore.COLLABORATOR_COLUMN_TYPES.includes(type)) return;
+    if (!_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(type)) return;
     if (value !== this.props.value || (0, _commonUtils.shallowEqual)(nextProps.column, this.props.column)) {
       this.updateUser(value);
     }

package/es/stat-view/pivot-table/two-dimension-table.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
 var _utils = require("../../utils");
 var _pivotTable = require("../../utils/pivot-table");
@@ -44,9 +44,9 @@ class TwoDimensionTable extends _react.PureComponent {
         view_id
       } = statItem;
       const table = getTableById(table_id);
-      const view = _dtableStore.Views.getViewById(table.views, view_id);
+      const view = (0, _dtableUtils.getViewById)(table.views, view_id);
       let rows = [];
-      if (!_dtableStore.Views.isArchiveView(view)) {
+      if (!(0, _dtableUtils.isArchiveView)(view)) {
         rows = recordsList.flat();
       }
       this.props.toggleStatisticRecordsDialog({
@@ -56,7 +56,7 @@ class TwoDimensionTable extends _react.PureComponent {
       });
     };
     this.getNumberValue = val => {
-      if ((0, _dtableStore.isNumber)(val)) {
+      if ((0, _dtableUtils.isNumber)(val)) {
         return val;
       }
       return 0;
@@ -223,7 +223,7 @@ class TwoDimensionTable extends _react.PureComponent {
         formulaRows,
         isSqlQuery = false
       } = pivotResult;
-      const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
       let allTotalDisplay = column_groupby_multiple_numeric_column ? 0 : getSummaryValueDisplayString(summaryColumn, pivot_table_total, summary_method);
       let firstSummaryColumnFromMultiple = column_groupby_multiple_numeric_column && pivot_summary_multiple_columns[0] || null;
       let pivotColumnCells = [];
@@ -361,8 +361,8 @@ class TwoDimensionTable extends _react.PureComponent {
       column_groupby_column_key
     } = statItem;
     const table = getTableById(table_id);
-    const groupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
-    const columnGroupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, column_groupby_column_key) || {};
+    const groupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key) || {};
+    const columnGroupbyColumn = (0, _dtableUtils.getTableColumnByKey)(table, column_groupby_column_key) || {};
     return /*#__PURE__*/_react.default.createElement("table", {
       style: {
         color: textColor

package/es/stat-view/ring-chart.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _baseChart = _interopRequireDefault(require("./base-chart"));
 var _customG = require("../custom-g2");
 var _commonUtils = require("../utils/common-utils");
@@ -75,7 +75,7 @@ class RingChart extends _baseChart.default {
       } = statItem;
       const table = getTableById(table_id);
       if (summary_type !== _constants.SUMMARY_TYPE.COUNT) {
-        summaryColumn = summary_column_key && _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key);
+        summaryColumn = summary_column_key && (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key);
         summaryColumnData = summaryColumn && summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       this.chart.coordinate('theta', {

package/es/stat-view/scatter-chart.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _baseChart = _interopRequireDefault(require("./base-chart"));
 var _customG = require("../custom-g2");
 var _commonUtils = require("../utils/common-utils");
@@ -26,57 +26,6 @@ const propTypes = {
 class ScatterChart extends _baseChart.default {
   constructor(props) {
     super(props);
-    this.componentDidMount = async () => {
-      const {
-        statItem,
-        chartCalculator,
-        eventBus
-      } = this.props;
-      if (this.container) {
-        const data = await chartCalculator.calculate(statItem);
-        this.setState({
-          isCalculatingData: false
-        });
-        this.drawChart(data);
-        this.calculateData = data;
-      }
-      this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
-        this.renderAxisLabel(newStatItem);
-      });
-    };
-    this.componentDidUpdate = async (preProps, preState) => {
-      const {
-        statItem,
-        chartCalculator
-      } = this.props;
-      const {
-        isCalculatingData
-      } = this.state;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
-        if (this.container) {
-          this.setState({
-            isCalculatingData: true
-          });
-          const data = await chartCalculator.calculate(statItem);
-          this.calculateData = data;
-          this.setState({
-            isCalculatingData: false
-          });
-          this.chart && this.chart.destroy();
-          this.drawChart(data);
-          if (this.props.isPreview) {
-            this.chart.forceFit();
-          }
-        }
-      } else {
-        this.chart && this.chart.destroy();
-        this.drawChart(this.calculateData);
-        if (this.props.isPreview) {
-          this.chart.forceFit();
-        }
-      }
-    };
     this.drawChart = data => {
       const {
         getTableById,
@@ -91,8 +40,8 @@ class ScatterChart extends _baseChart.default {
         y_axis_column
       } = statItem;
       const selectedTable = getTableById(table_id);
-      const selectedXAxisColumn = _dtableStore.TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
-      const selectedYAxisColumn = _dtableStore.TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
+      const selectedXAxisColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, x_axis_column);
+      const selectedYAxisColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, y_axis_column);
       if (isPreview) {
         this.chart = new _customG.Chart({
           container: this.container,
@@ -218,7 +167,7 @@ class ScatterChart extends _baseChart.default {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'statistic-chart-axis-label';
-        const column = _dtableStore.TableUtils.getTableColumnByKey(table, x_axis_column);
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column);
         div.innerHTML = "".concat(column ? column.name : '');
         div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
         chartContainer.appendChild(div);
@@ -236,7 +185,7 @@ class ScatterChart extends _baseChart.default {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'statistic-chart-axis-label';
-        const column = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column) || {};
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column) || {};
         div.innerHTML = column.name || '';
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
@@ -261,6 +210,24 @@ class ScatterChart extends _baseChart.default {
     };
     this.calculateData = null;
   }
+  async componentDidMount() {
+    const {
+      statItem,
+      chartCalculator,
+      eventBus
+    } = this.props;
+    if (this.container) {
+      const data = await chartCalculator.calculate(statItem);
+      this.setState({
+        isCalculatingData: false
+      });
+      this.drawChart(data);
+      this.calculateData = data;
+    }
+    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
+      this.renderAxisLabel(newStatItem);
+    });
+  }
   shouldComponentUpdate(nextProps, nextState) {
     const {
       colorThemeName
@@ -276,6 +243,39 @@ class ScatterChart extends _baseChart.default {
     }
     return false;
   }
+  async componentDidUpdate(preProps, preState) {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      if (this.container) {
+        this.setState({
+          isCalculatingData: true
+        });
+        const data = await chartCalculator.calculate(statItem);
+        this.calculateData = data;
+        this.setState({
+          isCalculatingData: false
+        });
+        this.chart && this.chart.destroy();
+        this.drawChart(data);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
+        }
+      }
+    } else {
+      this.chart && this.chart.destroy();
+      this.drawChart(this.calculateData);
+      if (this.props.isPreview) {
+        this.chart.forceFit();
+      }
+    }
+  }
   componentWillUnmount() {
     this.container = null;
     this.unsubscribeStyleChange && this.unsubscribeStyleChange();

package/es/stat-view/treemap-chart.js

@@ -11,7 +11,7 @@ var _dataSet = _interopRequireDefault(require("@antv/data-set"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _util = require("@antv/util");
 var _text = require("@antv/g2/esm/util/text");
-var _dtableStore = require("dtable-store");
+var _dtableUtils = require("dtable-utils");
 var _baseChart = _interopRequireDefault(require("./base-chart"));
 var _customG = require("../custom-g2");
 var _commonUtils = require("../utils/common-utils");
@@ -30,53 +30,6 @@ const propTypes = {
 class TreemapChart extends _baseChart.default {
   constructor(props) {
     super(props);
-    this.componentDidMount = async () => {
-      const {
-        statItem,
-        chartCalculator
-      } = this.props;
-      if (this.container) {
-        const data = await chartCalculator.calculate(statItem);
-        this.setState({
-          isCalculatingData: false
-        });
-        this.drawChart(data);
-        this.calculateData = data;
-      }
-    };
-    this.componentDidUpdate = async (preProps, preState) => {
-      const {
-        statItem,
-        chartCalculator
-      } = this.props;
-      const {
-        isCalculatingData
-      } = this.state;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
-        this.setState({
-          isCalculatingData: true
-        });
-        if (this.container) {
-          const data = await chartCalculator.calculate(statItem);
-          this.calculateData = data;
-          this.setState({
-            isCalculatingData: false
-          });
-          this.chart && this.chart.destroy();
-          this.drawChart(data);
-          if (this.props.isPreview) {
-            this.chart.forceFit();
-          }
-        }
-      } else {
-        this.chart && this.chart.destroy();
-        this.drawChart(this.calculateData);
-        if (this.props.isPreview) {
-          this.chart.forceFit();
-        }
-      }
-    };
     this.drawChart = data => {
       const {
         getTableById,
@@ -90,7 +43,7 @@ class TreemapChart extends _baseChart.default {
         summary_column_key
       } = statItem;
       const table = getTableById(table_id);
-      const selectedNumericColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key);
+      const selectedNumericColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key);
       if (isPreview) {
         this.chart = new _customG.Chart({
           container: this.container,
@@ -133,6 +86,7 @@ class TreemapChart extends _baseChart.default {
         as: ['x', 'y']
       });
       const nodes = [];
+      // eslint-disable-next-line
       for (const node of dv.getAllNodes()) {
         if (node.data.name === 'root') {
           continue;
@@ -220,6 +174,20 @@ class TreemapChart extends _baseChart.default {
     }
     (0, _customG.registerGeometryLabelLayout)('custom-limit-in-shape', limitInShape);
   }
+  async componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    if (this.container) {
+      const data = await chartCalculator.calculate(statItem);
+      this.setState({
+        isCalculatingData: false
+      });
+      this.drawChart(data);
+      this.calculateData = data;
+    }
+  }
   shouldComponentUpdate(nextProps, nextState) {
     const {
       colorThemeName
@@ -235,6 +203,39 @@ class TreemapChart extends _baseChart.default {
     }
     return false;
   }
+  async componentDidUpdate(preProps, preState) {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
+      });
+      if (this.container) {
+        const data = await chartCalculator.calculate(statItem);
+        this.calculateData = data;
+        this.setState({
+          isCalculatingData: false
+        });
+        this.chart && this.chart.destroy();
+        this.drawChart(data);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
+        }
+      }
+    } else {
+      this.chart && this.chart.destroy();
+      this.drawChart(this.calculateData);
+      if (this.props.isPreview) {
+        this.chart.forceFit();
+      }
+    }
+  }
   componentWillUnmount() {
     this.container = null;
   }