Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b9f936d

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /