Skip to content

Commit 8c0a9a0

Browse files
author
FalkWolsky
committed
Enablement of remote Comps
1 parent 1b7ae6e commit 8c0a9a0

File tree

4 files changed

+255
-6
lines changed

4 files changed

+255
-6
lines changed

‎client/packages/lowcoder/src/comps/index.tsx

+195-5
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,11 @@ const builtInRemoteComps: Omit<RemoteCompInfo, "compName"> = {
9595
packageName: "lowcoder-comps",
9696
};
9797

98-
export var uiCompMap: Registry = {
98+
export var uiCompMap: Registry = {
9999
// Dashboards
100+
101+
// charts
102+
100103
chart: {
101104
name: trans("uiComp.chartCompName"),
102105
enName: "Chart",
@@ -110,9 +113,156 @@ export var uiCompMap: Registry = {
110113
h: 40,
111114
},
112115
},
116+
117+
funnelChart : {
118+
"name": trans("uiComp.funnelChartCompName"),
119+
"enName": "Sankey Chart",
120+
"description": trans("uiComp.funnelChartCompDesc"),
121+
"categories": ["dashboards"],
122+
"icon": IconCompIcon,
123+
"keywords": trans("uiComp.funnelChartCompKeywords"),
124+
"comp": remoteComp({ ...builtInRemoteComps, compName: "funnelChart" }),
125+
"layoutInfo": {
126+
"w": 12,
127+
"h": 40
128+
}
129+
},
130+
gaugeChart : {
131+
"name": trans("uiComp.gaugeChartCompName"),
132+
"enName": "Candlestick Chart",
133+
"description": trans("uiComp.gaugeChartCompDesc"),
134+
"categories": ["dashboards"],
135+
"icon": IconCompIcon,
136+
"keywords": trans("uiComp.gaugeChartCompKeywords"),
137+
"comp": remoteComp({ ...builtInRemoteComps, compName: "gaugeChart" }),
138+
"layoutInfo": {
139+
"w": 12,
140+
"h": 40
141+
}
142+
},
143+
sankeyChart : {
144+
"name": trans("uiComp.sankeyChartCompName"),
145+
"enName": "Sankey Chart",
146+
"description": trans("uiComp.sankeyChartCompDesc"),
147+
"categories": ["dashboards"],
148+
"icon": IconCompIcon,
149+
"keywords": trans("uiComp.sankeyChartCompKeywords"),
150+
"comp": remoteComp({ ...builtInRemoteComps, compName: "sankeyChart" }),
151+
"layoutInfo": {
152+
"w": 12,
153+
"h": 40
154+
}
155+
},
156+
candleStickChart : {
157+
"name": trans("uiComp.candleStickChartCompName"),
158+
"enName": "Candlestick Chart",
159+
"description": trans("uiComp.candleStickChartCompDesc"),
160+
"categories": ["dashboards"],
161+
"icon": IconCompIcon,
162+
"keywords": trans("uiComp.candleStickChartCompKeywords"),
163+
"comp": remoteComp({ ...builtInRemoteComps, compName: "candleStickChart" }),
164+
"layoutInfo": {
165+
"w": 12,
166+
"h": 40
167+
}
168+
},
169+
radarChart : {
170+
"name": trans("uiComp.radarChartCompName"),
171+
"enName": "Radar Chart",
172+
"description": trans("uiComp.radarChartCompDesc"),
173+
"categories": ["dashboards"],
174+
"icon": IconCompIcon,
175+
"keywords": trans("uiComp.radarChartKeywords"),
176+
"comp": remoteComp({ ...builtInRemoteComps, compName: "radarChart" }),
177+
"layoutInfo": {
178+
"w": 12,
179+
"h": 40
180+
}
181+
},
182+
heatmapChart: {
183+
"name": trans("uiComp.heatmapChartCompName"),
184+
"enName": "Heatmap Chart",
185+
"description": trans("uiComp.heatmapChartCompDesc"),
186+
"categories": ["dashboards"],
187+
"icon": IconCompIcon,
188+
"keywords": trans("uiComp.heatmapChartCompKeywords"),
189+
"comp": remoteComp({ ...builtInRemoteComps, compName: "heatmapChart" }),
190+
"layoutInfo": {
191+
"w": 12,
192+
"h": 40
193+
}
194+
},
195+
graphChart : {
196+
"name": trans("uiComp.graphChartCompName"),
197+
"enName": "Graph Chart",
198+
"description": trans("uiComp.graphChartCompDesc"),
199+
"categories": ["dashboards"],
200+
"icon": IconCompIcon,
201+
"keywords": trans("uiComp.graphChartCompKeywords"),
202+
"comp": remoteComp({ ...builtInRemoteComps, compName: "graphChart" }),
203+
"layoutInfo": {
204+
"w": 12,
205+
"h": 40
206+
}
207+
},
208+
treeChart : {
209+
"name": trans("uiComp.treeChartCompName"),
210+
"enName": "Tree Chart",
211+
"description": trans("uiComp.treeChartCompDesc"),
212+
"categories": ["dashboards"],
213+
"icon": IconCompIcon,
214+
"keywords": trans("uiComp.treeChartCompKeywords"),
215+
"comp": remoteComp({ ...builtInRemoteComps, compName: "treeChart" }),
216+
"layoutInfo": {
217+
"w": 12,
218+
"h": 40
219+
}
220+
},
221+
treemapChart : {
222+
"name": trans("uiComp.treemapChartCompName"),
223+
"enName": "Treemap Chart",
224+
"description": trans("uiComp.treemapChartCompDesc"),
225+
"categories": ["dashboards"],
226+
"icon": IconCompIcon,
227+
"keywords": trans("uiComp.treemapChartCompKeywords"),
228+
"comp": remoteComp({ ...builtInRemoteComps, compName: "treemapChart" }),
229+
"layoutInfo": {
230+
"w": 12,
231+
"h": 40
232+
}
233+
},
234+
sunburstChart: {
235+
"name": trans("uiComp.sunburstChartCompName"),
236+
"enName": "Sunburst Chart",
237+
"description": trans("uiComp.sunburstChartCompDesc"),
238+
"categories": ["dashboards"],
239+
"icon": IconCompIcon,
240+
"keywords": trans("uiComp.sunburstChartCompKeywords"),
241+
"comp": remoteComp({ ...builtInRemoteComps, compName: "sunburstChart" }),
242+
"layoutInfo": {
243+
"w": 12,
244+
"h": 40
245+
}
246+
},
247+
themeriverChart : {
248+
"name": trans("uiComp.themeriverChartCompName"),
249+
"enName": "Theme River Chart",
250+
"description": trans("uiComp.themeriverChartCompDesc"),
251+
"categories": ["dashboards"],
252+
"icon": IconCompIcon,
253+
"keywords": trans("uiComp.themeriverChartCompKeywords"),
254+
"comp": remoteComp({ ...builtInRemoteComps, compName: "themeriverChart" }),
255+
"layoutInfo": {
256+
"w": 12,
257+
"h": 40
258+
}
259+
},
260+
261+
// GeoMap
262+
113263
openLayersGeoMap: {
114264
name: trans("uiComp.openLayersGeoMapCompName"),
115-
enName: "Hillchart",
265+
enName: "OpenLayersGeoMap",
116266
description: trans("uiComp.openLayersGeoMapCompDesc"),
117267
categories: ["dashboards"],
118268
icon: IconCompIcon,
@@ -130,12 +280,13 @@ export var uiCompMap: Registry = {
130280
categories: ["dashboards"],
131281
icon: IconCompIcon,
132282
keywords: trans("uiComp.chartsGeoMapCompKeywords"),
133-
comp: remoteComp({ ...builtInRemoteComps, compName: "chartsGeoMapComp" }),
283+
comp: remoteComp({ ...builtInRemoteComps, compName: "chartsGeoMap" }),
134284
layoutInfo: {
135285
w: 19,
136286
h: 60,
137287
},
138288
},
289+
139290
table: {
140291
name: trans("uiComp.tableCompName"),
141292
enName: "Table",
@@ -154,6 +305,20 @@ export var uiCompMap: Registry = {
154305
defaultDataFnName: "defaultTableData",
155306
defaultDataFnPath: "comps/tableComp/mockTableComp",
156307
},
308+
309+
pivotTable: {
310+
name: trans("uiComp.pivotTableCompName"),
311+
enName: "pivotTable",
312+
description: trans("uiComp.pivotTableCompDesc"),
313+
categories: ["dashboards"],
314+
icon: IconCompIcon,
315+
keywords: trans("uiComp.pivotTableCompKeywords"),
316+
comp: remoteComp({compName: "pivottable", packageName: "lowcoder-comp-reactpivottable", source: "npm", isRemote: true}),
317+
layoutInfo: {
318+
w: 12,
319+
h: 50,
320+
},
321+
},
157322

158323
mermaid: {
159324
name: trans("uiComp.mermaidCompName"),
@@ -1009,7 +1174,19 @@ export var uiCompMap: Registry = {
10091174
h: 50,
10101175
},
10111176
},
1012-
1177+
bpmnEditor: {
1178+
name: trans("uiComp.bpmnEditorCompName"),
1179+
enName: "BPMN Editor",
1180+
description: trans("uiComp.bpmnEditorCompDesc"),
1181+
categories: ["projectmanagement", "documents"],
1182+
icon: IconCompIcon,
1183+
keywords: trans("uiComp.bpmnEditorCompKeywords"),
1184+
comp: remoteComp({compName: "bpmn", packageName: "lowcoder-comp-bpmn-io", source: "npm", isRemote: true}),
1185+
layoutInfo: {
1186+
w: 19,
1187+
h: 60,
1188+
},
1189+
},
10131190
progress: {
10141191
name: trans("uiComp.progressCompName"),
10151192
enName: "Progress",
@@ -1327,8 +1504,21 @@ export var uiCompMap: Registry = {
13271504
compName: 'transferComp',
13281505
compPath: 'comps/transferComp',
13291506
layoutInfo: {
1330-
h: 50,
13311507
w: 12,
1508+
h: 50,
1509+
},
1510+
},
1511+
turnstileCaptcha: {
1512+
name: trans("uiComp.turnstileCaptchaCompName"),
1513+
enName: "Cloudflare Turnstile",
1514+
description: trans("uiComp.turnstileCaptchaCompDesc"),
1515+
categories: ["itemHandling"],
1516+
icon: IconCompIcon,
1517+
keywords: trans("uiComp.turnstileCaptchaCompKeywords"),
1518+
comp: remoteComp({compName: "cloudflareTurnstile", packageName: "lowcoder-comp-cf-turnstile", source: "npm", isRemote: true}),
1519+
layoutInfo: {
1520+
w: 8,
1521+
h: 20,
13321522
},
13331523
},
13341524

‎client/packages/lowcoder/src/comps/uiCompRegistry.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export type UICompType =
157157
| "treeChart"
158158
| "treemapChart"
159159
| "sunburstChart"
160-
| "themeriverChart"
160+
| "themeriverChart"
161161
;
162162

163163

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

+48
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ export const en = {
2424
"error": "Error",
2525
"reference": "Reference",
2626
"text": "Text",
27+
"basic": "Basic",
2728
"label": "Label",
29+
"layout": "Layout",
2830
"color": "Color",
2931
"form": "Form",
3032
"menu": "Menu",
@@ -372,6 +374,8 @@ export const en = {
372374
"shareContentDesc": "Triggers on Share Content",
373375
"shareContentEnd": "Share Content End",
374376
"shareContentEndDesc": "Triggers on Share Content End",
377+
"stopShare": "Stop Share",
378+
"stopShareDesc": "Triggers on Stop Share",
375379
"meetingStart": "Meeting Start",
376380
"meetingStartDesc": "Triggers on Meeting Start",
377381
"meetingEnd": "Meeting End",
@@ -1162,6 +1166,50 @@ export const en = {
11621166
"pivotTableCompDesc": "A data summarization and analysis tool for organizing and aggregating data in a tabular format.",
11631167
"pivotTableCompKeywords": "pivot table, data, analysis, aggregation",
11641168

1169+
"funnelChartCompName": "Funnel Chart",
1170+
"funnelChartCompDesc": "A visualization tool for displaying the progressive reduction of data as it passes through stages.",
1171+
"funnelChartCompKeywords": "funnel chart, sales, conversions, process",
1172+
1173+
"gaugeChartCompName": "Gauge Chart",
1174+
"gaugeChartCompDesc": "A chart that displays data as a reading on a dial, useful for indicating the status or level of something.",
1175+
"gaugeChartCompKeywords": "gauge chart, metrics, performance, status",
1176+
1177+
"sankeyChartCompName": "Sankey Chart",
1178+
"sankeyChartCompDesc": "A flow diagram in which the width of the arrows is proportional to the flow rate, used to show energy, material, or cost transfers.",
1179+
"sankeyChartCompKeywords": "sankey chart, flow, energy, costs",
1180+
1181+
"candleStickChartCompName": "Candlestick Chart",
1182+
"candleStickChartCompDesc": "A style of financial chart used to describe price movements of a security, derivative, or currency.",
1183+
"candleStickChartCompKeywords": "candlestick chart, stocks, trading, finance",
1184+
1185+
"radarChartCompName": "Radar Chart",
1186+
"radarChartCompDesc": "A graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables.",
1187+
"radarChartCompKeywords": "radar chart, multivariate, performance analysis",
1188+
1189+
"heatmapChartCompName": "Heatmap Chart",
1190+
"heatmapChartCompDesc": "A graphical representation of data where individual values are represented as colors.",
1191+
"heatmapChartCompKeywords": "heatmap, data visualization, intensity",
1192+
1193+
"graphChartCompName": "Graph Chart",
1194+
"graphChartCompDesc": "A diagram representing a network of nodes connected by edges, useful for showing interconnections and relationships.",
1195+
"graphChartCompKeywords": "graph chart, networks, relationships, nodes",
1196+
1197+
"treeChartCompName": "Tree Chart",
1198+
"treeChartCompDesc": "A diagram that visually represents hierarchy in a tree-like structure, showing relationships among various nodes.",
1199+
"treeChartCompKeywords": "tree chart, hierarchy, organizational",
1200+
1201+
"treemapChartCompName": "Treemap Chart",
1202+
"treemapChartCompDesc": "A chart that uses nested rectangles to represent hierarchical data proportionately.",
1203+
"treemapChartCompKeywords": "treemap, hierarchy, data visualization",
1204+
1205+
"sunburstChartCompName": "Sunburst Chart",
1206+
"sunburstChartCompDesc": "A radial space-filling visualization technique that illustrates hierarchical relationships through layers of a circle.",
1207+
"sunburstChartCompKeywords": "sunburst chart, radial, hierarchy",
1208+
1209+
"themeriverChartCompName": "Theme River Chart",
1210+
"themeriverChartCompDesc": "A visualization resembling a stream graph that shows changes in a data set over time across categories.",
1211+
"themeriverChartCompKeywords": "theme river, time series, trends",
1212+
11651213
// by mousheng
11661214

11671215
"colorPickerCompName": "Color Picker",

‎client/packages/lowcoder/src/pages/editor/editorConstants.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,17 @@ export const CompStateIcon: {
160160
bpmnEditor: <LeftCommon />, // Placeholder or specify if there's a dedicated icon
161161
turnstileCaptcha: <LeftCommon />, // Placeholder or specify if there's a dedicated icon
162162
pivotTable: <LeftCommon />, // Placeholder or specify if there's a dedicated icon
163+
funnelChart: <LeftCommon />,
164+
gaugeChart: <LeftCommon />,
165+
sankeyChart : <LeftCommon />,
166+
candleStickChart : <LeftCommon />,
167+
radarChart : <LeftCommon />,
168+
heatmapChart : <LeftCommon />,
169+
graphChart : <LeftCommon />,
170+
treeChart : <LeftCommon />,
171+
treemapChart : <LeftCommon />,
172+
sunburstChart : <LeftCommon />,
173+
themeriverChart : <LeftCommon />,
163174

164175
avatar: <LeftCommon />,
165176
avatarGroup: <LeftCommon />,

0 commit comments

Comments
 (0)