Skip to content

Commit 83aee0d

Browse files
lxfu1lxfu1
authored
chore: demos (#2661)
1 parent 82f949f commit 83aee0d

File tree

5 files changed

+361
-0
lines changed

5 files changed

+361
-0
lines changed

‎site/examples/case/interactions/demo/filter.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { Column } from '@ant-design/plots';
4+
5+
const DemoDefaultTooltip = () => {
6+
const config = {
7+
data: {
8+
type: 'fetch',
9+
value: 'https://gw.alipayobjects.com/os/antfincdn/iPY8JFnxdb/dodge-padding.json',
10+
},
11+
xField: '月份',
12+
yField: '月均降雨量',
13+
colorField: 'name',
14+
group: true,
15+
style: {
16+
inset: 5,
17+
},
18+
onReady: ({ chart }) => {
19+
try {
20+
chart.on('afterrender', () => {
21+
chart.emit('legend:filter', {
22+
data: { channel: 'color', values: ['London'] },
23+
});
24+
});
25+
} catch (e) {
26+
console.error(e);
27+
}
28+
},
29+
};
30+
return <Column {...config} />;
31+
};
32+
33+
ReactDOM.render(<DemoDefaultTooltip />, document.getElementById('container'));

‎site/examples/case/interactions/demo/memo.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { memo, useState } from 'react';
2+
import { Pie } from '@ant-design/plots';
3+
import { Button } from 'antd';
4+
import ReactDOM from 'react-dom';
5+
import { isEqual } from 'lodash-es';
6+
7+
const DemoPie = memo(
8+
({ data, onReady }) => {
9+
var config = {
10+
data,
11+
angleField: 'value',
12+
colorField: 'type',
13+
label: {
14+
text: 'value',
15+
position: 'outside',
16+
},
17+
onReady,
18+
};
19+
return <Pie {...config} />;
20+
},
21+
(pre, next) => {
22+
return isEqual(pre?.data, next?.data);
23+
},
24+
);
25+
26+
const DemoMemo = () => {
27+
const [count, setCount] = useState(0);
28+
const [data, setData] = useState([
29+
{
30+
type: '分类一',
31+
value: 27,
32+
},
33+
{
34+
type: '分类二',
35+
value: 25,
36+
},
37+
{
38+
type: '分类三',
39+
value: 18,
40+
},
41+
{
42+
type: '分类四',
43+
value: 15,
44+
},
45+
{
46+
type: '分类五',
47+
value: 10,
48+
},
49+
{
50+
type: '其他',
51+
value: 5,
52+
},
53+
]);
54+
55+
return (
56+
<div>
57+
<Button
58+
onClick={() => {
59+
setCount(count + 1);
60+
}}
61+
>
62+
不会重新渲染
63+
</Button>
64+
<Button
65+
style={{ margin: '0 10px' }}
66+
type="primary"
67+
onClick={() => {
68+
setData(data.map((d) => ({ ...d, value: Math.floor(Math.random() * 100) })));
69+
}}
70+
>
71+
重新渲染
72+
</Button>
73+
<span>{count}</span>
74+
<DemoPie data={data} onReady={({ chart }) => {}} />
75+
</div>
76+
);
77+
};
78+
79+
ReactDOM.render(<DemoMemo />, document.getElementById('container'));

‎site/examples/case/interactions/demo/meta.json

+32
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,38 @@
1111
"en": "Chart link"
1212
},
1313
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*dBDRR43tju8AAAAAAAAAAAAADmJ7AQ/original"
14+
},
15+
{
16+
"filename": "tooltip.js",
17+
"title": {
18+
"zh": "默认提示",
19+
"en": "Default tooltip"
20+
},
21+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vqr9QrFDTEgAAAAAAAAAAAAADmJ7AQ/original"
22+
},
23+
{
24+
"filename": "segmented-line.js",
25+
"title": {
26+
"zh": "分段线",
27+
"en": "Segmented line"
28+
},
29+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wL0FRJvibpAAAAAAAAAAAAAADmJ7AQ/original"
30+
},
31+
{
32+
"filename": "memo.js",
33+
"title": {
34+
"zh": "防止重复渲染",
35+
"en": "Memo"
36+
},
37+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*y2aySIowQlUAAAAAAAAAAAAADmJ7AQ/original"
38+
},
39+
{
40+
"filename": "filter.js",
41+
"title": {
42+
"zh": "图例过滤",
43+
"en": "Legend filter"
44+
},
45+
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2e6jSoEnW60AAAAAAAAAAAAADmJ7AQ/original"
1446
}
1547
]
1648
}

‎site/examples/case/interactions/demo/segmented-line.js

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import { Line } from '@ant-design/plots';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
5+
const DemoSegmentedLine = () => {
6+
const data = [
7+
{
8+
year: '1991',
9+
value: 3,
10+
type: 'Lon',
11+
},
12+
{
13+
year: '1992',
14+
value: 4,
15+
type: 'Lon',
16+
},
17+
{
18+
year: '1993',
19+
value: 3.5,
20+
type: 'Lon',
21+
},
22+
{
23+
year: '1994',
24+
value: 5,
25+
type: 'Lon',
26+
},
27+
{
28+
year: '1995',
29+
value: 4.9,
30+
type: 'Lon',
31+
},
32+
{
33+
year: '1996',
34+
value: 6,
35+
type: 'Lon',
36+
},
37+
{
38+
year: '1997',
39+
value: null,
40+
type: 'Lon',
41+
},
42+
{
43+
year: '1998',
44+
value: null,
45+
type: 'Lon',
46+
},
47+
{
48+
year: '1999',
49+
value: null,
50+
type: 'Lon',
51+
},
52+
{
53+
year: '1991',
54+
value: null,
55+
type: 'Bor',
56+
},
57+
{
58+
year: '1992',
59+
value: null,
60+
type: 'Bor',
61+
},
62+
{
63+
year: '1993',
64+
value: null,
65+
type: 'Bor',
66+
},
67+
{
68+
year: '1994',
69+
value: null,
70+
type: 'Bor',
71+
},
72+
{
73+
year: '1995',
74+
value: null,
75+
type: 'Bor',
76+
},
77+
{
78+
year: '1996',
79+
value: 6,
80+
type: 'Bor',
81+
},
82+
{
83+
year: '1997',
84+
value: 7,
85+
type: 'Bor',
86+
},
87+
{
88+
year: '1998',
89+
value: 9,
90+
type: 'Bor',
91+
},
92+
{
93+
year: '1999',
94+
value: 13,
95+
type: 'Bor',
96+
},
97+
];
98+
const config = {
99+
data,
100+
xField: 'year',
101+
yField: 'value',
102+
colorField: 'type',
103+
scale: {
104+
color: {
105+
range: ['#2688FF', 'red'],
106+
},
107+
},
108+
style: {
109+
lineWidth: 2,
110+
lineDash: (items) => {
111+
const { type } = items[0];
112+
return type === 'Bor' ? [2, 4] : [0, 0];
113+
},
114+
},
115+
interaction: {
116+
tooltip: {
117+
render: (e, { title, items }) => {
118+
const list = items.filter((item) => item.value);
119+
return (
120+
<div key={title}>
121+
<h4>{title}</h4>
122+
{list.map((item) => {
123+
const { name, value, color } = item;
124+
return (
125+
<div>
126+
<div style={{ margin: 0, display: 'flex', justifyContent: 'space-between' }}>
127+
<div>
128+
<span
129+
style={{
130+
display: 'inline-block',
131+
width: 6,
132+
height: 6,
133+
borderRadius: '50%',
134+
backgroundColor: color,
135+
marginRight: 6,
136+
}}
137+
></span>
138+
<span>{name}</span>
139+
</div>
140+
<b>{value}</b>
141+
</div>
142+
</div>
143+
);
144+
})}
145+
</div>
146+
);
147+
},
148+
},
149+
},
150+
legend: false,
151+
};
152+
return <Line {...config} />;
153+
};
154+
155+
ReactDOM.render(<DemoSegmentedLine />, document.getElementById('container'));

‎site/examples/case/interactions/demo/tooltip.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import { Column } from '@ant-design/plots';
4+
5+
const DemoDefaultTooltip = () => {
6+
const data = [
7+
{ letter: 'A', frequency: 8167 },
8+
{ letter: 'B', frequency: 1492 },
9+
{ letter: 'C', frequency: 2782 },
10+
{ letter: 'D', frequency: 4253 },
11+
{ letter: 'E', frequency: 12702 },
12+
{ letter: 'F', frequency: 2288 },
13+
{ letter: 'G', frequency: 2015 },
14+
{ letter: 'H', frequency: 6094 },
15+
{ letter: 'I', frequency: 6966 },
16+
{ letter: 'J', frequency: 153 },
17+
{ letter: 'K', frequency: 772 },
18+
{ letter: 'L', frequency: 4025 },
19+
{ letter: 'M', frequency: 2406 },
20+
{ letter: 'N', frequency: 6749 },
21+
{ letter: 'O', frequency: 7507 },
22+
{ letter: 'P', frequency: 1929 },
23+
{ letter: 'Q', frequency: 95 },
24+
{ letter: 'R', frequency: 5987 },
25+
{ letter: 'S', frequency: 6327 },
26+
{ letter: 'T', frequency: 9056 },
27+
{ letter: 'U', frequency: 2758 },
28+
{ letter: 'V', frequency: 978 },
29+
{ letter: 'W', frequency: 236 },
30+
{ letter: 'X', frequency: 15 },
31+
{ letter: 'Y', frequency: 1974 },
32+
{ letter: 'Z', frequency: 74 },
33+
];
34+
const config = {
35+
data,
36+
xField: 'letter',
37+
yField: 'frequency',
38+
onReady: ({ chart }) => {
39+
try {
40+
const { height } = chart._container.getBoundingClientRect();
41+
const tooltipItem = data[Math.floor(Math.random() * data.length)];
42+
chart.on(
43+
'afterrender',
44+
() => {
45+
chart.emit('tooltip:show', {
46+
data: {
47+
data: tooltipItem,
48+
},
49+
offsetY: height / 2 - 60,
50+
});
51+
},
52+
true,
53+
);
54+
} catch (e) {
55+
console.error(e);
56+
}
57+
},
58+
};
59+
return <Column {...config} />;
60+
};
61+
62+
ReactDOM.render(<DemoDefaultTooltip />, document.getElementById('container'));

0 commit comments

Comments
 (0)