add onClick listener method in charts

Author: raheeliftikhar5

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

@@ -39,6 +39,8 @@ import {
 import 'echarts-extension-gmap';
 import log from "loglevel";
 
+let clickEventCallback = () => {};
+
 let ChartTmpComp = (function () {
   return new UICompBuilder(chartChildrenMap, () => null)
     .setPropertyViewFn(chartPropertyView)
@@ -84,6 +86,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
     echartsCompInstance?.on("selectchanged", (param: any) => {
       const option: any = echartsCompInstance?.getOption();
       //log.log("chart select change", param);
+      // trigger click event listener
+      document.dispatchEvent(new CustomEvent("clickEvent", {
+        bubbles: true,
+        detail: {
+          action: param.fromAction,
+          data: getSelectedPoints(param, option)
+        }
+      }));
+
       if (param.fromAction === "select") {
         comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
         onUIEvent("select");
@@ -93,7 +104,10 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
       }
     });
     // unbind
-    return () => echartsCompInstance?.off("selectchanged");
+    return () => {
+      echartsCompInstance?.off("selectchanged");
+      document.removeEventListener('clickEvent', clickEventCallback)
+    };
   }, [mode, onUIEvent]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
@@ -339,6 +353,21 @@ ChartComp = withMethodExposing(ChartComp, [
       });
     }
   },
+  {
+    method: {
+      name: "onClick",
+      params: [
+        {
+          name: "callback",
+          type: "function",
+        },
+      ],
+    },
+    execute: (comp, params) => {
+      clickEventCallback = params[0];
+      document.addEventListener('clickEvent', clickEventCallback);
+    }
+  },
 ])
 
 export const ChartCompWithDefault = withDefault(ChartComp, {

client/packages/lowcoder/src/comps/queries/queryComp.tsx

@@ -8,7 +8,7 @@ import DataSourceIcon from "components/DataSourceIcon";
 import { SimpleNameComp } from "comps/comps/simpleNameComp";
 import { StringControl } from "comps/controls/codeControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
-import { EditorState } from "comps/editorState";
+import { EditorContext, EditorState } from "comps/editorState";
 import {
   stateComp,
   valueComp,
@@ -43,7 +43,7 @@ import {
   wrapActionExtraInfo,
 } from "lowcoder-core";
 import { ValueFromOption } from "lowcoder-design";
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useContext, useEffect } from "react";
 import {
   BottomResComp,
   BottomResCompResult,
@@ -271,18 +271,25 @@ interface QueryViewProps {
 }
 
 function QueryView(props: QueryViewProps) {
+  const editorState = useContext(EditorContext);
   const { comp } = props;
 
   useEffect(() => {
     // Automatically load when page load
+    const depList = Object.keys(comp.children.comp.node()?.dependValues() ?? {});
+    const depName = depList.length ? depList[0] : null;
+    const depComp = depName ? editorState.getUICompByName(depName) : undefined;
+    const isModule = depComp ? depComp.children.compType.getView() === 'module' : false;
+
     if (
+      isModule &&
       getTriggerType(comp) === "automatic" &&
       (comp as any).isDepReady &&
       !comp.children.isNewCreate.value
     ) {
       setTimeout(() => {
         comp.dispatch(deferAction(executeQueryAction({})));
-      }, 100);
+      }, 1000);
     }
   }, []);