From 079d0706ebd3c7fc47caf0f84bef87904a95be64 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Mon, 13 Nov 2023 13:55:22 +0500 Subject: [PATCH 1/2] feat: added mapReady,zoomLevelChanged,centerPositionChange events for echarts map --- client/packages/lowcoder-comps/package.json | 2 +- .../src/comps/chartComp/chartComp.tsx | 93 ++++++++++++++----- .../src/comps/chartComp/chartConstants.tsx | 23 ++++- .../src/comps/chartComp/chartPropertyView.tsx | 3 +- .../src/i18n/comps/locales/en.ts | 6 ++ .../src/i18n/comps/locales/zh.ts | 6 ++ 6 files changed, 107 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json index 5d7ba98f3..f07a3e2f4 100644 --- a/client/packages/lowcoder-comps/package.json +++ b/client/packages/lowcoder-comps/package.json @@ -1,6 +1,6 @@ { "name": "lowcoder-comps", - "version": "0.0.17", + "version": "0.0.18", "type": "module", "license": "MIT", "dependencies": { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx index e0877d747..73c5ff98f 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx @@ -27,7 +27,6 @@ import { withViewFn, ThemeContext, chartColorPalette, - loadScript, } from "lowcoder-sdk"; import { getEchartsLocale, trans } from "i18n/comps"; import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig"; @@ -49,7 +48,13 @@ let ChartTmpComp = (function () { ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { const apiKey = comp.children.mapApiKey.getView(); const mode = comp.children.mode.getView(); - const onEvent = comp.children.onEvent.getView(); + const mapCenterPosition = { + lng: comp.children.mapCenterLng.getView(), + lat: comp.children.mapCenterLat.getView(), + } + const mapZoomlevel = comp.children.mapZoomLevel.getView(); + const onUIEvent = comp.children.onUIEvent.getView(); + const onMapEvent = comp.children.onMapEvent.getView(); const echartsCompRef = useRef(); const [chartSize, setChartSize] = useState(); @@ -81,15 +86,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { //log.log("chart select change", param); if (param.fromAction === "select") { comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option))); - onEvent("select"); + onUIEvent("select"); } else if (param.fromAction === "unselect") { comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option))); - onEvent("unselect"); + onUIEvent("unselect"); } }); // unbind return () => echartsCompInstance?.off("selectchanged"); - }, [mode, onEvent]); + }, [mode, onUIEvent]); const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren); const option = useMemo(() => { @@ -103,36 +108,50 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { return mapScriptLoaded || window?.google; }, [mapScriptLoaded]) - const loadGoogleMapsData = () => { - setTimeout(() => { - const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance(); - if (!echartsCompInstance) { - return _.noop; - } + const loadGoogleMapData = () => { + const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance(); + if (!echartsCompInstance) { + return _.noop; + } - let mapInstance = undefined; - mapInstance = echartsCompInstance?.getModel()?.getComponent("gmap")?.getGoogleMap(); - comp.dispatch(changeChildAction("mapInstance", mapInstance)); - }, 500) + comp.children.mapInstance.dispatch(changeValueAction(echartsCompInstance)) + onMapEvent('mapReady') } + const handleOnMapScriptLoad = () => { + setMapScriptLoaded(true); + loadGoogleMapData(); + } + useEffect(() => { if( mode !== 'map') { - comp.dispatch(changeChildAction("mapInstance", undefined)); + comp.children.mapInstance.dispatch(changeValueAction(undefined)) return; } const gMapScript = loadGoogleMapsScript(apiKey); if(isMapScriptLoaded) { - loadGoogleMapsData(); + handleOnMapScriptLoad(); return; } - gMapScript.addEventListener('load', function () { - setMapScriptLoaded(true); - loadGoogleMapsData(); - }); + gMapScript.addEventListener('load', handleOnMapScriptLoad); + return () => { + gMapScript.removeEventListener('load', handleOnMapScriptLoad); + } }, [mode, apiKey, option]) + useEffect(() => { + if(mode === 'map') { + onMapEvent('centerPositionChange') + } + }, [mode, mapCenterPosition.lat, mapCenterPosition.lng]) + + useEffect(() => { + if(mode === 'map') { + onMapEvent('zoomLevelChange') + } + }, [mode, mapZoomlevel]) + return ( { @@ -287,8 +306,38 @@ ChartComp = withMethodExposing(ChartComp, [ name: "getMapInstance", }, execute: (comp) => { - return comp.children.mapInstance.getView() + return new Promise(resolve => { + let intervalCount = 0; + const mapInstanceInterval = setInterval(() => { + const instance = comp.children.mapInstance.getView(); + const mapInstance = instance?.getModel()?.getComponent("gmap")?.getGoogleMap() + if(mapInstance || intervalCount === 10) { + clearInterval(mapInstanceInterval) + resolve(mapInstance) + } + intervalCount++; + }, 1000); + }) + } + }, + { + method: { + name: "getMapZoomLevel", + }, + execute: (comp) => { + return comp.children.mapZoomLevel.getView(); + } + }, + { + method: { + name: "getMapCenterPosition", }, + execute: (comp) => { + return { + lng: comp.children.mapCenterLng.getView(), + lat: comp.children.mapCenterLat.getView(), + }; + } }, ]) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index a35b5bf31..065b7852e 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -50,7 +50,7 @@ const chartModeOptions = [ }, ] as const; -export const EventOptions = [ +export const UIEventOptions = [ { label: trans("chart.select"), value: "select", @@ -64,6 +64,24 @@ export const EventOptions = [ }, ] as const; +export const MapEventOptions = [ + { + label: trans("chart.mapReady"), + value: "mapReady", + description: trans("chart.mapReadyDesc"), + }, + { + label: trans("chart.zoomLevelChange"), + value: "zoomLevelChange", + description: trans("chart.zoomLevelChangeDesc"), + }, + { + label: trans("chart.centerPositionChange"), + value: "centerPositionChange", + description: trans("chart.centerPositionChangeDesc"), + }, +] as const; + export const XAxisDirectionOptions = [ { label: trans("chart.horizontal"), @@ -220,8 +238,8 @@ export const chartUiModeChildren = { xConfig: XAxisConfig, yConfig: YAxisConfig, legendConfig: LegendConfig, - onEvent: eventHandlerControl(EventOptions), chartConfig: ChartOptionComp, + onUIEvent: eventHandlerControl(UIEventOptions), }; const chartMapModeChildren = { @@ -232,6 +250,7 @@ const chartMapModeChildren = { mapCenterLng: withDefault(NumberControl, 15.932644), mapCenterLat: withDefault(NumberControl, 50.942063), mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption), + onMapEvent: eventHandlerControl(MapEventOptions), } export const chartChildrenMap = { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index 0e114f1d3..a84f288d2 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -105,7 +105,7 @@ export function chartPropertyView( dataIndex={(s) => s.getView().dataIndex} /> -
{children.onEvent.getPropertyView()}
+
{children.onUIEvent.getPropertyView()}
{children.title.propertyView({ label: trans("chart.title") })} {children.chartConfig.children.compType.getView() !== "pie" && ( @@ -186,6 +186,7 @@ export function chartPropertyView( ), })}
+
{children.onMapEvent.getPropertyView()}
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index e64f7694d..5f363faee 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -73,6 +73,12 @@ export const en = { arrow: "Arrow", pointColorLabel: "Point color", pointColorTooltip: `Set the point color according to the series name and current point value, optional variables: seriesName, value. Example: '{{value < 25000 ? "red" : "green"}}'`, + mapReady: "Map Ready", + mapReadyDesc: "Triggers when map is ready", + zoomLevelChange: "Zoom Level Change", + zoomLevelChangeDesc: "Triggers when map zoom level changed", + centerPositionChange: "Center Position Change", + centerPositionChangeDesc: "Triggers when map center position changed" }, imageEditor: { defaultSrc: "", diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts index 281d6e65e..28c9d202d 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts @@ -72,6 +72,12 @@ export const zh = { arrow: "箭头", pointColorLabel: "数据点颜色", pointColorTooltip: `根据系列名称和当前数据点值设置数据点颜色,可选变量:seriesName、value.示例:'{{value < 25000 ? "red" : "green"}}'`, + mapReady: "地图就绪", + mapReadyDesc: "地图准备好时触发", + zoomLevelChange: "缩放级别更改", + zoomLevelChangeDesc: "地图缩放级别更改时触发", + centerPositionChange: "中心位置变化", + centerPositionChangeDesc: "地图中心位置改变时触发" }, imageEditor: { defaultSrc: "", From 55247097e3d04b22200a1e47781ab6943e2d57b5 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Mon, 13 Nov 2023 14:59:39 +0500 Subject: [PATCH 2/2] feat: added switch to hide/show data on map chart --- .../src/comps/chartComp/chartComp.tsx | 14 +++++----- .../src/comps/chartComp/chartConstants.tsx | 26 ++++++++++++++----- .../src/comps/chartComp/chartPropertyView.tsx | 3 +++ .../src/comps/chartComp/chartUtils.ts | 16 ++++++++---- 4 files changed, 39 insertions(+), 20 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx index 73c5ff98f..b6668f1c9 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx @@ -141,15 +141,13 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { }, [mode, apiKey, option]) useEffect(() => { - if(mode === 'map') { - onMapEvent('centerPositionChange') - } + if(mode !== 'map') return; + onMapEvent('centerPositionChange'); }, [mode, mapCenterPosition.lat, mapCenterPosition.lng]) useEffect(() => { - if(mode === 'map') { - onMapEvent('zoomLevelChange') - } + if(mode !== 'map') return; + onMapEvent('zoomLevelChange'); }, [mode, mapZoomlevel]) return ( @@ -333,10 +331,10 @@ ChartComp = withMethodExposing(ChartComp, [ name: "getMapCenterPosition", }, execute: (comp) => { - return { + return Promise.resolve({ lng: comp.children.mapCenterLng.getView(), lat: comp.children.mapCenterLat.getView(), - }; + }); } }, ]) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index 065b7852e..763851512 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -1,10 +1,21 @@ -import { jsonControl, JSONObject, stateComp, toJSONObjectArray, toObject } from "lowcoder-sdk"; -import { withDefault, BooleanControl, StringControl, NumberControl, JSONObjectControl, FunctionControl } from "lowcoder-sdk"; -import { dropdownControl } from "lowcoder-sdk"; -import { eventHandlerControl } from "lowcoder-sdk"; -import { valueComp, withType } from "lowcoder-sdk"; -import { ValueFromOption } from "lowcoder-sdk"; -import { uiChildren } from "lowcoder-sdk"; +import { + jsonControl, + JSONObject, + stateComp, + toJSONObjectArray, + toObject, + BoolControl, + withDefault, + StringControl, + NumberControl, + FunctionControl, + dropdownControl, + eventHandlerControl, + valueComp, + withType, + ValueFromOption, + uiChildren, +} from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "./chartConfigs/barChartConfig"; import { XAxisConfig, YAxisConfig } from "./chartConfigs/cartesianAxisConfig"; @@ -251,6 +262,7 @@ const chartMapModeChildren = { mapCenterLat: withDefault(NumberControl, 50.942063), mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption), onMapEvent: eventHandlerControl(MapEventOptions), + showCharts: withDefault(BoolControl, true), } export const chartChildrenMap = { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index a84f288d2..41055d133 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -168,6 +168,9 @@ export function chartPropertyView( {children.mapCenterLat.propertyView({ label: "Latitude" })} + {children.showCharts.propertyView({ + label: "Show Charts" + })}
{children.mapOptions.propertyView({ diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index 489c9fd57..2e784b56f 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -52,7 +52,12 @@ export function transformData( } const notAxisChartSet: Set = new Set(["pie"] as const); -export const echartsConfigOmitChildren = ["hidden", "selectedPoints", "onEvent", "mapInstance"] as const; +export const echartsConfigOmitChildren = [ + "hidden", + "selectedPoints", + "onUIEvent", + "mapInstance" +] as const; type EchartsConfigProps = Omit; export function isAxisChart(type: CharOptionCompType) { @@ -132,16 +137,17 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz mapZoomLevel, mapCenterLat, mapCenterLng, - mapOptions, + mapOptions, + showCharts, } = props; - - const echartsOption = mapOptions ? mapOptions : {}; + + const echartsOption = mapOptions && showCharts ? mapOptions : {}; return { gmap: { center: [mapCenterLng, mapCenterLat], zoom: mapZoomLevel, renderOnMoving: true, - echartsLayerZIndex: 2019, + echartsLayerZIndex: showCharts ? 2019 : 0, roam: true }, ...echartsOption,