dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,542 @@
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+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 { isNumericColumn, TableUtils } from 'dtable-store';
+import { DTableSelect } from '../../../components';
+import BaseSettings from '../public-setting/base-settings';
+import GroupbySettings from './groupby-settings';
+import NumericSummaryItem from '../public-setting/numeric-summary-item';
+import SummaryMethodSettings from './summary-method-setting';
+import IndToggleSetting from '../public-setting/ind-toggle-setting';
+import { GROUPBY_TYPE, STATISTICS_COUNT_SHOW, SUMMARY_METHOD, SUMMARY_METHOD_MAP, SUMMARY_TYPE, TIME_COLUMN_LIST } from '../../../constants';
+var GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+var GROUP_EXPLANATIONS = {
+  COUNT: {
+    name: STATISTICS_COUNT_SHOW['count'],
+    content: 'Count_the_number_of_records_in_each_group'
+  },
+  SINGLE_NUMERIC_COLUMN: {
+    name: STATISTICS_COUNT_SHOW['advanced'],
+    content: 'Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field'
+  },
+  MULTIPLE_NUMERIC_COLUMN: {
+    name: 'Summarize_multiple_fields',
+    content: 'Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields'
+  }
+};
+var PivotSettings = /*#__PURE__*/function (_Component) {
+  _inherits(PivotSettings, _Component);
+  var _super = _createSuper(PivotSettings);
+  function PivotSettings(props) {
+    var _this;
+    _classCallCheck(this, PivotSettings);
+    _this = _super.call(this, props);
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (m) {
+        return {
+          value: m,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    _this.getGroupTypeOptions = function () {
+      return Object.keys(GROUP_TYPES).map(function (key) {
+        return {
+          value: GROUP_TYPES[key],
+          label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+            className: 'select-module select-module-name'
+          }, intl.get(GROUP_EXPLANATIONS[key].name)), /*#__PURE__*/React.createElement("div", {
+            className: "summary-type-explanation"
+          }, intl.get(GROUP_EXPLANATIONS[key].content)))
+        };
+      });
+    };
+    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
+      var updated;
+      if (type === GROUPBY_TYPE.ROW) {
+        updated = {
+          groupby_column_key: groupbyColumnKey,
+          groupby_date_granularity: groupbyDateGranularity,
+          groupby_geolocation_granularity: groupbyGeolocationGranularity
+        };
+      } else {
+        updated = {
+          column_groupby_column_key: groupbyColumnKey,
+          column_groupby_date_granularity: groupbyDateGranularity,
+          column_groupby_geolocation_granularity: groupbyGeolocationGranularity
+        };
+      }
+      var newStatItem = Object.assign({}, _this.props.statItem, updated);
+      _this.groupTypeOptions = _this.getGroupTypeOptions(newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onSelectGroupbyDateGranularity = function (type, dateGranularity) {
+      var updated;
+      if (type === GROUPBY_TYPE.ROW) {
+        updated = {
+          groupby_date_granularity: dateGranularity
+        };
+      } else {
+        updated = {
+          column_groupby_date_granularity: dateGranularity
+        };
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyGeolocationGranularity = function (type, geolocationGranularity) {
+      var updated;
+      if (type === GROUPBY_TYPE.ROW) {
+        updated = {
+          groupby_geolocation_granularity: geolocationGranularity
+        };
+      } else {
+        updated = {
+          column_groupby_geolocation_granularity: geolocationGranularity
+        };
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
+      var statItem = _this.props.statItem;
+      var updated = {
+        summary_type: summaryType,
+        summary_column_key: summaryColumnKey,
+        summary_method: summaryMethod
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.updateSummaryColumn = function (summaryColumnKey) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_column_key: summaryColumnKey
+      }));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_method: summaryMethod
+      }));
+    };
+    _this.onChangeGroupType = function (option) {
+      var value = option.value;
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        pivotTableSummaryColumnOptions = _this$props.pivotTableSummaryColumnOptions;
+      var _ref = _this.props.statItem || {},
+        column_groupby_column_key = _ref.column_groupby_column_key,
+        column_groupby_date_granularity = _ref.column_groupby_date_granularity,
+        column_groupby_geolocation_granularity = _ref.column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column = _ref.column_groupby_multiple_numeric_column,
+        summary_columns_option = _ref.summary_columns_option,
+        summary_type = _ref.summary_type,
+        summary_method = _ref.summary_method,
+        summary_column_key = _ref.summary_column_key;
+      if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+        summary_type = SUMMARY_TYPE.ADVANCED;
+        column_groupby_multiple_numeric_column = false;
+        summary_columns_option = [];
+        summary_method = summary_method || SUMMARY_METHOD[0];
+      } else if (value === GROUP_TYPES.COUNT) {
+        column_groupby_multiple_numeric_column = false;
+        summary_columns_option = [];
+        summary_type = SUMMARY_TYPE.COUNT;
+        column_groupby_date_granularity = null;
+        column_groupby_geolocation_granularity = null;
+        summary_column_key = null;
+      } else if (value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN) {
+        summary_type = SUMMARY_TYPE.ADVANCED;
+        column_groupby_multiple_numeric_column = true;
+        if (column_groupby_column_key) {
+          summary_columns_option = [{
+            key: _this.getNumericalColumnOptions()[0].value.key,
+            method: SUMMARY_METHOD[0],
+            type: _this.getNumericalColumnOptions()[0].value.type
+          }];
+        } else {
+          var pivotTableSummaryColumnOption = pivotTableSummaryColumnOptions[0];
+          summary_columns_option = [];
+          summary_column_key = pivotTableSummaryColumnOption && pivotTableSummaryColumnOption.value.key;
+          summary_method = SUMMARY_METHOD[1];
+        }
+      }
+      var updated = {
+        column_groupby_column_key: column_groupby_column_key,
+        column_groupby_date_granularity: column_groupby_date_granularity,
+        column_groupby_geolocation_granularity: column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column: column_groupby_multiple_numeric_column,
+        summary_columns_option: summary_columns_option,
+        summary_type: summary_type,
+        summary_method: summary_method,
+        summary_column_key: summary_column_key
+      };
+      _this.setState({
+        columnGroupbyType: value
+      }, function () {
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      });
+    };
+    _this.getSelectedGroupType = function () {
+      var statItem = _this.props.statItem;
+      var column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
+        summary_type = statItem.summary_type,
+        column_groupby_column_key = statItem.column_groupby_column_key;
+      if (summary_type === SUMMARY_TYPE.ADVANCED && column_groupby_column_key && !column_groupby_multiple_numeric_column) {
+        return _this.groupTypeOptions[1];
+      }
+      if (column_groupby_multiple_numeric_column) {
+        return _this.groupTypeOptions.find(function (item) {
+          return item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
+        });
+      }
+      if (summary_type === SUMMARY_TYPE.COUNT) {
+        return _this.groupTypeOptions[0];
+      }
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        return _this.groupTypeOptions[1];
+      }
+    };
+    _this.getNumericalColumnOptions = function () {
+      var _ref2 = _this.props || {},
+        getTableById = _ref2.getTableById,
+        pivotTableSummaryColumnOptions = _ref2.pivotTableSummaryColumnOptions,
+        statItem = _ref2.statItem;
+      var _ref3 = statItem || {},
+        table_id = _ref3.table_id;
+      var table = getTableById(table_id);
+      if (!table) return [];
+      var newPivotTableSummaryColumnOptions = [];
+      pivotTableSummaryColumnOptions.forEach(function (item) {
+        var column = TableUtils.getTableColumnByKey(table, item.value.key) || {};
+        if (isNumericColumn(column)) {
+          newPivotTableSummaryColumnOptions.push(item);
+        }
+      });
+      return newPivotTableSummaryColumnOptions;
+    };
+    _this.canAddSummaryColumn = function () {
+      var _this$props2 = _this.props,
+        pivotTableSummaryColumnOptions = _this$props2.pivotTableSummaryColumnOptions,
+        column_groupby_column_key = _this$props2.statItem.column_groupby_column_key;
+      if (column_groupby_column_key) {
+        var numericalColumnOptions = _this.getNumericalColumnOptions();
+        return Array.isArray(numericalColumnOptions) && numericalColumnOptions.length > 0;
+      } else {
+        return Array.isArray(pivotTableSummaryColumnOptions) && pivotTableSummaryColumnOptions.length > 0;
+      }
+    };
+    _this.onChangeGroupbyNumericColumn = function (index, columnOption) {
+      if (index === 0) {
+        var updated = {
+          summary_column_key: columnOption.value.key
+        };
+        if (TIME_COLUMN_LIST.includes(columnOption.value.type)) {
+          var statItem = _this.props.statItem;
+          var _ref4 = statItem || {},
+            summary_method = _ref4.summary_method;
+          if (summary_method == SUMMARY_METHOD_MAP.Sum || summary_method === SUMMARY_METHOD_MAP.Mean) {
+            updated.summary_method = SUMMARY_METHOD_MAP.Min;
+          }
+        }
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      } else {
+        var _ref5 = _this.props.statItem || {},
+          summary_columns_option = _ref5.summary_columns_option;
+        summary_columns_option = summary_columns_option || [];
+        summary_columns_option = _toConsumableArray(summary_columns_option);
+        var selectedItem = summary_columns_option[index - 1];
+        var _updated = {
+          key: columnOption.value.key
+        };
+        if (TIME_COLUMN_LIST.includes(columnOption.value.type)) {
+          if (selectedItem.method === SUMMARY_METHOD_MAP.Sum || selectedItem.method === SUMMARY_METHOD_MAP.Mean) {
+            _updated.method = SUMMARY_METHOD_MAP.Min;
+          }
+        }
+        selectedItem = Object.assign({}, selectedItem, _updated);
+        summary_columns_option[index - 1] = selectedItem;
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          summary_columns_option: summary_columns_option
+        }));
+      }
+    };
+    _this.onChangeGroupbyMultiNumericColumn = function (index, columnOption) {
+      var _ref6 = _this.props.statItem || {},
+        column_groupby_multiple_numeric_column = _ref6.column_groupby_multiple_numeric_column,
+        column_groupby_column_key = _ref6.column_groupby_column_key,
+        summary_columns_option = _ref6.summary_columns_option;
+      if (column_groupby_multiple_numeric_column && column_groupby_column_key) {
+        var summaryColumnOption = summary_columns_option[index];
+        var update = {
+          key: columnOption.value.key,
+          method: summaryColumnOption && summaryColumnOption.method || SUMMARY_METHOD_MAP.Sum
+        };
+        summary_columns_option = summary_columns_option || [];
+        summary_columns_option = _toConsumableArray(summary_columns_option);
+        summary_columns_option[index] = update;
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          summary_columns_option: summary_columns_option
+        }));
+        return;
+      }
+    };
+    _this.onDeleteNumericColumnItem = function (index) {
+      var _ref7 = _this.props.statItem || {},
+        _ref7$summary_columns = _ref7.summary_columns_option,
+        summary_columns_option = _ref7$summary_columns === void 0 ? [] : _ref7$summary_columns,
+        column_groupby_column_key = _ref7.column_groupby_column_key;
+      var deleteIndex = column_groupby_column_key ? index : index - 1;
+      summary_columns_option = summary_columns_option.filter(function (_, index) {
+        return index !== deleteIndex;
+      });
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_columns_option: _toConsumableArray(summary_columns_option)
+      }));
+    };
+    _this.onChangeSummaryMethod = function (index, option) {
+      if (index === 0) {
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          summary_method: option.value
+        }));
+      } else {
+        var _ref8 = _this.props.statItem || {},
+          summary_columns_option = _ref8.summary_columns_option;
+        summary_columns_option = summary_columns_option || [];
+        summary_columns_option = _toConsumableArray(summary_columns_option);
+        var selectedItem = summary_columns_option[index - 1];
+        selectedItem = Object.assign({}, selectedItem, {
+          method: option.value
+        });
+        summary_columns_option[index - 1] = selectedItem;
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          summary_columns_option: summary_columns_option
+        }));
+      }
+    };
+    _this.onChangeMultiSummaryMethod = function (index, option) {
+      var _ref9 = _this.props.statItem || {},
+        summary_columns_option = _ref9.summary_columns_option;
+      summary_columns_option[index].method = option.value;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_columns_option: summary_columns_option
+      }));
+    };
+    _this.onAddNumericColumn = function () {
+      var _this$props3 = _this.props,
+        statItem = _this$props3.statItem,
+        pivotTableSummaryColumnOptions = _this$props3.pivotTableSummaryColumnOptions;
+      var _ref10 = statItem || {},
+        summary_columns_option = _ref10.summary_columns_option,
+        column_groupby_column_key = _ref10.column_groupby_column_key;
+      var newNumericColumnKey = column_groupby_column_key ? _this.getNumericalColumnOptions()[0].value.key : pivotTableSummaryColumnOptions[0].value.key;
+      if (Array.isArray(summary_columns_option)) {
+        summary_columns_option = _toConsumableArray(summary_columns_option);
+        summary_columns_option.push({
+          key: newNumericColumnKey,
+          method: SUMMARY_METHOD[0]
+        });
+      } else {
+        summary_columns_option = [{
+          key: newNumericColumnKey,
+          method: SUMMARY_METHOD[0]
+        }];
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_columns_option: _toConsumableArray(summary_columns_option)
+      }));
+    };
+    _this.onToggleDisplayData = function () {
+      var statItem = _this.props.statItem;
+      var _ref11 = statItem || {},
+        display_total = _ref11.display_total;
+      var updated = {
+        display_total: !display_total
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.renderGroupbyNumericColumns = function () {
+      var statItem = _this.props.statItem;
+      var summary_columns_option = statItem.summary_columns_option,
+        column_groupby_column_key = statItem.column_groupby_column_key;
+      if (!Array.isArray(summary_columns_option)) return null;
+      if (column_groupby_column_key) {
+        var _summary_columns_opti = _toArray(summary_columns_option),
+          restSummaryColumnsOption = _summary_columns_opti.slice(1);
+        return restSummaryColumnsOption.map(function (item, index) {
+          return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+            key: "number-column-".concat(index),
+            statItem: statItem,
+            index: index + 1,
+            numericColumnItem: item,
+            numericColumnsOptions: _this.getNumericalColumnOptions(),
+            summaryMethodOptions: _this.summaryMethodsOptions,
+            onChangeColumnOption: _this.onChangeGroupbyMultiNumericColumn,
+            onChangeSummaryMethod: _this.onChangeMultiSummaryMethod,
+            onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem
+          });
+        });
+      }
+      return summary_columns_option.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          key: "number-column-".concat(index),
+          statItem: statItem,
+          numericColumnsOptions: _this.props.pivotTableSummaryColumnOptions,
+          summaryMethodOptions: _this.summaryMethodsOptions,
+          index: index + 1,
+          numericColumnItem: item,
+          onChangeColumnOption: _this.onChangeGroupbyNumericColumn,
+          onChangeSummaryMethod: _this.onChangeSummaryMethod,
+          onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem
+        });
+      });
+    };
+    _this.groupTypeOptions = _this.getGroupTypeOptions(props.statItem);
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    return _this;
+  }
+  _createClass(PivotSettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        settingType = _this$props4.settingType,
+        statItem = _this$props4.statItem,
+        selectedTable = _this$props4.selectedTable,
+        generalColumnsOptions = _this$props4.generalColumnsOptions,
+        pivotTableSummaryColumnOptions = _this$props4.pivotTableSummaryColumnOptions,
+        dateGranularityOptions = _this$props4.dateGranularityOptions,
+        geolocationGranularityOptions = _this$props4.geolocationGranularityOptions,
+        renderIncludeEmpty = _this$props4.renderIncludeEmpty;
+      var _ref12 = statItem || {},
+        selectedTableId = _ref12.table_id,
+        selectedViewId = _ref12.view_id,
+        groupby_column_key = _ref12.groupby_column_key,
+        groupby_date_granularity = _ref12.groupby_date_granularity,
+        groupby_geolocation_granularity = _ref12.groupby_geolocation_granularity,
+        summary_type = _ref12.summary_type,
+        summary_column_key = _ref12.summary_column_key,
+        summary_method = _ref12.summary_method,
+        column_groupby_column_key = _ref12.column_groupby_column_key,
+        column_groupby_date_granularity = _ref12.column_groupby_date_granularity,
+        column_groupby_geolocation_granularity = _ref12.column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column = _ref12.column_groupby_multiple_numeric_column,
+        _ref12$display_total = _ref12.display_total,
+        display_total = _ref12$display_total === void 0 ? true : _ref12$display_total,
+        summary_columns_option = _ref12.summary_columns_option;
+      var selectedGroupItem = this.getSelectedGroupType();
+      if (settingType === 'style') {
+        return null;
+      }
+      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,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: generalColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('Row_grouping_field'),
+        placeholder: intl.get('Select_a_column'),
+        groupbyColumnKey: groupby_column_key,
+        groupbyDateGranularity: groupby_date_granularity,
+        groupbyGeolocationGranularity: groupby_geolocation_granularity,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.ROW),
+        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.ROW),
+        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.ROW),
+        renderIncludeEmpty: renderIncludeEmpty
+      }), /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: generalColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('Column_grouping_field'),
+        placeholder: intl.get('Select_a_column'),
+        groupbyColumnKey: column_groupby_column_key,
+        groupbyDateGranularity: column_groupby_date_granularity,
+        groupbyGeolocationGranularity: column_groupby_geolocation_granularity,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN)
+      }), /*#__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('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
+        classNamePrefix: "statistic-chart-summary-types",
+        value: selectedGroupItem,
+        options: this.groupTypeOptions,
+        onChange: this.onChangeGroupType
+      })), summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(React.Fragment, null, column_groupby_column_key && /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        statItem: statItem,
+        key: "number-column-".concat(0),
+        index: 0,
+        numericColumnItem: {
+          column_key: summary_columns_option[0] && summary_columns_option[0].key,
+          summary_method: summary_columns_option[0] && summary_columns_option[0].method
+        },
+        numericColumnsOptions: this.getNumericalColumnOptions(),
+        summaryMethodOptions: this.summaryMethodsOptions,
+        onChangeColumnOption: this.onChangeGroupbyMultiNumericColumn,
+        onChangeSummaryMethod: this.onChangeMultiSummaryMethod
+      }), !column_groupby_column_key && /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        statItem: statItem,
+        key: "number-column-".concat(0),
+        index: 0,
+        numericColumnItem: {
+          column_key: summary_column_key,
+          summary_method: summary_method
+        },
+        numericColumnsOptions: pivotTableSummaryColumnOptions,
+        summaryMethodOptions: this.summaryMethodsOptions,
+        onChangeColumnOption: this.onChangeGroupbyNumericColumn,
+        onChangeSummaryMethod: this.onChangeSummaryMethod
+      })) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
+        statItem: statItem,
+        numericColumnsOptions: pivotTableSummaryColumnOptions,
+        summaryType: summary_type,
+        summaryColumnKey: summary_column_key,
+        summaryMethod: summary_method,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onChangeSummaryType: this.updatedSummaryType,
+        onSelectSummaryMethod: this.updateSummaryMethod,
+        onSelectNumericColumn: this.updateSummaryColumn,
+        updateStatItem: this.props.updateStatItem
+      })), column_groupby_multiple_numeric_column && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number"
+      }, this.renderGroupbyNumericColumns()), this.canAddSummaryColumn() && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-column",
+        onClick: this.onAddNumericColumn
+      }, /*#__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_summary_column')))), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+        isChecked: display_total,
+        handleToggleChange: this.onToggleDisplayData,
+        label: intl.get('Display_total')
+      })));
+    }
+  }]);
+  return PivotSettings;
+}(Component);
+export default PivotSettings;

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

@@ -0,0 +1,111 @@
+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;
+      if (x_axis_column === new_column) return;
+      _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;
+      if (y_axis_column === new_column) return;
+      _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;
+      if (group_column === new_column) return;
+      _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, {
+        statItem: statItem,
+        selectedTableId: selectedTableId,
+        selectedViewId: selectedViewId,
+        getTables: this.props.getTables,
+        getViews: this.props.getViews,
+        getTableById: this.props.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);
+export default ScatterSettings;