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)
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