Skip to content

Commit e04598d

Browse files
adnanqaopsadnanqaops
committed
added different examples for multiple components
1 parent 47c101b commit e04598d

16 files changed

+449
-250
lines changed

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChart.tsx

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -159,17 +159,6 @@ export default function ChartExample() {
159159
}}
160160
compFactory={ChartCompWithDefault}
161161
/>
162-
<Example
163-
title={trans("componentDoc.echart")}
164-
width={500}
165-
height={300}
166-
blackListConfig={blackListConfig}
167-
config={{
168-
mode: "json",
169-
echartsOption: echartsOption,
170-
}}
171-
compFactory={ChartCompWithDefault}
172-
/>
173162
</ExampleGroup>
174163

175164
<ExampleGroup title={trans("componentDoc.line")}>
@@ -366,26 +355,6 @@ export default function ChartExample() {
366355
compFactory={ChartCompWithDefault}
367356
/>
368357
</ExampleGroup>
369-
370-
<ExampleGroup title={trans("componentDoc.pie")}>
371-
<Example
372-
title={trans("componentDoc.basicPie")}
373-
width={500}
374-
height={300}
375-
nameMap={{ "chartConfig.comp.type": trans("componentDoc.pieChatType") }}
376-
blackListConfig={blackListConfig}
377-
config={{
378-
mode: "map",
379-
data: data,
380-
series: series,
381-
chartConfig: {
382-
compType: "bar",
383-
comp: { type: "basicBar" },
384-
},
385-
}}
386-
compFactory={ChartCompWithDefault}
387-
/>
388-
</ExampleGroup>
389358
</>
390359
);
391360
}

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/BasicChartLegacy.tsx

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -159,17 +159,6 @@ export default function ChartExample() {
159159
}}
160160
compFactory={ChartCompWithDefault}
161161
/>
162-
<Example
163-
title={trans("componentDoc.echart")}
164-
width={500}
165-
height={300}
166-
blackListConfig={blackListConfig}
167-
config={{
168-
mode: "json",
169-
echartsOption: echartsOption,
170-
}}
171-
compFactory={ChartCompWithDefault}
172-
/>
173162
</ExampleGroup>
174163

175164
<ExampleGroup title={trans("componentDoc.line")}>

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/CandleStickChart.tsx

Lines changed: 133 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,161 @@ import ExampleGroup from "../../common/ExampleGroup";
66

77
const ChartCompWithDefault = uiCompRegistry["candleStickChart"].comp;
88

9-
const defaultDataSource = "[\n {\n \"date\": \"2021-09\",\n \"department\": \"Administration\",\n \"spending\": 9003,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Finance\",\n \"spending\": 3033,\n \"budget\": 4000\n },\n {\n \"date\": \"2021-09\",\n \"department\": \"Sales\",\n \"spending\": 9230,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Administration\",\n \"spending\": 13032,\n \"budget\": 15000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Finance\",\n \"spending\": 2300,\n \"budget\": 5000\n },\n {\n \"date\": \"2021-10\",\n \"department\": \"Sales\",\n \"spending\": 7323.5,\n \"budget\": 8000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Administration\",\n \"spending\": 13000,\n \"budget\": 16023\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Finance\",\n \"spending\": 3569.5,\n \"budget\": 3000\n },\n {\n \"date\": \"2021-11\",\n \"department\": \"Sales\",\n \"spending\": 10000,\n \"budget\": 9932\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Administration\",\n \"spending\": 18033,\n \"budget\": 20000\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Finance\",\n \"spending\": 4890,\n \"budget\": 4500\n },\n {\n \"date\": \"2021-12\",\n \"department\": \"Sales\",\n \"spending\": 9322,\n \"budget\": 8000\n }\n]";
9+
const defaultEchartsJsonOption = {
10+
"xAxis": {
11+
"data": [
12+
"Day 1",
13+
"Day 2",
14+
"Day 3",
15+
"Day 4",
16+
"Day 5"
17+
]
18+
},
19+
"data": [
20+
[
21+
150,
22+
100,
23+
50,
24+
200
25+
],
26+
[
27+
120,
28+
220,
29+
80,
30+
180
31+
],
32+
[
33+
80,
34+
150,
35+
60,
36+
130
37+
],
38+
[
39+
230,
40+
130,
41+
110,
42+
190
43+
],
44+
[
45+
90,
46+
180,
47+
70,
48+
160
49+
]
50+
]
51+
};
1052

11-
const defaultEchartsJsonOption = "{\n \"xAxis\": {\n \"data\": [\n \"Day 1\",\n \"Day 2\",\n \"Day 3\",\n \"Day 4\",\n \"Day 5\"\n ]\n },\n \"data\": [\n [\n 100,\n 200,\n 50,\n 150\n ],\n [\n 120,\n 220,\n 80,\n 180\n ],\n [\n 80,\n 150,\n 60,\n 130\n ],\n [\n 130,\n 230,\n 110,\n 190\n ],\n [\n 90,\n 180,\n 70,\n 160\n ]\n ]\n}";
12-
13-
const data = JSON.stringify(defaultDataSource);
1453
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
1554

1655
export default function CandleStickChartExample() {
17-
const blackListConfig: string[] = ["data", "echartsOption", "series"];
18-
const series = [
19-
{
20-
"columnName": "spending",
21-
"seriesName": "Spending",
22-
"dataIndex": "f011b34c"
23-
},
24-
{
25-
"columnName": "budget",
26-
"seriesName": "Budget",
27-
"dataIndex": "30e02269"
28-
}
29-
];
56+
const blackListConfig: string[] = ["echartsOption"];
3057
return (
3158
<>
3259
<ExampleGroup
3360
title={trans("componentDoc.basicUsage")}
34-
description={trans("componentDoc.basicDemoDescription")}
61+
description="The Following Examples show the basic usage of the CandleStick Chart Component."
3562
>
3663
<Example
3764
title={trans("componentDoc.default")}
3865
width={500}
3966
height={300}
40-
blackListConfig={blackListConfig}
4167
config={{
42-
mode: "json",
43-
data: data,
44-
series: series,
68+
echartsOption: echartsOption,
69+
}}
70+
compFactory={ChartCompWithDefault}
71+
/>
72+
<Example
73+
title="Hiding the Tooltip"
74+
width={500}
75+
height={300}
76+
config={{
77+
echartsOption: echartsOption,
78+
tooltip: false,
79+
}}
80+
compFactory={ChartCompWithDefault}
81+
/>
82+
</ExampleGroup>
83+
84+
<ExampleGroup
85+
title="Chart Position"
86+
description="The Following Examples show the Chart Position of the CandleStick Chart Component."
87+
>
88+
<Example
89+
title="Custom Position"
90+
width={500}
91+
height={300}
92+
config={{
93+
echartsOption: echartsOption,
94+
top: 20,
95+
right: 20,
96+
bottom: 20,
97+
left: 20,
98+
}}
99+
compFactory={ChartCompWithDefault}
100+
/>
101+
</ExampleGroup>
102+
103+
<ExampleGroup
104+
title="Title Position"
105+
description="The Following Examples show the different title position of the CandleStick Chart Component."
106+
>
107+
<Example
108+
title="Title Position - Left"
109+
width={500}
110+
height={300}
111+
config={{
112+
echartsOption: echartsOption,
113+
echartsTitleConfig: {
114+
"position": "left",
115+
},
116+
}}
117+
compFactory={ChartCompWithDefault}
118+
/>
119+
<Example
120+
title="Title Position - Center"
121+
width={500}
122+
height={300}
123+
config={{
124+
echartsOption: echartsOption,
125+
echartsTitleConfig: {
126+
"position": "center",
127+
},
128+
}}
129+
compFactory={ChartCompWithDefault}
130+
/>
131+
<Example
132+
title="Title Position - Right"
133+
width={500}
134+
height={300}
135+
config={{
136+
echartsOption: echartsOption,
137+
echartsTitleConfig: {
138+
"position": "right",
139+
},
140+
}}
141+
compFactory={ChartCompWithDefault}
142+
/>
143+
<Example
144+
title="Title Position - Top"
145+
width={500}
146+
height={300}
147+
config={{
148+
echartsOption: echartsOption,
149+
echartsLegendConfig: {
150+
"position": "bottom",
151+
},
45152
}}
46153
compFactory={ChartCompWithDefault}
47154
/>
48155
<Example
49-
title={trans("componentDoc.echart")}
156+
title="Title Position - Bottom"
50157
width={500}
51158
height={300}
52-
blackListConfig={blackListConfig}
53159
config={{
54-
mode: "json",
55160
echartsOption: echartsOption,
161+
echartsLegendConfig: {
162+
"position": "top",
163+
},
56164
}}
57165
compFactory={ChartCompWithDefault}
58166
/>

0 commit comments

Comments
 (0)