Merge pull request #813 from raheeliftikhar5/echart-click-event

FalkWolsky · web-flow · commit b9f936d110eb · 2024-04-17T21:35:08.000+02:00
Echarts: Added lastInteractionData and click event handler
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/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}>
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/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;
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/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,6 +77,15 @@ 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;
@@ -91,6 +102,10 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
           data: param.data,
         }
       }));
+      triggerClickEvent(
+        comp.dispatch,
+        changeChildAction("lastInteractionData", param.data, false)
+      );
     });
     return () => {
       echartsCompInstance?.off("click");
@@ -111,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 () => {
@@ -165,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();
@@ -322,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"),
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/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,
 };
 
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx
@@ -105,7 +105,14 @@ export function chartPropertyView(
           dataIndex={(s) => s.getView().dataIndex}
         />
       </Section>
-      <Section name={sectionNames.interaction}>{children.onUIEvent.getPropertyView()}</Section>
+      <Section name={sectionNames.interaction}>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+        </div>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onEvent.propertyView()}
+        </div>
+      </Section>
       <Section name={sectionNames.layout}>
         {children.title.propertyView({ label: trans("chart.title") })}
         {children.chartConfig.children.compType.getView() !== "pie" && (
@@ -144,6 +151,9 @@ export function chartPropertyView(
           ),
         })}
       </Section>
+      <Section name={sectionNames.interaction}>
+        {children.onEvent.propertyView()}
+      </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );
@@ -189,7 +199,14 @@ export function chartPropertyView(
           ),
         })}
       </Section>
-      <Section name={sectionNames.interaction}>{children.onMapEvent.getPropertyView()}</Section>
+      <Section name={sectionNames.interaction}>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onMapEvent.propertyView({title: trans("chart.chartEventHandlers")})}
+        </div>
+        <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+          {children.onEvent.propertyView()}
+        </div>
+      </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -64,6 +64,7 @@ export const en = {
     unselectDesc:
       "Triggered when a user unselects part of the data in the chart",
     selectedPointsDesc: "Selected Points",
+    lastInteractionDataDesc: "Last Interaction Data",
     dataDesc: "JSON Data for the Chart",
     titleDesc: "Current Chart Title",
     scatterShape: "Scatter Shape",
@@ -82,6 +83,7 @@ export const en = {
     zoomLevelChangeDesc: "Triggers when the map zoom level changes",
     centerPositionChange: "Center Position Change",
     centerPositionChangeDesc: "Triggers when the map center position changes",
+    chartEventHandlers: "Chart Event Handlers",
   },
   imageEditor: {
     defaultSrc: "",
@@ -156,5 +158,6 @@ export const en = {
     eventIdRequire: "Enter Event ID",
     eventIdTooltip: "Unique ID for each event",
     eventIdExist: "ID Exists",
+    dragDropEventHandlers: "Drag/Drop Event Handlers",
   },
 };
diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts
@@ -61,6 +61,7 @@ export const zh = {
         selectDesc: "当用户选择图表中的部分数据时触发",
         unselectDesc: "当用户取消选择图表中的部分数据时触发",
         selectedPointsDesc: "已选中的数据点",
+        lastInteractionDataDesc: "最后交互数据",
         dataDesc: "当前图表使用的原始数据",
         titleDesc: "当前图表标题",
         scatterShape: "散点形状",
@@ -77,7 +78,8 @@ export const zh = {
         zoomLevelChange: "缩放级别更改",
         zoomLevelChangeDesc: "地图缩放级别更改时触发",
         centerPositionChange: "中心位置变化",
-        centerPositionChangeDesc: "地图中心位置改变时触发"
+        centerPositionChangeDesc: "地图中心位置改变时触发",
+        chartEventHandlers: "图表事件处理程序",
     },
     imageEditor: {
         defaultSrc: "",
@@ -149,5 +151,6 @@ export const zh = {
         eventIdRequire: "请输入事件ID",
         eventIdTooltip: "每个事件的唯一标识符",
         eventIdExist: "ID已存在",
+        dragDropEventHandlers: "拖/放事件处理程序",
     },
 };
diff --git a/client/packages/lowcoder/src/index.sdk.ts b/client/packages/lowcoder/src/index.sdk.ts
@@ -29,6 +29,7 @@ export * from "util/objectUtils";
 export * from "util/objectUtils";
 export * from "util/perfUtils";
 export * from "util/permissionUtils";
+export * from "util/promiseUtils";
 export * from "util/reducerUtils";
 export * from "util/scheduleUtils";
 export * from "util/stringUtils";
