Skip to content

Commit b9f936d

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #813 from raheeliftikhar5/echart-click-event
Echarts: Added lastInteractionData and click event handler
2 parents 3efddc3 + ef64c80 commit b9f936d

File tree

8 files changed

+110
-40
lines changed

8 files changed

+110
-40
lines changed

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ let CalendarBasicComp = (function () {
9797
resources: any;
9898
resourceName : string
9999
onEvent?: any;
100-
onEventDrop?: any;
100+
onDropEvent?: any;
101101
editable?: boolean;
102102
showEventTime?: boolean;
103103
showWeekends?: boolean;
@@ -248,16 +248,16 @@ let CalendarBasicComp = (function () {
248248
return (
249249
<Event
250250
className={`event ${sizeClass} ${stateClass}`}
251-
bg={eventInfo.backgroundColor}
251+
$bg={eventInfo.backgroundColor}
252252
theme={theme?.theme}
253-
isList={isList}
254-
allDay={showAllDay}
253+
$isList={isList}
254+
$allDay={Boolean(showAllDay)}
255255
$style={props.style}
256256
>
257257
<div className="event-time">{eventInfo.timeText}</div>
258258
<div className="event-title">{eventInfo.event.title}</div>
259259
<Remove
260-
isList={isList}
260+
$isList={isList}
261261
className="event-remove"
262262
onClick={(e) => {
263263
e.stopPropagation();
@@ -526,7 +526,7 @@ let CalendarBasicComp = (function () {
526526
}}
527527
eventDragStop={(info) => {
528528
if (info.view) {
529-
props.onEventDrop("dropEvent");
529+
props.onDropEvent("dropEvent");
530530
}
531531
}}
532532
/>
@@ -540,8 +540,8 @@ let CalendarBasicComp = (function () {
540540
resourcesEvents: { propertyView: (arg0: {}) => any; };
541541
resources: { propertyView: (arg0: {}) => any; };
542542
resourceName: { propertyView: (arg0: {}) => any; };
543-
onEvent: { getPropertyView: () => any; };
544-
onDropEvent: { getPropertyView: () => any; };
543+
onEvent: { propertyView: ({title}?: {title?: string}) => any; };
544+
onDropEvent: { propertyView: ({title}?: {title?: string}) => any; };
545545
editable: { propertyView: (arg0: { label: string; }) => any; };
546546
showEventTime: { propertyView: (arg0: { label: string; tooltip: string; }) => any; };
547547
showWeekends: { propertyView: (arg0: { label: string; }) => any; };
@@ -573,8 +573,12 @@ let CalendarBasicComp = (function () {
573573
}
574574
<Section name={sectionNames.interaction}>
575575
{hiddenPropertyView(children)}
576-
{children.onEvent.getPropertyView()}
577-
{children.onDropEvent.getPropertyView()}
576+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
577+
{children.onEvent.propertyView()}
578+
</div>
579+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
580+
{children.onDropEvent.propertyView({title: trans("calendar.dragDropEventHandlers")})}
581+
</div>
578582
{children.editable.propertyView({ label: trans("calendar.editable"), })}
579583
</Section>
580584
<Section name={sectionNames.advanced}>

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -635,7 +635,7 @@ export const Wrapper = styled.div<{
635635
}
636636
`;
637637

638-
export const Remove = styled.div<{ isList: boolean }>`
638+
export const Remove = styled.div<{ $isList: boolean }>`
639639
position: absolute;
640640
pointer-events: auto;
641641
top: 0;
@@ -652,21 +652,21 @@ export const Remove = styled.div<{ isList: boolean }>`
652652
`;
653653

654654
export const Event = styled.div<{
655-
bg: string;
655+
$bg: string;
656656
theme: Object;
657-
isList: boolean;
658-
allDay: boolean;
657+
$isList: boolean;
658+
$allDay: boolean;
659659
$style: CalendarStyleType;
660660
}>`
661661
height: 100%;
662662
width: 100%;
663663
pointer-events: none;
664664
border-radius: 4px;
665-
box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
665+
box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
666666
border: 1px solid ${(props) => props.$style.border};
667-
display: ${(props) => props.isList && "flex"};
667+
display: ${(props) => props.$isList && "flex"};
668668
background-color: ${(props) =>
669-
!props.isList && lightenColor(props.$style.background, 0.1)};
669+
!props.$isList && lightenColor(props.$style.background, 0.1)};
670670
overflow: hidden;
671671
font-size: 13px;
672672
line-height: 19px;
@@ -682,12 +682,12 @@ export const Event = styled.div<{
682682
left: 2px;
683683
top: 2px;
684684
border-radius: 3px;
685-
background-color: ${(props) => props.bg};
685+
background-color: ${(props) => props.$bg};
686686
}
687687
688688
.event-time {
689689
color: ${(props) =>
690-
!props.isList &&
690+
!props.$isList &&
691691
(isDarkColor(props.$style.text)
692692
? lightenColor(props.$style.text, 0.2)
693693
: props.$style.text)};
@@ -696,7 +696,7 @@ export const Event = styled.div<{
696696
margin-top: 2px;
697697
}
698698
.event-title {
699-
color: ${(props) => !props.isList && props.$style.text};
699+
color: ${(props) => !props.$isList && props.$style.text};
700700
font-weight: 500;
701701
margin-left: 15px;
702702
white-space: pre-wrap;

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

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
withViewFn,
2828
ThemeContext,
2929
chartColorPalette,
30+
getPromiseAfterDispatch,
3031
} from "lowcoder-sdk";
3132
import { getEchartsLocale, trans } from "i18n/comps";
3233
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -57,6 +58,7 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
5758
const mapZoomlevel = comp.children.mapZoomLevel.getView();
5859
const onUIEvent = comp.children.onUIEvent.getView();
5960
const onMapEvent = comp.children.onMapEvent.getView();
61+
const onEvent = comp.children.onEvent.getView();
6062

6163
const echartsCompRef = useRef<ReactECharts | null>();
6264
const [chartSize, setChartSize] = useState<ChartSize>();
@@ -75,6 +77,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
7577
log.error('theme chart error: ', error);
7678
}
7779

80+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
81+
await getPromiseAfterDispatch(
82+
dispatch,
83+
action,
84+
{ autoHandleAfterReduce: true }
85+
);
86+
onEvent('click');
87+
}
88+
7889
useEffect(() => {
7990
// click events for JSON/Map mode
8091
if (mode === 'ui') return;
@@ -91,6 +102,10 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
91102
data: param.data,
92103
}
93104
}));
105+
triggerClickEvent(
106+
comp.dispatch,
107+
changeChildAction("lastInteractionData", param.data, false)
108+
);
94109
});
95110
return () => {
96111
echartsCompInstance?.off("click");
@@ -111,21 +126,27 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
111126
const option: any = echartsCompInstance?.getOption();
112127
//log.log("chart select change", param);
113128
// trigger click event listener
129+
114130
document.dispatchEvent(new CustomEvent("clickEvent", {
115131
bubbles: true,
116132
detail: {
117133
action: param.fromAction,
118134
data: getSelectedPoints(param, option)
119135
}
120136
}));
121-
137+
122138
if (param.fromAction === "select") {
123-
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
139+
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
124140
onUIEvent("select");
125141
} else if (param.fromAction === "unselect") {
126-
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
142+
comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option), false));
127143
onUIEvent("unselect");
128144
}
145+
146+
triggerClickEvent(
147+
comp.dispatch,
148+
changeChildAction("lastInteractionData", getSelectedPoints(param, option), false)
149+
);
129150
});
130151
// unbind
131152
return () => {
@@ -165,10 +186,12 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
165186

166187
useEffect(() => {
167188
if( mode !== 'map') {
168-
comp.children.mapInstance.dispatch(changeValueAction(undefined))
189+
comp.children.mapInstance.dispatch(changeValueAction(null, false))
169190
return;
170191
}
171192

193+
if(comp.children.mapInstance.value) return;
194+
172195
const gMapScript = loadGoogleMapsScript(apiKey);
173196
if(isMapScriptLoaded) {
174197
handleOnMapScriptLoad();
@@ -322,6 +345,14 @@ let ChartComp = withExposingConfigs(ChartTmpComp, [
322345
return input.selectedPoints;
323346
},
324347
}),
348+
depsConfig({
349+
name: "lastInteractionData",
350+
desc: trans("chart.lastInteractionDataDesc"),
351+
depKeys: ["lastInteractionData"],
352+
func: (input) => {
353+
return input.lastInteractionData;
354+
},
355+
}),
325356
depsConfig({
326357
name: "data",
327358
desc: trans("chart.dataDesc"),

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

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
withType,
1616
ValueFromOption,
1717
uiChildren,
18+
clickEvent,
1819
} from "lowcoder-sdk";
1920
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2021
import { BarChartConfig } from "./chartConfigs/barChartConfig";
@@ -67,7 +68,6 @@ export const UIEventOptions = [
6768
value: "select",
6869
description: trans("chart.selectDesc"),
6970
},
70-
7171
{
7272
label: trans("chart.unSelect"),
7373
value: "unselect",
@@ -253,6 +253,10 @@ export const chartUiModeChildren = {
253253
onUIEvent: eventHandlerControl(UIEventOptions),
254254
};
255255

256+
const chartJsonModeChildren = {
257+
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
258+
}
259+
256260
const chartMapModeChildren = {
257261
mapInstance: stateComp(),
258262
getMapInstance: FunctionControl,
@@ -265,21 +269,28 @@ const chartMapModeChildren = {
265269
showCharts: withDefault(BoolControl, true),
266270
}
267271

272+
export type UIChartDataType = {
273+
seriesName: string;
274+
// coordinate chart
275+
x?: any;
276+
y?: any;
277+
// pie or funnel
278+
itemName?: any;
279+
value?: any;
280+
};
281+
282+
export type NonUIChartDataType = {
283+
name: string;
284+
value: any;
285+
}
286+
268287
export const chartChildrenMap = {
269288
mode: dropdownControl(chartModeOptions, "ui"),
270-
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
271-
selectedPoints: stateComp<
272-
Array<{
273-
seriesName: string;
274-
// coordinate chart
275-
x?: any;
276-
y?: any;
277-
// pie or funnel
278-
itemName?: any;
279-
value?: any;
280-
}>
281-
>([]),
289+
selectedPoints: stateComp<Array<UIChartDataType>>([]),
290+
lastInteractionData: stateComp<Array<UIChartDataType> | NonUIChartDataType>({}),
291+
onEvent: eventHandlerControl([clickEvent] as const),
282292
...chartUiModeChildren,
293+
...chartJsonModeChildren,
283294
...chartMapModeChildren,
284295
};
285296

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,14 @@ export function chartPropertyView(
105105
dataIndex={(s) => s.getView().dataIndex}
106106
/>
107107
</Section>
108-
<Section name={sectionNames.interaction}>{children.onUIEvent.getPropertyView()}</Section>
108+
<Section name={sectionNames.interaction}>
109+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
110+
{children.onUIEvent.propertyView({title: trans("chart.chartEventHandlers")})}
111+
</div>
112+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
113+
{children.onEvent.propertyView()}
114+
</div>
115+
</Section>
109116
<Section name={sectionNames.layout}>
110117
{children.title.propertyView({ label: trans("chart.title") })}
111118
{children.chartConfig.children.compType.getView() !== "pie" && (
@@ -144,6 +151,9 @@ export function chartPropertyView(
144151
),
145152
})}
146153
</Section>
154+
<Section name={sectionNames.interaction}>
155+
{children.onEvent.propertyView()}
156+
</Section>
147157
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
148158
</>
149159
);
@@ -189,7 +199,14 @@ export function chartPropertyView(
189199
),
190200
})}
191201
</Section>
192-
<Section name={sectionNames.interaction}>{children.onMapEvent.getPropertyView()}</Section>
202+
<Section name={sectionNames.interaction}>
203+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
204+
{children.onMapEvent.propertyView({title: trans("chart.chartEventHandlers")})}
205+
</div>
206+
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
207+
{children.onEvent.propertyView()}
208+
</div>
209+
</Section>
193210
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
194211
</>
195212
);

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const en = {
6464
unselectDesc:
6565
"Triggered when a user unselects part of the data in the chart",
6666
selectedPointsDesc: "Selected Points",
67+
lastInteractionDataDesc: "Last Interaction Data",
6768
dataDesc: "JSON Data for the Chart",
6869
titleDesc: "Current Chart Title",
6970
scatterShape: "Scatter Shape",
@@ -82,6 +83,7 @@ export const en = {
8283
zoomLevelChangeDesc: "Triggers when the map zoom level changes",
8384
centerPositionChange: "Center Position Change",
8485
centerPositionChangeDesc: "Triggers when the map center position changes",
86+
chartEventHandlers: "Chart Event Handlers",
8587
},
8688
imageEditor: {
8789
defaultSrc: "",
@@ -156,5 +158,6 @@ export const en = {
156158
eventIdRequire: "Enter Event ID",
157159
eventIdTooltip: "Unique ID for each event",
158160
eventIdExist: "ID Exists",
161+
dragDropEventHandlers: "Drag/Drop Event Handlers",
159162
},
160163
};

‎client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const zh = {
6161
selectDesc: "当用户选择图表中的部分数据时触发",
6262
unselectDesc: "当用户取消选择图表中的部分数据时触发",
6363
selectedPointsDesc: "已选中的数据点",
64+
lastInteractionDataDesc: "最后交互数据",
6465
dataDesc: "当前图表使用的原始数据",
6566
titleDesc: "当前图表标题",
6667
scatterShape: "散点形状",
@@ -77,7 +78,8 @@ export const zh = {
7778
zoomLevelChange: "缩放级别更改",
7879
zoomLevelChangeDesc: "地图缩放级别更改时触发",
7980
centerPositionChange: "中心位置变化",
80-
centerPositionChangeDesc: "地图中心位置改变时触发"
81+
centerPositionChangeDesc: "地图中心位置改变时触发",
82+
chartEventHandlers: "图表事件处理程序",
8183
},
8284
imageEditor: {
8385
defaultSrc: "",
@@ -149,5 +151,6 @@ export const zh = {
149151
eventIdRequire: "请输入事件ID",
150152
eventIdTooltip: "每个事件的唯一标识符",
151153
eventIdExist: "ID已存在",
154+
dragDropEventHandlers: "拖/放事件处理程序",
152155
},
153156
};

‎client/packages/lowcoder/src/index.sdk.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export * from "util/objectUtils";
2929
export * from "util/objectUtils";
3030
export * from "util/perfUtils";
3131
export * from "util/permissionUtils";
32+
export * from "util/promiseUtils";
3233
export * from "util/reducerUtils";
3334
export * from "util/scheduleUtils";
3435
export * from "util/stringUtils";

0 commit comments

Comments
 (0)