dtable-statistic 4.4.23 → 4.4.24-alpha.1

package/es/assets/css/dashboard.css

@@ -153,6 +153,7 @@
   align-items: center;
   overflow: hidden;
   position: relative;
+  padding: 20px;
 }
 
 .mobile-statistic-panel .statistic-chart-container,

package/es/assets/css/dialog.css

@@ -2,6 +2,7 @@
   max-width: 1102px;
   width: 1102px;
   height: calc(100% - 56px);
+  transform: none !important;
 }
 
 .statistic-enlarge-dialog .header-close-list {
@@ -43,6 +44,35 @@
   overflow: hidden;
 }
 
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container {
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+  padding: 16px;
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: scroll;
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render .sea-chart-editor {
+  flex: 1;
+  height: 100%;
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render .sea-chart-settings {
+  width: 300px;
+  height: 100%;
+  background-color: #fff;
+  margin-left: 16px;
+  border-top: 1px solid #e4e4e4;
+  border-left: 1px solid #e4e4e4;
+  border-right: 1px solid #e4e4e4;
+}
+
 .statistic-chart-addition-dialog .statistic-chart-settings {
   height: 100%;
   width: 300px;

package/es/components/dialog/chart-edit-dialog.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _seaChart = require("sea-chart");
+var _reactstrap = require("reactstrap");
+class ChartEditDialog extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.modifyChart = update => {
+      const {
+        chart
+      } = this.state;
+      this.setState({
+        chart: {
+          ...chart,
+          ...update
+        }
+      });
+    };
+    this.onSettingChange = (update, type) => {
+      this.modifyChart(update);
+    };
+    this.state = {
+      chart: props.editingChart || null
+    };
+    this.value = props.getValue();
+  }
+  componentWillUnmount() {
+    const {
+      statistics,
+      selectedDashboardIdx
+    } = this.props;
+    const {
+      chart
+    } = this.state;
+    if (chart) {
+      const dashboard = statistics[selectedDashboardIdx];
+      const hasChart = dashboard.stat_items.find(item => item.config._id === chart.config._id);
+      if (hasChart) {
+        this.props.modifyChart(chart);
+      } else {
+        this.props.addChart(chart);
+      }
+    }
+  }
+  render() {
+    const {
+      api,
+      colorThemeName,
+      theme
+    } = this.props;
+    const {
+      chart
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      isOpen: true,
+      toggle: () => {
+        this.props.onToggleEditChart();
+      },
+      className: "statistic-chart-addition-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+      toggle: () => {
+        this.props.onToggleEditChart();
+      }
+    }, _reactIntlUniversal.default.get('Edit_the_chart')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "statistic-modal-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-render-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-render"
+    }, /*#__PURE__*/_react.default.createElement(_seaChart.Editor, {
+      chart: chart,
+      config: window.dtable,
+      api: api,
+      tables: this.value.tables,
+      collaborators: this.value.collaborators,
+      dataSources: "view",
+      theme: theme,
+      chartColorTheme: colorThemeName,
+      onChange: this.onSettingChange
+    })))));
+  }
+}
+var _default = exports.default = ChartEditDialog;

package/es/components/dialog/enlarged-chart-dialog.js

@@ -10,8 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _html2canvas = _interopRequireDefault(require("html2canvas"));
 var _reactstrap = require("reactstrap");
+var _seaChart = require("sea-chart");
 var _statView = _interopRequireDefault(require("../../stat-view"));
-var _constants = require("../../constants");
 class EnlargeChartDialog extends _react.Component {
   constructor() {
     super(...arguments);
@@ -25,23 +25,18 @@ class EnlargeChartDialog extends _react.Component {
     this.renderStatisticView = () => {
       const {
         colorThemeName,
-        dtableChangedTime,
         statItem,
-        eventBus,
-        chartCalculator,
         getTableById,
-        toggleStatisticRecordsDialog
+        toggleStatisticRecordsDialog,
+        api,
+        value
       } = this.props;
       const viewProps = {
-        isEnlarge: true,
-        isPreview: true,
-        dtableChangedTime,
         colorThemeName,
         statItem,
-        eventBus,
-        chartCalculator,
+        api,
+        value,
         getTableById,
-        queryMapJson: this.props.queryMapJson,
         toggleStatisticRecordsDialog
       };
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -73,7 +68,7 @@ class EnlargeChartDialog extends _react.Component {
         }).then(canvas => {
           let eleA = document.createElement('a');
           eleA.href = canvas.toDataURL('image/png');
-          eleA.download = "".concat(this.props.statItem.name || 'image', ".png");
+          eleA.download = "".concat(this.props.statItem.style_config.title.text || 'image', ".png");
           eleA.click();
           document.body.removeChild(exportContainer);
         });
@@ -105,7 +100,7 @@ class EnlargeChartDialog extends _react.Component {
       }, /*#__PURE__*/_react.default.createElement("i", {
         className: "item-icon dtable-font dtable-icon-x"
       })))
-    }, /*#__PURE__*/_react.default.createElement("span", null, statItem.type === _constants.STAT_TYPE.BASIC_NUMBER_CARD ? '' : statItem.name)), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+    }, /*#__PURE__*/_react.default.createElement("span", null, statItem.config.type === _seaChart.CHART_TYPE.BASIC_NUMBER_CARD ? '' : this.props.statItem.style_config.title.text)), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
       className: 'statistic-body-container statistic-microscope-content'
     }, this.renderStatisticView()));
   }

package/es/components/dialog/statistic-record-dialog/index.js

@@ -12,10 +12,10 @@ var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
 var _dtableDbApi = _interopRequireDefault(require("../../../api/dtable-db-api"));
 var _index = require("../../index");
-var _utils = require("../../../utils");
-var _sqlUtils = require("../../../utils/sql-utils");
 var _constants = require("../../../constants");
 require("./index.css");
+// import { searchRows } from '../../../utils';
+// import { getSqlString } from '../../../utils/sql-utils';
 class StatisticRecordDialog extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -46,29 +46,16 @@ class StatisticRecordDialog extends _react.default.Component {
       this.isArchiveView = (0, _dtableUtils.isArchiveView)(this.view);
       this.unShowColumnKeyList = this.getUnShowColumnKeyList(this.view);
       this.renderedColumns = this.getRenderedColumns(this.table);
-      if (this.isArchiveView || !records) {
-        const {
-          username,
-          userId,
-          userDepartmentIdsMap
-        } = window.dtable || {};
-        const sqlString = (0, _sqlUtils.getSqlString)(chart, statisticRecord, {
-          isColumn,
-          isCurrentView,
-          isRow,
-          getTableById,
-          username,
-          userId,
-          userDepartmentIdsMap
-        });
-        _dtableDbApi.default.sqlQuery(sqlString).then(res => {
-          const {
-            results: rows
-          } = res.data;
-          this.processDrilledRows(rows);
-        });
-        return;
-      }
+      // if (this.isArchiveView || !records) {
+      //   const { username, userId, userDepartmentIdsMap } = window.dtable || {};
+      //   const sqlString = getSqlString(chart, statisticRecord, { isColumn, isCurrentView, isRow, getTableById, username, userId, userDepartmentIdsMap });
+      //   dtableDbAPI.sqlQuery(sqlString).then(res => {
+      //     const { results: rows } = res.data;
+      //     this.processDrilledRows(rows);
+      //   });
+      //   return;
+      // }
+
       this.processDrilledRows(records);
     };
     this.processDrilledRows = drilledRows => {
@@ -138,11 +125,16 @@ class StatisticRecordDialog extends _react.default.Component {
     };
     this.getSearchedRows = (rows, searchVal) => {
       if (!Array.isArray(rows) || rows.length === 0) return [];
-      if (searchVal) {
-        return (0, _utils.searchRows)(rows, (0, _dtableUtils.getViewShownColumns)(this.view, this.table.columns), searchVal, row => {
-          return row;
-        }).map(row => row._id);
-      }
+      // if (searchVal) {
+      //   return searchRows(
+      //     rows,
+      //     getViewShownColumns(this.view, this.table.columns),
+      //     searchVal,
+      //     (row) => {
+      //       return row;
+      //     },
+      //   ).map((row) => row._id);
+      // }
       return rows.map(row => row._id);
     };
     this.getRowsByIds = rowsIds => {

package/es/components/dropdown-menu/statistic-dropdown-menu.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _reactstrap = require("reactstrap");
-var _constants = require("../../constants");
+var _seaChart = require("sea-chart");
 var _icon = _interopRequireDefault(require("../icon"));
 class StatisticDropdownMenu extends _react.default.Component {
   constructor(props) {
@@ -90,7 +90,7 @@ class StatisticDropdownMenu extends _react.default.Component {
       className: "item-icon dtable-font dtable-icon-copy"
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "item-text"
-    }, _reactIntlUniversal.default.get('Duplicate')))), chartType === _constants.STAT_TYPE.PIVOT_TABLE && !isTableReadOnly && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    }, _reactIntlUniversal.default.get('Duplicate')))), chartType === _seaChart.CHART_TYPE.TABLE && !isTableReadOnly && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
       onClick: this.props.onNewTableDialogToggle
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "item-icon dtable-font dtable-icon-export"

package/es/components/index.js

@@ -4,12 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CommonAddTool", {
-  enumerable: true,
-  get: function () {
-    return _commonAddTool.default;
-  }
-});
 Object.defineProperty(exports, "DTablePopover", {
   enumerable: true,
   get: function () {
@@ -40,16 +34,8 @@ Object.defineProperty(exports, "NewTableDialog", {
     return _newTableDialog.default;
   }
 });
-Object.defineProperty(exports, "SeaTableRadio", {
-  enumerable: true,
-  get: function () {
-    return _seatableRadio.default;
-  }
-});
-var _commonAddTool = _interopRequireDefault(require("./common-add-tool"));
 var _dtablePopover = _interopRequireDefault(require("./dtable-popover"));
 var _dtableSearchInput = _interopRequireDefault(require("./dtable-search-input"));
 var _loading = _interopRequireDefault(require("./loading"));
 var _modalPortal = _interopRequireDefault(require("./modal-portal"));
-var _newTableDialog = _interopRequireDefault(require("./dialog/new-table-dialog"));
-var _seatableRadio = _interopRequireDefault(require("./seatable-radio"));
+var _newTableDialog = _interopRequireDefault(require("./dialog/new-table-dialog"));

package/es/constants/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_SELECTED_DASHBOARD = exports.INIT_STAT_ITEM = exports.GROUPBY_TYPE = exports.GEOLOCATION_GRANULARITY_LIST = exports.GEOLOCATION_GRANULARITY = exports.FILL_BORDER_COLOR_MAP = exports.EMPTY_NAME = exports.DTABLE_DB_SUMMARY_METHOD = exports.DEFAULT_NUMBER_FORMAT_OBJECT = exports.DEFAULT_LABEL_FONT_SIZE = exports.DEFAULT_GRID_SIZE = exports.DEFAULT_GRID_DISTANCE = exports.DEFAULT_ANNOTATION_SIZE = exports.DATE_GRANULARITY_LIST = exports.DATE_GRANULARITY = exports.DATA_SORT_TYPE_LABEL = exports.DATA_SORT_TYPES = exports.DATA_SORT_TYPE = exports.DASHBOARD_ACTION_TYPE = exports.CommonEventTypes = exports.COLOR_OPTIONS = exports.CHART_STYLE_COLORS = exports.BASIC_STAT_TYPES = exports.BASIC_CHART_COLUMN_LIST = void 0;
+exports.KEY_SELECTED_DASHBOARD = exports.INIT_STAT_ITEM = exports.GROUPBY_TYPE = exports.GEOLOCATION_GRANULARITY_LIST = exports.GEOLOCATION_GRANULARITY = exports.FILL_BORDER_COLOR_MAP = exports.EMPTY_NAME = exports.DTABLE_DB_SUMMARY_METHOD = exports.DEFAULT_NUMBER_FORMAT_OBJECT = exports.DEFAULT_LABEL_FONT_SIZE = exports.DEFAULT_GRID_SIZE = exports.DEFAULT_GRID_DISTANCE = exports.DEFAULT_ANNOTATION_SIZE = exports.DATE_GRANULARITY_LIST = exports.DATE_GRANULARITY = exports.DATA_SORT_TYPE_LABEL = exports.DATA_SORT_TYPES = exports.DATA_SORT_TYPE = exports.DASHBOARD_ACTION_TYPE = exports.CommonEventTypes = exports.COLOR_OPTIONS = exports.CHART_STYLE_COLORS = exports.BASIC_CHART_COLUMN_LIST = void 0;
 Object.defineProperty(exports, "KeyCodes", {
   enumerable: true,
   get: function () {
@@ -61,7 +61,6 @@ const STAT_TYPE = exports.STAT_TYPE = {
   PIVOT_TABLE: 'pivot_table',
   CUSTOM_BAR: 'custom_bar'
 };
-const BASIC_STAT_TYPES = exports.BASIC_STAT_TYPES = [STAT_TYPE.BAR, STAT_TYPE.BAR_GROUP, STAT_TYPE.BAR_STACK, STAT_TYPE.LINE, STAT_TYPE.GROUP_LINE, STAT_TYPE.PIE, STAT_TYPE.RING, STAT_TYPE.SCATTER, STAT_TYPE.HORIZONTAL_BAR, STAT_TYPE.HORIZONTAL_GROUP_BAR, STAT_TYPE.STACKED_HORIZONTAL_BAR, STAT_TYPE.AREA_CHART, STAT_TYPE.AREA_GROUP_CHART, STAT_TYPE.COMPARE_BAR, STAT_TYPE.COMPLETENESS_CHART, STAT_TYPE.GROUP_COMPLETENESS_CHART, STAT_TYPE.TREEMAP, STAT_TYPE.PIVOT_TABLE, STAT_TYPE.CUSTOM_BAR];
 const SUMMARY_TYPE = exports.SUMMARY_TYPE = {
   COUNT: 'count',
   ADVANCED: 'advanced'

package/es/dashboard.js

@@ -15,8 +15,6 @@ var _chartService = _interopRequireDefault(require("./service/chart-service"));
 var _mapJson = require("./service/map-json");
 var _desktopDashboard = _interopRequireDefault(require("./desktop-dashboard"));
 var _mobileDashboard = _interopRequireDefault(require("./mobile-dashboard"));
-var _threadManager = _interopRequireDefault(require("./calculator/thread-manager"));
-var _calculator = _interopRequireDefault(require("./calculator"));
 var _utils = require("./utils");
 var _commonUtils = require("./utils/common-utils");
 var _constants = require("./constants");
@@ -39,6 +37,7 @@ class DashBoard extends _react.Component {
       }
     };
     this.onLocalDTableChanged = value => {
+      console.log('onLocalDTableChanged');
       if (this.updatingLocalStatistics) {
         // it's unnecessary to notify data changed during update statistics
         this.value = value;
@@ -50,6 +49,7 @@ class DashBoard extends _react.Component {
       });
     };
     this.onServerDTableChanged = value => {
+      console.log('onServerDTableChanged', value);
       this.onDTableChanged({
         value
       });
@@ -75,23 +75,10 @@ class DashBoard extends _react.Component {
       });
     };
     this.initDashboard = () => {
-      const {
-        username,
-        userId,
-        userDepartmentIdsMap
-      } = window.dtable;
       const value = this.value;
-      this.chartCalculator = new _calculator.default({
-        username,
-        userId,
-        userDepartmentIdsMap,
-        value,
-        statisticThreadManager: this.statisticThreadManager
-      });
       this.dashboardService = new _dashboardService.default({
         value,
         defaultDashboardName: this.defaultDashboardName,
-        chartCalculator: this.chartCalculator,
         chartService: this.chartService,
         updateStatistics: this.props.updateStatistics,
         deletePluginSettings: this.props.deletePluginSettings
@@ -124,10 +111,6 @@ class DashBoard extends _react.Component {
         border_color: customColor.BORDER_COLOR
       }))];
     };
-    this.clearCalculations = () => {
-      this.statisticThreadManager.clearQueue();
-      this.statisticThreadManager.terminateWorkers();
-    };
     this.getSelectedDashboardIdxFromLocal = key => {
       const {
         dtableUuid
@@ -180,7 +163,6 @@ class DashBoard extends _react.Component {
     this.selectDashboard = selectedDashboardIdx => {
       this.disabledUpdateLayout = true;
       this.setSelectedDashboardIdx(selectedDashboardIdx);
-      this.clearCalculations();
       this.setState({
         selectedDashboardIdx
       });
@@ -211,7 +193,6 @@ class DashBoard extends _react.Component {
           dashboard
         }
       });
-      this.clearCalculations();
       const selectedDashboardIdx = updatedStatistics.length - 1;
       this.setSelectedDashboardIdx(selectedDashboardIdx);
       this.updateStatistics({
@@ -252,7 +233,6 @@ class DashBoard extends _react.Component {
         }
       });
       this.setSelectedDashboardIdx(nextSelectedDashboardIdx);
-      this.clearCalculations();
       this.updateStatistics({
         statistics: updatedStatistics,
         selectedDashboardIdx: nextSelectedDashboardIdx
@@ -301,7 +281,7 @@ class DashBoard extends _react.Component {
         selectedDashboardIdx
       } = this.state;
       const dashboard = statistics[selectedDashboardIdx];
-      const fromChart = dashboard && dashboard.stat_items.find(chart => chart._id === chartId);
+      const fromChart = dashboard && dashboard.stat_items.find(chart => chart.config._id === chartId);
       if (!fromChart) return;
       const newChart = this.chartService.getCopiedChart({
         dashboard,
@@ -337,9 +317,6 @@ class DashBoard extends _react.Component {
       });
     };
     this.addChart = chart => {
-      if (!this.chartCalculator.isValidChart(chart)) {
-        return;
-      }
       this.disabledUpdateLayout = true;
       const updatedStatistics = this.dashboardService.update({
         action: _constants.DASHBOARD_ACTION_TYPE.ADD_CHART,
@@ -351,8 +328,9 @@ class DashBoard extends _react.Component {
       this.updateStatistics({
         statistics: updatedStatistics
       }, () => {
+        var _document$getElementB;
         // make the copied stat item display in the view
-        document.getElementById(chart._id).scrollIntoView(true);
+        (_document$getElementB = document.getElementById(chart.config._id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(true);
       });
     };
     this.modifyChart = chart => {
@@ -424,7 +402,6 @@ class DashBoard extends _react.Component {
     this.chartService = new _chartService.default({
       defaultChartTitle
     });
-    this.statisticThreadManager = new _threadManager.default((navigator.hardwareConcurrency || 4) - 1);
     this.mapJsonService = new _mapJson.MapJsonService({
       mediaUrl
     });
@@ -454,7 +431,6 @@ class DashBoard extends _react.Component {
     this.unsubscribeLocalDtableChanged();
     this.unsubscribeRemoteDtableChange();
     this.unsubscribeRefreshCharts();
-    this.clearCalculations();
   }
   render() {
     const {
@@ -474,7 +450,6 @@ class DashBoard extends _react.Component {
       dtableChangedTime: dtableChangedTime,
       statistics: statistics,
       selectedDashboardIdx: selectedDashboardIdx,
-      chartCalculator: this.chartCalculator,
       labelColorConfigs: this.labelColorConfigs,
       eventBus: eventBus,
       onCloseDashboard: this.props.onCloseStatistic,
@@ -491,7 +466,6 @@ class DashBoard extends _react.Component {
       statistics: statistics,
       editingChart: editingChart,
       selectedDashboardIdx: selectedDashboardIdx,
-      chartCalculator: this.chartCalculator,
       labelColorConfigs: this.labelColorConfigs,
       eventBus: eventBus,
       getActiveTable: this.getActiveTable,

package/es/desktop-dashboard.js

@@ -10,11 +10,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _seaChart = require("sea-chart");
 var _tabs = _interopRequireDefault(require("./tabs"));
 var _statList = _interopRequireDefault(require("./stat-list"));
 var _colorThemeDialog = _interopRequireDefault(require("./components/dialog/color-theme-dialog"));
-var _chartAdditionEditDialog = _interopRequireDefault(require("./components/dialog/chart-addition-edit-dialog"));
+var _chartEditDialog = _interopRequireDefault(require("./components/dialog/chart-edit-dialog"));
 var _statisticRecordDialog = _interopRequireDefault(require("./components/dialog/statistic-record-dialog"));
+var _dtableDbApi = _interopRequireDefault(require("./api/dtable-db-api"));
 var _chartService = _interopRequireDefault(require("./service/chart-service"));
 var _constants = require("./constants");
 var _icon = _interopRequireDefault(require("./assets/images/icon.png"));
@@ -34,10 +36,24 @@ class DesktopDashboard extends _react.Component {
         isFullScreen: !this.state.isFullScreen
       });
     };
-    this.onToggleChartAddition = () => {
+    this.onToggleAddChart = () => {
       this.setState({
-        isShowChartAdditionDialog: !this.state.isShowChartAdditionDialog,
-        editingChart: null
+        isShowChartAddDialog: !this.state.isShowChartAddDialog
+      });
+    };
+    this.onToggleEditChart = chartId => {
+      let editingChart = null;
+      if (chartId) {
+        const {
+          statistics,
+          selectedDashboardIdx
+        } = this.props;
+        const statistic = statistics[selectedDashboardIdx];
+        editingChart = statistic && statistic.stat_items.find(chart => chart.config._id === chartId);
+      }
+      this.setState({
+        isShowChartEditDialog: !this.state.isShowChartEditDialog,
+        editingChart
       });
     };
     this.toggleThemeMode = () => {
@@ -48,16 +64,11 @@ class DesktopDashboard extends _react.Component {
         this.saveThemeMode2LocalStorage(theme);
       });
     };
-    this.onToggleEditChart = chartId => {
-      const {
-        statistics,
-        selectedDashboardIdx
-      } = this.props;
-      const statistic = statistics[selectedDashboardIdx];
-      const editingChart = statistic && statistic.stat_items.find(chart => chart._id === chartId);
+    this.onTypeChange = newType => {
+      const convertedChart = this.generateChart(newType);
       this.setState({
-        isShowChartAdditionDialog: true,
-        editingChart
+        isShowChartEditDialog: true,
+        editingChart: convertedChart
       });
     };
     this.onCloseDashboard = () => {
@@ -136,11 +147,21 @@ class DesktopDashboard extends _react.Component {
     this.state = {
       theme: this.getThemeModeFromLocalStorage() || '',
       isFullScreen: false,
-      isShowChartAdditionDialog: false,
+      isShowChartEditDialog: false,
+      isShowChartAddDialog: false,
       isShowColorThemeDialog: false,
       editingChart: null,
       chartRecordsParams: null
     };
+    this.api = {
+      sqlQuery: this.sqlQuery,
+      getViewRows: window.dtableSDK.getViewRows,
+      getTableFormulaResults: window.dtableSDK.getTableFormulaResults,
+      queryUsers: window.app.queryUsers || (() => {})
+    };
+  }
+  async sqlQuery(sql) {
+    return _dtableDbApi.default.sqlQuery(sql);
   }
   render() {
     const {
@@ -151,15 +172,14 @@ class DesktopDashboard extends _react.Component {
       colorThemeName,
       statistics,
       selectedDashboardIdx,
-      chartCalculator,
-      labelColorConfigs,
       eventBus
     } = this.props;
     const {
       theme,
       isFullScreen,
       editingChart,
-      chartRecordsParams
+      chartRecordsParams,
+      isShowChartAddDialog
     } = this.state;
     const darkMode = theme === _constants.THEME_NAME_MAP.DARK;
     const statistic = statistics[selectedDashboardIdx];
@@ -195,7 +215,7 @@ class DesktopDashboard extends _react.Component {
       className: "statistic-header-operators d-flex align-items-center"
     }, !isTableReadOnly && /*#__PURE__*/_react.default.createElement("button", {
       className: "btn btn-secondary op-item add-stat",
-      onClick: this.onToggleChartAddition
+      onClick: this.onToggleAddChart
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "op-item-icon add-chart-icon dtable-font dtable-icon-add-table"
     }), /*#__PURE__*/_react.default.createElement("span", {
@@ -244,12 +264,12 @@ class DesktopDashboard extends _react.Component {
       theme: theme,
       colorThemeName: colorThemeName,
       statItems: statItems,
-      chartCalculator: chartCalculator,
       eventBus: eventBus,
+      api: this.api,
+      getValue: getValue,
       getOtherStatistics: this.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,
@@ -257,23 +277,22 @@ class DesktopDashboard extends _react.Component {
       onToggleEditChart: this.onToggleEditChart,
       onCloseDashboard: this.props.onCloseDashboard,
       toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
-    })), this.state.isShowChartAdditionDialog && /*#__PURE__*/_react.default.createElement(_chartAdditionEditDialog.default, {
-      dtableChangedTime: dtableChangedTime,
+    })), this.state.isShowChartEditDialog && /*#__PURE__*/_react.default.createElement(_chartEditDialog.default, {
+      theme: theme,
       colorThemeName: colorThemeName,
       editingChart: editingChart,
-      labelColorConfigs: labelColorConfigs,
-      chartCalculator: chartCalculator,
-      eventBus: eventBus,
-      getTables: this.props.getTables,
-      getViews: this.props.getViews,
-      getTableById: this.props.getTableById,
-      queryMapJson: this.props.queryMapJson,
-      generateChart: this.generateChart,
-      hideChartAdditionDialog: this.onToggleChartAddition,
-      getConvertedChart: this.props.getConvertedChart,
+      api: this.api,
+      getValue: getValue,
+      statistics: statistics,
+      selectedDashboardIdx: selectedDashboardIdx,
       addChart: this.props.addChart,
       modifyChart: this.props.modifyChart,
+      onToggleEditChart: this.onToggleEditChart,
       toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
+    }), isShowChartAddDialog && /*#__PURE__*/_react.default.createElement(_seaChart.TypesDialog, {
+      type: "",
+      onToggle: this.onToggleAddChart,
+      onChange: this.onTypeChange
     }), this.state.isShowColorThemeDialog && /*#__PURE__*/_react.default.createElement(_colorThemeDialog.default, {
       colorThemeName: colorThemeName,
       onToggleColorThemeDialog: this.onToggleColorThemeDialog,