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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy