dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,564 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _groupbySettings = _interopRequireDefault(require("./groupby-settings"));
+var _numericSummaryItem = _interopRequireDefault(require("../public-setting/numeric-summary-item"));
+var _summaryMethodSetting = _interopRequireDefault(require("./summary-method-setting"));
+var _indToggleSetting = _interopRequireDefault(require("../public-setting/ind-toggle-setting"));
+var _constants = require("../../../constants");
+const GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+const GROUP_EXPLANATIONS = {
+  COUNT: {
+    name: _constants.STATISTICS_COUNT_SHOW['count'],
+    content: 'Count_the_number_of_records_in_each_group'
+  },
+  SINGLE_NUMERIC_COLUMN: {
+    name: _constants.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'
+  }
+};
+class PivotSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getSummaryMethodsOptions = () => {
+      return _constants.SUMMARY_METHOD.map(m => {
+        return {
+          value: m,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    this.getGroupTypeOptions = () => {
+      return Object.keys(GROUP_TYPES).map(key => {
+        return {
+          value: GROUP_TYPES[key],
+          label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(GROUP_EXPLANATIONS[key].name)), /*#__PURE__*/_react.default.createElement("div", {
+            className: "summary-type-explanation"
+          }, _reactIntlUniversal.default.get(GROUP_EXPLANATIONS[key].content)))
+        };
+      });
+    };
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let updated;
+      if (type === _constants.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
+        };
+      }
+      const newStatItem = Object.assign({}, this.props.statItem, updated);
+      this.groupTypeOptions = this.getGroupTypeOptions(newStatItem);
+      this.props.updateStatItem(newStatItem);
+    };
+    this.onSelectGroupbyDateGranularity = (type, dateGranularity) => {
+      let updated;
+      if (type === _constants.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 = (type, geolocationGranularity) => {
+      let updated;
+      if (type === _constants.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 = (summaryType, summaryColumnKey, summaryMethod) => {
+      let {
+        statItem
+      } = this.props;
+      let updated = {
+        summary_type: summaryType,
+        summary_column_key: summaryColumnKey,
+        summary_method: summaryMethod
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.updateSummaryColumn = summaryColumnKey => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_column_key: summaryColumnKey
+      }));
+    };
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_method: summaryMethod
+      }));
+    };
+    this.onChangeGroupType = option => {
+      const value = option.value;
+      const {
+        statItem,
+        pivotTableSummaryColumnOptions
+      } = this.props;
+      let {
+        column_groupby_column_key,
+        column_groupby_date_granularity,
+        column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column,
+        summary_columns_option,
+        summary_type,
+        summary_method,
+        summary_column_key
+      } = this.props.statItem || {};
+      if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+        summary_type = _constants.SUMMARY_TYPE.ADVANCED;
+        column_groupby_multiple_numeric_column = false;
+        summary_columns_option = [];
+        summary_method = summary_method || _constants.SUMMARY_METHOD[0];
+      } else if (value === GROUP_TYPES.COUNT) {
+        column_groupby_multiple_numeric_column = false;
+        summary_columns_option = [];
+        summary_type = _constants.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 = _constants.SUMMARY_TYPE.ADVANCED;
+        column_groupby_multiple_numeric_column = true;
+        if (column_groupby_column_key) {
+          summary_columns_option = [{
+            key: this.getNumericalColumnOptions()[0].value.key,
+            method: _constants.SUMMARY_METHOD[0],
+            type: this.getNumericalColumnOptions()[0].value.type
+          }];
+        } else {
+          const pivotTableSummaryColumnOption = pivotTableSummaryColumnOptions[0];
+          summary_columns_option = [];
+          summary_column_key = pivotTableSummaryColumnOption && pivotTableSummaryColumnOption.value.key;
+          summary_method = _constants.SUMMARY_METHOD[1];
+        }
+      }
+      let updated = {
+        column_groupby_column_key,
+        column_groupby_date_granularity,
+        column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column,
+        summary_columns_option,
+        summary_type,
+        summary_method,
+        summary_column_key
+      };
+      this.setState({
+        columnGroupbyType: value
+      }, () => {
+        this.props.updateStatItem(Object.assign({}, statItem, updated));
+      });
+    };
+    this.getSelectedGroupType = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        column_groupby_multiple_numeric_column,
+        summary_type,
+        column_groupby_column_key
+      } = statItem;
+      if (summary_type === _constants.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(item => item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN);
+      }
+      if (summary_type === _constants.SUMMARY_TYPE.COUNT) {
+        return this.groupTypeOptions[0];
+      }
+      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+        return this.groupTypeOptions[1];
+      }
+    };
+    this.getNumericalColumnOptions = () => {
+      const {
+        getTableById,
+        pivotTableSummaryColumnOptions,
+        statItem
+      } = this.props || {};
+      const {
+        table_id
+      } = statItem || {};
+      const table = getTableById(table_id);
+      if (!table) return [];
+      const newPivotTableSummaryColumnOptions = [];
+      pivotTableSummaryColumnOptions.forEach(item => {
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, item.value.key) || {};
+        if ((0, _dtableUtils.isNumericColumn)(column)) {
+          newPivotTableSummaryColumnOptions.push(item);
+        }
+      });
+      return newPivotTableSummaryColumnOptions;
+    };
+    this.canAddSummaryColumn = () => {
+      const {
+        pivotTableSummaryColumnOptions,
+        statItem: {
+          column_groupby_column_key
+        }
+      } = this.props;
+      if (column_groupby_column_key) {
+        const numericalColumnOptions = this.getNumericalColumnOptions();
+        return Array.isArray(numericalColumnOptions) && numericalColumnOptions.length > 0;
+      } else {
+        return Array.isArray(pivotTableSummaryColumnOptions) && pivotTableSummaryColumnOptions.length > 0;
+      }
+    };
+    this.onChangeGroupbyNumericColumn = (index, columnOption) => {
+      if (index === 0) {
+        const updated = {
+          summary_column_key: columnOption.value.key
+        };
+        if (_constants.TIME_COLUMN_LIST.includes(columnOption.value.type)) {
+          const {
+            statItem
+          } = this.props;
+          const {
+            summary_method
+          } = statItem || {};
+          if (summary_method === _constants.SUMMARY_METHOD_MAP.Sum || summary_method === _constants.SUMMARY_METHOD_MAP.Mean) {
+            updated.summary_method = _constants.SUMMARY_METHOD_MAP.Min;
+          }
+        }
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+      } else {
+        let {
+          summary_columns_option
+        } = this.props.statItem || {};
+        summary_columns_option = summary_columns_option || [];
+        summary_columns_option = [...summary_columns_option];
+        let selectedItem = summary_columns_option[index - 1];
+        const updated = {
+          key: columnOption.value.key
+        };
+        if (_constants.TIME_COLUMN_LIST.includes(columnOption.value.type)) {
+          if (selectedItem.method === _constants.SUMMARY_METHOD_MAP.Sum || selectedItem.method === _constants.SUMMARY_METHOD_MAP.Mean) {
+            updated.method = _constants.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
+        }));
+      }
+    };
+    this.onChangeGroupbyMultiNumericColumn = (index, columnOption) => {
+      let {
+        column_groupby_multiple_numeric_column,
+        column_groupby_column_key,
+        summary_columns_option
+      } = this.props.statItem || {};
+      if (column_groupby_multiple_numeric_column && column_groupby_column_key) {
+        const summaryColumnOption = summary_columns_option[index];
+        const update = {
+          key: columnOption.value.key,
+          method: summaryColumnOption && summaryColumnOption.method || _constants.SUMMARY_METHOD_MAP.Sum
+        };
+        summary_columns_option = summary_columns_option || [];
+        summary_columns_option = [...summary_columns_option];
+        summary_columns_option[index] = update;
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          summary_columns_option
+        }));
+        return;
+      }
+    };
+    this.onDeleteNumericColumnItem = index => {
+      let {
+        summary_columns_option = [],
+        column_groupby_column_key
+      } = this.props.statItem || {};
+      const deleteIndex = column_groupby_column_key ? index : index - 1;
+      summary_columns_option = summary_columns_option.filter((_, index) => index !== deleteIndex);
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_columns_option: [...summary_columns_option]
+      }));
+    };
+    this.onChangeSummaryMethod = (index, option) => {
+      if (index === 0) {
+        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+          summary_method: option.value
+        }));
+      } else {
+        let {
+          summary_columns_option
+        } = this.props.statItem || {};
+        summary_columns_option = summary_columns_option || [];
+        summary_columns_option = [...summary_columns_option];
+        let 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
+        }));
+      }
+    };
+    this.onChangeMultiSummaryMethod = (index, option) => {
+      let {
+        summary_columns_option
+      } = this.props.statItem || {};
+      summary_columns_option = Array.isArray(summary_columns_option) ? [...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
+      }));
+    };
+    this.onAddNumericColumn = () => {
+      let {
+        statItem,
+        pivotTableSummaryColumnOptions
+      } = this.props;
+      let {
+        summary_columns_option,
+        column_groupby_column_key
+      } = statItem || {};
+      let newNumericColumnKey = column_groupby_column_key ? this.getNumericalColumnOptions()[0].value.key : pivotTableSummaryColumnOptions[0].value.key;
+      if (Array.isArray(summary_columns_option)) {
+        summary_columns_option = [...summary_columns_option];
+        summary_columns_option.push({
+          key: newNumericColumnKey,
+          method: _constants.SUMMARY_METHOD[0]
+        });
+      } else {
+        summary_columns_option = [{
+          key: newNumericColumnKey,
+          method: _constants.SUMMARY_METHOD[0]
+        }];
+      }
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_columns_option: [...summary_columns_option]
+      }));
+    };
+    this.onToggleDisplayData = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_total
+      } = statItem || {};
+      const updated = {
+        display_total: !display_total
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        summary_columns_option,
+        column_groupby_column_key
+      } = statItem;
+      if (!Array.isArray(summary_columns_option)) return null;
+      if (column_groupby_column_key) {
+        const [, ...restSummaryColumnsOption] = summary_columns_option;
+        return restSummaryColumnsOption.map((item, index) => {
+          return /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+            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((item, index) => {
+        return /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+          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();
+  }
+  render() {
+    let {
+      settingType,
+      statItem,
+      selectedTable,
+      generalColumnsOptions,
+      pivotTableSummaryColumnOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions,
+      renderIncludeEmpty
+    } = this.props;
+    let {
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      groupby_column_key,
+      groupby_date_granularity,
+      groupby_geolocation_granularity,
+      summary_type,
+      summary_column_key,
+      summary_method,
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column,
+      display_total = true,
+      summary_columns_option
+    } = statItem || {};
+    const selectedGroupItem = this.getSelectedGroupType();
+    if (settingType === 'style') {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      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.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
+      selectedTable: selectedTable,
+      columnsOptions: generalColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: _reactIntlUniversal.default.get('Row_grouping_field'),
+      placeholder: _reactIntlUniversal.default.get('Select_column'),
+      groupbyColumnKey: groupby_column_key,
+      groupbyDateGranularity: groupby_date_granularity,
+      groupbyGeolocationGranularity: groupby_geolocation_granularity,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, _constants.GROUPBY_TYPE.ROW),
+      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, _constants.GROUPBY_TYPE.ROW),
+      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, _constants.GROUPBY_TYPE.ROW),
+      renderIncludeEmpty: renderIncludeEmpty
+    }), /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
+      selectedTable: selectedTable,
+      columnsOptions: generalColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: _reactIntlUniversal.default.get('Column_grouping_field'),
+      placeholder: _reactIntlUniversal.default.get('Select_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, _constants.GROUPBY_TYPE.COLUMN),
+      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, _constants.GROUPBY_TYPE.COLUMN),
+      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, _constants.GROUPBY_TYPE.COLUMN)
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Summary_type')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+      classNamePrefix: "statistic-chart-summary-types",
+      value: selectedGroupItem,
+      options: this.groupTypeOptions,
+      onChange: this.onChangeGroupType
+    })), summary_type === _constants.SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column_groupby_column_key && /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+      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.default.createElement(_numericSummaryItem.default, {
+      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.default.createElement(_summaryMethodSetting.default, {
+      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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistics-add-number"
+    }, this.renderGroupbyNumericColumns()), this.canAddSummaryColumn() && /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistics-add-number-column",
+      onClick: this.onAddNumericColumn
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "number-column-item dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "number-column-item add-number-column-description"
+    }, _reactIntlUniversal.default.get('Add_new_summary_column')))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_indToggleSetting.default, {
+      isChecked: display_total,
+      handleToggleChange: this.onToggleDisplayData,
+      label: _reactIntlUniversal.default.get('Display_total')
+    })));
+  }
+}
+var _default = exports.default = PivotSettings;

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

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _barChartStyleSetting = _interopRequireDefault(require("./style-setting/bar-chart-style-setting"));
+var _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+class ScatterSettings extends _react.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, {
+        x_axis_column: new_column
+      }));
+    };
+    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, {
+        y_axis_column: new_column
+      }));
+    };
+    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, {
+        group_column: new_column
+      }));
+    };
+  }
+  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.default.createElement(_barChartStyleSetting.default, {
+        hideDisplayDataSetting: true,
+        showRangeSetting: false,
+        statItem: statItem,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTableById: getTableById,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    const selectedXAxisColumn = getSelectedColumnOption(x_axis_column, numericColumnsOptions);
+    const selectedYAxisColumn = getSelectedColumnOption(y_axis_column, numericColumnsOptions);
+    const selectedGroupColumn = getSelectedColumnOption(group_column, generalColumnsOptions);
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      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.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('X-axis')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: numericColumnsOptions,
+      selectedColumnOption: selectedXAxisColumn,
+      onChangeSelectedColumn: this.onSelectXAxisColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Y-axis')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: numericColumnsOptions,
+      selectedColumnOption: selectedYAxisColumn,
+      onChangeSelectedColumn: this.onSelectYAxisColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Group_by')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: generalColumnsOptions,
+      selectedColumnOption: selectedGroupColumn,
+      onChangeSelectedColumn: this.onSelectGroupColumn
+    })));
+  }
+}
+var _default = exports.default = ScatterSettings;