Merge pull request #802 from raheeliftikhar5/echarts-click-listener

Standard Charts Click listener

Author: FalkWolsky

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/comps/appSettingsComp.tsx

@@ -18,6 +18,7 @@ import { StringControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ApplicationCategoriesEnum } from "constants/applicationConstants";
+import { BoolControl } from "../controls/boolControl";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -182,6 +183,7 @@ const childrenMap = {
   description: withDefault(StringControl, ''),
   icon: IconControl,
   category: dropdownControl(AppCategories, ApplicationCategoriesEnum.BUSINESS),
+  showHeaderInPublic: withDefault(BoolControl, true),
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
   customShortcuts: CustomShortcutsComp,
@@ -202,6 +204,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     description,
     icon,
     category,
+    showHeaderInPublic,
   } = props;
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
@@ -255,6 +258,11 @@ function AppSettingsModal(props: ChildrenInstance) {
             tooltip: trans("aggregation.iconTooltip"),
           })}
         </div>
+        <div style={{ margin: '20px 0'}}>
+          {showHeaderInPublic.propertyView({
+            label: trans("appSetting.showPublicHeader"),
+          })}
+        </div>
         {maxWidth.propertyView({
           dropdownLabel: trans("appSetting.canvasMaxWidth"),
           inputLabel: trans("appSetting.userDefinedMaxWidth"),

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);
     }
   }, []);
 

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

@@ -2087,6 +2087,7 @@ export const en = {
     "appTitle": "Title",
     "appDescription": "Description",
     "appCategory": "Category",
+    "showPublicHeader": "Show header in public view"
   },
   "customShortcut": {
     "title": "Custom Shortcuts",

client/packages/lowcoder/src/pages/editor/editorView.tsx

@@ -4,7 +4,7 @@ import { default as Sider} from "antd/es/layout/Sider";
 import { PreloadComp } from "comps/comps/preLoadComp";
 import UIComp from "comps/comps/uiComp";
 import { EditorContext } from "comps/editorState";
-import { AppUILayoutType } from "constants/applicationConstants";
+import { AppPathParams, AppUILayoutType } from "constants/applicationConstants";
 import { Layers } from "constants/Layers";
 import { TopHeaderHeight } from "constants/style";
 import { trans } from "i18n";
@@ -38,7 +38,7 @@ import React, {
 } from "react";
 import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { setEditorExternalStateAction } from "redux/reduxActions/configActions";
 import { currentApplication } from "redux/selectors/applicationSelector";
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
@@ -274,6 +274,7 @@ const aggregationSiderItems = [
 
 function EditorView(props: EditorViewProps) {
   const { uiComp } = props;
+  const params = useParams<AppPathParams>();
   const editorState = useContext(EditorContext);
   const { readOnly, hideHeader } = useContext(ExternalEditorContext);
   const application = useSelector(currentApplication);
@@ -296,6 +297,11 @@ function EditorView(props: EditorViewProps) {
   const [prePanelStatus, setPrePanelStatus] =
     useState<PanelStatus>(DefaultPanelStatus);
 
+  const isViewMode = params.viewMode === 'view';
+
+  const appSettingsComp = editorState.getAppSettingsComp();
+  const { showHeaderInPublic } = appSettingsComp.getView();
+
   const togglePanel: TogglePanel = useCallback(
     (key) => {
       let newPanelStatus;
@@ -363,7 +369,7 @@ function EditorView(props: EditorViewProps) {
     return () => window.removeEventListener(eventType, updateSize);
   }, []);
 
-  const hideBodyHeader = useTemplateViewMode();
+  const hideBodyHeader = useTemplateViewMode() || (isViewMode && !showHeaderInPublic);
 
   // we check if we are on the public cloud
   const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
@@ -430,7 +436,6 @@ function EditorView(props: EditorViewProps) {
     savePanelStatus({ ...panelStatus, left });
     setMenuKey(params.key);
   };
-  const appSettingsComp = editorState.getAppSettingsComp();
 
   return (
     <Height100Div