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

Lines changed: 151 additions & 2 deletions
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

Lines changed: 82 additions & 53 deletions
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)
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