Merge branch 'dev' into condition-load-agora

Author: FalkWolsky

README.md

@@ -32,7 +32,7 @@ Lowcoder wants to take a step forward. More specifically, Lowcoder is:
 - The only platform where you can build your own Meeting Tool - like Teams, Zoom or Google Meets, - just in the Lowcode way.
 
 ## 🪄 Features
-- **Visual UI builder** with 50+ built-in components. Save 90% of time to build apps.
+- **Visual UI builder** with 70+ built-in components. Save 90% of time to build apps.
 - **Modules** for reusable (!) component sets in the UI builder.
 - **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](https://github.com/lowcoder-org/lowcoder-sdk-demo)
 - **Video Meeting Components** to create your own individual Web-Meeting tool.
@@ -87,6 +87,8 @@ And we mean it... Day by day!
 ## 💻 Deployment Options
 [![Deploy to AWS using Stitch](https://img.shields.io/badge/deploy_with-Stitch-%23E369F7?logo=amazonaws&color=%23E369F7)](https://deploy.stitch.tech/lowcoder/lowcoder)
 
+[![Deploy in minutes on Elest.io](https://raw.githubusercontent.com/elestio-examples/element/main/deploy-on-elestio.png)](https://elest.io/open-source/lowcoder)
+
 You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for self-host Lowcoder on different platforms:
 - [Docker](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
 
@@ -99,4 +101,4 @@ You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/)
 Accelerate the growth of Lowcoder and unleash its potential with your Sponsorship – together, we're shaping the future of Lowcode for everyone!
 [Be a Sponsor](https://github.com/sponsors/lowcoder-org)
 
-Like ...  [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
+Like ...  [@Darkjamin](https://github.com/Darkjamin), [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!

client/package.json

@@ -76,7 +76,9 @@
     "@types/styled-components": "^5.1.34",
     "antd-mobile": "^5.34.0",
     "chalk": "4",
+    "flag-icons": "^7.2.1",
     "number-precision": "^1.6.0",
+    "react-countup": "^6.5.3",
     "react-player": "^2.11.0",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.13.0",

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "type": "module",
   "license": "MIT",
   "dependencies": {

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

@@ -97,7 +97,7 @@ let CalendarBasicComp = (function () {
     resources: any; 
     resourceName : string
     onEvent?: any;
-    onEventDrop?: any;
+    onDropEvent?: any;
     editable?: boolean; 
     showEventTime?: boolean; 
     showWeekends?: boolean; 
@@ -248,16 +248,16 @@ let CalendarBasicComp = (function () {
       return (
         <Event
           className={`event ${sizeClass} ${stateClass}`}
-          bg={eventInfo.backgroundColor}
+          $bg={eventInfo.backgroundColor}
           theme={theme?.theme}
-          isList={isList}
-          allDay={showAllDay}
+          $isList={isList}
+          $allDay={Boolean(showAllDay)}
           $style={props.style}
         >
           <div className="event-time">{eventInfo.timeText}</div>
           <div className="event-title">{eventInfo.event.title}</div>
           <Remove
-            isList={isList}
+            $isList={isList}
             className="event-remove"
             onClick={(e) => {
               e.stopPropagation();
@@ -526,7 +526,7 @@ let CalendarBasicComp = (function () {
             }}
             eventDragStop={(info) => {
               if (info.view) {
-                props.onEventDrop("dropEvent");
+                props.onDropEvent("dropEvent");
               }
             }}
           />
@@ -540,8 +540,8 @@ let CalendarBasicComp = (function () {
       resourcesEvents: { propertyView: (arg0: {}) => any; };
       resources: { propertyView: (arg0: {}) => any; };
       resourceName: { propertyView: (arg0: {}) => any; };
-      onEvent: { getPropertyView: () => any; }; 
-      onDropEvent: { getPropertyView: () => any; };
+      onEvent: { propertyView: ({title}?: {title?: string}) => any; }; 
+      onDropEvent: { propertyView: ({title}?: {title?: string}) => any; };
       editable: { propertyView: (arg0: { label: string; }) => any; };
       showEventTime: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
       showWeekends: { propertyView: (arg0: { label: string; }) => any; }; 
@@ -573,8 +573,12 @@ let CalendarBasicComp = (function () {
           }
           <Section name={sectionNames.interaction}>
             {hiddenPropertyView(children)}
-            {children.onEvent.getPropertyView()}
-            {children.onDropEvent.getPropertyView()}
+            <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+              {children.onEvent.propertyView()}
+            </div>
+            <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+              {children.onDropEvent.propertyView({title: trans("calendar.dragDropEventHandlers")})}
+            </div>
             {children.editable.propertyView({ label: trans("calendar.editable"), })}
           </Section>
           <Section name={sectionNames.advanced}>

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -635,7 +635,7 @@ export const Wrapper = styled.div<{
   }
 `;
 
-export const Remove = styled.div<{ isList: boolean }>`
+export const Remove = styled.div<{ $isList: boolean }>`
   position: absolute;
   pointer-events: auto;
   top: 0;
@@ -652,21 +652,21 @@ export const Remove = styled.div<{ isList: boolean }>`
 `;
 
 export const Event = styled.div<{
-  bg: string;
+  $bg: string;
   theme: Object;
-  isList: boolean;
-  allDay: boolean;
+  $isList: boolean;
+  $allDay: boolean;
   $style: CalendarStyleType;
 }>`
   height: 100%;
   width: 100%;
   pointer-events: none;
   border-radius: 4px;
-  box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
+  box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
   border: 1px solid ${(props) => props.$style.border};
-  display: ${(props) => props.isList && "flex"};
+  display: ${(props) => props.$isList && "flex"};
   background-color: ${(props) =>
-    !props.isList && lightenColor(props.$style.background, 0.1)};
+    !props.$isList && lightenColor(props.$style.background, 0.1)};
   overflow: hidden;
   font-size: 13px;
   line-height: 19px;
@@ -682,12 +682,12 @@ export const Event = styled.div<{
     left: 2px;
     top: 2px;
     border-radius: 3px;
-    background-color: ${(props) => props.bg};
+    background-color: ${(props) => props.$bg};
   }
 
   .event-time {
     color: ${(props) =>
-      !props.isList &&
+      !props.$isList &&
       (isDarkColor(props.$style.text)
         ? lightenColor(props.$style.text, 0.2)
         : props.$style.text)};
@@ -696,7 +696,7 @@ export const Event = styled.div<{
     margin-top: 2px;
   }
   .event-title {
-    color: ${(props) => !props.isList && props.$style.text};
+    color: ${(props) => !props.$isList && props.$style.text};
     font-weight: 500;
     margin-left: 15px;
     white-space: pre-wrap;

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

@@ -27,6 +27,7 @@ import {
   withViewFn,
   ThemeContext,
   chartColorPalette,
+  getPromiseAfterDispatch,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -57,6 +58,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   const mapZoomlevel = comp.children.mapZoomLevel.getView();
   const onUIEvent = comp.children.onUIEvent.getView();
   const onMapEvent = comp.children.onMapEvent.getView();
+  const onEvent = comp.children.onEvent.getView();
 
   const echartsCompRef = useRef<ReactECharts | null>();
   const [chartSize, setChartSize] = useState<ChartSize>();
@@ -75,7 +77,44 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
+    await getPromiseAfterDispatch(
+      dispatch,
+      action,
+      { autoHandleAfterReduce: true }
+    );
+    onEvent('click');
+  }
+
   useEffect(() => {
+    // click events for JSON/Map mode 
+    if (mode === 'ui') return;
+
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return _.noop;
+    }
+    echartsCompInstance?.on("click", (param: any) => {
+      document.dispatchEvent(new CustomEvent("clickEvent", {
+        bubbles: true,
+        detail: {
+          action: 'click',
+          data: param.data,
+        }
+      }));
+      triggerClickEvent(
+        comp.dispatch,
+        changeChildAction("lastInteractionData", param.data, false)
+      );
+    });
+    return () => {
+      echartsCompInstance?.off("click");
+      document.removeEventListener('clickEvent', clickEventCallback)
+    };
+  }, [mode, mapScriptLoaded]);
+
+  useEffect(() => {
+    // click events for UI mode
     if(mode !== 'ui') return;
 
     // bind events
@@ -87,21 +126,27 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
       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)));
+        comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
         onUIEvent("select");
       } else if (param.fromAction === "unselect") {
-        comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
+        comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
         onUIEvent("unselect");
       }
+
+      triggerClickEvent(
+        comp.dispatch,
+        changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
+      );
     });
     // unbind
     return () => {
@@ -141,10 +186,12 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
 
   useEffect(() => {
     if( mode !== 'map') {
-      comp.children.mapInstance.dispatch(changeValueAction(undefined))
+      comp.children.mapInstance.dispatch(changeValueAction(null, false))
       return;
     }
 
+    if(comp.children.mapInstance.value) return;
+
     const gMapScript = loadGoogleMapsScript(apiKey);
     if(isMapScriptLoaded) {
       handleOnMapScriptLoad();
@@ -298,6 +345,14 @@ let ChartComp = withExposingConfigs(ChartTmpComp, [
       return input.selectedPoints;
     },
   }),
+  depsConfig({
+    name: "lastInteractionData",
+    desc: trans("chart.lastInteractionDataDesc"),
+    depKeys: ["lastInteractionData"],
+    func: (input) => {
+      return input.lastInteractionData;
+    },
+  }),
   depsConfig({
     name: "data",
     desc: trans("chart.dataDesc"),

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

@@ -15,6 +15,7 @@ import {
   withType,
   ValueFromOption,
   uiChildren,
+  clickEvent,
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -67,7 +68,6 @@ export const UIEventOptions = [
     value: "select",
     description: trans("chart.selectDesc"),
   },
-
   {
     label: trans("chart.unSelect"),
     value: "unselect",
@@ -253,6 +253,10 @@ export const chartUiModeChildren = {
   onUIEvent: eventHandlerControl(UIEventOptions),
 };
 
+const chartJsonModeChildren = {
+  echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+}
+
 const chartMapModeChildren = {
   mapInstance: stateComp(),
   getMapInstance: FunctionControl,
@@ -265,21 +269,28 @@ const chartMapModeChildren = {
   showCharts: withDefault(BoolControl, true),
 }
 
+export type UIChartDataType = {
+  seriesName: string;
+  // coordinate chart
+  x?: any;
+  y?: any;
+  // pie or funnel
+  itemName?: any;
+  value?: any;
+};
+
+export type NonUIChartDataType = {
+  name: string;
+  value: any;
+}
+
 export const chartChildrenMap = {
   mode: dropdownControl(chartModeOptions, "ui"),
-  echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
-  selectedPoints: stateComp<
-    Array<{
-      seriesName: string;
-      // coordinate chart
-      x?: any;
-      y?: any;
-      // pie or funnel
-      itemName?: any;
-      value?: any;
-    }>
-  >([]),
+  selectedPoints: stateComp<Array<UIChartDataType>>([]),
+  lastInteractionData: stateComp<Array<UIChartDataType> | NonUIChartDataType>({}),
+  onEvent: eventHandlerControl([clickEvent] as const),
   ...chartUiModeChildren,
+  ...chartJsonModeChildren,
   ...chartMapModeChildren,
 };