Skip to content

Commit b104001

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1540 from lowcoder-org/doc/existing_components
Added examples for Chart components
2 parents 7e73a9a + ad12095 commit b104001

30 files changed

+5086
-547
lines changed

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx

+151-2
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,163 @@ export default function CalendarExample() {
1111
<>
1212
<ExampleGroup
1313
title={trans("componentDoc.basicUsage")}
14-
description={trans("componentDoc.basicDemoDescription")}
14+
description="The Following Examples Show the Basic Usage of the Calendar Component."
1515
>
1616
<Example
17-
title={trans("componentDoc.default")}
17+
title="Default Calendar"
18+
width={700}
19+
height={600}
1820
config={{
1921
}}
2022
compFactory={ChartCompWithDefault}
2123
/>
24+
<Example
25+
title="Hiding the Calendar component"
26+
width={700}
27+
height={600}
28+
config={{
29+
hidden: true,
30+
}}
31+
compFactory={ChartCompWithDefault}
32+
/>
33+
</ExampleGroup>
34+
35+
<ExampleGroup
36+
title="Advanced Options"
37+
description="The Following Examples Show the Advance usage/options of the Calendar Component."
38+
>
39+
<Example
40+
title="Editable - Double Click on a slot to add the Event"
41+
width={700}
42+
height={600}
43+
config={{
44+
editable: true,
45+
}}
46+
compFactory={ChartCompWithDefault}
47+
/>
48+
<Example
49+
title="Hiding Event Times"
50+
width={700}
51+
height={600}
52+
config={{
53+
showEventTime: false,
54+
}}
55+
compFactory={ChartCompWithDefault}
56+
/>
57+
<Example
58+
title="Hiding Weekends"
59+
width={700}
60+
height={600}
61+
config={{
62+
showWeekends: false,
63+
}}
64+
compFactory={ChartCompWithDefault}
65+
/>
66+
<Example
67+
title="Hiding All Day Option"
68+
width={700}
69+
height={600}
70+
config={{
71+
showAllDay: false,
72+
}}
73+
compFactory={ChartCompWithDefault}
74+
/>
75+
</ExampleGroup>
76+
77+
<ExampleGroup
78+
title="Layout"
79+
description="The Following Examples Show different Layout options of the Calendar Component."
80+
>
81+
<Example
82+
title="Initial Calendar View - Year"
83+
width={700}
84+
height={600}
85+
config={{
86+
currentFreeView: "multiMonthYear",
87+
}}
88+
compFactory={ChartCompWithDefault}
89+
/>
90+
<Example
91+
title="Initial Calendar View - Month"
92+
width={700}
93+
height={600}
94+
config={{
95+
currentFreeView: "dayGridMonth",
96+
}}
97+
compFactory={ChartCompWithDefault}
98+
/>
99+
<Example
100+
title="Initial Calendar View - Week"
101+
width={700}
102+
height={600}
103+
config={{
104+
currentFreeView: "timeGridWeek",
105+
}}
106+
compFactory={ChartCompWithDefault}
107+
/>
108+
<Example
109+
title="Initial Calendar View - Week"
110+
width={700}
111+
height={600}
112+
config={{
113+
currentFreeView: "dayGridWeek",
114+
}}
115+
compFactory={ChartCompWithDefault}
116+
/>
117+
<Example
118+
title="Initial Calendar View - Day Event List"
119+
width={700}
120+
height={600}
121+
config={{
122+
currentFreeView: "dayGridDay",
123+
}}
124+
compFactory={ChartCompWithDefault}
125+
/>
126+
<Example
127+
title="Initial Calendar View - Time Event List"
128+
width={700}
129+
height={600}
130+
config={{
131+
currentFreeView: "timeGridDay",
132+
}}
133+
compFactory={ChartCompWithDefault}
134+
/>
135+
<Example
136+
title="Initial Calendar View - Event List"
137+
width={700}
138+
height={600}
139+
config={{
140+
currentFreeView: "listWeek",
141+
}}
142+
compFactory={ChartCompWithDefault}
143+
/>
144+
<Example
145+
title="Start From - Saturday"
146+
width={700}
147+
height={600}
148+
config={{
149+
firstDay: 6,
150+
}}
151+
compFactory={ChartCompWithDefault}
152+
/>
153+
<Example
154+
title="Start From - Monday"
155+
width={700}
156+
height={600}
157+
config={{
158+
firstDay: 1,
159+
}}
160+
compFactory={ChartCompWithDefault}
161+
/>
162+
<Example
163+
title="Show Vertical ScrollBar"
164+
width={700}
165+
height={600}
166+
config={{
167+
showVerticalScrollbar: true,
168+
}}
169+
compFactory={ChartCompWithDefault}
170+
/>
22171
</ExampleGroup>
23172
</>
24173
);

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

+82-53
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup";
66

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

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-
};
9+
const chartStyle= {
10+
background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
11+
chartBorderColor: "#FDFAFA",
12+
chartBorderStyle: "solid",
13+
chartBorderWidth: "2",
14+
chartBoxShadow: "200",
15+
chartShadowColor: "#3377FF"
16+
}
5217

53-
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
18+
const titleStyle = {
19+
chartBoxShadow: "9",
20+
chartFontStyle: "Italic",
21+
chartShadowColor: "#FFBD01",
22+
chartTextColor: "#36B389",
23+
chartTextSize: "30",
24+
chartTextWeight: "Bold"
25+
}
26+
27+
const xAxisStyle = {
28+
chartBoxShadow: "5",
29+
chartFontFamily: "serif",
30+
chartFontStyle: "Italic",
31+
chartShadowColor: "#020101",
32+
chartTextColor: "#971827",
33+
chartTextSize: "20",
34+
chartTextWeight: "bold"
35+
}
36+
37+
const yAxisStyle = {
38+
chartBoxShadow: "5",
39+
chartFontFamily: "serif",
40+
chartFontStyle: "Italic",
41+
chartShadowColor: "#FFD701",
42+
chartTextColor: "#7A7A7B",
43+
chartTextSize: "20",
44+
chartTextWeight: "bold"
45+
}
5446

5547
export default function CandleStickChartExample() {
56-
const blackListConfig: string[] = ["echartsOption"];
5748
return (
5849
<>
5950
<ExampleGroup
@@ -65,7 +56,6 @@ export default function CandleStickChartExample() {
6556
width={500}
6657
height={300}
6758
config={{
68-
echartsOption: echartsOption,
6959
}}
7060
compFactory={ChartCompWithDefault}
7161
/>
@@ -74,7 +64,6 @@ export default function CandleStickChartExample() {
7464
width={500}
7565
height={300}
7666
config={{
77-
echartsOption: echartsOption,
7867
tooltip: false,
7968
}}
8069
compFactory={ChartCompWithDefault}
@@ -90,7 +79,6 @@ export default function CandleStickChartExample() {
9079
width={500}
9180
height={300}
9281
config={{
93-
echartsOption: echartsOption,
9482
top: 20,
9583
right: 20,
9684
bottom: 20,
@@ -109,7 +97,6 @@ export default function CandleStickChartExample() {
10997
width={500}
11098
height={300}
11199
config={{
112-
echartsOption: echartsOption,
113100
echartsTitleConfig: {
114101
"position": "left",
115102
},
@@ -121,7 +108,6 @@ export default function CandleStickChartExample() {
121108
width={500}
122109
height={300}
123110
config={{
124-
echartsOption: echartsOption,
125111
echartsTitleConfig: {
126112
"position": "center",
127113
},
@@ -133,7 +119,6 @@ export default function CandleStickChartExample() {
133119
width={500}
134120
height={300}
135121
config={{
136-
echartsOption: echartsOption,
137122
echartsTitleConfig: {
138123
"position": "right",
139124
},
@@ -145,7 +130,6 @@ export default function CandleStickChartExample() {
145130
width={500}
146131
height={300}
147132
config={{
148-
echartsOption: echartsOption,
149133
echartsLegendConfig: {
150134
"position": "bottom",
151135
},
@@ -157,14 +141,59 @@ export default function CandleStickChartExample() {
157141
width={500}
158142
height={300}
159143
config={{
160-
echartsOption: echartsOption,
161144
echartsLegendConfig: {
162145
"position": "top",
163146
},
164147
}}
165148
compFactory={ChartCompWithDefault}
166149
/>
167150
</ExampleGroup>
151+
152+
<ExampleGroup
153+
title="Styling Properties"
154+
description="The Following Examples Show the Styling Properties on the CandleStick Chart Component."
155+
>
156+
<Example
157+
title="Chart Styling - Background Color, Box Shadow, Border"
158+
width={500}
159+
height={350}
160+
hideSettings={true}
161+
config={{
162+
chartStyle: chartStyle,
163+
}}
164+
compFactory={ChartCompWithDefault}
165+
/>
166+
<Example
167+
title="Title Styling - Text, Fonts & Box Shadow"
168+
width={500}
169+
height={350}
170+
hideSettings={true}
171+
config={{
172+
titleStyle: titleStyle,
173+
}}
174+
compFactory={ChartCompWithDefault}
175+
/>
176+
<Example
177+
title="X-Axis Styling"
178+
width={500}
179+
height={350}
180+
hideSettings={true}
181+
config={{
182+
xAxisStyle: xAxisStyle,
183+
}}
184+
compFactory={ChartCompWithDefault}
185+
/>
186+
<Example
187+
title="Y-Axis Styling"
188+
width={500}
189+
height={350}
190+
hideSettings={true}
191+
config={{
192+
yAxisStyle: yAxisStyle,
193+
}}
194+
compFactory={ChartCompWithDefault}
195+
/>
196+
</ExampleGroup>
168197
</>
169198
);
170199
}

0 commit comments

Comments
 (0)