Skip to content

Commit 0c3c98a

Browse files
adnanqaopsadnanqaops
committed
added changes to Chart components
1 parent d6a8389 commit 0c3c98a

File tree

7 files changed

+380
-118
lines changed

7 files changed

+380
-118
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,6 @@ export default function ChartExample() {
355355
compFactory={ChartCompWithDefault}
356356
/>
357357
</ExampleGroup>
358-
359358
</>
360359
);
361360
}

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

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

77
const ChartCompWithDefault = uiCompRegistry["chartsGeoMap"].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}";
12-
13-
const data = JSON.stringify(defaultDataSource);
14-
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
15-
169
export default function GeoMapChartExample() {
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-
];
3010
return (
3111
<>
3212
<ExampleGroup
@@ -37,11 +17,61 @@ export default function GeoMapChartExample() {
3717
title={trans("componentDoc.default")}
3818
width={500}
3919
height={300}
40-
blackListConfig={blackListConfig}
4120
config={{
42-
mode: "json",
43-
data: data,
44-
series: series,
21+
}}
22+
compFactory={ChartCompWithDefault}
23+
/>
24+
</ExampleGroup>
25+
26+
<ExampleGroup
27+
title={trans("componentDoc.basicUsage")}
28+
description={trans("componentDoc.basicDemoDescription")}
29+
>
30+
<Example
31+
title="Zoom Level - 1"
32+
width={500}
33+
height={300}
34+
config={{
35+
}}
36+
compFactory={ChartCompWithDefault}
37+
/>
38+
<Example
39+
title="Zoom Level - 3"
40+
width={500}
41+
height={300}
42+
config={{
43+
}}
44+
compFactory={ChartCompWithDefault}
45+
/>
46+
<Example
47+
title="Zoom Level - 5"
48+
width={500}
49+
height={300}
50+
config={{
51+
}}
52+
compFactory={ChartCompWithDefault}
53+
/>
54+
<Example
55+
title="Center Position ( Lat, Lon) - Spain"
56+
width={500}
57+
height={300}
58+
config={{
59+
}}
60+
compFactory={ChartCompWithDefault}
61+
/>
62+
<Example
63+
title="Center Position ( Lat, Lon) - USA"
64+
width={500}
65+
height={300}
66+
config={{
67+
}}
68+
compFactory={ChartCompWithDefault}
69+
/>
70+
<Example
71+
title="Center Position ( Lat, Lon) - Turkey"
72+
width={500}
73+
height={300}
74+
config={{
4575
}}
4676
compFactory={ChartCompWithDefault}
4777
/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export default function GraphChartExample() {
3535
title={trans("componentDoc.default")}
3636
width={500}
3737
height={300}
38+
hideSettings={true}
3839
config={{
3940
}}
4041
compFactory={ChartCompWithDefault}

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

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

77
const ChartCompWithDefault = uiCompRegistry["mermaid"].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}";
12-
13-
const data = JSON.stringify(defaultDataSource);
14-
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
15-
169
export default function MermaidChartExample() {
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-
];
3010
return (
3111
<>
3212
<ExampleGroup
3313
title={trans("componentDoc.basicUsage")}
3414
description={trans("componentDoc.basicDemoDescription")}
3515
>
3616
<Example
37-
title={trans("componentDoc.default")}
17+
title="Default Component"
18+
width={500}
19+
height={300}
20+
config={{
21+
}}
22+
compFactory={ChartCompWithDefault}
23+
/>
24+
<Example
25+
title="Custom Component"
3826
width={500}
3927
height={300}
40-
blackListConfig={blackListConfig}
4128
config={{
42-
mode: "json",
43-
data: data,
44-
series: series,
29+
code: "graph LR\n Planning --> Defining --> Designing --> Building --> Testing --> Deployment --> Planning",
4530
}}
4631
compFactory={ChartCompWithDefault}
4732
/>

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

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

77
const ChartCompWithDefault = uiCompRegistry["openLayersGeoMap"].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}";
12-
13-
const data = JSON.stringify(defaultDataSource);
14-
const echartsOption = JSON.stringify(defaultEchartsJsonOption);
15-
169
export default function OpenLayersGeoMapChartExample() {
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-
];
3010
return (
3111
<>
3212
<ExampleGroup
@@ -37,11 +17,7 @@ export default function OpenLayersGeoMapChartExample() {
3717
title={trans("componentDoc.default")}
3818
width={500}
3919
height={300}
40-
blackListConfig={blackListConfig}
4120
config={{
42-
mode: "json",
43-
data: data,
44-
series: series,
4521
}}
4622
compFactory={ChartCompWithDefault}
4723
/>

0 commit comments

Comments
 (0)