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