sea-chart 0.0.41-beta.6 → 0.0.41-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/context.js +3 -2
  2. package/dist/editor/index.js +50 -5
  3. package/dist/settings/index.js +5 -43
  4. package/dist/settings/widgets/chart-type/index.js +29 -7
  5. package/package.json +1 -1
package/dist/context.js CHANGED
@@ -102,15 +102,16 @@ class Context {
102
102
  return this.api.getTableFormulaResults(table, rows, value);
103
103
  };
104
104
  this.getChartImageUrl = type => {
105
+ var _this$settings, _this$settings2, _window$dtable;
105
106
  const name = CHART_TYPE_IMAGE[type];
106
- if (this.settings) {
107
+ 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)) {
107
108
  const {
108
109
  server,
109
110
  mediaUrl
110
111
  } = this.settings;
111
112
  return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
112
113
  }
113
- if (window.dtable) {
114
+ if ((_window$dtable = window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) {
114
115
  const {
115
116
  mediaUrl
116
117
  } = window.dtable;
package/dist/editor/index.js CHANGED
@@ -1,16 +1,61 @@
1
- import React from 'react';
1
+ import React, { useEffect, useState, useCallback } from 'react';
2
2
  import View, { defaultProps, propTypes } from '../view';
3
3
  import Settings from '../settings';
4
+ import TypesDialog from '../components/types-dialog';
5
+ import EventBus from '../utils/event-bus';
6
+ import { generateChartConfig } from '../utils';
7
+ import { EXTERNAL_EVENT } from '../constants/common-constants';
4
8
  import './index.css';
5
9
  function Editor(props) {
6
10
  const {
7
- isHideView
11
+ chart,
12
+ tables,
13
+ mode,
14
+ onChange
8
15
  } = props;
16
+ const [isDialogShow, setDialogShow] = useState(false);
17
+ const showTypesDialog = () => {
18
+ setDialogShow(true);
19
+ };
20
+ const closeTypesDialog = useCallback(() => {
21
+ setDialogShow(false);
22
+ }, []);
23
+ const onTypeChange = useCallback(newType => {
24
+ const {
25
+ config = {}
26
+ } = chart || {};
27
+ const {
28
+ type: oldType
29
+ } = config;
30
+ if (newType === oldType) return;
31
+ const convertedChart = generateChartConfig({
32
+ ...config,
33
+ type: newType
34
+ }, tables);
35
+ onChange && onChange({
36
+ ...chart,
37
+ config: convertedChart
38
+ }, 'data');
39
+ closeTypesDialog();
40
+ }, [chart, closeTypesDialog, onChange, tables]);
41
+ useEffect(() => {
42
+ const unsubscribeShowTypesDialog = EventBus.subscribe(EXTERNAL_EVENT.SHOW_TYPES_DIALOG, showTypesDialog);
43
+ console.log('editor-mount');
44
+ return () => {
45
+ unsubscribeShowTypesDialog();
46
+ };
47
+ }, []);
48
+ if (mode === 'new_mode') {
49
+ var _chart$config;
50
+ return /*#__PURE__*/React.createElement(React.Fragment, null, isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
51
+ type: chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type,
52
+ onToggle: closeTypesDialog,
53
+ onChange: onTypeChange
54
+ }));
55
+ }
9
56
  return /*#__PURE__*/React.createElement("div", {
10
57
  className: "sea-chart-editor"
11
- }, !isHideView && /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, Object.assign({}, props, {
12
- isHideSettings: isHideView
13
- }), props.children));
58
+ }, /*#__PURE__*/React.createElement(View, props), /*#__PURE__*/React.createElement(Settings, props, props.children));
14
59
  }
15
60
  Editor.defaultProps = defaultProps;
16
61
  export default Editor;
package/dist/settings/index.js CHANGED
@@ -1,33 +1,24 @@
1
1
  import React, { useCallback, useMemo, useState, useEffect } from 'react';
2
2
  import classnames from 'classnames';
3
3
  import { eventStopPropagation } from '../utils';
4
- import { BaseUtils, generateChartConfig } from '../utils';
5
- import TypesDialog from '../components/types-dialog';
4
+ import { BaseUtils } from '../utils';
6
5
  import intl from '../intl';
7
6
  import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
8
- import EventBus from '../utils/event-bus';
9
- import { EXTERNAL_EVENT } from '../constants/common-constants';
10
7
  import StyleSettings from './style-settings';
11
8
  import DataSettings from './data-settings';
12
9
  import Divider from './widgets/divider';
13
10
  import './index.css';
14
11
  const Settings = _ref => {
15
- var _chart$config;
16
12
  let {
17
13
  chart,
18
14
  dataSources,
19
15
  title,
20
16
  tables,
21
17
  onChange,
22
- children,
23
- isHideSettings = false
18
+ children
24
19
  } = _ref;
25
20
  const [type, setType] = useState(CHART_SETTINGS_TYPE.DATA);
26
21
  const [labelColorConfigs, setLabelColorConfigs] = useState([]);
27
- const [isDialogShow, setDialogShow] = useState(false);
28
- const showTypesDialog = () => {
29
- setDialogShow(true);
30
- };
31
22
  useEffect(() => {
32
23
  var _window$dtable;
33
24
  const systemCustomColors = ((_window$dtable = window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.customColors) || [];
@@ -39,10 +30,6 @@ const Settings = _ref => {
39
30
  color: customColor.color.toUpperCase()
40
31
  }))];
41
32
  setLabelColorConfigs(colorConfigs);
42
- const unsubscribeShowTypesDialog = EventBus.subscribe(EXTERNAL_EVENT.SHOW_TYPES_DIALOG, showTypesDialog);
43
- return () => {
44
- unsubscribeShowTypesDialog();
45
- };
46
33
  }, []);
47
34
  const onChartSettingsTypeChange = useCallback(event => {
48
35
  eventStopPropagation(event);
@@ -70,27 +57,7 @@ const Settings = _ref => {
70
57
  const validTitle = useMemo(() => {
71
58
  return title || {};
72
59
  }, [title]);
73
- const closeTypesDialog = useCallback(() => {
74
- setDialogShow(false);
75
- }, []);
76
- const onTypeChange = useCallback(newType => {
77
- const {
78
- config
79
- } = chart;
80
- const {
81
- type: oldType
82
- } = config;
83
- if (newType === oldType) return;
84
- const convertedChart = generateChartConfig({
85
- ...config,
86
- type: newType
87
- }, tables);
88
- onChange && onChange({
89
- ...chart,
90
- config: convertedChart
91
- }, type);
92
- }, [chart, onChange, tables, type]);
93
- return /*#__PURE__*/React.createElement(React.Fragment, null, !isHideSettings && /*#__PURE__*/React.createElement("div", {
60
+ return /*#__PURE__*/React.createElement("div", {
94
61
  className: "sea-chart-settings"
95
62
  }, /*#__PURE__*/React.createElement("div", {
96
63
  className: "sea-chart-settings-type",
@@ -117,15 +84,10 @@ const Settings = _ref => {
117
84
  chart: chart,
118
85
  labelColorConfigs: labelColorConfigs,
119
86
  onChange: modifyStyle
120
- }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children)))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
121
- type: chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type,
122
- onToggle: closeTypesDialog,
123
- onChange: onTypeChange
124
- }));
87
+ }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children))));
125
88
  };
126
89
  Settings.defaultProps = {
127
- dataSources: 'filter',
128
- isHideSettings: false
90
+ dataSources: 'filter'
129
91
  };
130
92
  export default Settings;
131
93
  export { StyleSettings, Divider };
package/dist/settings/widgets/chart-type/index.js CHANGED
@@ -1,20 +1,38 @@
1
- import React, { useCallback } from 'react';
1
+ import React, { useCallback, useState } from 'react';
2
2
  import { Label, FormGroup } from 'reactstrap';
3
3
  import { CHART_TYPE_SHOW } from '../../../constants';
4
4
  import { eventStopPropagation } from '../../../utils';
5
5
  import intl from '../../../intl';
6
- import { Icon } from '../../../components';
7
- import EventBus from '../../../utils/event-bus';
8
- import { EXTERNAL_EVENT } from '../../../constants/common-constants';
6
+ import { Icon, TypesDialog } from '../../../components';
9
7
  import './index.css';
10
8
  const ChartType = _ref => {
11
9
  let {
12
- chart
10
+ chart,
11
+ generateChartConfig,
12
+ onChange
13
13
  } = _ref;
14
+ const [isDialogShow, setDialogShow] = useState(false);
14
15
  const openTypesDialog = useCallback(event => {
15
16
  eventStopPropagation(event);
16
- EventBus.dispatch(EXTERNAL_EVENT.SHOW_TYPES_DIALOG);
17
+ setDialogShow(true);
17
18
  }, []);
19
+ const closeTypesDialog = useCallback(() => {
20
+ setDialogShow(false);
21
+ }, []);
22
+ const onTypeChange = useCallback(type => {
23
+ const {
24
+ config
25
+ } = chart;
26
+ const {
27
+ type: oldType
28
+ } = config;
29
+ if (type === oldType) return;
30
+ const convertedChart = generateChartConfig({
31
+ ...config,
32
+ type
33
+ });
34
+ onChange && onChange(convertedChart);
35
+ }, [chart, generateChartConfig, onChange]);
18
36
  const {
19
37
  config
20
38
  } = chart;
@@ -32,6 +50,10 @@ const ChartType = _ref => {
32
50
  }, /*#__PURE__*/React.createElement(Icon, {
33
51
  symbol: "type-change",
34
52
  className: "sea-chart-type-icon"
35
- })))));
53
+ })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
54
+ type: type,
55
+ onToggle: closeTypesDialog,
56
+ onChange: onTypeChange
57
+ }));
36
58
  };
37
59
  export default ChartType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sea-chart",
3
- "version": "0.0.41-beta.6",
3
+ "version": "0.0.41-beta.8",
4
4
  "main": "./dist/index.js",
5
5
  "dependencies": {
6
6
  "@antv/data-set": "0.11.8",