Skip to content

Commit 95d2973

Browse files
FalkWolskyFalkWolsky
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 69 additions & 22 deletions
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

Lines changed: 40 additions & 9 deletions
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

Lines changed: 5 additions & 1 deletion
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

Lines changed: 11 additions & 5 deletions
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

Lines changed: 6 additions & 0 deletions
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

Lines changed: 6 additions & 0 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy