sea-chart 0.0.59 → 0.0.61

package/README.md

@@ -28,6 +28,8 @@
 
   **注意**：自定义API 的demo,目前不支持修改参数同步更新视图
 
+  **注意**：默认 webpack-dev-server 会打开 127.0.0.1:9001 并出错，需要手动改成 127.0.0.1:9000 才能正常访问
+
 ## 使用
   1. 安装 sea-chart
   ```

package/dist/editor/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import View, { defaultProps, propTypes } from '../view';
 import Settings from '../settings';
+import { settingsDefaultProps, settingsPropTypes } from '../settings';
 import './index.css';
 function Editor(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-editor"
   }, /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, props, props.children));
 }
-Editor.defaultProps = defaultProps;
+Editor.defaultProps = {
+  ...defaultProps,
+  ...settingsDefaultProps
+};
 export default Editor;

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

@@ -1,12 +1,11 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import YAxisGroupSettings from '../widgets/y-axis-group-settings';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
-import { eventStopPropagation } from '../../utils';
 import intl from '../../intl';
 const DataSettings = _ref => {
   let {
@@ -17,14 +16,13 @@ const DataSettings = _ref => {
     xLabel,
     yLabel
   } = _ref;
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       x_axis_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey,
       type
@@ -86,7 +84,6 @@ const DataSettings = _ref => {
     });
   }, [chart, onChange]);
   const onIncludeEmptyChange = useCallback(event => {
-    eventStopPropagation(event);
     const {
       config
     } = chart;
@@ -123,8 +120,7 @@ const DataSettings = _ref => {
     onGroupByChange: onXAxisColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "x_axis_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: x_axis_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange

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

@@ -1,13 +1,12 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import intl from '../../intl';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import DataSort from '../widgets/data-sort';
-import { eventStopPropagation } from '../../utils';
 import { CHART_SUMMARY_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, CHART_SUMMARY_TYPES, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, CHART_TYPE } from '../../constants';
 const DataSettings = _ref => {
   let {
@@ -18,14 +17,13 @@ const DataSettings = _ref => {
     yLabel,
     onChange
   } = _ref;
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       x_axis_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey,
       type
@@ -87,7 +85,6 @@ const DataSettings = _ref => {
     });
   }, [chart, onChange]);
   const onIncludeEmptyChange = useCallback(event => {
-    eventStopPropagation(event);
     const {
       config
     } = chart;
@@ -137,8 +134,7 @@ const DataSettings = _ref => {
     onGroupByChange: onXAxisColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "x_axis_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: x_axis_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange

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

@@ -1,9 +1,9 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import SummarySettings from '../widgets/summary-settings';
 import { eventStopPropagation } from '../../utils';
 import { CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, COMBINATION_POSITION } from '../../constants';
@@ -16,14 +16,13 @@ const DataSettings = _ref => {
     xLabel,
     onChange
   } = _ref;
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       x_axis_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey,
       type
@@ -85,7 +84,6 @@ const DataSettings = _ref => {
     });
   }, [chart, onChange]);
   const onIncludeEmptyChange = useCallback(event => {
-    eventStopPropagation(event);
     const {
       config
     } = chart;
@@ -239,8 +237,7 @@ const DataSettings = _ref => {
     onGroupByChange: onXAxisColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "x_axis_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: x_axis_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange

package/dist/settings/completeness-settings/callbacks/callbacks.js

@@ -1,12 +1,11 @@
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
 import { eventStopPropagation } from '../../../utils';
-const getNewUpdate = (option, chart, fieldKey) => {
+const getNewUpdate = (column, chart, fieldKey) => {
   const {
     config
   } = chart;
   const fieldValue = config[fieldKey];
-  const column = option.value;
   const {
     key
   } = column;
@@ -16,17 +15,16 @@ const getNewUpdate = (option, chart, fieldKey) => {
   };
   return update;
 };
-export const onGroupbyColumnChange = (option, chart, onChange) => {
-  const update = getNewUpdate(option, chart, 'groupby_column_key');
+export const onGroupbyColumnChange = (column, chart, onChange) => {
+  const update = getNewUpdate(column, chart, 'groupby_column_key');
   if (!update) return;
   onChange && onChange(update);
 };
 
 // select at bottom of the setting panel
-export const onColumnGroupByColumnChange = (option, chart, onChange) => {
-  const column = option.value;
+export const onColumnGroupByColumnChange = (column, chart, onChange) => {
   const type = column.type;
-  const update = getNewUpdate(option, chart, 'column_groupby_column_key');
+  const update = getNewUpdate(column, chart, 'column_groupby_column_key');
   if (!update) return;
   if (!update['column_groupby_column_key']) {
     update['date_granularity'] = null;
@@ -54,7 +52,6 @@ export const onColumnGroupByColumnChange = (option, chart, onChange) => {
   onChange && onChange(update);
 };
 export const onIncludeEmptyChange = (event, chart, onChange) => {
-  eventStopPropagation(event);
   const {
     config
   } = chart;

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

@@ -1,8 +1,8 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React from 'react';
 import CommonDataSettings from '../../widgets/common-data-settings';
 import Divider from '../../widgets/divider';
 import GroupBy from '../../widgets/group-by';
-import Switch from '../../widgets/switch';
 import intl from '../../../intl';
 import { onGroupbyColumnChange, onIncludeEmptyChange, onColumnGroupByColumnChange, onGroupbyDateGranularityChange, onGroupbyGeolocationGranularityChange } from '../callbacks/callbacks';
 import { CHART_TYPE } from '../../../constants';
@@ -36,9 +36,8 @@ export default function CompletenessDataSettings(_ref) {
     label: intl.get('Name_field'),
     selectedTableId: table_id,
     selectedColumnKey: x_axis_column_key,
-    onGroupByChange: e => onGroupbyColumnChange(e, chart, onChange)
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "x_axis_include_empty_cells",
+    onGroupByChange: column => onGroupbyColumnChange(column, chart, onChange)
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: x_axis_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: e => onIncludeEmptyChange(e, chart, onChange)
@@ -53,7 +52,7 @@ export default function CompletenessDataSettings(_ref) {
     label: intl.get('Group_by'),
     selectedTableId: table_id,
     selectedColumnKey: column_groupby_column_key,
-    onGroupByChange: e => onColumnGroupByColumnChange(e, chart, onChange),
+    onGroupByChange: column => onColumnGroupByColumnChange(column, chart, onChange),
     selectedDateGranularity: date_granularity,
     selectedGeolocationGranularity: geolocation_granularity,
     onGroupbyDateGranularityChange: e => onGroupbyDateGranularityChange(e, chart, onChange),

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

@@ -1,6 +1,6 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React from 'react';
 import { FormGroup, Label } from 'reactstrap';
-import Switch from '../widgets/switch';
 import intl from '../../intl';
 import { FontSizeSettings } from '../widgets/font-settings';
 import { PixelEditor } from '../../components';
@@ -44,8 +44,7 @@ export function CompletenessStyleSettings(_ref) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Switch, {
-    key: 'show-percentage',
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: show_percentage,
     placeholder: intl.get('Show_percentage'),
     onChange: handleShowPercentageChange
@@ -58,8 +57,7 @@ export function CompletenessStyleSettings(_ref) {
     modifyFontSize: value => onChange({
       label_font_size: value
     })
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: 'set-range-automatic',
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: y_axis_auto_range,
     placeholder: intl.get('Auto_range'),
     onChange: handleSetRangeChange

package/dist/settings/heat-map-settings/data-settings.js

@@ -13,14 +13,13 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       time_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey
     } = column;

package/dist/settings/index.js

@@ -1,18 +1,21 @@
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import intl from '../intl';
+import { settingsContext } from '../utils/contexts';
 import { eventStopPropagation } from '../utils';
 import { BaseUtils } from '../utils';
-import intl from '../intl';
 import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
-import StyleSettings from './style-settings';
-import DataSettings from './data-settings';
 import Divider from './widgets/divider';
+import DataSettings from './data-settings';
+import StyleSettings from './style-settings';
 import './index.css';
 const Settings = _ref => {
   let {
     chart,
     dataSources,
     title,
+    hideTitleStyleSetting,
     tables,
     onChange,
     children
@@ -57,7 +60,11 @@ const Settings = _ref => {
   const validTitle = useMemo(() => {
     return title || {};
   }, [title]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(settingsContext.Provider, {
+    value: {
+      hideTitleStyleSetting
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-settings"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-settings-type",
@@ -85,10 +92,20 @@ const Settings = _ref => {
     chart: chart,
     labelColorConfigs: labelColorConfigs,
     onChange: modifyStyle
-  }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children))));
+  }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children)))));
 };
-Settings.defaultProps = {
+const settingsDefaultProps = {
   dataSources: 'filter'
 };
+const settingsPropTypes = {
+  chart: PropTypes.object.isRequired,
+  tables: PropTypes.array.isRequired,
+  dataSources: PropTypes.string,
+  title: PropTypes.object,
+  hideTitleStyleSetting: PropTypes.bool,
+  children: PropTypes.any,
+  onChange: PropTypes.func.isRequired
+};
+Settings.defaultProps = settingsDefaultProps;
 export default Settings;
-export { StyleSettings, Divider };
+export { StyleSettings, Divider, settingsDefaultProps, settingsPropTypes };

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

@@ -1,10 +1,10 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
 import { CellType } from 'dtable-utils';
 import intl from '../../intl';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import { CHART_SUMMARY_TYPES } from '../../constants';
 const DataSettings = _ref => {
@@ -14,14 +14,13 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey
     } = column;
@@ -32,14 +31,13 @@ const DataSettings = _ref => {
     };
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onYAxisColumnChange = useCallback(option => {
+  const onYAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       group_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey
     } = column;
@@ -84,8 +82,7 @@ const DataSettings = _ref => {
     selectedColumnKey: column_key,
     isMirror: true,
     onGroupByChange: onXAxisColumnChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "x_axis_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: is_transpose,
     placeholder: intl.get('Transpose'),
     onChange: onTranspose

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

@@ -1,12 +1,11 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import DataSort from '../widgets/data-sort';
-import { eventStopPropagation } from '../../utils';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
 import intl from '../../intl';
 const DataSettings = _ref => {
@@ -16,14 +15,13 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const onGroupByChange = useCallback(option => {
+  const onGroupByChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       groupby_column_key
     } = config;
-    const column = option.value;
     const {
       key: newColumnKey,
       type
@@ -85,7 +83,6 @@ const DataSettings = _ref => {
     });
   }, [chart, onChange]);
   const onIncludeEmptyChange = useCallback(event => {
-    eventStopPropagation(event);
     const {
       config
     } = chart;
@@ -122,8 +119,7 @@ const DataSettings = _ref => {
     onGroupByChange: onGroupByChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "groupby_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: groupby_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange

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

@@ -3,7 +3,6 @@ import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback, useMemo } from 'react';
 import { Label, FormGroup } from 'reactstrap';
-import Switch from '../widgets/switch';
 import Divider from '../widgets/divider';
 import MiniNumSlicePercent from '../widgets/mininum-slice-percent';
 import { FontSizeSettings } from '../widgets/font-settings';
@@ -105,8 +104,7 @@ const StyleSettings = _ref => {
   const selectedLabelFormat = labelFormatOptions.find(item => item.value === label_format) || labelFormatOptions[0];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Switch, {
-    key: "show_legend",
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: show_legend || false,
     placeholder: intl.get('Display_legend'),
     onChange: onDisplayLegendChange

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

@@ -1,11 +1,10 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React from 'react';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import intl from '../../intl';
-import { eventStopPropagation } from '../../utils';
 import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
 export default function ScatterDataSettings(_ref) {
   let {
@@ -25,12 +24,11 @@ export default function ScatterDataSettings(_ref) {
     date_granularity,
     geolocation_granularity
   } = config;
-  const getNewUpdate = (option, fieldKey) => {
+  const getNewUpdate = (column, fieldKey) => {
     const {
       config
     } = chart;
     const fieldValue = config[fieldKey];
-    const column = option.value;
     const {
       key
     } = column;
@@ -41,23 +39,22 @@ export default function ScatterDataSettings(_ref) {
     return update;
   };
   const onXAxisColumnChange = e => {
-    const update = getNewUpdate(e, 'x_axis_column_key');
+    const update = getNewUpdate(column, 'x_axis_column_key');
     if (!update) return;
     onChange && onChange(update);
   };
   const onYAxisColumnChange = e => {
-    const update = getNewUpdate(e, 'y_axis_column_key');
+    const update = getNewUpdate(column, 'y_axis_column_key');
     if (!update) return;
     onChange && onChange(update);
   };
   const onIncludeEmptyChange = e => {
-    eventStopPropagation(e);
     onChange && onChange({
       x_axis_include_empty_cells: !x_axis_include_empty_cells
     });
   };
   const onColumnGroupbyColumnChange = e => {
-    const update = getNewUpdate(e, 'column_groupby_column_key');
+    const update = getNewUpdate(column, 'column_groupby_column_key');
     if (!update) return;
     if (!update['column_groupby_column_key']) {
       update['date_granularity'] = null;
@@ -119,8 +116,7 @@ export default function ScatterDataSettings(_ref) {
     selectedTableId: table_id,
     selectedColumnKey: x_axis_column_key,
     onGroupByChange: onXAxisColumnChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "x_axis_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: x_axis_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange

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

@@ -1,15 +1,14 @@
-import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 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 { CellType, COLUMNS_ICON_CONFIG, 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 Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import NumericSummaryItem from '../widgets/numeric-summary-item';
-import { eventStopPropagation, BaseUtils } from '../../utils';
+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 => {
@@ -71,14 +70,13 @@ const DataSettings = _ref => {
     }];
     return options;
   }, []);
-  const onGroupByColumnChange = useCallback(option => {
+  const onGroupByColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       groupby_column_key
     } = config;
-    const column = option.value;
     const {
       key: newColumnKey,
       type
@@ -139,14 +137,13 @@ const DataSettings = _ref => {
       groupby_geolocation_granularity: value
     });
   }, [chart, onChange]);
-  const onColumnGroupByColumnChange = useCallback(option => {
+  const onColumnGroupByColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       column_groupby_column_key
     } = config;
-    const column = option.value;
     const {
       key: newColumnKey,
       type
@@ -209,7 +206,6 @@ const DataSettings = _ref => {
     });
   }, [chart, onChange]);
   const onIncludeEmptyChange = useCallback(event => {
-    eventStopPropagation(event);
     const {
       config
     } = chart;
@@ -520,8 +516,7 @@ const DataSettings = _ref => {
     onGroupByChange: onGroupByColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/React.createElement(Switch, {
-    key: "groupby_include_empty_cells",
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: groupby_include_empty_cells,
     placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange

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

@@ -1,10 +1,10 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
 import { FormGroup, Label } from 'reactstrap';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
 import CommonDataSettings from '../widgets/common-data-settings';
 import Divider from '../widgets/divider';
 import GroupBy from '../widgets/group-by';
-import Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import TimePicker from '../widgets/time-picker';
 import { eventStopPropagation } from '../../utils';
@@ -18,14 +18,13 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       x_axis_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey,
       type
@@ -167,7 +166,7 @@ const DataSettings = _ref => {
     selectedTableId: table_id,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Switch, {
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: display_increase || false,
     placeholder: intl.get('Display_increase'),
     onChange: onDisplayIncreaseChange

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

@@ -35,14 +35,13 @@ const DataSettings = _ref => {
       };
     });
   }, []);
-  const onXAxisColumnChange = useCallback(option => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
     const {
       date_column_key
     } = config;
-    const column = option.value;
     const {
       key: newXAxisColumnKey
     } = column;

package/dist/settings/widgets/display-values-settings/index.js

@@ -3,8 +3,6 @@ import React, { useCallback } from 'react';
 import { FormGroup } from 'reactstrap';
 import { FontSizeSettings } from '../font-settings';
 import intl from '../../../intl';
-import { eventStopPropagation } from '../../../utils';
-import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../../constants';
 import './index.css';
 const DisplayValuesSettings = _ref => {
   let {

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

@@ -1,4 +1,5 @@
 import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Label, FormGroup } from 'reactstrap';
@@ -89,11 +90,11 @@ class GroupBy extends Component {
         return {
           value: column,
           label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-            className: "sea-chart-column-icon"
+            className: "header-icon"
           }, /*#__PURE__*/React.createElement("i", {
             className: COLUMNS_ICON_CONFIG[column.type]
           })), /*#__PURE__*/React.createElement("span", {
-            className: 'select-module select-module-name ml-0'
+            className: 'select-option-name'
           }, column.name))
         };
       });
@@ -124,16 +125,15 @@ class GroupBy extends Component {
         const options = this.columnOptions.find(option => option.value.key === selectedColumnKey);
         selectedOption = options ? options : null;
       }
-      return /*#__PURE__*/React.createElement(_DTableSelect, {
-        menuPortalTarget: "#sea-chart-settings-content",
+      return /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
+        isLocked: false,
         value: selectedOption,
-        classNamePrefix: "select-column",
         options: this.columnOptions,
-        onChange: this.props.onGroupByChange,
-        placeholder: intl.get('Select_field'),
-        noOptionsMessage: () => {
-          return /*#__PURE__*/React.createElement("span", null, intl.get('No_column'));
-        }
+        onSelectOption: this.props.onGroupByChange,
+        isInModal: true,
+        searchable: true,
+        searchPlaceholder: intl.get('Select_field'),
+        noOptionsPlaceholder: intl.get('No_column')
       });
     };
     this.renderGroupbyDateGranulates = () => {

package/dist/settings/widgets/stack.js

@@ -1,7 +1,7 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { Component } from 'react';
 import { Label, FormGroup } from 'reactstrap';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
-import Switch from './switch';
 import { eventStopPropagation } from '../../utils';
 import intl from '../../intl';
 class Stack extends Component {
@@ -40,7 +40,7 @@ class Stack extends Component {
     if (!columnGroupbyColumn) return null;
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
-    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Display_mode')), /*#__PURE__*/React.createElement(Switch, {
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Display_mode')), /*#__PURE__*/React.createElement(_DTableSwitch, {
       checked: y_axis_use_stack || false,
       placeholder: intl.get('Stack'),
       onChange: this.onUseStackChange

package/dist/settings/widgets/title-settings/index.js

@@ -1,11 +1,15 @@
 import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
-import React, { useMemo } from 'react';
+import React, { useMemo, useContext } from 'react';
+import { settingsContext } from '../../../utils/contexts';
 import { FontSizeSettings, FontWeightSettings, FontColorSettings } from '../font-settings';
 import TextHorizontalSettings from '../text-horizontal-settings';
 import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR, DAFAULT_TREND_CHART_TITLE_FONT_SIZE, CHART_TYPE } from '../../../constants';
 import intl from '../../../intl';
 import TitleText from './title-text';
 const TitleSetting = props => {
+  const {
+    hideTitleStyleSetting
+  } = useContext(settingsContext);
   const initialTitle = useMemo(() => {
     return props.title || {};
   }, [props.title]);
@@ -58,7 +62,7 @@ const TitleSetting = props => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleText, {
       text: initialTitle.text,
       modifyText: modifyText
-    }), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    }), !hideTitleStyleSetting && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeSettings, {
       className: 'mt-3',
       fontSize: initialTitle.font_size,
       defaultFontSize: isCard ? DAFAULT_TREND_CHART_TITLE_FONT_SIZE : DEFAULT_CHART_TITLE_FONT_SIZE,
@@ -78,7 +82,7 @@ const TitleSetting = props => {
       value: initialTitle.horizontal_align,
       defaultValue: HORIZONTAL_ALIGN.LEFT,
       onChange: modifyHorizontalAlign
-    }));
+    })));
   };
   return /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
     title: intl.get('Title'),

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

@@ -278,8 +278,7 @@ class YAxisGroupSettings extends Component {
         summary_columns: [...summary_columns]
       });
     };
-    this.onGroupByChange = option => {
-      const column = option.value;
+    this.onGroupByChange = column => {
       const {
         chart
       } = this.props;

package/dist/utils/chart-utils/original-data-utils/completeness-calculator.js

@@ -175,7 +175,7 @@ async function calculator(chart, value, _ref) {
         if (currentValue < targetValue) {
           result.unshift({
             name: label,
-            group_label: groupLabel,
+            groupby: groupLabel,
             value: currentValue,
             color,
             type: 'completed',
@@ -184,7 +184,7 @@ async function calculator(chart, value, _ref) {
             rows
           }, {
             name: label,
-            group_label: groupLabel,
+            groupby: groupLabel,
             value: targetValue - currentValue,
             color,
             type: 'uncompleted',
@@ -195,7 +195,7 @@ async function calculator(chart, value, _ref) {
         } else {
           result.unshift({
             name: label,
-            group_label: groupLabel,
+            groupby: groupLabel,
             value: currentValue,
             color,
             type: 'completed',

package/dist/utils/contexts.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const settingsContext = React.createContext('');

package/dist/view/index.js

@@ -218,24 +218,29 @@ class View extends React.PureComponent {
   }
 }
 const propTypes = {
+  // style
+  className: PropTypes.string,
   canvasStyle: PropTypes.object,
+  globalTheme: PropTypes.string,
+  // light or dark
+  chartColorTheme: PropTypes.string,
+  hideTitle: PropTypes.bool,
+  render: PropTypes.func,
+  // User-defined rendering content
+
+  // data
   chart: PropTypes.object.isRequired,
+  tables: PropTypes.array.isRequired,
   api: PropTypes.object.isRequired,
+  config: PropTypes.object,
+  collaboratorManager: PropTypes.object,
   collaborators: PropTypes.array,
   departments: PropTypes.array,
   dtableStoreValue: PropTypes.object,
-  tables: PropTypes.array.isRequired,
-  className: PropTypes.string,
-  collaboratorManager: PropTypes.object,
-  hideTitle: PropTypes.bool,
-  globalTheme: PropTypes.string,
-  // light or dark
-  chartColorTheme: PropTypes.string,
+  isCalculateByView: PropTypes.bool,
+  // event
   integratedEventTypes: PropTypes.object,
   integratedEventBus: PropTypes.object,
-  isCalculateByView: PropTypes.bool,
-  render: PropTypes.func,
-  // User-defined rendering content
   onViewRef: PropTypes.func
 };
 const defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",