Skip to content

Commit 95d2973

Browse files
authored
Merge pull request #495 from raheeliftikhar5/echarts-events
Echarts map events
2 parents 0a2761a + 1ecf606 commit 95d2973

File tree

7 files changed

+138
-38
lines changed

7 files changed

+138
-38
lines changed

client/packages/lowcoder-comps/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "0.0.17",
3+
"version": "0.0.18",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

+69-22
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import {
2727
withViewFn,
2828
ThemeContext,
2929
chartColorPalette,
30-
loadScript,
3130
} from "lowcoder-sdk";
3231
import { getEchartsLocale, trans } from "i18n/comps";
3332
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -49,7 +48,13 @@ let ChartTmpComp = (function () {
4948
ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
5049
const apiKey = comp.children.mapApiKey.getView();
5150
const mode = comp.children.mode.getView();
52-
const onEvent = comp.children.onEvent.getView();
51+
const mapCenterPosition = {
52+
lng: comp.children.mapCenterLng.getView(),
53+
lat: comp.children.mapCenterLat.getView(),
54+
}
55+
const mapZoomlevel = comp.children.mapZoomLevel.getView();
56+
const onUIEvent = comp.children.onUIEvent.getView();
57+
const onMapEvent = comp.children.onMapEvent.getView();
5358

5459
const echartsCompRef = useRef<ReactECharts | null>();
5560
const [chartSize, setChartSize] = useState<ChartSize>();
@@ -81,15 +86,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
8186
//log.log("chart select change", param);
8287
if (param.fromAction === "select") {
8388
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
84-
onEvent("select");
89+
onUIEvent("select");
8590
} else if (param.fromAction === "unselect") {
8691
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
87-
onEvent("unselect");
92+
onUIEvent("unselect");
8893
}
8994
});
9095
// unbind
9196
return () => echartsCompInstance?.off("selectchanged");
92-
}, [mode, onEvent]);
97+
}, [mode, onUIEvent]);
9398

9499
const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
95100
const option = useMemo(() => {
@@ -103,36 +108,48 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
103108
return mapScriptLoaded || window?.google;
104109
}, [mapScriptLoaded])
105110

106-
const loadGoogleMapsData = () => {
107-
setTimeout(() => {
108-
const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
109-
if (!echartsCompInstance) {
110-
return _.noop;
111-
}
111+
const loadGoogleMapData = () => {
112+
const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
113+
if (!echartsCompInstance) {
114+
return _.noop;
115+
}
112116

113-
let mapInstance = undefined;
114-
mapInstance = echartsCompInstance?.getModel()?.getComponent("gmap")?.getGoogleMap();
115-
comp.dispatch(changeChildAction("mapInstance", mapInstance));
116-
}, 500)
117+
comp.children.mapInstance.dispatch(changeValueAction(echartsCompInstance))
118+
onMapEvent('mapReady')
117119
}
118120

121+
const handleOnMapScriptLoad = () => {
122+
setMapScriptLoaded(true);
123+
loadGoogleMapData();
124+
}
125+
119126
useEffect(() => {
120127
if( mode !== 'map') {
121-
comp.dispatch(changeChildAction("mapInstance", undefined));
128+
comp.children.mapInstance.dispatch(changeValueAction(undefined))
122129
return;
123130
}
124131

125132
const gMapScript = loadGoogleMapsScript(apiKey);
126133
if(isMapScriptLoaded) {
127-
loadGoogleMapsData();
134+
handleOnMapScriptLoad();
128135
return;
129136
}
130-
gMapScript.addEventListener('load', function () {
131-
setMapScriptLoaded(true);
132-
loadGoogleMapsData();
133-
});
137+
gMapScript.addEventListener('load', handleOnMapScriptLoad);
138+
return () => {
139+
gMapScript.removeEventListener('load', handleOnMapScriptLoad);
140+
}
134141
}, [mode, apiKey, option])
135142

143+
useEffect(() => {
144+
if(mode !== 'map') return;
145+
onMapEvent('centerPositionChange');
146+
}, [mode, mapCenterPosition.lat, mapCenterPosition.lng])
147+
148+
useEffect(() => {
149+
if(mode !== 'map') return;
150+
onMapEvent('zoomLevelChange');
151+
}, [mode, mapZoomlevel])
152+
136153
return (
137154
<ReactResizeDetector
138155
onResize={(w, h) => {
@@ -287,8 +304,38 @@ ChartComp = withMethodExposing(ChartComp, [
287304
name: "getMapInstance",
288305
},
289306
execute: (comp) => {
290-
return comp.children.mapInstance.getView()
307+
return new Promise(resolve => {
308+
let intervalCount = 0;
309+
const mapInstanceInterval = setInterval(() => {
310+
const instance = comp.children.mapInstance.getView();
311+
const mapInstance = instance?.getModel()?.getComponent("gmap")?.getGoogleMap()
312+
if(mapInstance || intervalCount === 10) {
313+
clearInterval(mapInstanceInterval)
314+
resolve(mapInstance)
315+
}
316+
intervalCount++;
317+
}, 1000);
318+
})
319+
}
320+
},
321+
{
322+
method: {
323+
name: "getMapZoomLevel",
291324
},
325+
execute: (comp) => {
326+
return comp.children.mapZoomLevel.getView();
327+
}
328+
},
329+
{
330+
method: {
331+
name: "getMapCenterPosition",
332+
},
333+
execute: (comp) => {
334+
return Promise.resolve({
335+
lng: comp.children.mapCenterLng.getView(),
336+
lat: comp.children.mapCenterLat.getView(),
337+
});
338+
}
292339
},
293340
])
294341

client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx

+40-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
import { jsonControl, JSONObject, stateComp, toJSONObjectArray, toObject } from "lowcoder-sdk";
2-
import { withDefault, BooleanControl, StringControl, NumberControl, JSONObjectControl, FunctionControl } from "lowcoder-sdk";
3-
import { dropdownControl } from "lowcoder-sdk";
4-
import { eventHandlerControl } from "lowcoder-sdk";
5-
import { valueComp, withType } from "lowcoder-sdk";
6-
import { ValueFromOption } from "lowcoder-sdk";
7-
import { uiChildren } from "lowcoder-sdk";
1+
import {
2+
jsonControl,
3+
JSONObject,
4+
stateComp,
5+
toJSONObjectArray,
6+
toObject,
7+
BoolControl,
8+
withDefault,
9+
StringControl,
10+
NumberControl,
11+
FunctionControl,
12+
dropdownControl,
13+
eventHandlerControl,
14+
valueComp,
15+
withType,
16+
ValueFromOption,
17+
uiChildren,
18+
} from "lowcoder-sdk";
819
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
920
import { BarChartConfig } from "./chartConfigs/barChartConfig";
1021
import { XAxisConfig, YAxisConfig } from "./chartConfigs/cartesianAxisConfig";
@@ -50,7 +61,7 @@ const chartModeOptions = [
5061
},
5162
] as const;
5263

53-
export const EventOptions = [
64+
export const UIEventOptions = [
5465
{
5566
label: trans("chart.select"),
5667
value: "select",
@@ -64,6 +75,24 @@ export const EventOptions = [
6475
},
6576
] as const;
6677

78+
export const MapEventOptions = [
79+
{
80+
label: trans("chart.mapReady"),
81+
value: "mapReady",
82+
description: trans("chart.mapReadyDesc"),
83+
},
84+
{
85+
label: trans("chart.zoomLevelChange"),
86+
value: "zoomLevelChange",
87+
description: trans("chart.zoomLevelChangeDesc"),
88+
},
89+
{
90+
label: trans("chart.centerPositionChange"),
91+
value: "centerPositionChange",
92+
description: trans("chart.centerPositionChangeDesc"),
93+
},
94+
] as const;
95+
6796
export const XAxisDirectionOptions = [
6897
{
6998
label: trans("chart.horizontal"),
@@ -220,8 +249,8 @@ export const chartUiModeChildren = {
220249
xConfig: XAxisConfig,
221250
yConfig: YAxisConfig,
222251
legendConfig: LegendConfig,
223-
onEvent: eventHandlerControl(EventOptions),
224252
chartConfig: ChartOptionComp,
253+
onUIEvent: eventHandlerControl(UIEventOptions),
225254
};
226255

227256
const chartMapModeChildren = {
@@ -232,6 +261,8 @@ const chartMapModeChildren = {
232261
mapCenterLng: withDefault(NumberControl, 15.932644),
233262
mapCenterLat: withDefault(NumberControl, 50.942063),
234263
mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
264+
onMapEvent: eventHandlerControl(MapEventOptions),
265+
showCharts: withDefault(BoolControl, true),
235266
}
236267

237268
export const chartChildrenMap = {

client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export function chartPropertyView(
105105
dataIndex={(s) => s.getView().dataIndex}
106106
/>
107107
</Section>
108-
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
108+
<Section name={sectionNames.interaction}>{children.onUIEvent.getPropertyView()}</Section>
109109
<Section name={sectionNames.layout}>
110110
{children.title.propertyView({ label: trans("chart.title") })}
111111
{children.chartConfig.children.compType.getView() !== "pie" && (
@@ -168,6 +168,9 @@ export function chartPropertyView(
168168
{children.mapCenterLat.propertyView({
169169
label: "Latitude"
170170
})}
171+
{children.showCharts.propertyView({
172+
label: "Show Charts"
173+
})}
171174
</Section>
172175
<Section name={'Map Data'}>
173176
{children.mapOptions.propertyView({
@@ -186,6 +189,7 @@ export function chartPropertyView(
186189
),
187190
})}
188191
</Section>
192+
<Section name={sectionNames.interaction}>{children.onMapEvent.getPropertyView()}</Section>
189193
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
190194
</>
191195
);

client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts

+11-5
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,12 @@ export function transformData(
5252
}
5353

5454
const notAxisChartSet: Set<CharOptionCompType> = new Set(["pie"] as const);
55-
export const echartsConfigOmitChildren = ["hidden", "selectedPoints", "onEvent", "mapInstance"] as const;
55+
export const echartsConfigOmitChildren = [
56+
"hidden",
57+
"selectedPoints",
58+
"onUIEvent",
59+
"mapInstance"
60+
] as const;
5661
type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
5762

5863
export function isAxisChart(type: CharOptionCompType) {
@@ -132,16 +137,17 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
132137
mapZoomLevel,
133138
mapCenterLat,
134139
mapCenterLng,
135-
mapOptions,
140+
mapOptions,
141+
showCharts,
136142
} = props;
137-
138-
const echartsOption = mapOptions ? mapOptions : {};
143+
144+
const echartsOption = mapOptions && showCharts ? mapOptions : {};
139145
return {
140146
gmap: {
141147
center: [mapCenterLng, mapCenterLat],
142148
zoom: mapZoomLevel,
143149
renderOnMoving: true,
144-
echartsLayerZIndex: 2019,
150+
echartsLayerZIndex: showCharts ? 2019 : 0,
145151
roam: true
146152
},
147153
...echartsOption,

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

+6
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@ export const en = {
7373
arrow: "Arrow",
7474
pointColorLabel: "Point color",
7575
pointColorTooltip: `Set the point color according to the series name and current point value, optional variables: seriesName, value. Example: '{{value < 25000 ? "red" : "green"}}'`,
76+
mapReady: "Map Ready",
77+
mapReadyDesc: "Triggers when map is ready",
78+
zoomLevelChange: "Zoom Level Change",
79+
zoomLevelChangeDesc: "Triggers when map zoom level changed",
80+
centerPositionChange: "Center Position Change",
81+
centerPositionChangeDesc: "Triggers when map center position changed"
7682
},
7783
imageEditor: {
7884
defaultSrc: "",

client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts

+6
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ export const zh = {
7272
arrow: "箭头",
7373
pointColorLabel: "数据点颜色",
7474
pointColorTooltip: `根据系列名称和当前数据点值设置数据点颜色,可选变量:seriesName、value.示例:'{{value < 25000 ? "red" : "green"}}'`,
75+
mapReady: "地图就绪",
76+
mapReadyDesc: "地图准备好时触发",
77+
zoomLevelChange: "缩放级别更改",
78+
zoomLevelChangeDesc: "地图缩放级别更改时触发",
79+
centerPositionChange: "中心位置变化",
80+
centerPositionChangeDesc: "地图中心位置改变时触发"
7581
},
7682
imageEditor: {
7783
defaultSrc: "",

0 commit comments

Comments
 (0)