dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,112 +1,104 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component, Fragment } from 'react';
 import intl from 'react-intl-universal';
 import BaseSettings from '../public-setting/base-settings';
 import BarChartStyle from './style-setting/bar-chart-style-setting';
 import ColumnSettings from '../public-setting/column-settings';
-var ScatterSettings = /*#__PURE__*/function (_Component) {
-  _inherits(ScatterSettings, _Component);
-  var _super = _createSuper(ScatterSettings);
-  function ScatterSettings() {
-    var _this;
-    _classCallCheck(this, ScatterSettings);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.onSelectXAxisColumn = function (option) {
-      var x_axis_column = _this.props.statItem.x_axis_column;
-      var new_column = option.value.key;
+class ScatterSettings extends Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectXAxisColumn = option => {
+      const {
+        x_axis_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
       if (x_axis_column === new_column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         x_axis_column: new_column
       }));
     };
-    _this.onSelectYAxisColumn = function (option) {
-      var y_axis_column = _this.props.statItem.y_axis_column;
-      var new_column = option.value.key;
+    this.onSelectYAxisColumn = option => {
+      const {
+        y_axis_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
       if (y_axis_column === new_column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axis_column: new_column
       }));
     };
-    _this.onSelectGroupColumn = function (option) {
-      var group_column = _this.props.statItem.group_column;
-      var new_column = option.value.key;
+    this.onSelectGroupColumn = option => {
+      const {
+        group_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
       if (group_column === new_column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         group_column: new_column
       }));
     };
-    return _this;
   }
-  _createClass(ScatterSettings, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem,
-        labelColorConfigs = _this$props.labelColorConfigs,
-        eventBus = _this$props.eventBus,
-        settingType = _this$props.settingType,
-        numericColumnsOptions = _this$props.numericColumnsOptions,
-        generalColumnsOptions = _this$props.generalColumnsOptions,
-        getSelectedColumnOption = _this$props.getSelectedColumnOption;
-      var _ref = statItem || {},
-        selectedTableId = _ref.table_id,
-        selectedViewId = _ref.view_id,
-        x_axis_column = _ref.x_axis_column,
-        y_axis_column = _ref.y_axis_column,
-        group_column = _ref.group_column;
-      if (settingType === 'style') {
-        return /*#__PURE__*/React.createElement(BarChartStyle, {
-          hideDisplayDataSetting: true,
-          showRangeSetting: false,
-          statItem: statItem,
-          labelColorConfigs: labelColorConfigs,
-          eventBus: eventBus,
-          getTableById: getTableById,
-          updateStatItem: this.props.updateStatItem
-        });
-      }
-      var selectedXAxisColumn = getSelectedColumnOption(x_axis_column, numericColumnsOptions);
-      var selectedYAxisColumn = getSelectedColumnOption(y_axis_column, numericColumnsOptions);
-      var selectedGroupColumn = getSelectedColumnOption(group_column, generalColumnsOptions);
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+  render() {
+    const {
+      getTableById,
+      statItem,
+      labelColorConfigs,
+      eventBus,
+      settingType,
+      numericColumnsOptions,
+      generalColumnsOptions,
+      getSelectedColumnOption
+    } = this.props;
+    const {
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      x_axis_column,
+      y_axis_column,
+      group_column
+    } = statItem || {};
+    if (settingType === 'style') {
+      return /*#__PURE__*/React.createElement(BarChartStyle, {
+        hideDisplayDataSetting: true,
+        showRangeSetting: false,
         statItem: statItem,
-        selectedTableId: selectedTableId,
-        selectedViewId: selectedViewId,
-        getTables: this.props.getTables,
-        getViews: this.props.getViews,
-        getTableById: this.props.getTableById,
-        getConvertedChart: this.props.getConvertedChart,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTableById: getTableById,
         updateStatItem: this.props.updateStatItem
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(ColumnSettings, {
-        columnsOptions: numericColumnsOptions,
-        selectedColumnOption: selectedXAxisColumn,
-        onChangeSelectedColumn: this.onSelectXAxisColumn
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis')), /*#__PURE__*/React.createElement(ColumnSettings, {
-        columnsOptions: numericColumnsOptions,
-        selectedColumnOption: selectedYAxisColumn,
-        onChangeSelectedColumn: this.onSelectYAxisColumn
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Group_by')), /*#__PURE__*/React.createElement(ColumnSettings, {
-        columnsOptions: generalColumnsOptions,
-        selectedColumnOption: selectedGroupColumn,
-        onChangeSelectedColumn: this.onSelectGroupColumn
-      })));
+      });
     }
-  }]);
-  return ScatterSettings;
-}(Component);
+    const selectedXAxisColumn = getSelectedColumnOption(x_axis_column, numericColumnsOptions);
+    const selectedYAxisColumn = getSelectedColumnOption(y_axis_column, numericColumnsOptions);
+    const selectedGroupColumn = getSelectedColumnOption(group_column, generalColumnsOptions);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(ColumnSettings, {
+      columnsOptions: numericColumnsOptions,
+      selectedColumnOption: selectedXAxisColumn,
+      onChangeSelectedColumn: this.onSelectXAxisColumn
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis')), /*#__PURE__*/React.createElement(ColumnSettings, {
+      columnsOptions: numericColumnsOptions,
+      selectedColumnOption: selectedYAxisColumn,
+      onChangeSelectedColumn: this.onSelectYAxisColumn
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Group_by')), /*#__PURE__*/React.createElement(ColumnSettings, {
+      columnsOptions: generalColumnsOptions,
+      selectedColumnOption: selectedGroupColumn,
+      onChangeSelectedColumn: this.onSelectGroupColumn
+    })));
+  }
+}
 export default ScatterSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/stack-item-settings.js

@@ -1,31 +1,26 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component, Fragment } from 'react';
 import classnames from 'classnames';
 import intl from 'react-intl-universal';
 import NumericSummaryItem from '../public-setting/numeric-summary-item';
-var StackItemSettings = /*#__PURE__*/function (_Component) {
-  _inherits(StackItemSettings, _Component);
-  var _super = _createSuper(StackItemSettings);
-  function StackItemSettings(props) {
-    var _this;
-    _classCallCheck(this, StackItemSettings);
-    _this = _super.call(this, props);
-    _this.onToggleExpand = function () {
-      _this.setState({
-        expanded: !_this.state.expanded
+class StackItemSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.onToggleExpand = () => {
+      this.setState({
+        expanded: !this.state.expanded
       });
     };
-    _this.renderGroupbyNumericColumns = function () {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        stack = _this$props.stack,
-        numericColumnsOptions = _this$props.numericColumnsOptions,
-        summaryMethodsOptions = _this$props.summaryMethodsOptions;
-      var column_groupby_numeric_columns = stack.column_groupby_numeric_columns;
-      return Array.isArray(column_groupby_numeric_columns) && column_groupby_numeric_columns.map(function (item, index) {
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem,
+        stack,
+        numericColumnsOptions,
+        summaryMethodsOptions
+      } = this.props;
+      const {
+        column_groupby_numeric_columns
+      } = stack;
+      return Array.isArray(column_groupby_numeric_columns) && column_groupby_numeric_columns.map((item, index) => {
         return /*#__PURE__*/React.createElement(NumericSummaryItem, {
           statItem: statItem,
           key: "stack-number-column-".concat(index),
@@ -34,53 +29,51 @@ var StackItemSettings = /*#__PURE__*/function (_Component) {
           numericColumnItem: item,
           numericColumnsOptions: numericColumnsOptions,
           summaryMethodOptions: summaryMethodsOptions,
-          onChangeColumnOption: _this.props.modifyGroupbyNumericColumn,
-          onChangeSummaryMethod: _this.props.modifySummaryMethod,
-          onDeleteNumericColumnItem: _this.props.deleteNumericColumn
+          onChangeColumnOption: this.props.modifyGroupbyNumericColumn,
+          onChangeSummaryMethod: this.props.modifySummaryMethod,
+          onDeleteNumericColumnItem: this.props.deleteNumericColumn
         });
       });
     };
-    _this.state = {
+    this.state = {
       expanded: true
     };
-    return _this;
   }
-  _createClass(StackItemSettings, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        label = _this$props2.label,
-        numericColumnsOptions = _this$props2.numericColumnsOptions;
-      var expanded = this.state.expanded;
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: classnames('statistic-chart-parameter-item', {
-          collapsible: !expanded
-        })
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-y-axis-title"
-      }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
-        onClick: this.onToggleExpand,
-        className: classnames('dtable-font', 'statistic-y-axis-title-expand-icon', {
-          'dtable-icon-drop-down': expanded,
-          'dtable-icon-right-slide': !expanded
-        })
-      }), /*#__PURE__*/React.createElement("label", null, label)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
-        onClick: this.props.deleteStack,
-        className: "dtable-font dtable-icon-fork-number"
-      }))), expanded && /*#__PURE__*/React.createElement("div", {
-        className: "stack-settings-content-wrapper"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number"
-      }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number-column",
-        onClick: this.props.addNumericSummary
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "number-column-item dtable-font dtable-icon-add-table"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "number-column-item add-number-column-description"
-      }, intl.get('Add_new_numeric_column'))))));
-    }
-  }]);
-  return StackItemSettings;
-}(Component);
+  render() {
+    const {
+      label,
+      numericColumnsOptions
+    } = this.props;
+    const {
+      expanded
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames('statistic-chart-parameter-item', {
+        collapsible: !expanded
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-y-axis-title"
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
+      onClick: this.onToggleExpand,
+      className: classnames('dtable-font', 'statistic-y-axis-title-expand-icon', {
+        'dtable-icon-drop-down': expanded,
+        'dtable-icon-right-slide': !expanded
+      })
+    }), /*#__PURE__*/React.createElement("label", null, label)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
+      onClick: this.props.deleteStack,
+      className: "dtable-font dtable-icon-fork-number"
+    }))), expanded && /*#__PURE__*/React.createElement("div", {
+      className: "stack-settings-content-wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistics-add-number"
+    }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "statistics-add-number-column",
+      onClick: this.props.addNumericSummary
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "number-column-item dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "number-column-item add-number-column-description"
+    }, intl.get('Add_new_numeric_column'))))));
+  }
+}
 export default StackItemSettings;

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

@@ -1,110 +1,132 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component, Fragment } from 'react';
 import intl from 'react-intl-universal';
 import StackItemSettings from './stack-item-settings';
 import { STATISTICS_COUNT_SHOW, STAT_TYPE, SUMMARY_METHOD } from '../../../constants';
-var StacksSettings = /*#__PURE__*/function (_Component) {
-  _inherits(StacksSettings, _Component);
-  var _super = _createSuper(StacksSettings);
-  function StacksSettings(props) {
-    var _this;
-    _classCallCheck(this, StacksSettings);
-    _this = _super.call(this, props);
-    _this.addStack = function () {
-      var statItem = _this.props.statItem;
-      var y_axises = statItem.y_axises;
-      var defaultStack = {
+class StacksSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.addStack = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      const defaultStack = {
         type: STAT_TYPE.BAR_STACK,
         column_groupby_numeric_columns: null
       };
-      var updatedStacks = y_axises ? [].concat(_toConsumableArray(y_axises), [defaultStack]) : [defaultStack];
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      const updatedStacks = y_axises ? [...y_axises, defaultStack] : [defaultStack];
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axises: updatedStacks
       }));
     };
-    _this.deleteStack = function (index) {
-      var statItem = _this.props.statItem;
-      var y_axises = statItem.y_axises;
+    this.deleteStack = index => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
       if (!Array.isArray(y_axises) || !y_axises[index]) return;
-      var updatedStacks = _toConsumableArray(y_axises);
+      let updatedStacks = [...y_axises];
       updatedStacks.splice(index, 1);
       if (updatedStacks.length === 0) {
         updatedStacks = null;
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axises: updatedStacks
       }));
     };
-    _this.addStackNumericSummary = function (index) {
-      var _this$props = _this.props,
-        statItem = _this$props.statItem,
-        numericColumnsOptions = _this$props.numericColumnsOptions;
-      var y_axises = statItem.y_axises;
-      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
-      var updatedStack = updatedStacks && updatedStacks[index];
+    this.addStackNumericSummary = index => {
+      const {
+        statItem,
+        numericColumnsOptions
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[index];
       if (!updatedStack) return;
-      var column_groupby_numeric_columns = updatedStack.column_groupby_numeric_columns;
-      var updatedNumericColumns = column_groupby_numeric_columns ? _toConsumableArray(column_groupby_numeric_columns) : [];
-      var newNumericColumnKey = numericColumnsOptions[0].value.key;
+      const {
+        column_groupby_numeric_columns
+      } = updatedStack;
+      let updatedNumericColumns = column_groupby_numeric_columns ? [...column_groupby_numeric_columns] : [];
+      const newNumericColumnKey = numericColumnsOptions[0].value.key;
       updatedNumericColumns.push({
         column_key: newNumericColumnKey,
         summary_method: SUMMARY_METHOD[0]
       });
       updatedStack.column_groupby_numeric_columns = updatedNumericColumns;
       updatedStacks[index] = updatedStack;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axises: updatedStacks
       }));
     };
-    _this.modifyStackGroupbyNumericColumn = function (stackIndex, _ref) {
-      var numericColumnIndex = _ref.numericColumnIndex,
-        columnOption = _ref.columnOption;
-      var statItem = _this.props.statItem;
-      var y_axises = statItem.y_axises;
-      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
-      var updatedStack = updatedStacks && updatedStacks[stackIndex];
-      var updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
-      var updatedNumericColumn = updatedNumericColumns && updatedNumericColumns[numericColumnIndex];
+    this.modifyStackGroupbyNumericColumn = (stackIndex, _ref) => {
+      let {
+        numericColumnIndex,
+        columnOption
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[stackIndex];
+      let updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      let updatedNumericColumn = updatedNumericColumns && updatedNumericColumns[numericColumnIndex];
       if (!updatedNumericColumn) return;
       updatedNumericColumn.column_key = columnOption.value.key;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axises: updatedStacks
       }));
     };
-    _this.deleteStackNumericColumn = function (stackIndex, _ref2) {
-      var numericColumnIndex = _ref2.numericColumnIndex;
-      var statItem = _this.props.statItem;
-      var y_axises = statItem.y_axises;
-      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
-      var updatedStack = updatedStacks && updatedStacks[stackIndex];
-      var updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+    this.deleteStackNumericColumn = (stackIndex, _ref2) => {
+      let {
+        numericColumnIndex
+      } = _ref2;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[stackIndex];
+      let updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
       if (!updatedNumericColumns || !updatedNumericColumns[numericColumnIndex]) return;
       updatedNumericColumns.splice(numericColumnIndex, 1);
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axises: updatedStacks
       }));
     };
-    _this.modifyStackSummaryMethod = function (stackIndex, _ref3) {
-      var numericColumnIndex = _ref3.numericColumnIndex,
-        summaryMethodOption = _ref3.summaryMethodOption;
-      var statItem = _this.props.statItem;
-      var y_axises = statItem.y_axises;
-      var updatedStacks = Array.isArray(y_axises) && _toConsumableArray(y_axises);
-      var updatedStack = updatedStacks && updatedStacks[stackIndex];
-      var updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
-      var updatedNumericColumn = updatedNumericColumns && updatedNumericColumns[numericColumnIndex];
+    this.modifyStackSummaryMethod = (stackIndex, _ref3) => {
+      let {
+        numericColumnIndex,
+        summaryMethodOption
+      } = _ref3;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axises
+      } = statItem;
+      let updatedStacks = Array.isArray(y_axises) && [...y_axises];
+      let updatedStack = updatedStacks && updatedStacks[stackIndex];
+      let updatedNumericColumns = updatedStack && updatedStack.column_groupby_numeric_columns;
+      let updatedNumericColumn = updatedNumericColumns && updatedNumericColumns[numericColumnIndex];
       if (!updatedNumericColumn) return;
       updatedNumericColumn.summary_method = summaryMethodOption.value;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axises: updatedStacks
       }));
     };
-    _this.getSummaryMethodsOptions = function () {
-      return SUMMARY_METHOD.map(function (m) {
+    this.getSummaryMethodsOptions = () => {
+      return SUMMARY_METHOD.map(m => {
         return {
           value: m,
           label: /*#__PURE__*/React.createElement("span", {
@@ -113,57 +135,45 @@ var StacksSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
-    return _this;
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
   }
-  _createClass(StacksSettings, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var statItem = this.props.statItem;
-      var y_axises = statItem.y_axises;
-      return /*#__PURE__*/React.createElement(Fragment, null, Array.isArray(y_axises) && y_axises.map(function (yAxis, index) {
-        return /*#__PURE__*/React.createElement(StackItemSettings, {
-          key: "stack-settings-".concat(index),
-          statItem: statItem,
-          stack: yAxis,
-          label: "".concat(intl.get('Stack')).concat(index + 1),
-          numericColumnsOptions: _this2.props.numericColumnsOptions,
-          summaryMethodsOptions: _this2.summaryMethodsOptions,
-          deleteStack: function deleteStack() {
-            return _this2.deleteStack(index);
-          },
-          addNumericSummary: function addNumericSummary() {
-            return _this2.addStackNumericSummary(index);
-          },
-          modifyGroupbyNumericColumn: function modifyGroupbyNumericColumn(numericColumnIndex, columnOption) {
-            return _this2.modifyStackGroupbyNumericColumn(index, {
-              numericColumnIndex: numericColumnIndex,
-              columnOption: columnOption
-            });
-          },
-          modifySummaryMethod: function modifySummaryMethod(numericColumnIndex, summaryMethodOption) {
-            return _this2.modifyStackSummaryMethod(index, {
-              numericColumnIndex: numericColumnIndex,
-              summaryMethodOption: summaryMethodOption
-            });
-          },
-          deleteNumericColumn: function deleteNumericColumn(numericColumnIndex) {
-            return _this2.deleteStackNumericColumn(index, {
-              numericColumnIndex: numericColumnIndex
-            });
-          }
-        });
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-stack",
-        onClick: this.addStack
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "dtable-font dtable-icon-add-table"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "add-stack-description"
-      }, intl.get('Add_new_stack'))));
-    }
-  }]);
-  return StacksSettings;
-}(Component);
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      y_axises
+    } = statItem;
+    return /*#__PURE__*/React.createElement(Fragment, null, Array.isArray(y_axises) && y_axises.map((yAxis, index) => {
+      return /*#__PURE__*/React.createElement(StackItemSettings, {
+        key: "stack-settings-".concat(index),
+        statItem: statItem,
+        stack: yAxis,
+        label: "".concat(intl.get('Stack')).concat(index + 1),
+        numericColumnsOptions: this.props.numericColumnsOptions,
+        summaryMethodsOptions: this.summaryMethodsOptions,
+        deleteStack: () => this.deleteStack(index),
+        addNumericSummary: () => this.addStackNumericSummary(index),
+        modifyGroupbyNumericColumn: (numericColumnIndex, columnOption) => this.modifyStackGroupbyNumericColumn(index, {
+          numericColumnIndex,
+          columnOption
+        }),
+        modifySummaryMethod: (numericColumnIndex, summaryMethodOption) => this.modifyStackSummaryMethod(index, {
+          numericColumnIndex,
+          summaryMethodOption
+        }),
+        deleteNumericColumn: numericColumnIndex => this.deleteStackNumericColumn(index, {
+          numericColumnIndex
+        })
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistics-add-stack",
+      onClick: this.addStack
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "add-stack-description"
+    }, intl.get('Add_new_stack'))));
+  }
+}
 export default StacksSettings;