feat: added switch to hide/show data on map chart

raheeliftikhar5 · raheeliftikhar5 · commit 55247097e3d0 · 2023-11-13T14:59:39.000+05:00
diff --git 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
@@ -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
@@ -168,6 +168,9 @@ export function chartPropertyView(
         {children.mapCenterLat.propertyView({
           label: "Latitude"
         })}
+        {children.showCharts.propertyView({
+          label: "Show Charts"
+        })}
       </Section>
       <Section name={'Map Data'}>
         {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
@@ -52,7 +52,12 @@ export function transformData(
 }
 
 const notAxisChartSet: Set<CharOptionCompType> = 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<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
 
 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,
