Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf1e5331

Browse files
committed
added changes to Chart components
1 parent75bd122 commitf1e5331

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
constChartCompWithDefault=uiCompRegistry["chartsGeoMap"].comp;
88

9-
constdefaultDataSource="[\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-
constdefaultEchartsJsonOption="{\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-
constdata=JSON.stringify(defaultDataSource);
14-
constechartsOption=JSON.stringify(defaultEchartsJsonOption);
15-
169
exportdefaultfunctionGeoMapChartExample(){
17-
constblackListConfig:string[]=["data","echartsOption","series"];
18-
constseries=[
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
constChartCompWithDefault=uiCompRegistry["mermaid"].comp;
88

9-
constdefaultDataSource="[\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-
constdefaultEchartsJsonOption="{\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-
constdata=JSON.stringify(defaultDataSource);
14-
constechartsOption=JSON.stringify(defaultEchartsJsonOption);
15-
169
exportdefaultfunctionMermaidChartExample(){
17-
constblackListConfig:string[]=["data","echartsOption","series"];
18-
constseries=[
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
constChartCompWithDefault=uiCompRegistry["openLayersGeoMap"].comp;
88

9-
constdefaultDataSource="[\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-
constdefaultEchartsJsonOption="{\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-
constdata=JSON.stringify(defaultDataSource);
14-
constechartsOption=JSON.stringify(defaultEchartsJsonOption);
15-
169
exportdefaultfunctionOpenLayersGeoMapChartExample(){
17-
constblackListConfig:string[]=["data","echartsOption","series"];
18-
constseries=[
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)
[8]ページ先頭
©2009-2025 Movatter.jp