dtable-statistic 4.4.22 → 4.4.24-alpha.0

package/es/mobile-dashboard.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _tabs = _interopRequireDefault(require("./tabs"));
 var _statView = _interopRequireDefault(require("./stat-view"));
+var _seaChart = require("sea-chart");
 var _constants = require("./constants");
 var _icon = _interopRequireDefault(require("./assets/images/icon.png"));
 var _mobileDashboardModule = _interopRequireDefault(require("./assets/css/mobile-dashboard.module.css"));
@@ -25,13 +26,9 @@ class MobileDashboard extends _react.Component {
   render() {
     const {
       getTableById,
-      dtableChangedTime,
       colorThemeName,
       statistics,
-      selectedDashboardIdx,
-      chartCalculator,
-      labelColorConfigs,
-      eventBus
+      selectedDashboardIdx
     } = this.props;
     const statistic = statistics[selectedDashboardIdx];
     const {
@@ -70,10 +67,12 @@ class MobileDashboard extends _react.Component {
     }, statItems.map(statItem => {
       const {
         _id,
-        type,
+        type
+      } = statItem.config;
+      const {
         name
-      } = statItem;
-      const showStatName = !(type === _constants.STAT_TYPE.BASIC_NUMBER_CARD || type === _constants.STAT_TYPE.DASHBOARD);
+      } = statItem.style_config.title.text;
+      const showStatName = !(type === _seaChart.CHART_TYPE.BASIC_NUMBER_CARD || type === _seaChart.CHART_TYPE.DASHBOARD);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: "mobile-statistic-chart-".concat(_id),
         className: _mobileDashboardModule.default['mobile-statistic-chart-wrapper']
@@ -82,17 +81,10 @@ class MobileDashboard extends _react.Component {
       }, showStatName && name), /*#__PURE__*/_react.default.createElement("div", {
         className: _mobileDashboardModule.default['mobile-statistic-chart-container']
       }, /*#__PURE__*/_react.default.createElement(_statView.default, {
-        isPreview: true,
-        isEnlarge: false,
-        dtableChangedTime: dtableChangedTime,
         theme: _constants.THEME_NAME_MAP.LIGHT,
         colorThemeName: colorThemeName,
         statItem: statItem,
-        chartCalculator: chartCalculator,
-        labelColorConfigs: labelColorConfigs,
-        eventBus: eventBus,
-        getTableById: getTableById,
-        queryMapJson: this.props.queryMapJson
+        getTableById: getTableById
       })));
     })));
   }

package/es/model/conver-statItem.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertByType = void 0;
+var _seaChart = require("sea-chart");
+const typeMapping = {
+  'chart_bar': _seaChart.CHART_TYPE.BAR,
+  'chart_bar_group': _seaChart.CHART_TYPE.BAR_GROUP,
+  'chart_bar_stack': _seaChart.CHART_TYPE.BAR_STACK,
+  'custom_bar': _seaChart.CHART_TYPE.BAR_CUSTOM,
+  'completeness_chart': _seaChart.CHART_TYPE.COMPLETENESS,
+  'group_completeness_chart': _seaChart.CHART_TYPE.COMPLETENESS_GROUP,
+  'chart_line': _seaChart.CHART_TYPE.LINE,
+  'chart_group_line': _seaChart.CHART_TYPE.LINE_GROUP,
+  'area_chart': _seaChart.CHART_TYPE.AREA,
+  'area_group_chart': _seaChart.CHART_TYPE.AREA_GROUP,
+  'chart_pie': _seaChart.CHART_TYPE.PIE,
+  'chart_ring': _seaChart.CHART_TYPE.RING,
+  'scatter_chart': _seaChart.CHART_TYPE.SCATTER,
+  'combination_chart': _seaChart.CHART_TYPE.COMBINATION,
+  'trend_chart': _seaChart.CHART_TYPE.TREND,
+  'treemap': _seaChart.CHART_TYPE.TREE_MAP,
+  'pivot_table': _seaChart.CHART_TYPE.TABLE
+};
+
+// Compatible with old chart
+const convertByType = statItem => {
+  const {
+    type
+  } = statItem;
+  const newStatItem = {};
+  if (['chart_bar', 'chart_bar_group', 'chart_bar_stack', 'chart_line', 'chart_group_line', 'area_chart', 'area_group_chart'].includes(type)) {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['x_axis_include_empty_cells'] = (statItem === null || statItem === void 0 ? void 0 : statItem.x_axis_include_empty) || false;
+    newStatItem['x_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_x_axis_label) || false;
+    newStatItem['y_axis_summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.y_axis_column_key;
+    newStatItem['y_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_y_axis_label) || false;
+    newStatItem['y_axis_show_value'] = (statItem === null || statItem === void 0 ? void 0 : statItem.display_data) || false;
+    if (type === 'chart_group_line' || type === 'area_group_chart') {
+      newStatItem['summary_columns'] = statItem === null || statItem === void 0 ? void 0 : statItem.column_groupby_numeric_columns;
+    }
+  }
+  if (type === 'compare_bar') {
+    newStatItem['x_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_x_axis_label) || false;
+    newStatItem['y_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_y_axis_label) || false;
+    newStatItem['y_axis_summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.y_axis_column_key;
+  }
+  if (type === 'custom_bar') {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['x_axis_include_empty_cells'] = (statItem === null || statItem === void 0 ? void 0 : statItem.x_axis_include_empty) || false;
+    newStatItem['x_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_x_axis_label) || false;
+    newStatItem['y_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_y_axis_label) || false;
+    newStatItem['y_axises'] = statItem === null || statItem === void 0 ? void 0 : statItem.y_axises.map(item => ({
+      ...item,
+      type: 'bar_stack'
+    }));
+  }
+  if (type === 'completeness_chart' || type === 'group_completeness_chart') {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['groupby_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.name_column;
+    newStatItem['completed_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.completed_column;
+    newStatItem['target_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.target_column;
+    if (type === 'group_completeness_chart') {
+      newStatItem['column_groupby_column_key'] = statItem.group_column;
+    }
+  }
+  if (type === 'chart_pie' || type === 'chart_ring') {
+    newStatItem['type'] = typeMapping[type];
+  }
+  if (type === 'scatter_chart') {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['x_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_x_axis_label) || false;
+    newStatItem['y_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_y_axis_label) || false;
+    newStatItem['x_axis_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.x_axis_column;
+    newStatItem['y_axis_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.y_axis_column;
+    newStatItem['column_groupby_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.group_column;
+  }
+  if (type === 'combination_chart') {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['x_axis_show_label'] = (statItem === null || statItem === void 0 ? void 0 : statItem.show_x_axis_label) || false;
+    newStatItem['x_axis_include_empty_cells'] = (statItem === null || statItem === void 0 ? void 0 : statItem.x_axis_include_empty) || false;
+  }
+  if (type === 'map' || type === 'map_bubble') {
+    newStatItem['geo_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.geo_column;
+    newStatItem['summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.summary_column;
+    newStatItem['x_axis_include_empty_cells'] = (statItem === null || statItem === void 0 ? void 0 : statItem.x_axis_include_empty) || false;
+  }
+  if (type === 'world_map' || type === 'world_map_bubble') {
+    newStatItem['geo_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.column;
+    newStatItem['summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.summary_column;
+  }
+  if (type === 'heat_map') {
+    newStatItem['time_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.time_column;
+    newStatItem['summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.summary_column;
+  }
+  if (type === 'mirror') {
+    newStatItem['column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.column;
+    newStatItem['group_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.group_column;
+    newStatItem['summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.summary_column;
+  }
+  if (type === 'basic_number_card') {
+    newStatItem['numeric_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.numeric_column;
+  }
+  if (type === 'trend_chart') {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['date_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.date_column;
+    newStatItem['summary_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.summary_column;
+  }
+  if (type === 'dashboard') {
+    newStatItem['target_value_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.target_value_column;
+    newStatItem['total_value_column_key'] = statItem === null || statItem === void 0 ? void 0 : statItem.total_value_column;
+  }
+  if (type === 'treemap') {
+    newStatItem['type'] = typeMapping[type];
+  }
+  if (type === 'pivot_table') {
+    newStatItem['type'] = typeMapping[type];
+    newStatItem['summary_columns'] = statItem === null || statItem === void 0 ? void 0 : statItem.summary_columns_option;
+  }
+  return newStatItem;
+};
+exports.convertByType = convertByType;

package/es/service/chart-service.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _seaChart = require("sea-chart");
 var _commonUtils = require("../utils/common-utils");
-var _model = _interopRequireWildcard(require("../model"));
 class ChartService {
   constructor(_ref) {
     let {
@@ -17,10 +16,8 @@ class ChartService {
   generatorChart() {
     let statistic = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let table = arguments.length > 1 ? arguments[1] : undefined;
-    const object = new _model.GenericModel(statistic);
-    const ChartModel = _model.default[object.type];
-    if (!ChartModel) return null;
-    return new ChartModel(object, table);
+    const chartModel = new _seaChart.ChartModel(statistic, table);
+    return chartModel;
   }
   getInitChart(_ref2) {
     let {
@@ -55,15 +52,11 @@ class ChartService {
       stat_items
     } = dashboard;
     const statId = (0, _commonUtils.generatorUniqueId)(stat_items);
-    const {
-      name
-    } = originalStatItem;
-    return {
-      ...originalStatItem,
-      _id: statId,
-      name: name + '(copy)',
-      layout: null
-    };
+    const newStatItem = JSON.parse(JSON.stringify(originalStatItem));
+    newStatItem.config._id = statId;
+    newStatItem.style_config.title.text = originalStatItem.style_config.title.text + '(copy)';
+    newStatItem.layout = null;
+    return newStatItem;
   }
   getConvertedChart(_ref4) {
     let {

package/es/service/dashboard-service.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _seaChart = require("sea-chart");
 var _statisticDashboard = _interopRequireDefault(require("../model/statistic-dashboard"));
 var _utils = require("../utils");
 var _commonUtils = require("../utils/common-utils");
@@ -15,13 +16,11 @@ class DashBoardService {
     let {
       value,
       defaultDashboardName,
-      chartCalculator,
       chartService,
       updateStatistics,
       deletePluginSettings
     } = _ref;
     this.defaultDashboardName = defaultDashboardName;
-    this.chartCalculator = chartCalculator;
     this.chartService = chartService;
     this.initStatistics(value, updateStatistics, deletePluginSettings);
   }
@@ -64,23 +63,23 @@ class DashBoardService {
         type
       } = chart;
       switch (type) {
-        case _constants.STAT_TYPE.PIVOT_TABLE:
+        case _seaChart.CHART_TYPE.TABLE:
           {
             return this.convertPivotTable(chart);
           }
-        case _constants.STAT_TYPE.BAR:
+        case _seaChart.CHART_TYPE.BAR:
           {
             return this.convertChartBar(chart);
           }
-        case _constants.STAT_TYPE.LINE:
+        case _seaChart.CHART_TYPE.LINE:
           {
             return this.convertChartLine(chart);
           }
-        case _constants.STAT_TYPE.PIE:
+        case _seaChart.CHART_TYPE.PIE:
           {
             return this.chartService.generatorChart({
               ...chart,
-              type: _constants.STAT_TYPE.RING
+              type: _seaChart.CHART_TYPE.RING
             });
           }
         default:
@@ -121,9 +120,9 @@ class DashBoardService {
     };
     const isGroupbyMultipleNumericColumns = column_groupby_multiple_numeric_column && column_groupby_numeric_column_keys && column_groupby_numeric_column_keys.length > 0;
     if (column_groupby_column_key || isGroupbyMultipleNumericColumns) {
-      convertedChart.type = _constants.STAT_TYPE.BAR_GROUP;
+      convertedChart.type = _seaChart.CHART_TYPE.BAR_GROUP;
       if (y_axis_use_stack) {
-        convertedChart.type = _constants.STAT_TYPE.BAR_STACK;
+        convertedChart.type = _seaChart.CHART_TYPE.BAR_STACK;
       }
       if (isGroupbyMultipleNumericColumns) {
         convertedChart.column_groupby_multiple_numeric_column = column_groupby_multiple_numeric_column;
@@ -150,7 +149,7 @@ class DashBoardService {
       ...chart
     };
     if (column_groupby_column_key) {
-      convertedChart.type = _constants.STAT_TYPE.GROUP_LINE;
+      convertedChart.type = _seaChart.CHART_TYPE.LINE_GROUP;
       if (isGroupbyMultipleNumericColumns) {
         convertedChart.column_groupby_multiple_numeric_column = column_groupby_multiple_numeric_column;
         convertedChart.column_groupby_numeric_columns = column_groupby_numeric_column_keys.map(key => {
@@ -210,13 +209,12 @@ class DashBoardService {
       if (!Array.isArray(charts) || charts.length === 0) {
         return dashboard;
       }
-      charts = charts.filter(chart => this.chartCalculator.isValidChart(chart));
       charts = charts.map((chart, index) => {
         if (!chart.layout) {
           return {
             ...chart,
             layout: {
-              i: chart._id,
+              i: chart.config._id,
               x: index % 2 * 2,
               y: Infinity,
               w: 2,
@@ -342,7 +340,7 @@ class DashBoardService {
             stat_items
           } = updatedDashboard;
           updatedDashboard.stat_items = stat_items.map(chart => {
-            const chartLayout = idChartLayoutMap[chart._id];
+            const chartLayout = idChartLayoutMap[chart.config._id];
             if (!chartLayout) return chart;
             const {
               x,
@@ -379,7 +377,7 @@ class DashBoardService {
           const statItemsLen = updatedDashboard.stat_items.length;
           if (!chart.layout) {
             chart.layout = {
-              i: chart._id,
+              i: chart.config._id,
               x: statItemsLen % 2 * 2,
               y: Infinity,
               w: 2,
@@ -401,7 +399,7 @@ class DashBoardService {
           if (!updatedDashboard) {
             break;
           }
-          let deleteIndex = updatedDashboard.stat_items.findIndex(chart => chart._id === chart_id);
+          let deleteIndex = updatedDashboard.stat_items.findIndex(chart => chart.config._id === chart_id);
           if (deleteIndex < 0) {
             break;
           }
@@ -415,13 +413,13 @@ class DashBoardService {
             index,
             chart
           } = payload;
-          const charId = chart._id;
+          const charId = chart.config._id;
           const updatedStatistics = [...this.statistics];
           let updatedDashboard = updatedStatistics[index];
           if (!updatedDashboard) {
             break;
           }
-          let updateIndex = updatedDashboard.stat_items.findIndex(chart => chart._id === charId);
+          let updateIndex = updatedDashboard.stat_items.findIndex(chart => chart.config._id === charId);
           if (updateIndex < 0) {
             break;
           }
@@ -439,29 +437,27 @@ class DashBoardService {
           const updatedStatistics = [...this.statistics];
           let currentDashboard = updatedStatistics[index];
           if (!currentDashboard || !Array.isArray(currentDashboard.stat_items)) break;
-          let movedChartIndex = currentDashboard.stat_items.findIndex(chart => chart._id === chart_id);
+          let movedChartIndex = currentDashboard.stat_items.findIndex(chart => chart.config._id === chart_id);
           if (movedChartIndex < 0) break;
           let targetDashboard = target_view_id && updatedStatistics.find(view => view._id === target_view_id);
           if (!targetDashboard) break;
           const movedCharts = currentDashboard.stat_items.splice(movedChartIndex, 1);
           let movedChart = movedCharts && movedCharts[0];
           if (!movedChart) break;
-          let newChartId = movedChart._id;
+          let newChartId = movedChart.config._id;
           if (!Array.isArray(targetDashboard.stat_items)) {
             targetDashboard.stat_items = [];
           } else {
             newChartId = (0, _commonUtils.generatorUniqueId)(targetDashboard.statItems);
           }
-          movedChart = Object.assign(movedChart, {
-            _id: newChartId,
-            layout: {
-              i: newChartId,
-              x: targetDashboard.stat_items.length % 2 * 2,
-              y: Infinity,
-              w: 2,
-              h: 7
-            }
-          });
+          movedChart.config._id = newChartId;
+          movedChart.layout = {
+            i: newChartId,
+            x: targetDashboard.stat_items.length % 2 * 2,
+            y: Infinity,
+            w: 2,
+            h: 7
+          };
           targetDashboard.stat_items.push(movedChart);
           this.statistics = updatedStatistics;
           break;

package/es/stat-list/chart-preview.js

@@ -11,7 +11,6 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _html2canvas = _interopRequireDefault(require("html2canvas"));
 var _statView = _interopRequireDefault(require("../stat-view"));
 var _statisticDropdownMenu = _interopRequireDefault(require("../components/dropdown-menu/statistic-dropdown-menu"));
-var _constants = require("../constants");
 class ChartPreview extends _react.Component {
   constructor() {
     super(...arguments);
@@ -34,7 +33,7 @@ class ChartPreview extends _react.Component {
       // for charts rendered with `<canvas>`
       const {
         _id: id
-      } = statItem;
+      } = statItem.config;
       const originalElement = document.querySelector("#stat-item-".concat(id, " .statistic-chart-container > div"));
       if (originalElement) {
         const containerWidth = originalElement.scrollWidth + 15 * 2;
@@ -52,7 +51,7 @@ class ChartPreview extends _react.Component {
         }).then(canvas => {
           let eleA = document.createElement('a');
           eleA.href = canvas.toDataURL('image/png');
-          eleA.download = "".concat(statItem.name || 'image', ".png");
+          eleA.download = "".concat(statItem.style_config.title.text || 'image', ".png");
           eleA.click();
           document.body.removeChild(exportContainer);
         });
@@ -72,50 +71,50 @@ class ChartPreview extends _react.Component {
     };
     this.renderChart = statItem => {
       const {
-        dtableChangedTime,
-        chartCalculator,
         theme,
         colorThemeName,
-        eventBus
+        api,
+        value,
+        getTableById,
+        toggleStatisticRecordsDialog
       } = this.props;
       return /*#__PURE__*/_react.default.createElement(_statView.default, {
         ref: ref => this.chartView = ref,
-        isPreview: true,
-        isEnlarge: false,
-        dtableChangedTime: dtableChangedTime,
         theme: theme,
         colorThemeName: colorThemeName,
         statItem: statItem,
-        chartCalculator: chartCalculator,
-        eventBus: eventBus,
-        getTableById: this.props.getTableById,
-        queryMapJson: this.props.queryMapJson,
-        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+        api: api,
+        value: value,
+        getTableById: getTableById,
+        toggleStatisticRecordsDialog: toggleStatisticRecordsDialog
       });
     };
     this.moveChartToView = viewId => {
       const {
         statItem
       } = this.props;
-      this.props.moveChartToView(statItem._id, viewId);
+      this.props.moveChartToView(statItem.config._id, viewId);
     };
   }
   render() {
+    var _statItem$config;
     const {
       isTableReadOnly,
       statItem
     } = this.props;
     const {
       _id: statId,
-      name: statName,
       type
-    } = statItem;
-    const showStatName = !(type === _constants.STAT_TYPE.BASIC_NUMBER_CARD || type === _constants.STAT_TYPE.DASHBOARD);
+    } = statItem.config;
+    const {
+      text: statName
+    } = statItem.style_config.title;
+    const statItemId = statItem === null || statItem === void 0 ? void 0 : (_statItem$config = statItem.config) === null || _statItem$config === void 0 ? void 0 : _statItem$config._id;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "statistic-chart-preview-header"
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "statistic-chart-preview-name"
-    }, showStatName ? statName : ''), /*#__PURE__*/_react.default.createElement("span", {
+    }, statName), /*#__PURE__*/_react.default.createElement("span", {
       className: "statistic-chart-preview-operations"
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "statistic-chart-preview-microscope",
@@ -135,7 +134,7 @@ class ChartPreview extends _react.Component {
       onNewTableDialogToggle: this.onNewTableDialogToggle,
       onUpdateTableDialogToggle: this.onUpdateTableDialogToggle
     }))), /*#__PURE__*/_react.default.createElement("div", {
-      id: "stat-item-".concat(statItem._id),
+      id: "stat-item-".concat(statItemId),
       className: "statistic-chart-preview-container"
     }, this.renderChart(statItem)), /*#__PURE__*/_react.default.createElement("div", {
       className: "statistic-chart-preview-container-resize"

package/es/stat-list/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactGridLayout = _interopRequireWildcard(require("react-grid-layout"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _toaster = _interopRequireDefault(require("dtable-ui-component/lib/toaster"));
+var _seaChart = require("sea-chart");
 var _chartPreview = _interopRequireDefault(require("./chart-preview"));
 var _components = require("../components");
 var _enlargedChartDialog = _interopRequireDefault(require("../components/dialog/enlarged-chart-dialog"));
@@ -59,7 +60,7 @@ class StatList extends _react.Component {
       });
     };
     this.exportChart2Table = (tableName, chart) => {
-      if (chart.type !== _constants.STAT_TYPE.PIVOT_TABLE) {
+      if (chart.type !== _seaChart.CHART_TYPE.TABLE) {
         this.statisticalResult4Export = null;
         _toaster.default.danger(_reactIntlUniversal.default.get('Failed_export_statistic_to_Table'));
         this.closeNewTableDialog();
@@ -100,7 +101,7 @@ class StatList extends _react.Component {
       const {
         getTableById
       } = this.props;
-      if (chartUpdate2Table.type !== _constants.STAT_TYPE.PIVOT_TABLE) {
+      if (chartUpdate2Table.type !== _seaChart.CHART_TYPE.TABLE) {
         this.statisticalResult4Update = null;
         _toaster.default.danger(_reactIntlUniversal.default.get('Failed_export_statistic_to_Table'));
         this.closeSelectTableDialog();
@@ -151,6 +152,7 @@ class StatList extends _react.Component {
       chartIndexExport2Table: -1,
       chartIndexUpdate2Table: -1
     };
+    this.value = props.getValue();
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     const {
@@ -163,12 +165,10 @@ class StatList extends _react.Component {
   render() {
     const {
       isTableReadOnly,
-      dtableChangedTime,
       theme,
       colorThemeName,
       statItems,
-      chartCalculator,
-      eventBus
+      api
     } = this.props;
     const {
       layout,
@@ -192,8 +192,9 @@ class StatList extends _react.Component {
       onLayoutChange: this.onLayoutChange,
       cols: 4,
       useCSSTransforms: false
-    }, statItems.map((statItem, index) => {
-      const statId = statItem._id;
+    }, statItems.map((item, index) => {
+      var _item$config;
+      const statId = item === null || item === void 0 ? void 0 : (_item$config = item.config) === null || _item$config === void 0 ? void 0 : _item$config._id;
       if (!statId) return null;
       return /*#__PURE__*/_react.default.createElement("div", {
         id: statId,
@@ -201,16 +202,13 @@ class StatList extends _react.Component {
         className: "statistic-chart-preview"
       }, /*#__PURE__*/_react.default.createElement(_chartPreview.default, {
         isTableReadOnly: isTableReadOnly,
-        dtableChangedTime: dtableChangedTime,
         theme: theme,
         colorThemeName: colorThemeName,
-        statItem: statItem,
-        chartCalculator: chartCalculator,
-        eventBus: eventBus,
+        statItem: item,
+        api: api,
+        value: this.value,
         getOtherStatistics: this.props.getOtherStatistics,
         getTableById: this.props.getTableById,
-        getTables: this.props.getTables,
-        queryMapJson: this.props.queryMapJson,
         copyChart: this.props.copyChart,
         moveChartToView: this.props.moveChartToView,
         deleteChart: this.props.deleteChart,
@@ -228,19 +226,15 @@ class StatList extends _react.Component {
           return this.showSelectTableDialog(index, statisticalResult);
         },
         onToggleEditChart: this.props.onToggleEditChart,
-        onCloseDashboard: this.props.onCloseDashboard,
         toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
       }));
     })), enlargedChart && /*#__PURE__*/_react.default.createElement(_enlargedChartDialog.default, {
-      dtableChangedTime: dtableChangedTime,
       colorThemeName: colorThemeName,
       statItem: enlargedChart,
-      eventBus: eventBus,
-      chartCalculator: chartCalculator,
+      api: api,
+      value: this.value,
       getTableById: this.props.getTableById,
-      queryMapJson: this.props.queryMapJson,
       onEnlargeToggle: this.closeEnlargedChart,
-      onToggleShowEnlarged: this.closeEnlargedChart,
       toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
     }), chartExport2Table && /*#__PURE__*/_react.default.createElement(_components.NewTableDialog, {
       getTables: this.props.getTables,