sea-chart 0.0.48 → 0.0.50

package/dist/components/color-popover/color-rules/rule-filters/filter.js

@@ -1,6 +1,6 @@
+import _DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
 import React from 'react';
 import intl from '../../../../intl';
-import DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
 import NumberInput from './number-input';
 import { COLOR_RULE_FILTER_TYPE_MAP, EMPTY_PREDICATE } from '../../../../constants/color-rules';
 const INPUT_CMP_TYPE_MAP = {
@@ -117,7 +117,7 @@ class Filter extends React.Component {
         case 1:
           {
             const selectedConjunction = conjunctionOptions.find(option => option.value === filterConjunction);
-            return /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+            return /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
               value: selectedConjunction,
               options: conjunctionOptions,
               onSelectOption: this.onSelectConjunction
@@ -196,13 +196,13 @@ class Filter extends React.Component {
       className: "filter-container"
     }, /*#__PURE__*/React.createElement("div", {
       className: "filter-column"
-    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+    }, /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
       value: selectedFilterType,
       options: filterTypeOptions,
       onSelectOption: this.onSelectFilterBy
     })), /*#__PURE__*/React.createElement("div", {
       className: "filter-predicate ml-2"
-    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+    }, /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
       value: selectedPredicate,
       options: this.predicateOptions,
       onSelectOption: this.onSelectPredicate

package/dist/components/color-setting/color-group-selector.js

@@ -1,4 +1,4 @@
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { Component } from 'react';
 import { FormGroup } from 'reactstrap';
 import { COLOR_OPTIONS } from '../../constants/color-rules';
@@ -37,7 +37,8 @@ class ColorGroupSelector extends Component {
     const currentOption = this.colorOptions.filter(item => item.value === currentColor)[0] || this.colorOptions[0];
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "statistic-chart-parameter-item"
-    }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(_DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       classNamePrefix: 'chart-color',
       value: currentOption,
       onChange: this.changeColor,

package/dist/components/types-dialog/index.js

@@ -45,7 +45,7 @@ const TypesDialog = _ref => {
   const onSubmit = useCallback(() => {
     onChange(selectedType);
     onToggle();
-  }, [selectedType, onToggle, onChange]);
+  }, [onChange, selectedType, onToggle]);
   return /*#__PURE__*/React.createElement(Modal, {
     isOpen: true,
     toggle: onToggle,
@@ -53,7 +53,7 @@ const TypesDialog = _ref => {
     zIndex: 1048
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     toggle: onToggle
-  }, intl.get('Edit_type')), /*#__PURE__*/React.createElement(ModalBody, {
+  }, type ? intl.get('Edit_type') : intl.get('All_charts')), /*#__PURE__*/React.createElement(ModalBody, {
     className: "sea-chart-types-body"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-types-container d-flex flex-column h-100"

package/dist/constants/common-constants.js

@@ -3,4 +3,7 @@ export const CommonEventTypes = {
   EXPAND_ROW_UPDATED: 'EXPAND_ROW_UPDATED',
   EXPAND_ROW_DELETED: 'EXPAND_ROW_DELETED',
   REFRESH_CHARTS: 'REFRESH_CHARTS'
+};
+export const EXTERNAL_EVENT = {
+  //
 };

package/dist/constants/index.js

@@ -237,6 +237,9 @@ export const TYPE_DISPLAY_COLOR_USING = {
 // default grid size, grid distance for heat map chart
 export const DEFAULT_GRID_SIZE = 12;
 export const DEFAULT_GRID_DISTANCE = 4;
+
+// default mediaUrl
+export const DEFAULT_MEDIAURL = 'https://dev.seatable.cn/media/';
 export const MONTH_MIRROR = {
   '0': 'Jan',
   '1': 'Feb',

package/dist/context.js

@@ -1,7 +1,7 @@
 import { getTableById } from 'dtable-utils';
 import CollaboratorManager from './utils/collaborator-manager';
 import { ChartDataSQL } from './utils';
-import { CHART_TYPE, CHART_TYPE_IMAGE } from './constants';
+import { CHART_TYPE, CHART_TYPE_IMAGE, DEFAULT_MEDIAURL } from './constants';
 class Context {
   constructor() {
     this.queryChartResult = async _ref => {
@@ -102,12 +102,15 @@ class Context {
       return this.api.getTableFormulaResults(table, rows, value);
     };
     this.getChartImageUrl = type => {
-      const {
-        server,
-        mediaUrl
-      } = this.settings;
       const name = CHART_TYPE_IMAGE[type];
-      return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
+      if (Reflect.ownKeys(this.settings).length !== 0) {
+        const {
+          server,
+          mediaUrl
+        } = this.settings;
+        return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
+      }
+      return "".concat(DEFAULT_MEDIAURL, "dtable-statistic/img/").concat(name);
     };
     this.api = null;
     this.settings = {};

package/dist/index.js

@@ -4,7 +4,10 @@ import { ChartModel } from './model';
 import View from './view';
 import Editor from './editor';
 import Settings, { StyleSettings, Divider } from './settings';
+import TypesDialog from './components/types-dialog';
 import { ChartDataSQL } from './utils';
 import Context from './context';
+import EventBus from './utils/event-bus';
+import { EXTERNAL_EVENT } from './constants/common-constants';
 export default View;
-export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, StyleSettings, Divider, Context, ChartModel, ChartDataSQL };
+export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, StyleSettings, Divider, Context, ChartModel, ChartDataSQL, EventBus, EXTERNAL_EVENT, TypesDialog };

package/dist/locale/lang/en.js

@@ -129,6 +129,7 @@ const en = {
   "Title": "Title",
   "Custom_title": "Custom title",
   "Edit_type": "Edit type",
+  "All_charts": "All charts",
   "Cancel": "Cancel",
   "Submit": "Submit",
   "There_are_no_statistic_results_yet": "There are no statistic results yet",

package/dist/locale/lang/zh_CN.js

@@ -129,6 +129,7 @@ const zh_CN = {
   "Title": "标题",
   "Custom_title": "自定义标题",
   "Edit_type": "编辑类型",
+  "All_charts": "所有图表",
   "Cancel": "取消",
   "Submit": "提交",
   "There_are_no_statistic_results_yet": "目前还没有统计结果",

package/dist/model/chart.js

@@ -2,13 +2,17 @@ import { generateChartConfig } from '../utils';
 import { HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE } from '../constants';
 class ChartModel {
   constructor(options, tables) {
+    // id is ChartModel id
+    // _id is chart config id
     const {
       id,
+      _id,
       style_config
     } = options;
     this.id = id;
     this.type = 'statistic';
     this.config = generateChartConfig(options, tables);
+    this.config._id = _id;
     this.style_config = style_config || {};
     this.style_config.title = {
       text: '',

package/dist/settings/advance-bar-settings/style-settings.js

@@ -1,7 +1,7 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback, useMemo, useState } from 'react';
 import { Label, FormGroup, Input } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
-import DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
@@ -163,7 +163,8 @@ const StyleSettings = _ref => {
     checked: x_axis_show_label || false,
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
-  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -188,7 +189,8 @@ const StyleSettings = _ref => {
     onKeyDown: onKeyDown
   })), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
-  }, /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,
@@ -209,7 +211,7 @@ const StyleSettings = _ref => {
     fontSizeKey: "label_font_size",
     fontSize: label_font_size,
     onChange: onDisplayValueChange
-  }), SUPPORT_STACK_VALUE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(DTableSwitch, {
+  }), SUPPORT_STACK_VALUE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(_DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: display_each_block_data,
     disabled: false,

package/dist/settings/bar-settings/style-settings.js

@@ -1,6 +1,6 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useMemo, useCallback } from 'react';
 import { Label, FormGroup } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
@@ -146,7 +146,8 @@ const StyleSettings = _ref => {
     checked: x_axis_show_label || false,
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
-  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -159,7 +160,8 @@ const StyleSettings = _ref => {
     onChange: event => onAxisLabelShowChange(event, 'y_axis_show_label')
   }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
-  }, /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

package/dist/settings/basic-number-card/data-settings.js

@@ -1,7 +1,7 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback, useMemo } from 'react';
 import { FormGroup } from 'reactstrap';
 import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import CommonDataSettings from '../widgets/common-data-settings';
 import { BaseUtils } from '../../utils';
 import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, CHART_Y_GROUP_TYPE, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
@@ -150,7 +150,8 @@ const DataSettings = _ref => {
     onChange: onChange
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: selectedSummaryTypeOption,
     options: summaryTypeOptions,
@@ -158,7 +159,8 @@ const DataSettings = _ref => {
     onChange: onSummaryTypeChange
   })), isSummarizeAField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedColumnOption,
     options: numericColumnOptions,
     onChange: onSelectColumnChange
@@ -166,7 +168,8 @@ const DataSettings = _ref => {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "dtable-plugin-stat-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedMethodOption,
     onChange: onSelectSummaryMethod,
     options: summaryMethodsOptions

package/dist/settings/combination-settings/style-settings.js

@@ -1,6 +1,6 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback, useMemo } from 'react';
 import { Label, FormGroup } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
@@ -113,7 +113,8 @@ const StyleSettings = _ref => {
     checked: x_axis_show_label || false,
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
-  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -126,7 +127,8 @@ const StyleSettings = _ref => {
     onChange: event => onAxisLabelShowChange(event, 'show_y_axis_left_label')
   }), show_y_axis_left_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
-  }, /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yLeftAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,
@@ -150,7 +152,8 @@ const StyleSettings = _ref => {
     onChange: event => onAxisLabelShowChange(event, 'show_y_axis_right_label')
   }), show_y_axis_right_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
-  }, /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yRightAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

package/dist/settings/completeness-settings/data-settings/completion-settings.js

@@ -1,5 +1,5 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React from 'react';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import { FormGroup, Label } from 'reactstrap';
 import { getTableById } from 'dtable-utils';
 import intl from '../../../intl';
@@ -34,7 +34,8 @@ export default function CompletionSettings(_ref) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Completed_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Completed_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {
@@ -45,7 +46,8 @@ export default function CompletionSettings(_ref) {
     options: options
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Target_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Target_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {

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

@@ -1,7 +1,7 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { Fragment, useCallback, useMemo } from 'react';
 import { FormGroup } from 'reactstrap';
 import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import CommonDataSettings from '../widgets/common-data-settings';
 import { BaseUtils } from '../../utils';
 import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
@@ -137,7 +137,8 @@ const DataSettings = _ref => {
     const selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
     return /*#__PURE__*/React.createElement("div", {
       className: "dtable-plugin-stat-parameter-item"
-    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(_DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedMethodOption,
       onChange: onSelectSummaryMethod,
       options: summaryMethodsOptions
@@ -156,7 +157,8 @@ const DataSettings = _ref => {
     onChange: onChange
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedTargetValueColumnOption,
     options: numericColumnOptions,
     placeholder: intl.get('Select_a_column'),
@@ -167,7 +169,8 @@ const DataSettings = _ref => {
     targetColumn: 'target_value_column'
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedTotalValueColumnOption,
     options: numericColumnOptions,
     placeholder: intl.get('Select_a_column'),

package/dist/settings/horizontal-bar-settings/data-settings.js

@@ -7,6 +7,7 @@ const DataSettings = _ref => {
   let {
     chart,
     tables,
+    dataSources,
     onChange: oldOnChange
   } = _ref;
   const onChange = useCallback(update => {
@@ -49,6 +50,7 @@ const DataSettings = _ref => {
     yLabel: 'Horizontal_axis',
     chart: newChart,
     tables: tables,
+    dataSources: dataSources,
     onChange: onChange
   });
 };

package/dist/settings/index.js

@@ -2,10 +2,10 @@ import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { eventStopPropagation } from '../utils';
 import { BaseUtils } from '../utils';
-import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
 import intl from '../intl';
-import DataSettings from './data-settings';
+import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
 import StyleSettings from './style-settings';
+import DataSettings from './data-settings';
 import Divider from './widgets/divider';
 import './index.css';
 const Settings = _ref => {
@@ -74,6 +74,7 @@ const Settings = _ref => {
   })), /*#__PURE__*/React.createElement("div", {
     className: "chart-settings-container position-relative"
   }, /*#__PURE__*/React.createElement("div", {
+    id: "sea-chart-settings-content",
     className: "chart-settings-content"
   }, type === CHART_SETTINGS_TYPE.DATA && /*#__PURE__*/React.createElement(DataSettings, {
     dataSources: dataSources,

package/dist/settings/map-settings/components/location-field-selector.js

@@ -1,6 +1,6 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React from 'react';
 import { FormGroup, Label } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import intl from '../../../intl';
 import { getColumnOptions } from '../../../utils/column-utils';
 export default function LocationFieldSelector(_ref) {
@@ -20,7 +20,8 @@ export default function LocationFieldSelector(_ref) {
       geo_column_key: option.value.key
     });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Loaction_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Loaction_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {
       return /*#__PURE__*/React.createElement("span", null, intl.get('No_column'));

package/dist/settings/map-settings/components/map-level-selector.js

@@ -1,5 +1,5 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React from 'react';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import { FormGroup } from 'reactstrap';
 import { fixGeoGranularity } from '../../../utils';
 import { MAP_LEVELS } from '../../../constants/geolocation';
@@ -36,7 +36,8 @@ export default function MapLevelSelector(_ref) {
   };
   return /*#__PURE__*/React.createElement(FormGroup, {
     className: "statistic-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, "\u5730\u56FE\u7EA7\u522B"), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, "\u5730\u56FE\u7EA7\u522B"), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: getSelectedMapLevelOption(),
     options: mapLevelOptions,
     onChange: onSelectMapLevel

package/dist/settings/map-settings/components/map-province-city-selector.js

@@ -1,5 +1,5 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { Fragment } from 'react';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import { FormGroup } from 'reactstrap';
 import { MAP_LEVEL } from '../../../constants';
 import { regions } from '../../../constants';
@@ -88,7 +88,8 @@ export default function MapProvinceCitySelector(_ref) {
     const citiesOptions = getProvinceCitiesOptions(province);
     return /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-item"
-    }, /*#__PURE__*/React.createElement(DTableSelect, {
+    }, /*#__PURE__*/React.createElement(_DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: getSelectedCity(citiesOptions),
       options: citiesOptions,
       onChange: onSelectCity,
@@ -101,7 +102,8 @@ export default function MapProvinceCitySelector(_ref) {
   const isCity = mapLevel === MAP_LEVEL.CITY;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "statistic-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement("label", null, isCity ? '城市' : '省份'), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement("label", null, isCity ? '城市' : '省份'), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: getSelectedProvinceOption(),
     options: provinceOptions,
     onChange: onSelectProvince,

package/dist/settings/map-settings/map-style-settings.js

@@ -1,7 +1,7 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useState } from 'react';
 import RcSlider from 'rc-slider';
 import { FormGroup } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import intl from '../../intl';
 import ColorGroupSelector from '../../components/color-setting/color-group-selector';
 import { LABEL_COLORS } from '../../constants/geolocation';
@@ -82,7 +82,8 @@ export default function MapStyleSetting(_ref) {
     }))));
   }))), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_direction')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_direction')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: legendDirectionOptionsMap[legend_direction],
     options: legendDirectionOptions,
     onChange: onDirectionChange

package/dist/settings/pie-settings/style-settings.js

@@ -1,6 +1,6 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback, useMemo } from 'react';
 import { Label, FormGroup } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MiniNumSlicePercent from '../widgets/mininum-slice-percent';
@@ -118,13 +118,15 @@ const StyleSettings = _ref => {
     onChange: onDisplayLabelChange
   })), display_label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_position')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_position')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedLabelOption,
     onChange: onLabelPositionChange,
     options: labelPositionOptions
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedLabelFormat,
     onChange: onLabelFormatChange,
     options: labelFormatOptions

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

@@ -1,8 +1,8 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback, useMemo } from 'react';
 import { FormGroup, Label } from 'reactstrap';
 import { CellType, COLUMNS_ICON_CONFIG, DATE_COLUMN_OPTIONS, getTableById, getTableColumnByKey } from 'dtable-utils';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
-import DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
@@ -543,14 +543,15 @@ const DataSettings = _ref => {
     className: "mt-4"
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__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.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(DTableSwitch, {
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: display_total,
     disabled: false,
@@ -564,7 +565,7 @@ const DataSettings = _ref => {
     className: "mt-4"
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(DTableSwitch, {
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: display_empty || false,
     disabled: false,

package/dist/settings/time-comparison-settings/style-settings.js

@@ -1,6 +1,6 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback, useMemo } from 'react';
 import { Label, FormGroup } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
@@ -145,7 +145,8 @@ const StyleSettings = _ref => {
     checked: x_axis_show_label || false,
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
-  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -158,7 +159,8 @@ const StyleSettings = _ref => {
     onChange: event => onAxisLabelShowChange(event, 'y_axis_show_label')
   }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
-  }, /*#__PURE__*/React.createElement(DTableSelect, {
+  }, /*#__PURE__*/React.createElement(_DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

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

@@ -1,7 +1,7 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React, { useCallback } from 'react';
 import { CellType } from 'dtable-utils';
 import { Label, FormGroup } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import intl from '../../intl';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
@@ -90,7 +90,7 @@ const DataSettings = _ref => {
     onlySupportDate: true,
     isRenderGroupBy: false,
     onGroupByChange: onXAxisColumnChange
-  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Comparison_mode')), /*#__PURE__*/React.createElement(DTableSelect, {
+  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Comparison_mode')), /*#__PURE__*/React.createElement(_DTableSelect, {
     menuPortalTarget: '#wrapper',
     value: selectedGeolocationGranularity,
     options: getOptions(),