Skip to content

Commit d6a8389

Browse files
adnanqaopsadnanqaops
committed
added examples for chart components
1 parent 2c62a30 commit d6a8389

File tree

7 files changed

+1139
-135
lines changed

7 files changed

+1139
-135
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ const titleStyle = {
2424
chartTextWeight: "Bold"
2525
}
2626

27-
const labelStyle = {
27+
const xAxisStyle = {
2828
chartBoxShadow: "5",
2929
chartFontFamily: "serif",
3030
chartFontStyle: "Italic",
3131
chartShadowColor: "#020101",
32-
chartTextColor: "#FFFFFF",
32+
chartTextColor: "#971827",
3333
chartTextSize: "20",
3434
chartTextWeight: "bold"
3535
}
3636

37-
const legendStyle = {
37+
const yAxisStyle = {
3838
chartBoxShadow: "5",
3939
chartFontFamily: "serif",
4040
chartFontStyle: "Italic",
@@ -151,7 +151,7 @@ export default function CandleStickChartExample() {
151151

152152
<ExampleGroup
153153
title="Styling Properties"
154-
description="The Following Examples Show the Styling Properties on the Funnel Chart Component."
154+
description="The Following Examples Show the Styling Properties on the CandleStick Chart Component."
155155
>
156156
<Example
157157
title="Chart Styling - Background Color, Box Shadow, Border"
@@ -174,22 +174,22 @@ export default function CandleStickChartExample() {
174174
compFactory={ChartCompWithDefault}
175175
/>
176176
<Example
177-
title="Label Styling - Text, Fonts & Box Shadow"
177+
title="X-Axis Styling"
178178
width={500}
179179
height={350}
180180
hideSettings={true}
181181
config={{
182-
labelStyle: labelStyle,
182+
xAxisStyle: xAxisStyle,
183183
}}
184184
compFactory={ChartCompWithDefault}
185185
/>
186186
<Example
187-
title="Lagend Styling - Text, Fonts & Box Shadow"
187+
title="Y-Axis Styling"
188188
width={500}
189189
height={350}
190190
hideSettings={true}
191191
config={{
192-
legendStyle: legendStyle,
192+
yAxisStyle: yAxisStyle,
193193
}}
194194
compFactory={ChartCompWithDefault}
195195
/>

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

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

77
const ChartCompWithDefault = uiCompRegistry["graphChart"].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]";
10-
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}";
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+
}
1217

13-
const data = JSON.stringify(defaultDataSource);
14-
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+
}
1526

1627
export default function GraphChartExample() {
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-
];
3028
return (
3129
<>
3230
<ExampleGroup
@@ -37,11 +35,33 @@ export default function GraphChartExample() {
3735
title={trans("componentDoc.default")}
3836
width={500}
3937
height={300}
40-
blackListConfig={blackListConfig}
4138
config={{
42-
mode: "json",
43-
data: data,
44-
series: series,
39+
}}
40+
compFactory={ChartCompWithDefault}
41+
/>
42+
</ExampleGroup>
43+
44+
<ExampleGroup
45+
title="Styling Properties"
46+
description="The Following Examples Show the Styling Properties on the Graph Chart Component."
47+
>
48+
<Example
49+
title="Chart Styling - Background Color, Box Shadow, Border"
50+
width={500}
51+
height={350}
52+
hideSettings={true}
53+
config={{
54+
chartStyle: chartStyle,
55+
}}
56+
compFactory={ChartCompWithDefault}
57+
/>
58+
<Example
59+
title="Title Styling - Text, Fonts & Box Shadow"
60+
width={500}
61+
height={350}
62+
hideSettings={true}
63+
config={{
64+
titleStyle: titleStyle,
4565
}}
4666
compFactory={ChartCompWithDefault}
4767
/>

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

Lines changed: 216 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,45 @@ import ExampleGroup from "../../common/ExampleGroup";
66

77
const ChartCompWithDefault = uiCompRegistry["heatmapChart"].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 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+
}
1017

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}";
18+
const titleStyle = {
19+
chartBoxShadow: "9",
20+
chartFontStyle: "Italic",
21+
chartShadowColor: "#FFBD01",
22+
chartTextColor: "#36B389",
23+
chartTextSize: "30",
24+
chartTextWeight: "Bold"
25+
}
1226

13-
const data = JSON.stringify(defaultDataSource);
14-
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
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+
}
1546

1647
export default function HeatmapChartExample() {
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-
];
3048
return (
3149
<>
3250
<ExampleGroup
@@ -37,14 +55,191 @@ export default function HeatmapChartExample() {
3755
title={trans("componentDoc.default")}
3856
width={500}
3957
height={300}
40-
blackListConfig={blackListConfig}
58+
hideSettings={true}
59+
config={{
60+
}}
61+
compFactory={ChartCompWithDefault}
62+
/>
63+
</ExampleGroup>
64+
65+
<ExampleGroup
66+
title="Alignment & Layout"
67+
description="The Following Examples Show the different alignment option on the Heatmap Chart Component."
68+
>
69+
<Example
70+
title="Title Position - Left"
71+
width={500}
72+
height={350}
73+
config={{
74+
echartsTitleConfig : {
75+
"position" : "left",
76+
}
77+
}}
78+
compFactory={ChartCompWithDefault}
79+
/>
80+
<Example
81+
title="Title Position - Center"
82+
width={500}
83+
height={350}
84+
config={{
85+
echartsTitleConfig : {
86+
"position" : "center",
87+
}
88+
}}
89+
compFactory={ChartCompWithDefault}
90+
/>
91+
<Example
92+
title="Title Position - Right"
93+
width={500}
94+
height={350}
4195
config={{
42-
mode: "json",
43-
data: data,
44-
series: series,
96+
echartsTitleConfig : {
97+
"position" : "right",
98+
}
4599
}}
46100
compFactory={ChartCompWithDefault}
47101
/>
102+
<Example
103+
title="Legend Position - Top"
104+
width={500}
105+
height={350}
106+
config={{
107+
echartsLegendConfig : {
108+
"position" : "top",
109+
},
110+
echartsTitleConfig : {
111+
"position" : "left",
112+
},
113+
}}
114+
compFactory={ChartCompWithDefault}
115+
/>
116+
<Example
117+
title="Lagend Position - Bottom"
118+
width={500}
119+
height={350}
120+
config={{
121+
echartsLegendConfig : {
122+
"position" : "bottom",
123+
}
124+
}}
125+
compFactory={ChartCompWithDefault}
126+
/>
127+
<Example
128+
title="Legend Orientation + Position - Vertical + Left"
129+
width={500}
130+
height={350}
131+
config={{
132+
echartsLegendOrientConfig: {
133+
orient: "vertical"
134+
},
135+
echartsLegendAlignConfig: {
136+
left: "left"
137+
},
138+
}}
139+
compFactory={ChartCompWithDefault}
140+
/>
141+
<Example
142+
title="Legend Orientation + Position - Horizontal + Center"
143+
width={500}
144+
height={350}
145+
config={{
146+
echartsLegendOrientConfig: {
147+
orient: "horizontal"
148+
},
149+
}}
150+
compFactory={ChartCompWithDefault}
151+
/>
152+
<Example
153+
title="Legend Orientation + Position - Vertical + Right"
154+
width={500}
155+
height={350}
156+
config={{
157+
echartsLegendOrientConfig: {
158+
orient: "vertical"
159+
},
160+
echartsLegendAlignConfig: {
161+
left: "right"
162+
},
163+
}}
164+
compFactory={ChartCompWithDefault}
165+
/>
166+
<Example
167+
title="Hiding Labels"
168+
width={500}
169+
height={350}
170+
config={{
171+
echartsLabelConfig: {
172+
labelVisibility: false,
173+
},
174+
}}
175+
compFactory={ChartCompWithDefault}
176+
/>
177+
<Example
178+
title="Chart Position - Top & Left"
179+
width={500}
180+
height={350}
181+
config={{
182+
top: "0",
183+
left: "0",
184+
}}
185+
compFactory={ChartCompWithDefault}
186+
/>
187+
<Example
188+
title="Chart Position - Bottom & Right"
189+
width={500}
190+
height={350}
191+
config={{
192+
bottom: "0",
193+
right: "0",
194+
}}
195+
compFactory={ChartCompWithDefault}
196+
/>
197+
</ExampleGroup>
198+
199+
<ExampleGroup
200+
title="Styling Properties"
201+
description="The Following Examples Show the Styling Properties on the HeatMap Chart Component."
202+
>
203+
<Example
204+
title="Chart Styling - Background Color, Box Shadow, Border"
205+
width={500}
206+
height={350}
207+
hideSettings={true}
208+
config={{
209+
chartStyle: chartStyle,
210+
}}
211+
compFactory={ChartCompWithDefault}
212+
/>
213+
<Example
214+
title="Title Styling - Text, Fonts & Box Shadow"
215+
width={500}
216+
height={350}
217+
hideSettings={true}
218+
config={{
219+
titleStyle: titleStyle,
220+
}}
221+
compFactory={ChartCompWithDefault}
222+
/>
223+
<Example
224+
title="X-Axis Styling"
225+
width={500}
226+
height={350}
227+
hideSettings={true}
228+
config={{
229+
xAxisStyle: xAxisStyle,
230+
}}
231+
compFactory={ChartCompWithDefault}
232+
/>
233+
<Example
234+
title="Y-Axis Styling"
235+
width={500}
236+
height={350}
237+
hideSettings={true}
238+
config={{
239+
yAxisStyle: yAxisStyle,
240+
}}
241+
compFactory={ChartCompWithDefault}
242+
/>
48243
</ExampleGroup>
49244
</>
50245
);

0 commit comments

Comments
 (0)