sea-chart 2.0.36 → 2.0.38

package/dist/settings/table-settings/data-settings.js

@@ -1,25 +1,17 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _DTableSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
-var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
-var _DTableColumnIcon2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableColumnIcon"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-var _commonDataSettings = _interopRequireDefault(require("../widgets/common-data-settings"));
-var _divider = _interopRequireDefault(require("../widgets/divider"));
-var _groupBy = _interopRequireDefault(require("../widgets/group-by"));
-var _basicSummary = _interopRequireDefault(require("../widgets/basic-summary"));
-var _numericSummaryItem = _interopRequireDefault(require("../widgets/numeric-summary-item"));
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-var _intl = _interopRequireDefault(require("../../intl"));
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import _DTableColumnIcon from "dtable-ui-component/lib/DTableColumnIcon";
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { CellType, DATE_COLUMN_OPTIONS, getTableById } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import Divider from '../widgets/divider';
+import GroupBy from '../widgets/group-by';
+import BasicSummary from '../widgets/basic-summary';
+import NumericSummaryItem from '../widgets/numeric-summary-item';
+import { BaseUtils } from '../../utils';
+import { CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_DATE_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
 const DataSettings = _ref => {
   let {
     chart,
@@ -27,59 +19,59 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const selectedTable = (0, _react.useMemo)(() => {
+  const selectedTable = useMemo(() => {
     const {
       table_id
     } = chart.config;
-    return (0, _dtableUtils.getTableById)(tables, table_id);
+    return getTableById(tables, table_id);
   }, [tables, chart.config]);
-  const numericColumns = (0, _react.useMemo)(() => {
+  const numericColumns = useMemo(() => {
     if (!selectedTable) return [];
     const {
       columns
     } = selectedTable;
-    return columns.filter(column => _utils.BaseUtils.isNumericSummaryColumn(column));
+    return columns.filter(column => BaseUtils.isNumericSummaryColumn(column));
   }, [selectedTable]);
-  const numericColumnOptions = (0, _react.useMemo)(() => {
+  const numericColumnOptions = useMemo(() => {
     return numericColumns.map(column => {
       return {
         value: column,
-        label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           className: "sea-chart-column-icon"
-        }, /*#__PURE__*/_react.default.createElement(_DTableColumnIcon2.default, {
+        }, /*#__PURE__*/React.createElement(_DTableColumnIcon, {
           column: column
-        })), /*#__PURE__*/_react.default.createElement("span", {
+        })), /*#__PURE__*/React.createElement("span", {
           className: "select-module select-module-name ml-0"
         }, column.name))
       };
     });
   }, [numericColumns]);
-  const groupTypeOptions = (0, _react.useMemo)(() => {
+  const groupTypeOptions = useMemo(() => {
     let options = [{
-      value: _constants.CHART_Y_GROUP_TYPE.COUNT,
-      label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      value: CHART_Y_GROUP_TYPE.COUNT,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "select-module select-module-name ml-0"
-      }, _intl.default.get(_constants.CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/_react.default.createElement("div", {
+      }, intl.get(CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
         className: "summary-type-explanation"
-      }, _intl.default.get('Count_the_number_of_records_in_each_group')))
+      }, intl.get('Count_the_number_of_records_in_each_group')))
     }, {
-      value: _constants.CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
-      label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      value: CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "select-module select-module-name ml-0"
-      }, _intl.default.get(_constants.CHART_SUMMARY_SHOW['advanced'])), /*#__PURE__*/_react.default.createElement("div", {
+      }, intl.get(CHART_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
         className: "summary-type-explanation"
-      }, _intl.default.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
+      }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
     }, {
-      value: _constants.CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
-      label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      value: CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
+      label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "select-module select-module-name ml-0"
-      }, _intl.default.get('Summarize_multiple_fields')), /*#__PURE__*/_react.default.createElement("div", {
+      }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
         className: "summary-type-explanation"
-      }, _intl.default.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+      }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
     }];
     return options;
   }, []);
-  const onGroupByColumnChange = (0, _react.useCallback)(column => {
+  const onGroupByColumnChange = useCallback(column => {
     const {
       config
     } = chart;
@@ -99,18 +91,18 @@ const DataSettings = _ref => {
       update['groupby_date_granularity'] = null;
       update['groupby_geolocation_granularity'] = null;
     } else {
-      if (_utils.BaseUtils.isDateSummaryColumn(column)) {
-        update['groupby_date_granularity'] = _constants.CHART_SUMMARY_TYPE.MONTH;
+      if (BaseUtils.isDateSummaryColumn(column)) {
+        update['groupby_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['groupby_geolocation_granularity'] = null;
-      } else if (type === _dtableUtils.CellType.GEOLOCATION) {
+      } else if (type === CellType.GEOLOCATION) {
         const {
           geo_format
         } = column.data || {};
-        if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.PROVINCE) {
-          update['groupby_geolocation_granularity'] = _constants.GEOLOCATION_FORMAT_MAP.PROVINCE;
-        } else if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
-          update['groupby_geolocation_granularity'] = _constants.GEOLOCATION_FORMAT_CITY;
-        } else if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+        if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+          update['groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+          update['groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
           update['groupby_geolocation_granularity'] = 'district';
         } else {
           update['groupby_geolocation_granularity'] = null;
@@ -120,7 +112,7 @@ const DataSettings = _ref => {
     }
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onGroupbyDateGranularityChange = (0, _react.useCallback)(option => {
+  const onGroupbyDateGranularityChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -133,7 +125,7 @@ const DataSettings = _ref => {
       groupby_date_granularity: value
     });
   }, [chart, onChange]);
-  const onGroupbyGeolocationGranularityChange = (0, _react.useCallback)(option => {
+  const onGroupbyGeolocationGranularityChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -146,7 +138,7 @@ const DataSettings = _ref => {
       groupby_geolocation_granularity: value
     });
   }, [chart, onChange]);
-  const onColumnGroupByColumnChange = (0, _react.useCallback)(column => {
+  const onColumnGroupByColumnChange = useCallback(column => {
     const {
       config
     } = chart;
@@ -167,18 +159,18 @@ const DataSettings = _ref => {
       update['column_groupby_date_granularity'] = null;
       update['column_groupby_geolocation_granularity'] = null;
     } else {
-      if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(type)) {
-        update['column_groupby_date_granularity'] = _constants.CHART_SUMMARY_TYPE.MONTH;
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['column_groupby_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['column_groupby_geolocation_granularity'] = null;
-      } else if (type === _dtableUtils.CellType.GEOLOCATION) {
+      } else if (type === CellType.GEOLOCATION) {
         const {
           geo_format
         } = column.data || {};
-        if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.PROVINCE) {
-          update['column_groupby_geolocation_granularity'] = _constants.GEOLOCATION_FORMAT_MAP.PROVINCE;
-        } else if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
-          update['column_groupby_geolocation_granularity'] = _constants.GEOLOCATION_FORMAT_CITY;
-        } else if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+        if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
+          update['column_groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
+          update['column_groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
           update['column_groupby_geolocation_granularity'] = 'district';
         } else {
           update['column_groupby_geolocation_granularity'] = null;
@@ -188,7 +180,7 @@ const DataSettings = _ref => {
     }
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onColumnGroupbyDateGranularityChange = (0, _react.useCallback)(option => {
+  const onColumnGroupbyDateGranularityChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -201,7 +193,7 @@ const DataSettings = _ref => {
       column_groupby_date_granularity: value
     });
   }, [chart, onChange]);
-  const onColumnGroupbyGeolocationGranularityChange = (0, _react.useCallback)(option => {
+  const onColumnGroupbyGeolocationGranularityChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -214,7 +206,7 @@ const DataSettings = _ref => {
       column_groupby_geolocation_granularity: value
     });
   }, [chart, onChange]);
-  const onIncludeEmptyChange = (0, _react.useCallback)(event => {
+  const onIncludeEmptyChange = useCallback(event => {
     const {
       config
     } = chart;
@@ -225,7 +217,7 @@ const DataSettings = _ref => {
       groupby_include_empty_cells: !groupby_include_empty_cells
     });
   }, [chart, onChange]);
-  const onGroupTypeChange = (0, _react.useCallback)(option => {
+  const onGroupTypeChange = useCallback(option => {
     const value = option.value;
     const {
       config
@@ -243,31 +235,31 @@ const DataSettings = _ref => {
     column_groupby_column_key = column_groupby_column_key || null;
     column_groupby_date_granularity = column_groupby_date_granularity || null;
     column_groupby_geolocation_granularity = column_groupby_geolocation_granularity || null;
-    if (value === _constants.CHART_Y_GROUP_TYPE.COUNT) {
-      summary_type = _constants.CHART_SUMMARY_TYPE.COUNT;
+    if (value === CHART_Y_GROUP_TYPE.COUNT) {
+      summary_type = CHART_SUMMARY_TYPE.COUNT;
       column_groupby_multiple_numeric_column = false;
       summary_columns = [];
       summary_column_key = null;
       summary_method = '';
-    } else if (value === _constants.CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
-      summary_type = _constants.CHART_SUMMARY_TYPE.ADVANCED;
+    } else if (value === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+      summary_type = CHART_SUMMARY_TYPE.ADVANCED;
       column_groupby_multiple_numeric_column = false;
       summary_columns = [];
-      summary_method = summary_method || _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+      summary_method = summary_method || CHART_SUMMARY_CALCULATION_METHOD[0];
       summary_column_key = null;
       if (numericColumns && numericColumns[0]) {
         summary_column_key = numericColumns[0].key;
-        summary_method = _utils.BaseUtils.isDateSummaryColumn(numericColumns[0]) ? _constants.CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+        summary_method = BaseUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
       }
-    } else if (value === _constants.CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
-      summary_type = _constants.CHART_SUMMARY_TYPE.ADVANCED;
+    } else if (value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+      summary_type = CHART_SUMMARY_TYPE.ADVANCED;
       column_groupby_multiple_numeric_column = true;
       summary_columns = [];
       summary_method = null;
       summary_column_key = null;
       if (numericColumns && numericColumns[0]) {
         summary_column_key = numericColumns[0].key;
-        summary_method = _utils.BaseUtils.isDateSummaryColumn(numericColumns[0]) ? _constants.CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+        summary_method = BaseUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
       }
     }
     const update = {
@@ -282,7 +274,7 @@ const DataSettings = _ref => {
     };
     onChange && onChange(update);
   }, [chart, numericColumns, onChange]);
-  const getSelectedGroupType = (0, _react.useCallback)(() => {
+  const getSelectedGroupType = useCallback(() => {
     const {
       config
     } = chart;
@@ -295,16 +287,16 @@ const DataSettings = _ref => {
     //   return groupTypeOptions[1];
     // }
     if (column_groupby_multiple_numeric_column) {
-      return groupTypeOptions.find(item => item.value === _constants.CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN);
+      return groupTypeOptions.find(item => item.value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN);
     }
-    if (summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+    if (summary_type === CHART_SUMMARY_TYPE.COUNT) {
       return groupTypeOptions[0];
     }
-    if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
       return groupTypeOptions[1];
     }
   }, [chart, groupTypeOptions]);
-  const onAddNumericColumn = (0, _react.useCallback)(column => {
+  const onAddNumericColumn = useCallback(column => {
     const {
       config
     } = chart;
@@ -313,7 +305,7 @@ const DataSettings = _ref => {
     } = config;
     const columnKey = column.key;
     let newSummaryColumns = [];
-    const summaryMethod = _utils.BaseUtils.isDateSummaryColumn(column) ? _constants.CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+    const summaryMethod = BaseUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
     if (Array.isArray(summary_columns)) {
       newSummaryColumns = summary_columns.slice(0);
       newSummaryColumns.push({
@@ -330,7 +322,7 @@ const DataSettings = _ref => {
       summary_columns: newSummaryColumns
     });
   }, [chart, onChange]);
-  const onDeleteNumericColumnItem = (0, _react.useCallback)(index => {
+  const onDeleteNumericColumnItem = useCallback(index => {
     const {
       config
     } = chart;
@@ -344,12 +336,12 @@ const DataSettings = _ref => {
       summary_columns: newSummaryColumns
     });
   }, [chart, onChange]);
-  const onGroupbyNumericColumnChange = (0, _react.useCallback)((option, index) => {
+  const onGroupbyNumericColumnChange = useCallback((option, index) => {
     const column = option.value;
     const {
       config
     } = chart;
-    const summaryMethods = _utils.BaseUtils.isDateSummaryColumn(column) ? _constants.CHART_DATE_SUMMARY_CALCULATION_METHOD : _constants.CHART_SUMMARY_CALCULATION_METHOD;
+    const summaryMethods = BaseUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
     if (index === 0) {
       const {
         summary_method
@@ -385,7 +377,7 @@ const DataSettings = _ref => {
       summary_columns: newSummaryColumns
     });
   }, [chart, onChange]);
-  const onSummaryMethodChange = (0, _react.useCallback)((option, index) => {
+  const onSummaryMethodChange = useCallback((option, index) => {
     const value = option.value;
     const {
       config
@@ -410,7 +402,7 @@ const DataSettings = _ref => {
       summary_columns: newSummaryColumns
     });
   }, [chart, onChange]);
-  const renderGroupbyNumericColumns = (0, _react.useCallback)(() => {
+  const renderGroupbyNumericColumns = useCallback(() => {
     const {
       config
     } = chart;
@@ -423,8 +415,8 @@ const DataSettings = _ref => {
     usedSummaryColumnKeys.push(summary_column_key);
     return summary_columns.map((item, index) => {
       const currentUsedSummaryColumnKeys = usedSummaryColumnKeys.filter(columnKey => item.column_key !== columnKey);
-      return /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
-        key: "number-column-".concat(index),
+      return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        key: `number-column-${index}`,
         chart: chart,
         numericColumnOptions: numericColumnOptions.filter(item => !currentUsedSummaryColumnKeys.includes(item.value.key)),
         index: index + 1,
@@ -435,7 +427,7 @@ const DataSettings = _ref => {
       });
     });
   }, [chart, numericColumnOptions, onDeleteNumericColumnItem, onGroupbyNumericColumnChange, onSummaryMethodChange]);
-  const renderAdvancedStatistic = (0, _react.useCallback)(() => {
+  const renderAdvancedStatistic = useCallback(() => {
     const {
       config
     } = chart;
@@ -448,15 +440,15 @@ const DataSettings = _ref => {
       summary_method,
       summary_columns
     } = config;
-    if (summary_type !== _constants.CHART_SUMMARY_TYPE.ADVANCED) return null;
+    if (summary_type !== CHART_SUMMARY_TYPE.ADVANCED) return null;
     if (column_groupby_multiple_numeric_column) {
       // const columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
       const usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(item => item.column_key) : [];
       const unUsedSummaryColumns = numericColumns.filter(column => column.key !== summary_column_key && !usedSummaryColumnKeys.includes(column.key));
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
+      return /*#__PURE__*/React.createElement(React.Fragment, null,
       /*#__PURE__*/
       // !columnGroupbyColumn &&
-      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+      React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
         index: 0,
         value: {
           column_key: summary_column_key,
@@ -466,21 +458,21 @@ const DataSettings = _ref => {
         numericColumnOptions: numericColumnOptions.filter(item => !usedSummaryColumnKeys.includes(item.value.key)),
         onColumnOptionChange: onGroupbyNumericColumnChange,
         onSummaryMethodChange: onSummaryMethodChange
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-add-number"
-      }, renderGroupbyNumericColumns()), Array.isArray(unUsedSummaryColumns) && unUsedSummaryColumns.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      }, renderGroupbyNumericColumns()), Array.isArray(unUsedSummaryColumns) && unUsedSummaryColumns.length > 0 && /*#__PURE__*/React.createElement("div", {
         className: "statistic-add-number-columns d-flex align-items-center",
         onClick: () => onAddNumericColumn(unUsedSummaryColumns[0])
-      }, /*#__PURE__*/_react.default.createElement("i", {
+      }, /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-add-table mr-2"
-      }), /*#__PURE__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", {
         className: "number-column-item add-number-column-description"
-      }, _intl.default.get('Add_new_field')))));
+      }, intl.get('Add_new_field')))));
     }
-    return /*#__PURE__*/_react.default.createElement(_basicSummary.default, {
+    return /*#__PURE__*/React.createElement(BasicSummary, {
       showSummaryTypes: false,
       className: "selected-y-axis",
-      label: _intl.default.get('Summary_field'),
+      label: intl.get('Summary_field'),
       chart: chart,
       selectedTableId: table_id,
       tables: tables,
@@ -505,16 +497,16 @@ const DataSettings = _ref => {
     display_total = true,
     display_empty
   } = config;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commonDataSettings.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
     chart: chart,
     dataSources: dataSources,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement(_groupBy.default, {
+  }), /*#__PURE__*/React.createElement(GroupBy, {
     chart: chart,
     tables: tables,
     className: "selected-x-axis",
-    label: _intl.default.get('Row_grouping_field'),
+    label: intl.get('Row_grouping_field'),
     isRenderNoUsed: false,
     selectedTableId: table_id,
     selectedColumnKey: groupby_column_key,
@@ -523,17 +515,17 @@ const DataSettings = _ref => {
     onGroupByChange: onGroupByColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: groupby_include_empty_cells,
-    placeholder: _intl.default.get('Include_empty'),
+    placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  }), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_groupBy.default, {
+  }), /*#__PURE__*/React.createElement(GroupBy, {
     chart: chart,
     tables: tables,
     className: "selected-x-axis",
-    label: _intl.default.get('Column_grouping_field'),
+    label: intl.get('Column_grouping_field'),
     isRenderNoUsed: true,
     selectedTableId: table_id,
     selectedColumnKey: column_groupby_column_key,
@@ -542,39 +534,39 @@ const DataSettings = _ref => {
     onGroupByChange: onColumnGroupByColumnChange,
     onGroupbyDateGranularityChange: onColumnGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onColumnGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  }), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Summary_type')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(_DTableSelect, {
     menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: getSelectedGroupType(),
     onChange: onGroupTypeChange,
     options: groupTypeOptions
-  })), renderAdvancedStatistic(), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  })), renderAdvancedStatistic(), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: display_total,
     disabled: false,
-    placeholder: _intl.default.get('Display_total'),
+    placeholder: intl.get('Display_total'),
     onChange: () => {
       onChange({
         display_total: !display_total
       });
     }
-  })), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  })), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: display_empty || false,
     disabled: false,
-    placeholder: _intl.default.get('Display_empty_when_data_is_zero'),
+    placeholder: intl.get('Display_empty_when_data_is_zero'),
     onChange: () => {
       onChange({
         display_empty: !display_empty
@@ -582,4 +574,4 @@ const DataSettings = _ref => {
     }
   })));
 };
-var _default = exports.default = DataSettings;
+export default DataSettings;

package/dist/settings/table-settings/index.js

@@ -1,13 +1,2 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TableDataSettings", {
-  enumerable: true,
-  get: function () {
-    return _dataSettings.default;
-  }
-});
-var _dataSettings = _interopRequireDefault(require("./data-settings"));
+import TableDataSettings from './data-settings';
+export { TableDataSettings };