sea-chart 0.0.48 → 0.0.49

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

@@ -38,6 +38,7 @@ class ColorGroupSelector extends Component {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "statistic-chart-parameter-item"
     }, /*#__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

@@ -164,6 +164,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), 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')
@@ -189,6 +190,7 @@ const StyleSettings = _ref => {
   })), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

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

@@ -147,6 +147,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), 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')
@@ -160,6 +161,7 @@ const StyleSettings = _ref => {
   }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__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

@@ -151,6 +151,7 @@ const DataSettings = _ref => {
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__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,
@@ -159,6 +160,7 @@ const DataSettings = _ref => {
   })), 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, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedColumnOption,
     options: numericColumnOptions,
     onChange: onSelectColumnChange
@@ -167,6 +169,7 @@ const DataSettings = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "dtable-plugin-stat-parameter-item"
   }, /*#__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

@@ -114,6 +114,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), 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')
@@ -127,6 +128,7 @@ const StyleSettings = _ref => {
   }), show_y_axis_left_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yLeftAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,
@@ -151,6 +153,7 @@ const StyleSettings = _ref => {
   }), show_y_axis_right_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__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

@@ -35,6 +35,7 @@ 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, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {
@@ -46,6 +47,7 @@ export default function CompletionSettings(_ref) {
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__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

@@ -138,6 +138,7 @@ const DataSettings = _ref => {
     return /*#__PURE__*/React.createElement("div", {
       className: "dtable-plugin-stat-parameter-item"
     }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedMethodOption,
       onChange: onSelectSummaryMethod,
       options: summaryMethodsOptions
@@ -157,6 +158,7 @@ const DataSettings = _ref => {
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__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'),
@@ -168,6 +170,7 @@ const DataSettings = _ref => {
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__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

@@ -21,6 +21,7 @@ export default function LocationFieldSelector(_ref) {
     });
   }
   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

@@ -37,6 +37,7 @@ 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, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: getSelectedMapLevelOption(),
     options: mapLevelOptions,
     onChange: onSelectMapLevel

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

@@ -89,6 +89,7 @@ export default function MapProvinceCitySelector(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: getSelectedCity(citiesOptions),
       options: citiesOptions,
       onChange: onSelectCity,
@@ -102,6 +103,7 @@ export default function MapProvinceCitySelector(_ref) {
   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, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: getSelectedProvinceOption(),
     options: provinceOptions,
     onChange: onSelectProvince,

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

@@ -83,6 +83,7 @@ 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, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: legendDirectionOptionsMap[legend_direction],
     options: legendDirectionOptions,
     onChange: onDirectionChange

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

@@ -119,12 +119,14 @@ const StyleSettings = _ref => {
   })), 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, {
+    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, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedLabelFormat,
     onChange: onLabelFormatChange,
     options: labelFormatOptions

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

@@ -544,6 +544,7 @@ const DataSettings = _ref => {
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__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,

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

@@ -146,6 +146,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), 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,6 +160,7 @@ const StyleSettings = _ref => {
   }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

package/dist/settings/widgets/basic-summary/index.js

@@ -130,6 +130,7 @@ const BasicSummary = _ref => {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedColumnOption,
       onChange: onSummaryColumnChange,
       options: numericColumnOptions,
@@ -145,6 +146,7 @@ const BasicSummary = _ref => {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedMethodOption,
       onChange: onSummaryMethodChange,
       options: summaryMethodOptions
@@ -163,6 +165,7 @@ const BasicSummary = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, showSummaryTypes && /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: selectedSummaryTypeOption,
     onChange: onSummaryTypeChange,

package/dist/settings/widgets/common-data-settings.js

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
+import { generateChartConfig } from '../../utils';
 import StatisticType from './chart-type';
 import SelectTable from './select-table';
 import SelectView from './select-view';
 import DataFilter from './data-filter';
 import Divider from './divider';
-import { generateChartConfig } from '../../utils';
 const CommonDataSettings = _ref => {
   let {
     chart,

package/dist/settings/widgets/date-summary-item.js

@@ -95,6 +95,7 @@ class DateSummaryItem extends Component {
     }, /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item numeric-column"
     }, /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedColumnOption,
       placeholder: intl.get('Select_a_column'),
       onChange: option => this.props.onColumnOptionChange(option, index),
@@ -102,6 +103,7 @@ class DateSummaryItem extends Component {
     })), /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item summary-method"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedSummaryMethodOption,
       onChange: option => this.props.onSummaryMethodChange(option, index),
       options: this.summaryMethodOptions

package/dist/settings/widgets/group-by.js

@@ -125,6 +125,7 @@ class GroupBy extends Component {
         selectedOption = options ? options : null;
       }
       return /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#sea-chart-settings-content",
         value: selectedOption,
         classNamePrefix: "select-column",
         options: this.columnOptions,
@@ -143,6 +144,7 @@ class GroupBy extends Component {
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-4 sea-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#sea-chart-settings-content",
         value: selectedOption,
         options: this.dateGranulatesOptions,
         onChange: this.props.onGroupbyDateGranularityChange
@@ -156,6 +158,7 @@ class GroupBy extends Component {
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-4 sea-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#sea-chart-settings-content",
         value: selectedOption,
         options: this.geolocationGranulatesOptions,
         onChange: this.props.onGroupbyGeolocationGranularityChange

package/dist/settings/widgets/numeric-summary-item.js

@@ -129,6 +129,7 @@ class NumericSummaryItem extends Component {
     }, /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item numeric-column"
     }, /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedColumnOption,
       placeholder: intl.get('Select_a_column'),
       onChange: option => this.props.onColumnOptionChange(option, index, selectedColumnOption, currentAxisesIndex),
@@ -139,6 +140,7 @@ class NumericSummaryItem extends Component {
     })), /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item summary-method"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedSummaryMethodOption,
       onChange: option => this.props.onSummaryMethodChange(option, index),
       options: this.summaryMethodOptions

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

@@ -11,7 +11,7 @@ class SelectTable extends React.Component {
       } = this.props;
       const selectedOption = selectedTableId ? this.tableOptions.find(option => option.value === selectedTableId) : null;
       return /*#__PURE__*/React.createElement(DTableSelect, {
-        menuPortalTarget: '#wrapper',
+        menuPortalTarget: "#sea-chart-settings-content",
         value: selectedOption,
         options: this.tableOptions,
         onChange: this.props.onChange

package/dist/settings/widgets/select-view/index.js

@@ -38,7 +38,7 @@ const SelectView = _ref => {
   return /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-setting-item table-setting"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('View')), /*#__PURE__*/React.createElement(DTableSelect, {
-    menuPortalTarget: '#wrapper',
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedOption,
     options: viewOptions,
     onChange: onChange

package/dist/settings/widgets/summary-method-setting.js

@@ -46,6 +46,7 @@ class SummaryMethodSettings extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
       className: "chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedColumnOption,
       placeholder: intl.get('Select_a_column'),
       onChange: this.props.onColumnOptionChange,
@@ -53,6 +54,7 @@ class SummaryMethodSettings extends Component {
     })), /*#__PURE__*/React.createElement(FormGroup, {
       className: "chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedSummaryMethodOption,
       onChange: this.props.onSummaryMethodChange,
       options: this.summaryMethodOptions

package/dist/settings/widgets/summary-settings.js

@@ -2,10 +2,10 @@ import React, { Component, Fragment } from 'react';
 import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
 import { FormGroup, Label } from 'reactstrap';
 import DTableSelect from "dtable-ui-component/lib/DTableSelect";
-import NumericSummaryItem from './numeric-summary-item';
 import { BaseUtils } from '../../utils';
 import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_TYPE, CHART_SUPPORT_COLUMNS, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../constants';
 import intl from '../../intl';
+import NumericSummaryItem from './numeric-summary-item';
 class SummarySettings extends Component {
   constructor(_props) {
     super(_props);
@@ -148,6 +148,7 @@ class SummarySettings extends Component {
       return /*#__PURE__*/React.createElement(FormGroup, {
         className: "sea-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#sea-chart-settings-content",
         classNamePrefix: "chart-summary-types",
         value: selectedSummaryType,
         onChange: this.onChangeSummaryType,
@@ -187,6 +188,7 @@ class SummarySettings extends Component {
       return /*#__PURE__*/React.createElement(FormGroup, {
         className: "sea-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#sea-chart-settings-content",
         value: selectedColumnOption,
         onChange: this.onSelectSummaryColumn,
         options: this.numericColumnsOptions,
@@ -201,6 +203,7 @@ class SummarySettings extends Component {
       return /*#__PURE__*/React.createElement(FormGroup, {
         className: "sea-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#sea-chart-settings-content",
         value: selectedMethodOption,
         onChange: this.onSelectSummaryMethod,
         options: this.summaryMethodsOptions

package/dist/settings/widgets/y-axis-group-settings.js

@@ -406,6 +406,7 @@ class YAxisGroupSettings extends Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       classNamePrefix: "chart-summary-types",
       value: selectedTypeOption,
       onChange: this.onGroupTypeChange,