dtable-statistic 4.0.6 → 4.0.8

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

@@ -6,8 +6,10 @@ import React, { Fragment } from 'react';
 import intl from 'react-intl-universal';
 import { Modal, ModalBody } from 'reactstrap';
 import { CellType, Views } from 'dtable-store';
+import dtableDbAPI from '../../../api/dtable-db-api';
 import { DtableSearchInput, Loading } from '../../index';
 import { searchRows } from '../../../utils';
+import { getSqlString } from '../../../utils/sql-utils';
 import './index.css';
 export var UNSHOWN_COLUMN_TYPES = [CellType.LINK, CellType.LONG_TEXT, CellType.FORMULA, CellType.LINK_FORMULA];
 var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
@@ -17,11 +19,54 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, StatisticRecordDialog);
     _this = _super.call(this, props);
+    _this.init = function () {
+      var chartRecordsParams = _this.props.chartRecordsParams;
+      var _ref = chartRecordsParams || {},
+        statisticRecord = _ref.statisticRecord,
+        chart = _ref.chart,
+        isColumn = _ref.isColumn,
+        isCurrentView = _ref.isCurrentView,
+        isRow = _ref.isRow;
+      var records = statisticRecord.rows,
+        title = statisticRecord.name;
+      var getTableById = _this.props.getTableById;
+      var table_id = chart.table_id,
+        view_id = chart.view_id;
+      var table = getTableById(table_id);
+      var view = Views.getViewById(table.views, view_id);
+      var isArchiveView = Views.isArchiveView(view);
+      if (isArchiveView || !records) {
+        var sqlString = getSqlString(chart, statisticRecord, {
+          isColumn: isColumn,
+          isCurrentView: isCurrentView,
+          isRow: isRow,
+          getTableById: getTableById
+        });
+        dtableDbAPI.sqlQuery(sqlString).then(function (res) {
+          var rows = res.data.results;
+          var searchedRows = Array.isArray(rows) && rows.length > 0 ? _this.getSearchedRows(rows) : [];
+          _this.setState({
+            loading: false,
+            title: title,
+            rows: rows,
+            searchedRows: searchedRows
+          });
+        });
+        return;
+      }
+      var searchedRows = Array.isArray(records) && records.length > 0 ? _this.getSearchedRows(records) : [];
+      _this.setState({
+        loading: false,
+        title: title,
+        rows: records,
+        searchedRows: searchedRows
+      });
+    };
     _this.onSearch = function (searchVal) {
       var rows = _this.state.rows;
-      var searchRows = _this.getSearchRows(rows, searchVal);
+      var searchedRows = _this.getSearchedRows(rows, searchVal);
       _this.setState({
-        searchRows: searchRows,
+        searchedRows: searchedRows,
         searchVal: searchVal
       });
     };
@@ -33,14 +78,14 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     };
     _this.getStatisticTable = function () {
       var _this$props = _this.props,
-        statistic = _this$props.statistic,
+        chartRecordsParams = _this$props.chartRecordsParams,
         getTableById = _this$props.getTableById;
-      var table_id = statistic.table_id;
+      var table_id = chartRecordsParams.chart.table_id;
       return getTableById(table_id);
     };
     _this.getStatisticView = function (table) {
-      var statistic = _this.props.statistic;
-      var view_id = statistic.view_id;
+      var chartRecordsParams = _this.props.chartRecordsParams;
+      var view_id = chartRecordsParams.chart.view_id;
       return Views.getViewById(table.views, view_id);
     };
     _this.getStatisticColumns = function () {
@@ -51,11 +96,11 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     _this.clearSearch = function () {
       var rows = _this.state.rows;
       _this.setState({
-        searchRows: _this.getSearchRows(rows),
+        searchedRows: rows,
         searchVal: ''
       });
     };
-    _this.getSearchRows = function (rows, searchVal) {
+    _this.getSearchedRows = function (rows, searchVal) {
       if (searchVal) {
         return searchRows(rows, _this.getStatisticColumns(), searchVal, function (row) {
           return row;
@@ -66,70 +111,56 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     _this.toggle = function () {
       _this.props.toggleStatisticRecordsDialog();
     };
-    _this.renderRowsCards = function (_ref) {
-      var table = _ref.table,
-        renderedColumns = _ref.renderedColumns,
-        searchRows = _ref.searchRows,
-        unShowColumnKeyList = _ref.unShowColumnKeyList;
-      if (!window.app || !window.app.renderRowsCards) return;
+    _this.renderRowsCards = function () {
+      var searchedRows = _this.state.searchedRows;
+      if (!Array.isArray(searchedRows) || searchedRows.length === 0) {
+        return null;
+      }
+      var unShowColumnKeyList = ['0000'];
+      var table = _this.getStatisticTable();
+      var renderedColumns = table.columns.filter(function (column) {
+        return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
+      });
+      if (!window.app || !window.app.renderRowsCards) return null;
       return window.app.renderRowsCards({
         table: table,
         renderedColumns: renderedColumns,
         unShowColumnKeyList: unShowColumnKeyList,
         isShowRowCardHeader: true,
         columns: table.columns,
-        rows: searchRows,
+        rows: searchedRows,
         rowCardType: 'statistic'
       });
     };
     _this.state = {
+      loading: true,
+      title: '',
       rows: [],
       searchVal: '',
-      searchRows: []
+      searchedRows: []
     };
     return _this;
   }
   _createClass(StatisticRecordDialog, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var oldLoading = prevProps.isLoading;
-      var _this$props2 = this.props,
-        isLoading = _this$props2.isLoading,
-        rows = _this$props2.rows;
-      if (oldLoading !== isLoading && !isLoading) {
-        this.setState({
-          rows: rows,
-          searchRows: this.getSearchRows(rows)
-        });
-      }
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.init();
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        isLoading = _this$props3.isLoading,
-        currentDate = _this$props3.currentDate;
-      var searchRows = this.state.searchRows;
-      var unShowColumnKeyList = ['0000'];
-      var table;
-      var renderedColumns = [];
-      if (!isLoading) {
-        table = this.getStatisticTable();
-        renderedColumns = table.columns.filter(function (column) {
-          return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
-        });
-      }
+      var _this$state = this.state,
+        loading = _this$state.loading,
+        title = _this$state.title;
       return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
         autoFocus: false,
         toggle: this.toggle,
-        isOpen: true,
         className: "statistic-records-dialog",
         zIndex: 1048
-      }, isLoading && /*#__PURE__*/React.createElement("div", {
-        className: "py-8"
-      }, /*#__PURE__*/React.createElement(Loading, null)), !isLoading && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "search-header"
-      }, /*#__PURE__*/React.createElement("span", null, currentDate), /*#__PURE__*/React.createElement("button", {
+      }, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "close",
         "aria-label": "Close",
@@ -161,12 +192,9 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
         }
       })), /*#__PURE__*/React.createElement(ModalBody, {
         className: "statistic-records-container"
-      }, this.renderRowsCards({
-        table: table,
-        renderedColumns: renderedColumns,
-        searchRows: searchRows,
-        unShowColumnKeyList: unShowColumnKeyList
-      }))));
+      }, loading ? /*#__PURE__*/React.createElement("div", {
+        className: "d-flex py-8"
+      }, /*#__PURE__*/React.createElement(Loading, null)) : this.renderRowsCards())));
     }
   }]);
   return StatisticRecordDialog;

package/es/constants/index.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _INIT_STAT_ITEM, _MULTIPLE_CELL_VALUE_, _DATA_SORT_TYPE_LABEL, _TYPE_DISPLAY_COLOR_U, _STATISTIC_TYPE_SHOW;
+var _INIT_STAT_ITEM, _MULTIPLE_CELL_VALUE_, _STAT_ITEM_THEME_COLO, _DATA_SORT_TYPE_LABEL, _TYPE_DISPLAY_COLOR_U, _STATISTIC_TYPE_SHOW;
 import { CellType } from 'dtable-store';
 import KeyCodes from './key-codes';
 import { MenuSelectStyle, UserSelectStyle } from './dtable-select-style';
@@ -97,18 +97,18 @@ export var SUMMARY_METHOD_MAP = {
 };
 export var SUMMARY_METHOD = [SUMMARY_METHOD_MAP.Sum, SUMMARY_METHOD_MAP.Max, SUMMARY_METHOD_MAP.Min, SUMMARY_METHOD_MAP.Mean, SUMMARY_METHOD_MAP.Distinct_values];
 export var MONTH_MIRROR = {
-  '0': 'Jan.abbr',
-  '1': 'Feb.abbr',
-  '2': 'Mar.abbr',
-  '3': 'Apr.abbr',
-  '4': 'May.abbr',
-  '5': 'Jun.abbr',
-  '6': 'Jul.abbr',
-  '7': 'Aug.abbr',
-  '8': 'Sep.abbr',
-  '9': 'Oct.abbr',
-  '10': 'Nov.abbr',
-  '11': 'Dec.abbr'
+  '0': 'Jan',
+  '1': 'Feb',
+  '2': 'Mar',
+  '3': 'Apr',
+  '4': 'May',
+  '5': 'Jun',
+  '6': 'Jul',
+  '7': 'Aug',
+  '8': 'Sep',
+  '9': 'Oct',
+  '10': 'Nov',
+  '11': 'Dec'
 };
 export var TIME_COLUMN_LIST = [CellType.CTIME, CellType.MTIME, CellType.DATE];
 export var MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIME, CellType.MTIME, CellType.DATE, CellType.COLLABORATOR, CellType.AUTO_NUMBER, CellType.FORMULA, CellType.GEOLOCATION, CellType.URL, CellType.SINGLE_SELECT, CellType.LINK, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.DURATION, CellType.EMAIL];
@@ -409,22 +409,23 @@ export var EMPTY_NAME = 'Empty';
 export var NO_STATISTIC_RESULTS = 'There_are_no_statistic_results_yet';
 export var TOO_MANY_STATISTIC_ENTRIES = 'There_are_too_many_statistics_entries_to_display';
 export var MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP = (_MULTIPLE_CELL_VALUE_ = {}, _defineProperty(_MULTIPLE_CELL_VALUE_, CellType.MULTIPLE_SELECT, true), _defineProperty(_MULTIPLE_CELL_VALUE_, CellType.COLLABORATOR, true), _defineProperty(_MULTIPLE_CELL_VALUE_, CellType.LINK, true), _MULTIPLE_CELL_VALUE_);
-export var STAT_ITEM_THEME_COLORS = {
-  dark: {
-    textColor: '#ffffff',
-    gridColor: '#4E4E56',
-    labelColor: '#ffffff',
-    legendPageNavigatorMarkerColor: '#ffffff',
-    cardColor: '#ffffff'
-  },
-  light: {
-    textColor: '#6e6e6e',
-    gridColor: '#bfbfbf',
-    labelColor: '#000000',
-    legendPageNavigatorMarkerColor: '#000000',
-    cardColor: '#545454'
-  }
+export var THEME_NAME_MAP = {
+  DARK: 'dark',
+  LIGHT: 'light'
 };
+export var STAT_ITEM_THEME_COLORS = (_STAT_ITEM_THEME_COLO = {}, _defineProperty(_STAT_ITEM_THEME_COLO, THEME_NAME_MAP.DARK, {
+  textColor: '#ffffff',
+  gridColor: '#4E4E56',
+  labelColor: '#ffffff',
+  legendPageNavigatorMarkerColor: '#ffffff',
+  cardColor: '#ffffff'
+}), _defineProperty(_STAT_ITEM_THEME_COLO, THEME_NAME_MAP.LIGHT, {
+  textColor: '#6e6e6e',
+  gridColor: '#bfbfbf',
+  labelColor: '#000000',
+  legendPageNavigatorMarkerColor: '#000000',
+  cardColor: '#545454'
+}), _STAT_ITEM_THEME_COLO);
 export var DATA_SORT_TYPE = {
   NOT_SORTED: 'not_sorted',
   ASCENDING: 'ascending',
@@ -509,4 +510,4 @@ export var LEGEND_DIRECTION_MAP = {
   VERTICAL: 'vertical'
 };
 export var Y_AXIS_TYPE_PREFIX = '__y_axis__';
-export var STATISTIC_TYPE_SHOW = (_STATISTIC_TYPE_SHOW = {}, _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BAR, 'Basic_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BAR_GROUP, 'Grouped_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BAR_STACK, 'Stacked_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.COMPARE_BAR, 'Time_comparison_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.CUSTOM_BAR, 'Custom_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.HORIZONTAL_BAR, 'Basic_bar_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.HORIZONTAL_GROUP_BAR, 'Grouped_bar_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.STACKED_HORIZONTAL_BAR, 'Stacked_bar_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.COMPLETENESS_CHART, 'Completeness_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.GROUP_COMPLETENESS_CHART, 'Grouped_completeness_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.LINE, 'Basic_line_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.GROUP_LINE, 'Grouped_line_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.AREA_CHART, 'Area_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.AREA_GROUP_CHART, 'Grouped_area_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.PIE, 'Basic_pie_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.RING, 'Ring_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.SCATTER, 'Scatter_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.COMBINATION_CHART, 'Combination_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.MAP, '中国地图'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.MAP_BUBBLE, '中国地图(气泡图)'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.WORLD_MAP, 'World_map'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.WORLD_MAP_BUBBLE, 'World_map_bubble'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.HEAT_MAP, 'Heat_map'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.MIRROR, 'Mirror_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BASIC_NUMBER_CARD, 'Basic_number_card'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.TREND_CHART, 'Trend_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.DASHBOARD, 'Gauge'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.TREEMAP, 'Treemap'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.PIVOT_TABLE, 'Pivot_table'), _STATISTIC_TYPE_SHOW);
+export var STATISTIC_TYPE_SHOW = (_STATISTIC_TYPE_SHOW = {}, _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BAR, 'Basic_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BAR_GROUP, 'Grouped_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BAR_STACK, 'Stacked_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.COMPARE_BAR, 'Time_comparison_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.CUSTOM_BAR, 'Custom_histogram'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.HORIZONTAL_BAR, 'Basic_bar_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.HORIZONTAL_GROUP_BAR, 'Grouped_bar_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.STACKED_HORIZONTAL_BAR, 'Stacked_bar_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.COMPLETENESS_CHART, 'Completeness_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.GROUP_COMPLETENESS_CHART, 'Grouped_completeness_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.LINE, 'Basic_line_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.GROUP_LINE, 'Grouped_line_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.AREA_CHART, 'Area_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.AREA_GROUP_CHART, 'Grouped_area_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.PIE, 'Basic_pie_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.RING, 'Ring_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.SCATTER, 'Scatter_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.COMBINATION_CHART, 'Combination_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.MAP, '中国地图'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.MAP_BUBBLE, '中国地图(气泡图)'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.WORLD_MAP, 'World_map'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.HEAT_MAP, 'Heat_map'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.MIRROR, 'Mirror_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.BASIC_NUMBER_CARD, 'Basic_number_card'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.TREND_CHART, 'Trend_chart'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.DASHBOARD, 'Gauge'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.TREEMAP, 'Treemap'), _defineProperty(_STATISTIC_TYPE_SHOW, STAT_TYPE.PIVOT_TABLE, 'Pivot_table'), _STATISTIC_TYPE_SHOW);

package/es/dashboard.js

@@ -39,30 +39,35 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         console.log(error);
       }
     };
-    _this.onDTableDataChange = function (value) {
-      _this.clearCalculations();
-      var _this$initDashboard = _this.initDashboard({
-          value: value
-        }),
+    _this.onLocalDTableChanged = function (value) {
+      if (_this.updatingLocalStatistics) {
+        // it's unnecessary to notify data changed during update statistics
+        _this.value = value;
+        _this.updatingLocalStatistics = false;
+        return;
+      }
+      _this.onDTableChanged(value);
+    };
+    _this.onServerDTableChanged = function (value) {
+      _this.onDTableChanged(value);
+    };
+    _this.onDTableChanged = function (value) {
+      _this.value = value;
+      _this.disabledUpdateLayout = true;
+      var _this$initDashboard = _this.initDashboard(),
         statistics = _this$initDashboard.statistics,
         selectedDashboardIdx = _this$initDashboard.selectedDashboardIdx;
       _this.setState({
         statistics: statistics,
         selectedDashboardIdx: selectedDashboardIdx,
-        refresh: true
-      }, function () {
-        setTimeout(function () {
-          _this.setState({
-            refresh: false
-          });
-        });
+        dtableChangedTime: Date.now()
       });
     };
-    _this.initDashboard = function (_ref) {
-      var value = _ref.value;
+    _this.initDashboard = function () {
       var _window$dtable = window.dtable,
         username = _window$dtable.username,
         userId = _window$dtable.userId;
+      var value = _this.value;
       _this.chartCalculator = new ChartCalculator({
         username: username,
         userId: userId,
@@ -77,7 +82,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         updateStatistics: _this.props.updateStatistics,
         deletePluginSettings: _this.props.deletePluginSettings
       });
-      _this.initLabelColorConfigs(value);
+      _this.initLabelColorConfigs();
       var statistics = _this.dashboardService.getStatistics();
       var selectedDashboardIdx = _this.getSelectedDashboardIdxFromLocal(KEY_SELECTED_DASHBOARD) || 0;
       if (!statistics[selectedDashboardIdx]) {
@@ -88,9 +93,9 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         selectedDashboardIdx: selectedDashboardIdx
       };
     };
-    _this.initLabelColorConfigs = function (value) {
+    _this.initLabelColorConfigs = function () {
       var systemCustomColors = window.dtable.customColors || [];
-      var baseSettings = value && value.settings;
+      var baseSettings = _this.value && _this.value.settings;
       var baseCustomColors = baseSettings && baseSettings.custom_colors || [];
       _this.labelColorConfigs = [].concat(_toConsumableArray(LABEL_COLORS.map(function (color) {
         return {
@@ -127,10 +132,8 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       localStorage.setItem(KEY_SELECTED_DASHBOARD, JSON.stringify(selectedViewIds));
     };
     _this.getActiveTable = function () {
-      var _this$props = _this.props,
-        value = _this$props.value,
-        activeTableIdx = _this$props.activeTableIdx;
-      return TableUtils.getTableByIndex(value.tables, activeTableIdx);
+      var activeTableIdx = _this.props.activeTableIdx;
+      return TableUtils.getTableByIndex(_this.value.tables, activeTableIdx);
     };
     _this.getActiveView = function () {
       var activeViewId = _this.props.activeViewId;
@@ -138,11 +141,11 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       if (!activeViewId) return selectedTable.views[0];
       return Views.getViewById(selectedTable.views, activeViewId);
     };
-    _this.getInitChart = function (_ref2) {
-      var chartType = _ref2.chartType,
-        dashboard = _ref2.dashboard,
-        activeTable = _ref2.activeTable,
-        activeView = _ref2.activeView;
+    _this.getInitChart = function (_ref) {
+      var chartType = _ref.chartType,
+        dashboard = _ref.dashboard,
+        activeTable = _ref.activeTable,
+        activeView = _ref.activeView;
       return _this.chartService.getInitChart({
         type: chartType,
         dashboard: dashboard,
@@ -150,10 +153,10 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         activeView: activeView
       });
     };
-    _this.getConvertedChart = function (_ref3) {
-      var originalStatistic = _ref3.originalStatistic,
-        targetStatisticType = _ref3.targetStatisticType,
-        activeTable = _ref3.activeTable;
+    _this.getConvertedChart = function (_ref2) {
+      var originalStatistic = _ref2.originalStatistic,
+        targetStatisticType = _ref2.targetStatisticType,
+        activeTable = _ref2.activeTable;
       return _this.chartService.getConvertedChart({
         originalStatistic: originalStatistic,
         targetStatisticType: targetStatisticType,
@@ -161,7 +164,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       });
     };
     _this.selectDashboard = function (selectedDashboardIdx) {
-      _this.isInitDashboard = true;
+      _this.disabledUpdateLayout = true;
       _this.setSelectedDashboardIdx(selectedDashboardIdx);
       _this.clearCalculations();
       _this.setState({
@@ -255,10 +258,15 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       });
     };
     _this.modifyDashboardLayout = function (layout) {
+      // prevent unexpected refresh.
       if (_this.isInitDashboard) {
         _this.isInitDashboard = false;
         return;
       }
+      if (_this.disabledUpdateLayout) {
+        _this.disabledUpdateLayout = false;
+        return;
+      }
       var updatedStatistics = _this.dashboardService.update({
         action: DASHBOARD_ACTION_TYPE.MODIFY_DASHBOARD_LAYOUT,
         payload: {
@@ -286,6 +294,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       _this.addChart(newChart);
     };
     _this.deleteChart = function (chartId) {
+      _this.disabledUpdateLayout = true;
       var updatedStatistics = _this.dashboardService.update({
         action: DASHBOARD_ACTION_TYPE.DELETE_CHART,
         payload: {
@@ -301,6 +310,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       if (!_this.chartCalculator.isValidChart(chart)) {
         return;
       }
+      _this.disabledUpdateLayout = true;
       var updatedStatistics = _this.dashboardService.update({
         action: DASHBOARD_ACTION_TYPE.ADD_CHART,
         payload: {
@@ -329,16 +339,17 @@ var DashBoard = /*#__PURE__*/function (_Component) {
     };
     _this.updateStatistics = function (updates, callback) {
       var statistics = updates.statistics;
+      _this.updatingLocalStatistics = true;
       _this.setState(updates, function () {
         callback && callback();
         _this.props.updateStatistics(statistics);
       });
     };
     _this.getTableById = function (tableId) {
-      return TableUtils.getTableById(_this.props.value.tables, tableId);
+      return TableUtils.getTableById(_this.value.tables, tableId);
     };
     _this.getTables = function () {
-      return _this.props.value.tables;
+      return _this.value.tables;
     };
     _this.getViews = function (table) {
       return table.views;
@@ -353,21 +364,22 @@ var DashBoard = /*#__PURE__*/function (_Component) {
     var _value = props.value;
     var defaultChartTitle = intl.get('Untitled');
     _this.defaultDashboardName = intl.get('Default_dashboard');
+    _this.value = _value;
     _this.chartService = new ChartService({
       defaultChartTitle: defaultChartTitle
     });
     _this.statisticThreadManager = new ThreadManager((navigator.hardwareConcurrency || 4) - 1);
-    var _this$initDashboard2 = _this.initDashboard({
-        value: _value
-      }),
+    var _this$initDashboard2 = _this.initDashboard(),
       _statistics = _this$initDashboard2.statistics,
       _selectedDashboardIdx = _this$initDashboard2.selectedDashboardIdx;
     _this.state = {
       statistics: _statistics,
       selectedDashboardIdx: _selectedDashboardIdx,
-      refresh: false
+      dtableChangedTime: null
     };
     _this.isInitDashboard = true;
+    _this.updatingLocalStatistics = false;
+    _this.disabledUpdateLayout = false;
     _this.loadSvg();
     return _this;
   }
@@ -375,12 +387,14 @@ var DashBoard = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var eventBus = this.props.eventBus;
-      this.unsubscribeRemoteTableDataChange = eventBus.subscribe('remote-dtable-changed', this.onDTableDataChange);
+      this.unsubscribeLocalDtableChanged = eventBus.subscribe('local-dtable-changed', this.onLocalDTableChanged);
+      this.unsubscribeRemoteDtableChange = eventBus.subscribe('remote-dtable-changed', this.onServerDTableChanged);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.unsubscribeRemoteTableDataChange();
+      this.unsubscribeLocalDtableChanged();
+      this.unsubscribeRemoteDtableChange();
       this.clearCalculations();
     }
   }, {
@@ -390,14 +404,14 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       var _this$state3 = this.state,
         statistics = _this$state3.statistics,
         selectedDashboardIdx = _this$state3.selectedDashboardIdx,
-        editingChart = _this$state3.editingChart,
-        refresh = _this$state3.refresh;
+        dtableChangedTime = _this$state3.dtableChangedTime,
+        editingChart = _this$state3.editingChart;
       var isTableReadOnly = this.isTableReadOnly();
       var colorThemeName = this.dashboardService.getColorThemeName();
       return isMobile ? /*#__PURE__*/React.createElement(MobileDashboard, {
         isTableReadOnly: isTableReadOnly,
         colorThemeName: colorThemeName,
-        refresh: refresh,
+        dtableChangedTime: dtableChangedTime,
         statistics: statistics,
         selectedDashboardIdx: selectedDashboardIdx,
         chartCalculator: this.chartCalculator,
@@ -412,7 +426,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       }) : /*#__PURE__*/React.createElement(DesktopDashboard, {
         isTableReadOnly: isTableReadOnly,
         colorThemeName: colorThemeName,
-        refresh: refresh,
+        dtableChangedTime: dtableChangedTime,
         statistics: statistics,
         editingChart: editingChart,
         selectedDashboardIdx: selectedDashboardIdx,