sea-chart 0.0.41-beta.0 → 0.0.41-beta.1

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 = {
+  SHOW_TYPES_DIALOG: 'show_types_dialog'
 };

package/dist/index.js

@@ -7,5 +7,7 @@ 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, TypesDialog, StyleSettings, Divider, Context, ChartModel, ChartDataSQL };
+export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, TypesDialog, StyleSettings, Divider, Context, ChartModel, ChartDataSQL, EventBus, EXTERNAL_EVENT };

package/dist/settings/index.js

@@ -1,11 +1,14 @@
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { eventStopPropagation } from '../utils';
-import { BaseUtils } from '../utils';
-import DataSettings from './data-settings';
-import StyleSettings from './style-settings';
-import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
+import { BaseUtils, generateChartConfig } from '../utils';
+import TypesDialog from '../components/types-dialog';
 import intl from '../intl';
+import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
+import EventBus from '../utils/event-bus';
+import { EXTERNAL_EVENT } from '../constants/common-constants';
+import StyleSettings from './style-settings';
+import DataSettings from './data-settings';
 import Divider from './widgets/divider';
 import './index.css';
 const Settings = _ref => {
@@ -19,6 +22,10 @@ const Settings = _ref => {
   } = _ref;
   const [type, setType] = useState(CHART_SETTINGS_TYPE.DATA);
   const [labelColorConfigs, setLabelColorConfigs] = useState([]);
+  const [isDialogShow, setDialogShow] = useState(false);
+  const showTypesDialog = () => {
+    setDialogShow(true);
+  };
   useEffect(() => {
     var _window$dtable;
     const systemCustomColors = ((_window$dtable = window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.customColors) || [];
@@ -30,6 +37,10 @@ const Settings = _ref => {
       color: customColor.color.toUpperCase()
     }))];
     setLabelColorConfigs(colorConfigs);
+    const unsubscribeShowTypesDialog = EventBus.subscribe(EXTERNAL_EVENT.SHOW_TYPES_DIALOG, showTypesDialog);
+    return () => {
+      unsubscribeShowTypesDialog();
+    };
   }, []);
   const onChartSettingsTypeChange = useCallback(event => {
     eventStopPropagation(event);
@@ -57,6 +68,23 @@ const Settings = _ref => {
   const validTitle = useMemo(() => {
     return title || {};
   }, [title]);
+  const closeTypesDialog = useCallback(() => {
+    setDialogShow(false);
+  }, []);
+  const onTypeChange = useCallback(type => {
+    const {
+      config
+    } = chart;
+    const {
+      type: oldType
+    } = config;
+    if (type === oldType) return;
+    const convertedChart = generateChartConfig({
+      ...config,
+      type
+    }, tables);
+    onChange && onChange(convertedChart);
+  }, [chart, onChange, tables]);
   return /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-settings"
   }, /*#__PURE__*/React.createElement("div", {
@@ -84,7 +112,11 @@ 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))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
+    type: chart.config.type,
+    onToggle: closeTypesDialog,
+    onChange: onTypeChange
+  }));
 };
 Settings.defaultProps = {
   dataSources: 'filter'

package/dist/settings/widgets/chart-type/index.js

@@ -1,38 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Label, FormGroup } from 'reactstrap';
 import { CHART_TYPE_SHOW } from '../../../constants';
 import { eventStopPropagation } from '../../../utils';
 import intl from '../../../intl';
-import { Icon, TypesDialog } from '../../../components';
+import { Icon } from '../../../components';
+import EventBus from '../../../utils/event-bus';
+import { EXTERNAL_EVENT } from '../../../constants/common-constants';
 import './index.css';
 const ChartType = _ref => {
   let {
-    chart,
-    generateChartConfig,
-    onChange
+    chart
   } = _ref;
-  const [isDialogShow, setDialogShow] = useState(false);
   const openTypesDialog = useCallback(event => {
     eventStopPropagation(event);
-    setDialogShow(true);
+    EventBus.dispatch(EXTERNAL_EVENT.SHOW_TYPES_DIALOG);
   }, []);
-  const closeTypesDialog = useCallback(() => {
-    setDialogShow(false);
-  }, []);
-  const onTypeChange = useCallback(type => {
-    const {
-      config
-    } = chart;
-    const {
-      type: oldType
-    } = config;
-    if (type === oldType) return;
-    const convertedChart = generateChartConfig({
-      ...config,
-      type
-    });
-    onChange && onChange(convertedChart);
-  }, [chart, generateChartConfig, onChange]);
   const {
     config
   } = chart;
@@ -50,10 +32,6 @@ const ChartType = _ref => {
   }, /*#__PURE__*/React.createElement(Icon, {
     symbol: "type-change",
     className: "sea-chart-type-icon"
-  })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
-    type: type,
-    onToggle: closeTypesDialog,
-    onChange: onTypeChange
-  }));
+  })))));
 };
 export default ChartType;

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

@@ -4,7 +4,6 @@ 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,
@@ -40,16 +39,11 @@ const CommonDataSettings = _ref => {
       view_id: selectedViewId
     });
   }, [chart, onChange]);
-  const generateConfig = useCallback(config => {
-    return generateChartConfig(config, tables);
-  }, [tables]);
   const {
     table_id
   } = chart.config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticType, {
-    chart: chart,
-    generateChartConfig: generateConfig,
-    onChange: onChange
+    chart: chart
   }), /*#__PURE__*/React.createElement(SelectTable, {
     tables: tables,
     selectedTableId: table_id,

package/dist/utils/event-bus.js

@@ -0,0 +1,28 @@
+class EventBus {
+  constructor() {
+    this.subscribers = {};
+  }
+  subscribe(type, handler) {
+    if (!this.subscribers[type]) {
+      this.subscribers[type] = [];
+    }
+    const handlers = this.subscribers[type];
+    handlers.push(handler);
+    return () => {
+      const index = handlers.indexOf(handler);
+      if (index > -1) {
+        handlers.splice(index, 1);
+      }
+    };
+  }
+  dispatch(type) {
+    for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      data[_key - 1] = arguments[_key];
+    }
+    const handlers = this.subscribers[type];
+    if (Array.isArray(handlers)) {
+      handlers.forEach(handler => handler(...data));
+    }
+  }
+}
+export default new EventBus();

package/package.json

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