dtable-statistic 4.0.7 → 4.0.9

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,

package/es/desktop-dashboard.js

@@ -6,15 +6,13 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
 import intl from 'react-intl-universal';
-import { Views } from 'dtable-store';
-import dtableDbAPI from './api/dtable-db-api';
 import Tabs from './tabs';
 import StatList from './stat-list';
 import ColorThemeDialog from './components/dialog/color-theme-dialog';
 import ChartAdditionEditDialog from './components/dialog/chart-addition-edit-dialog';
 import StatisticRecordDialog from './components/dialog/statistic-record-dialog';
 import ChartService from './service/chart-service';
-import { getSqlString } from './utils/sql-utils';
+import { THEME_NAME_MAP } from './constants';
 import logo from './assets/images/icon.png';
 var KEY_LOCAL_THEME_MODE = 'statistics-theme-mode';
 var DesktopDashboard = /*#__PURE__*/function (_Component) {
@@ -41,7 +39,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
       });
     };
     _this.toggleThemeMode = function () {
-      var theme = _this.state.theme === 'dark' ? 'light' : 'dark';
+      var theme = _this.state.theme === THEME_NAME_MAP.DARK ? THEME_NAME_MAP.LIGHT : THEME_NAME_MAP.DARK;
       _this.setState({
         theme: theme
       }, function () {
@@ -93,47 +91,17 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         _this.setState({
           chartRecordsParams: null
         });
-        return;
-      }
-      var statisticRecords = statisticRecord.rows;
-      if (!Array.isArray(statisticRecords) || statisticRecords.length === 0) return;
-      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);
-      var chartRecordsParams = {
-        isLoading: true,
-        currentDate: statisticRecord.name,
-        chart: chart
-      };
-      _this.setState({
-        chartRecordsParams: chartRecordsParams
-      }, function () {
-        if (isArchiveView || !statisticRecords) {
-          var sqlString = getSqlString(chart, statisticRecord, {
+      } else {
+        _this.setState({
+          chartRecordsParams: {
+            statisticRecord: statisticRecord,
+            chart: chart,
             isColumn: isColumn,
             isCurrentView: isCurrentView,
-            isRow: isRow,
-            getTableById: getTableById
-          });
-          dtableDbAPI.sqlQuery(sqlString).then(function (res) {
-            var rows = res.data.results;
-            chartRecordsParams.rows = rows;
-            chartRecordsParams.isLoading = false;
-            _this.setState({
-              chartRecordsParams: chartRecordsParams
-            });
-          });
-          return;
-        }
-        chartRecordsParams.rows = statisticRecord.rows;
-        chartRecordsParams.isLoading = false;
-        _this.setState({
-          chartRecordsParams: chartRecordsParams
+            isRow: isRow
+          }
         });
-      });
+      }
     };
     _this.generateChart = function (chartType) {
       var _this$props2 = _this.props,
@@ -169,7 +137,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
         getTableById = _this$props3.getTableById,
         isTableReadOnly = _this$props3.isTableReadOnly,
-        refresh = _this$props3.refresh,
+        dtableChangedTime = _this$props3.dtableChangedTime,
         colorThemeName = _this$props3.colorThemeName,
         statistics = _this$props3.statistics,
         selectedDashboardIdx = _this$props3.selectedDashboardIdx,
@@ -181,7 +149,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         isFullScreen = _this$state.isFullScreen,
         editingChart = _this$state.editingChart,
         chartRecordsParams = _this$state.chartRecordsParams;
-      var darkMode = theme === 'dark';
+      var darkMode = theme === THEME_NAME_MAP.DARK;
       var statistic = statistics[selectedDashboardIdx];
       var _ref2 = statistic || {},
         statItems = _ref2.stat_items;
@@ -237,7 +205,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         className: "op-item op-item-icon-wrapper",
         id: "btn-statistic-theme-setting"
       }, /*#__PURE__*/React.createElement("span", {
-        className: "op-item-icon dtable-font ".concat(theme === 'dark' ? 'dtable-icon-day-mode' : 'dtable-icon-night-mode'),
+        className: "op-item-icon dtable-font ".concat(theme === THEME_NAME_MAP.DARK ? 'dtable-icon-day-mode' : 'dtable-icon-night-mode'),
         onClick: this.toggleThemeMode
       }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
         placement: "bottom",
@@ -252,7 +220,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         className: "statistic-main"
       }, /*#__PURE__*/React.createElement(StatList, {
         isTableReadOnly: isTableReadOnly,
-        refresh: refresh,
+        dtableChangedTime: dtableChangedTime,
         theme: theme,
         colorThemeName: colorThemeName,
         statItems: statItems,
@@ -285,11 +253,8 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         colorThemeName: colorThemeName,
         onToggleColorThemeDialog: this.onToggleColorThemeDialog,
         modifyColorTheme: this.props.modifyColorTheme
-      }), !!this.state.chartRecordsParams && /*#__PURE__*/React.createElement(StatisticRecordDialog, {
-        isLoading: chartRecordsParams.isLoading,
-        rows: chartRecordsParams.rows,
-        statistic: chartRecordsParams.chart,
-        currentDate: chartRecordsParams.currentDate,
+      }), !!chartRecordsParams && /*#__PURE__*/React.createElement(StatisticRecordDialog, {
+        chartRecordsParams: chartRecordsParams,
         getTableById: getTableById,
         toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
       }));

package/es/index.js

@@ -7,10 +7,42 @@ var Statistic = /*#__PURE__*/function () {
     _classCallCheck(this, Statistic);
   }
   _createClass(Statistic, null, [{
+    key: "getInitProps",
+    value: function getInitProps() {
+      if (!window || !window.app) {
+        return null;
+      }
+      var _window$app = window.app,
+        state = _window$app.state,
+        dtableStore = _window$app.dtableStore;
+      var value = state.value,
+        selectedTableIdx = state.selectedTableIdx,
+        selectedViewId = state.selectedViewId;
+      return {
+        value: value,
+        eventBus: dtableStore.eventBus,
+        activeTableIdx: selectedTableIdx,
+        activeViewId: selectedViewId,
+        updateStatistics: this.updateStatistics.bind(this, dtableStore),
+        deletePluginSettings: this.deletePluginSettings.bind(this, dtableStore)
+      };
+    }
+  }, {
+    key: "updateStatistics",
+    value: function updateStatistics(dtableStore, statistics) {
+      dtableStore.updateStatisticsList(statistics);
+    }
+  }, {
+    key: "deletePluginSettings",
+    value: function deletePluginSettings(dtableStore, plugin_name) {
+      dtableStore.deletePluginSettings(plugin_name);
+    }
+  }, {
     key: "mount",
     value: function mount(props) {
-      if (!window.app) return;
-      window.app.mountWidget( /*#__PURE__*/React.createElement(DashBoard, props));
+      var customProps = this.getInitProps();
+      if (!customProps) return;
+      window.app.mountWidget( /*#__PURE__*/React.createElement(DashBoard, Object.assign({}, props, customProps)));
     }
   }, {
     key: "unmount",

package/es/locale/lang/de.js

@@ -138,6 +138,8 @@ var de = {
   'Oct': 'Okt',
   'Nov': 'Nov',
   'Dec': 'Dez',
+  'Enter_date': 'Enter date',
+  'Please_select': 'Please select',
   'Total': 'Gesamt',
   'Amount': 'Menge',
   'Empty': 'Leer',

package/es/locale/lang/en.js

@@ -138,6 +138,8 @@ var en = {
   'Oct': 'Oct',
   'Nov': 'Nov',
   'Dec': 'Dec',
+  'Enter_date': 'Enter date',
+  'Please_select': 'Please select',
   'Total': 'Total',
   'Amount': 'Amount',
   'Empty': 'Empty',

package/es/locale/lang/fr.js

@@ -138,6 +138,8 @@ var fr = {
   'Oct': 'octobre',
   'Nov': 'novembre',
   'Dec': 'décembre',
+  'Enter_date': 'Enter date',
+  'Please_select': 'Please select',
   'Total': 'Total',
   'Amount': 'Nombre',
   'Empty': 'Vide',

package/es/locale/lang/zh_CN.js

@@ -138,6 +138,8 @@ var zh_CN = {
   'Oct': '十月',
   'Nov': '十一月',
   'Dec': '十二月',
+  'Enter_date': '输入日期',
+  'Please_select': '请选择',
   'Total': '总计',
   'Amount': '数量',
   'Empty': '空',

package/es/mobile-dashboard.js

@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import Tabs from './tabs';
 import StatView from './stat-view';
-import { STAT_TYPE } from './constants';
+import { STAT_TYPE, THEME_NAME_MAP } from './constants';
 import logo from './assets/images/icon.png';
 import styles from './assets/css/mobile-dashboard.module.css';
 var MobileDashboard = /*#__PURE__*/function (_Component) {
@@ -31,7 +31,7 @@ var MobileDashboard = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         getTableById = _this$props.getTableById,
-        refresh = _this$props.refresh,
+        dtableChangedTime = _this$props.dtableChangedTime,
         colorThemeName = _this$props.colorThemeName,
         statistics = _this$props.statistics,
         selectedDashboardIdx = _this$props.selectedDashboardIdx,
@@ -54,7 +54,7 @@ var MobileDashboard = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/React.createElement("span", {
         className: styles['mobile-statistic-name']
       }, intl.get('Statistics'))), /*#__PURE__*/React.createElement(Tabs, {
-        theme: 'light',
+        theme: THEME_NAME_MAP.LIGHT,
         isMobile: true,
         statistics: statistics,
         selectedDashboardIdx: selectedDashboardIdx,
@@ -86,8 +86,8 @@ var MobileDashboard = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/React.createElement(StatView, {
           isPreview: true,
           isEnlarge: false,
-          refresh: refresh,
-          theme: "light",
+          dtableChangedTime: dtableChangedTime,
+          theme: THEME_NAME_MAP.LIGHT,
           colorThemeName: colorThemeName,
           statItem: statItem,
           chartCalculator: chartCalculator,

package/es/model/horizontal-bar-group.js

@@ -48,6 +48,8 @@ var HorizontalBarGroup = /*#__PURE__*/function (_BaseModel) {
     _this.label_font_size = object.label_font_size;
     _this.color_option = object.color_option;
     _this.sort_type = object.sort_type;
+    _this.display_each_block_data = object.display_each_block_data;
+    _this.display_data = object.display_data;
     return _this;
   }
   return HorizontalBarGroup;

package/es/model/ring.js

@@ -25,13 +25,14 @@ var Ring = /*#__PURE__*/function (_BaseModel) {
     if (_this.summary_method === SUMMARY_METHOD_MAP.Row_count) {
       _this.summary_method = SUMMARY_METHOD_MAP.Max;
     }
-    _this.show_legend = object.show_legend;
-    _this.display_label = object.display_label;
+    _this.show_legend = isBoolean(object.show_legend) ? object.show_legend : true;
+    _this.display_label = isBoolean(object.display_label) ? object.display_label : true;
     _this.show_percent = object.show_percent;
     _this.sort_type = object.sort_type;
     _this.minimum_slice_percent = object.minimum_slice_percent;
     _this.display_annotation = isBoolean(object.display_annotation) ? object.display_annotation : true;
     _this.annotation_font_size = object.annotation_font_size;
+    _this.label_font_size = object.label_font_size;
     _this.label_format = object.label_format;
     _this.label_position = object.label_position;
     return _this;

package/es/stat-editor/stat-settings/advance-chart-settings/index.js

@@ -240,8 +240,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
         summary_method = _this$props$statItem.summary_method;
       if (summaryType === summary_type) return;
       if (summaryType === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
-        var defaultColumn = _this.numericColumns[0];
-        summary_column = defaultColumn ? defaultColumn.key : null;
+        summary_column = null;
         summary_method = SUMMARY_METHOD[0];
         summary_type = SUMMARY_TYPE.ADVANCED;
       } else {

package/es/stat-editor/stat-settings/advance-chart-settings/summary-settings.js

@@ -138,7 +138,7 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
       var summaryColumn = _this.props.summaryColumn;
       var selectedColumnOption = _this.numericColumnsOptions.find(function (o) {
         return o.value.key === summaryColumn;
-      });
+      }) || null;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Numeric_column')), /*#__PURE__*/React.createElement(DTableSelect, {

package/es/stat-editor/stat-settings/basic-chart-settings/pivot-table-settings.js

@@ -324,7 +324,10 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
     _this.onChangeMultiSummaryMethod = function (index, option) {
       var _ref9 = _this.props.statItem || {},
         summary_columns_option = _ref9.summary_columns_option;
-      summary_columns_option[index].method = option.value;
+      summary_columns_option = Array.isArray(summary_columns_option) ? _toConsumableArray(summary_columns_option) : [];
+      summary_columns_option[index] = Object.assign({}, summary_columns_option[index], {
+        method: option.value
+      });
       _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
         summary_columns_option: summary_columns_option
       }));

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/horizontal-bar-chart-style.js

@@ -94,6 +94,15 @@ var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
       };
       _this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
+    _this.onToggleDisplayEachBlockData = function () {
+      var statItem = _this.props.statItem;
+      var _ref5 = statItem || {},
+        display_each_block_data = _ref5.display_each_block_data;
+      var updated = {
+        display_each_block_data: !display_each_block_data
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
     _this.onChangeLabelFontSize = function (label_font_size) {
       var statItem = _this.props.statItem;
       _this.props.updateStatItem(Object.assign({}, statItem, {
@@ -102,8 +111,8 @@ var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
     };
     _this.onToggleHAxisAutoRange = function () {
       var statItem = _this.props.statItem;
-      var _ref5 = statItem || {},
-        h_axis_auto_range = _ref5.h_axis_auto_range;
+      var _ref6 = statItem || {},
+        h_axis_auto_range = _ref6.h_axis_auto_range;
       var updated = {
         h_axis_auto_range: h_axis_auto_range == undefined ? false : !h_axis_auto_range
       };
@@ -235,7 +244,15 @@ var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
         chart: statItem,
         labelColorConfigs: labelColorConfigs,
         updateChart: this.props.updateStatItem
-      })));
+      })), chartType === STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+        isChecked: !!statItem.display_each_block_data,
+        label: intl.get('Display_value_of_each_block'),
+        handleToggleChange: this.onToggleDisplayEachBlockData
+      }))));
     }
   }]);
   return HorizontalBarChartStyle;

package/es/stat-editor/stat-settings/basic-chart-settings/summary-settings.js

@@ -107,18 +107,12 @@ var SummarySettings = /*#__PURE__*/function (_Component) {
     };
     _this.onChangeSummaryType = function (option) {
       var type = option.value;
-      var _this$props3 = _this.props,
-        summaryType = _this$props3.summaryType,
-        numericColumnsOptions = _this$props3.numericColumnsOptions;
+      var summaryType = _this.props.summaryType;
       if (type === summaryType) {
         return;
       }
       var summaryColumnKey = null;
-      var summaryMethod = null;
-      if (type === STATISTICS_COUNT_TYPE.ADVANCED && Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0) {
-        summaryColumnKey = numericColumnsOptions[0].value.key;
-        summaryMethod = SUMMARY_METHOD[0];
-      }
+      var summaryMethod = type === STATISTICS_COUNT_TYPE.ADVANCED ? SUMMARY_METHOD[0] : null;
       _this.props.onChangeSummaryType(type, summaryColumnKey, summaryMethod);
     };
     _this.onSelectNumericColumn = function (columnOption) {