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

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

@@ -10,7 +10,6 @@ import './index.css';
 const TypesDialog = _ref => {
   let {
     type,
-    mediaUrl,
     onToggle: propsOnToggle,
     onChange
   } = _ref;
@@ -102,7 +101,7 @@ const TypesDialog = _ref => {
       }, intl.get(CHART_TYPE_SHOW[chartType])), /*#__PURE__*/React.createElement("div", {
         className: "sea-chart-type-image-container"
       }, /*#__PURE__*/React.createElement("img", {
-        src: context.getChartImageUrl(chartType, mediaUrl),
+        src: context.getChartImageUrl(chartType),
         alt: "",
         className: "sea-chart-type-demo-image"
       })));

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/constants/index.js

@@ -236,6 +236,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 => {
@@ -101,16 +101,23 @@ class Context {
     this.getTableFormulaResults = (table, rows, value) => {
       return this.api.getTableFormulaResults(table, rows, value);
     };
-    this.getChartImageUrl = (type, serverMediaUrl) => {
+    this.getChartImageUrl = type => {
+      var _this$settings, _this$settings2, _window$dtable;
       const name = CHART_TYPE_IMAGE[type];
-      if (serverMediaUrl) {
-        return "".concat(serverMediaUrl, "dtable-statistic/img/").concat(name);
+      if (((_this$settings = this.settings) === null || _this$settings === void 0 ? void 0 : _this$settings.server) && ((_this$settings2 = this.settings) === null || _this$settings2 === void 0 ? void 0 : _this$settings2.mediaUrl)) {
+        const {
+          server,
+          mediaUrl
+        } = this.settings;
+        return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
       }
-      const {
-        server,
-        mediaUrl
-      } = this.settings;
-      return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
+      if ((_window$dtable = window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) {
+        const {
+          mediaUrl
+        } = window.dtable;
+        return "".concat(mediaUrl, "dtable-statistic/img/").concat(name);
+      }
+      return "".concat(DEFAULT_MEDIAURL, "dtable-statistic/img/").concat(name);
     };
     this.api = null;
     this.settings = {};

package/dist/editor/index.js

@@ -1,8 +1,57 @@
-import React from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import View, { defaultProps, propTypes } from '../view';
 import Settings from '../settings';
+import TypesDialog from '../components/types-dialog';
+import EventBus from '../utils/event-bus';
+import { generateChartConfig } from '../utils';
+import { EXTERNAL_EVENT } from '../constants/common-constants';
 import './index.css';
 function Editor(props) {
+  const {
+    chart,
+    tables,
+    mode,
+    onChange
+  } = props;
+  const [isDialogShow, setDialogShow] = useState(false);
+  const showTypesDialog = () => {
+    setDialogShow(true);
+  };
+  const closeTypesDialog = useCallback(() => {
+    setDialogShow(false);
+  }, []);
+  const onTypeChange = useCallback(newType => {
+    const {
+      config = {}
+    } = chart || {};
+    const {
+      type: oldType
+    } = config;
+    if (newType === oldType) return;
+    const convertedChart = generateChartConfig({
+      ...config,
+      type: newType
+    }, tables);
+    onChange && onChange({
+      ...chart,
+      config: convertedChart
+    }, 'data');
+    closeTypesDialog();
+  }, [chart, closeTypesDialog, onChange, tables]);
+  useEffect(() => {
+    const unsubscribeShowTypesDialog = EventBus.subscribe(EXTERNAL_EVENT.SHOW_TYPES_DIALOG, showTypesDialog);
+    return () => {
+      unsubscribeShowTypesDialog();
+    };
+  }, []);
+  if (mode === 'new_mode') {
+    var _chart$config;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
+      type: chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type,
+      onToggle: closeTypesDialog,
+      onChange: onTypeChange
+    }));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-editor"
   }, /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, props, props.children));

package/dist/index.js

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

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 DataSettings from './data-settings';
-import StyleSettings from './style-settings';
-import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
 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 './index.css';
 const Settings = _ref => {

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/group-by.js

@@ -125,6 +125,7 @@ class GroupBy extends Component {
         selectedOption = options ? options : null;
       }
       return /*#__PURE__*/React.createElement(DTableSelect, {
+        menuPortalTarget: "#wrapper",
         value: selectedOption,
         classNamePrefix: "select-column",
         options: this.columnOptions,

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.10",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",