sea-chart 0.0.59 → 0.0.60

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/settings/advance-bar-settings/data-settings.js

@@ -17,14 +17,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

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

@@ -18,14 +18,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

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

@@ -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

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;

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

@@ -36,7 +36,7 @@ export default function CompletenessDataSettings(_ref) {
     label: intl.get('Name_field'),
     selectedTableId: table_id,
     selectedColumnKey: x_axis_column_key,
-    onGroupByChange: e => onGroupbyColumnChange(e, chart, onChange)
+    onGroupByChange: column => onGroupbyColumnChange(column, chart, onChange)
   }), /*#__PURE__*/React.createElement(Switch, {
     key: "x_axis_include_empty_cells",
     checked: x_axis_include_empty_cells,
@@ -53,7 +53,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/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/mirror-settings/data-settings.js

@@ -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;

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

@@ -16,14 +16,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

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

@@ -25,12 +25,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,12 +40,12 @@ 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);
   };
@@ -57,7 +56,7 @@ export default function ScatterDataSettings(_ref) {
     });
   };
   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;

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

@@ -71,14 +71,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 +138,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

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

@@ -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

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/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/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/package.json

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