Skip to content

Commit ad12095

Browse files
adnanqaopsadnanqaops
committed
added changes to table and other components
1 parent 0c3c98a commit ad12095

File tree

8 files changed

+511
-11
lines changed

8 files changed

+511
-11
lines changed

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

+19-4
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function GeoMapChartExample() {
3232
width={500}
3333
height={300}
3434
config={{
35+
mapZoomLevel: "1",
3536
}}
3637
compFactory={ChartCompWithDefault}
3738
/>
@@ -40,6 +41,7 @@ export default function GeoMapChartExample() {
4041
width={500}
4142
height={300}
4243
config={{
44+
mapZoomLevel: "3",
4345
}}
4446
compFactory={ChartCompWithDefault}
4547
/>
@@ -48,30 +50,43 @@ export default function GeoMapChartExample() {
4850
width={500}
4951
height={300}
5052
config={{
53+
mapZoomLevel: "5",
5154
}}
5255
compFactory={ChartCompWithDefault}
5356
/>
5457
<Example
55-
title="Center Position ( Lat, Lon) - Spain"
56-
width={500}
58+
title="Center Position ( Lat, Long) - Spain"
59+
width={700}
5760
height={300}
61+
hideSettings={true}
5862
config={{
63+
mapCenterLng: "-0.5033",
64+
mapCenterLat: "40.5235",
65+
mapZoomLevel: "5",
5966
}}
6067
compFactory={ChartCompWithDefault}
6168
/>
6269
<Example
6370
title="Center Position ( Lat, Lon) - USA"
64-
width={500}
71+
width={700}
6572
height={300}
73+
hideSettings={true}
6674
config={{
75+
mapCenterLng: "-97.5348",
76+
mapCenterLat: "38.7946",
77+
mapZoomLevel: "5",
6778
}}
6879
compFactory={ChartCompWithDefault}
6980
/>
7081
<Example
7182
title="Center Position ( Lat, Lon) - Turkey"
72-
width={500}
83+
width={700}
7384
height={300}
85+
hideSettings={true}
7486
config={{
87+
mapCenterLng: "38.5348",
88+
mapCenterLat: "38.7946",
89+
mapZoomLevel: "5",
7590
}}
7691
compFactory={ChartCompWithDefault}
7792
/>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function MermaidChartExample() {
2626
width={500}
2727
height={300}
2828
config={{
29-
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
29+
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
3030
}}
3131
compFactory={ChartCompWithDefault}
3232
/>

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

+36
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,42 @@ export default function OpenLayersGeoMapChartExample() {
2121
}}
2222
compFactory={ChartCompWithDefault}
2323
/>
24+
<Example
25+
title="Center Position - USA"
26+
width={500}
27+
height={300}
28+
config={{
29+
center: "[-92.5348,38.7946]",
30+
}}
31+
compFactory={ChartCompWithDefault}
32+
/>
33+
<Example
34+
title="Zoom Level - 3"
35+
width={500}
36+
height={300}
37+
config={{
38+
zoom: "3",
39+
}}
40+
compFactory={ChartCompWithDefault}
41+
/>
42+
<Example
43+
title="Zoom Level - 7"
44+
width={500}
45+
height={300}
46+
config={{
47+
zoom: "7",
48+
}}
49+
compFactory={ChartCompWithDefault}
50+
/>
51+
<Example
52+
title="Zoom Level - 10"
53+
width={500}
54+
height={300}
55+
config={{
56+
zoom: "10",
57+
}}
58+
compFactory={ChartCompWithDefault}
59+
/>
2460
</ExampleGroup>
2561
</>
2662
);

‎client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
import { SplitLayoutComp } from "comps/comps/splitLayout/splitLayout";
2+
import Example from "../../common/Example";
3+
import ExampleGroup from "../../common/ExampleGroup";
4+
5+
const columns= {
6+
"manual": [
7+
{
8+
"id": 0,
9+
"label": "Area 1",
10+
"key": "Area1",
11+
"minWidth": "10%",
12+
"maxWidth": "90%",
13+
"width": "50%",
14+
"collapsible": false,
15+
"background": "",
16+
"backgroundImage": "",
17+
"padding": ""
18+
},
19+
{
20+
"id": 1,
21+
"label": "Area 2",
22+
"key": "Area2",
23+
"minWidth": "10%",
24+
"maxWidth": "90%",
25+
"width": "50%",
26+
"collapsible": true,
27+
"background": "",
28+
"backgroundImage": "",
29+
"padding": ""
30+
},
31+
{
32+
"id": 2,
33+
"label": "Option 1",
34+
"key": "Option 1",
35+
"minWidth": "10%",
36+
"maxWidth": "90%",
37+
"width": "50%",
38+
"collapsible": false,
39+
"background": "",
40+
"backgroundImage": "",
41+
"padding": ""
42+
}
43+
]
44+
};
45+
46+
const bodyStyle= {
47+
background: "#FFFFFF",
48+
border: "#222222",
49+
};
50+
51+
const columnStyle= {
52+
background: "#FFFFFF",
53+
border: "#222222",
54+
margin: "10px",
55+
};
56+
57+
export default function SplitLayoutExample() {
58+
return (
59+
<>
60+
<ExampleGroup
61+
title="Basic Usage"
62+
description="The Following Examples Show the Basic Usage of the Split Layout Component."
63+
>
64+
<Example
65+
title="Default Component"
66+
hideSettings={true}
67+
width={1000}
68+
config={{
69+
bodyStyle: bodyStyle,
70+
columnStyle: columnStyle,
71+
}}
72+
compFactory={SplitLayoutComp}
73+
/>
74+
<Example
75+
title="Multiple Split Layout containers ( Click on the icon at the center on right side ) "
76+
hideSettings={true}
77+
width={1000}
78+
config={{
79+
columns: columns,
80+
bodyStyle: bodyStyle,
81+
columnStyle: columnStyle,
82+
}}
83+
compFactory={SplitLayoutComp}
84+
/>
85+
<Example
86+
title="Setting Minimum Width - 30%"
87+
hideSettings={true}
88+
width={1000}
89+
config={{
90+
columns: {
91+
"manual": [
92+
{
93+
"id": 0,
94+
"label": "Area 1",
95+
"key": "Area1",
96+
"minWidth": "30%",
97+
"maxWidth": "90%",
98+
"width": "50%",
99+
"collapsible": false,
100+
"background": "",
101+
"backgroundImage": "",
102+
"padding": ""
103+
},
104+
{
105+
"id": 1,
106+
"label": "Area 2",
107+
"key": "Area2",
108+
"minWidth": "30%",
109+
"maxWidth": "90%",
110+
"width": "50%",
111+
"collapsible": true,
112+
"background": "",
113+
"backgroundImage": "",
114+
"padding": ""
115+
},
116+
{
117+
"id": 2,
118+
"label": "Option 1",
119+
"key": "Option 1",
120+
"minWidth": "30%",
121+
"maxWidth": "90%",
122+
"width": "50%",
123+
"collapsible": false,
124+
"background": "",
125+
"backgroundImage": "",
126+
"padding": ""
127+
}
128+
]
129+
},
130+
bodyStyle: bodyStyle,
131+
columnStyle: columnStyle,
132+
}}
133+
compFactory={SplitLayoutComp}
134+
/>
135+
<Example
136+
title="Setting Minimum Width - 10%"
137+
hideSettings={true}
138+
width={1000}
139+
config={{
140+
columns: columns,
141+
bodyStyle: bodyStyle,
142+
columnStyle: columnStyle,
143+
}}
144+
compFactory={SplitLayoutComp}
145+
/>
146+
</ExampleGroup>
147+
148+
<ExampleGroup
149+
title="Layout"
150+
description="The Following Examples Show the different layouts of the Split Layout Component."
151+
>
152+
<Example
153+
title="Split Layout Orientation - Vertical"
154+
hideSettings={true}
155+
width={1000}
156+
config={{
157+
bodyStyle: bodyStyle,
158+
columnStyle: columnStyle,
159+
orientation: "vertical",
160+
}}
161+
compFactory={SplitLayoutComp}
162+
/>
163+
<Example
164+
title="Split Layout Orientation - Horizontal"
165+
hideSettings={true}
166+
width={1000}
167+
config={{
168+
bodyStyle: bodyStyle,
169+
columnStyle: columnStyle,
170+
orientation: "horizontal",
171+
}}
172+
compFactory={SplitLayoutComp}
173+
/>
174+
</ExampleGroup>
175+
176+
<ExampleGroup
177+
title="Styling Properties"
178+
description="The Following Examples Show the different Styling properties on the Split Layout Component."
179+
>
180+
<Example
181+
title="Body Styling - Background Color, Border, Padding"
182+
hideSettings={true}
183+
width={1000}
184+
config={{
185+
bodyStyle: {
186+
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
187+
"border": "#222222",
188+
"borderWidth": "2px",
189+
"padding": "10px",
190+
},
191+
columnStyle: columnStyle,
192+
}}
193+
compFactory={SplitLayoutComp}
194+
/>
195+
<Example
196+
title="Column Styling - Background Color, Border, Margin"
197+
hideSettings={true}
198+
width={1000}
199+
config={{
200+
bodyStyle: bodyStyle,
201+
columnStyle: {
202+
"background": "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
203+
"border": "#222222",
204+
"borderWidth": "2px",
205+
"borderStyle": "solid",
206+
"margin": "10px",
207+
},
208+
}}
209+
compFactory={SplitLayoutComp}
210+
/>
211+
</ExampleGroup>
212+
</>
213+
);
214+
}

0 commit comments

Comments
 (0)