dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,367 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+import { TableUtils } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { getCurrentTheme } from '../utils/common-utils';
+import { EMPTY_NAME, LABEL_CONFIG_CHANGED, STAT_ITEM_THEME_COLORS } from '../constants';
+import chartStyles from '../assets/css/statistic-chart.module.css';
+var propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  eventBus: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+var ScatterChart = /*#__PURE__*/function (_BaseChart) {
+  _inherits(ScatterChart, _BaseChart);
+  var _super = _createSuper(ScatterChart);
+  function ScatterChart(props) {
+    var _this;
+    _classCallCheck(this, ScatterChart);
+    _this = _super.call(this, props);
+    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _this$props, statItem, chartCalculator, eventBus, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, statItem = _this$props.statItem, chartCalculator = _this$props.chartCalculator, eventBus = _this$props.eventBus;
+              if (!_this.container) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 4;
+              return chartCalculator.calculate(statItem);
+            case 4:
+              data = _context.sent;
+              _this.setState({
+                isCalculatingData: false
+              });
+              _this.drawChart(data);
+              _this.calculateData = data;
+            case 8:
+              _this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, function (newStatItem) {
+                _this.renderAxisLabel(newStatItem);
+              });
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    _this.componentDidUpdate = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
+        var _this$props2, statItem, chartCalculator, isCalculatingData, data;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _this$props2 = _this.props, statItem = _this$props2.statItem, chartCalculator = _this$props2.chartCalculator;
+                isCalculatingData = _this.state.isCalculatingData;
+                if (!(isCalculatingData !== preState.isCalculatingData)) {
+                  _context2.next = 4;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 4:
+                if (!_this.shouldCalculateStatItem(preProps, _this.props)) {
+                  _context2.next = 17;
+                  break;
+                }
+                if (!_this.container) {
+                  _context2.next = 15;
+                  break;
+                }
+                _this.setState({
+                  isCalculatingData: true
+                });
+                _context2.next = 9;
+                return chartCalculator.calculate(statItem);
+              case 9:
+                data = _context2.sent;
+                _this.calculateData = data;
+                _this.setState({
+                  isCalculatingData: false
+                });
+                _this.chart && _this.chart.destroy();
+                _this.drawChart(data);
+                if (_this.props.isPreview) {
+                  _this.chart.forceFit();
+                }
+              case 15:
+                _context2.next = 20;
+                break;
+              case 17:
+                _this.chart && _this.chart.destroy();
+                _this.drawChart(_this.calculateData);
+                if (_this.props.isPreview) {
+                  _this.chart.forceFit();
+                }
+              case 20:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    _this.drawChart = function (data) {
+      var _this$props3 = _this.props,
+        getTableById = _this$props3.getTableById,
+        isPreview = _this$props3.isPreview,
+        statItem = _this$props3.statItem,
+        isEnlarge = _this$props3.isEnlarge,
+        theme = _this$props3.theme,
+        colorThemeName = _this$props3.colorThemeName;
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var table_id = statItem.table_id,
+        x_axis_column = statItem.x_axis_column,
+        y_axis_column = statItem.y_axis_column;
+      var selectedTable = getTableById(table_id);
+      var selectedXAxisColumn = TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
+      var selectedYAxisColumn = TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          height: 400,
+          width: 700
+        });
+      }
+      _this.chart.on('element:click', function (e) {
+        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      _this.chart.axis('x_axis', {
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        line: {
+          style: themeColors.gridColor
+        }
+      });
+      _this.chart.axis('y_axis', {
+        grid: {
+          line: {
+            style: {
+              stroke: themeColors.gridColor
+            }
+          }
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        }
+      });
+      var chart = _this.chart;
+      chart.data(data);
+      chart.scale({
+        x_axis: {
+          nice: true
+        },
+        y_axis: {
+          nice: true
+        }
+      });
+      chart.tooltip({
+        showTitle: false,
+        showCrosshairs: true,
+        crosshairs: {
+          type: 'xy'
+        },
+        itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '{valueX}<br/>' + '{valueY}' + '</li>'
+      });
+      chart.point().position('x_axis*y_axis').color('group_by', currentTheme && currentTheme.colors).shape('circle').tooltip('group_by*x_axis*y_axis', function (group_by, x_axis, y_axis) {
+        return {
+          name: group_by || group_by === 0 ? group_by : intl.get(EMPTY_NAME),
+          valueX: "".concat(selectedXAxisColumn.name, ": ").concat(x_axis),
+          valueY: "".concat(selectedYAxisColumn.name, ": ").concat(y_axis)
+        };
+      }).style({
+        fillOpacity: 0.85
+      });
+      chart.legend('group_by', {
+        position: 'bottom',
+        itemName: {
+          formatter: function formatter(name) {
+            return name || name === 0 ? name : intl.get(EMPTY_NAME);
+          },
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        pageNavigator: {
+          text: {
+            style: {
+              fill: themeColors.textColor
+            }
+          },
+          marker: {
+            style: {
+              fill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
+            }
+          }
+        }
+      });
+      chart.interaction('legend-highlight');
+      chart.render();
+      _this.renderAxisLabel();
+    };
+    _this.renderAxisLabel = function (newStatItem) {
+      var _this$props4 = _this.props,
+        getTableById = _this$props4.getTableById,
+        statItem = _this$props4.statItem;
+      if (newStatItem && newStatItem._id !== statItem._id) {
+        return;
+      }
+      if (!_this.chart) return;
+      statItem = newStatItem || statItem;
+      var _this$props5 = _this.props,
+        isEnlarge = _this$props5.isEnlarge,
+        isPreview = _this$props5.isPreview,
+        theme = _this$props5.theme;
+      var _statItem = statItem,
+        table_id = _statItem.table_id,
+        x_axis_column = _statItem.x_axis_column,
+        y_axis_column = _statItem.y_axis_column,
+        show_y_axis_label = _statItem.show_y_axis_label,
+        show_x_axis_label = _statItem.show_x_axis_label,
+        y_axis_label_position = _statItem.y_axis_label_position,
+        x_axis_label_position = _statItem.x_axis_label_position;
+      var table = getTableById(table_id);
+      var autoPadding = _this.chart.autoPadding;
+      var textColor = '#999999';
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        textColor = '#ffffff';
+      }
+      var xAxisID = "chart-x-axis-label_".concat(statItem._id);
+      var chartContainer = _this.chart.getCanvas().get('container');
+      var xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && show_x_axis_label) {
+        var div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'statistic-chart-axis-label';
+        var column = TableUtils.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);
+      }
+      if (xLabel && show_x_axis_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
+      }
+      if (xLabel && !show_x_axis_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      var yAxisID = "chart-y-axis-label_".concat(statItem._id);
+      var yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      var paddingLeft = autoPadding.bottom + (show_x_axis_label ? 10 : 0);
+      if (!yLabel && show_y_axis_label) {
+        var _div = document.createElement('div');
+        _div.id = yAxisID;
+        _div.className = 'statistic-chart-axis-label';
+        var _column = TableUtils.getTableColumnByKey(table, y_axis_column) || {};
+        _div.innerHTML = _column.name || '';
+        var containerHeight = chartContainer.offsetHeight;
+        var textAlign = 'center';
+        if (y_axis_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_label_position === 'top') textAlign = 'right';
+        _div.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(_div);
+      }
+      if (yLabel && show_y_axis_label) {
+        var _containerHeight = chartContainer.offsetHeight;
+        var _textAlign = 'center';
+        if (y_axis_label_position === 'bottom') _textAlign = 'left';
+        if (y_axis_label_position === 'top') _textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(_containerHeight, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0px; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yLabel && !show_y_axis_label) {
+        yLabel.parentNode.removeChild(yLabel);
+      }
+    };
+    _this.state = {
+      isCalculatingData: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(ScatterChart, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var colorThemeName = this.props.colorThemeName;
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      if (nextProps.colorThemeName !== colorThemeName) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+      this.unsubscribeStyleChange && this.unsubscribeStyleChange();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isCalculatingData = this.state.isCalculatingData;
+      var _this$props$statItem = this.props.statItem,
+        show_x_axis_label = _this$props$statItem.show_x_axis_label,
+        show_y_axis_label = _this$props$statItem.show_y_axis_label;
+      var style = {};
+      if (show_x_axis_label) {
+        style.paddingBottom = 38;
+      }
+      if (show_y_axis_label) {
+        style.paddingLeft = 38;
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref3) {
+          return _this2.container = _ref3;
+        },
+        className: "".concat(chartStyles['statistic-scatter-chart-container'], " statistic-chart-container"),
+        style: style
+      }));
+    }
+  }]);
+  return ScatterChart;
+}(BaseChart);
+ScatterChart.propTypes = propTypes;
+export default ScatterChart;

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

@@ -0,0 +1,318 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set';
+import intl from 'react-intl-universal';
+import { each, pick } from '@antv/util';
+import { getEllipsisText } from '@antv/g2/esm/util/text';
+import { TableUtils } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart, registerGeometryLabelLayout } from '../custom-g2';
+import { Loading } from '../components';
+import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
+import { EMPTY_NAME, STATISTICS_COUNT_TYPE } from '../constants';
+import chartStyles from '../assets/css/statistic-chart.module.css';
+var propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+var TreemapChart = /*#__PURE__*/function (_BaseChart) {
+  _inherits(TreemapChart, _BaseChart);
+  var _super = _createSuper(TreemapChart);
+  function TreemapChart(props) {
+    var _this;
+    _classCallCheck(this, TreemapChart);
+    _this = _super.call(this, props);
+    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _this$props, statItem, chartCalculator, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, statItem = _this$props.statItem, chartCalculator = _this$props.chartCalculator;
+              if (!_this.container) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 4;
+              return chartCalculator.calculate(statItem);
+            case 4:
+              data = _context.sent;
+              _this.setState({
+                isCalculatingData: false
+              });
+              _this.drawChart(data);
+              _this.calculateData = data;
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    _this.componentDidUpdate = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
+        var _this$props2, statItem, chartCalculator, isCalculatingData, data;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _this$props2 = _this.props, statItem = _this$props2.statItem, chartCalculator = _this$props2.chartCalculator;
+                isCalculatingData = _this.state.isCalculatingData;
+                if (!(isCalculatingData !== preState.isCalculatingData)) {
+                  _context2.next = 4;
+                  break;
+                }
+                return _context2.abrupt("return");
+              case 4:
+                if (!_this.shouldCalculateStatItem(preProps, _this.props)) {
+                  _context2.next = 17;
+                  break;
+                }
+                _this.setState({
+                  isCalculatingData: true
+                });
+                if (!_this.container) {
+                  _context2.next = 15;
+                  break;
+                }
+                _context2.next = 9;
+                return chartCalculator.calculate(statItem);
+              case 9:
+                data = _context2.sent;
+                _this.calculateData = data;
+                _this.setState({
+                  isCalculatingData: false
+                });
+                _this.chart && _this.chart.destroy();
+                _this.drawChart(data);
+                if (_this.props.isPreview) {
+                  _this.chart.forceFit();
+                }
+              case 15:
+                _context2.next = 20;
+                break;
+              case 17:
+                _this.chart && _this.chart.destroy();
+                _this.drawChart(_this.calculateData);
+                if (_this.props.isPreview) {
+                  _this.chart.forceFit();
+                }
+              case 20:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    _this.drawChart = function (data) {
+      var _this$props3 = _this.props,
+        getTableById = _this$props3.getTableById,
+        isPreview = _this$props3.isPreview,
+        statItem = _this$props3.statItem,
+        colorThemeName = _this$props3.colorThemeName;
+      var table_id = statItem.table_id,
+        summary_type = statItem.summary_type,
+        summary_column_key = statItem.summary_column_key;
+      var table = getTableById(table_id);
+      var selectedNumericColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          height: 400,
+          width: 700
+        });
+      }
+      _this.chart.on('element:click', function (e) {
+        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var newData = formatPieChartData(data, statItem, table, currentTheme);
+      var colorSet = newData.colorSet;
+      var DataView = DataSet.DataView;
+      var dv = new DataView();
+      var fullData = {
+        name: 'root',
+        children: newData.map(function (item) {
+          var name = item.name;
+          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
+          if (name == 'Others') {
+            item.name = intl.get('Others');
+          }
+          return item;
+        })
+      };
+      dv.source(fullData, {
+        type: 'hierarchy'
+      }).transform({
+        field: 'value',
+        type: 'hierarchy.treemap',
+        tile: 'treemapResquarify',
+        as: ['x', 'y']
+      });
+      var nodes = [];
+      var _iterator = _createForOfIteratorHelper(dv.getAllNodes()),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var node = _step.value;
+          if (node.data.name === 'root') {
+            continue;
+          }
+          var eachNode = {
+            name: node.data.name,
+            x: node.x,
+            y: node.y,
+            value: node.data.value,
+            formatted_value: node.data.formatted_value,
+            percent: node.data.percent,
+            original_name: node.data.original_name,
+            rows: node.data.rows || null
+          };
+          nodes.push(eachNode);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var chart = _this.chart;
+      chart.data(nodes);
+      chart.scale({
+        x: {
+          nice: true
+        },
+        y: {
+          nice: true
+        }
+      });
+      chart.axis(false);
+      chart.legend(false);
+      chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', function (name, value, percent) {
+        return {
+          name: name,
+          info: summary_type == STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
+        };
+      }).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).label('name', {
+        offset: 0,
+        style: {
+          textBaseline: 'middle'
+        },
+        content: function content(obj) {
+          if (obj.name !== 'root') {
+            return obj.name;
+          }
+        },
+        layout: {
+          type: 'custom-limit-in-shape'
+        }
+      });
+      chart.interaction('element-active');
+      chart.render();
+    };
+    _this.state = {
+      isCalculatingData: true
+    };
+    _this.calculateData = null;
+
+    // customize label layout: show ellipsis for long labels
+    function limitInShape(items, labels, shapes, region) {
+      each(labels, function (label, index) {
+        var labelBBox = label.getCanvasBBox();
+        var shapeBBox = shapes[index].getBBox();
+        if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
+          var translateX = labelBBox.width - shapeBBox.width + 20;
+          var textShapes = label.findAll(function (shape) {
+            return shape.get('type') === 'text';
+          });
+          textShapes.forEach(function (textShape) {
+            var style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            var textBox = textShape.getCanvasBBox();
+            var text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+            textShape.attr('text', text);
+          });
+        }
+      });
+    }
+    registerGeometryLabelLayout('custom-limit-in-shape', limitInShape);
+    return _this;
+  }
+  _createClass(TreemapChart, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var colorThemeName = this.props.colorThemeName;
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      if (nextProps.colorThemeName !== colorThemeName) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isCalculatingData = this.state.isCalculatingData;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref3) {
+          return _this2.container = _ref3;
+        },
+        className: "statistic-chart-loading-container ".concat(chartStyles['statistic-treemap-chart-container'])
+      }));
+    }
+  }]);
+  return TreemapChart;
+}(BaseChart);
+TreemapChart.propTypes = propTypes;
+export default TreemapChart;