/
react.tsx
124 lines (113 loc) · 2.78 KB
/
react.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { Chart, View, Tooltip, Coord, StackInterval, Guide } from 'viser-react';
import * as React from 'react';
import * as _ from 'lodash';
const DataSet = require('@antv/data-set');
const text = [ 'MIDNIGHT', '3 AM', '6 AM', '9 AM', 'NOON', '3 PM', '6 PM', '9 PM' ];
const data = [];
for (let i = 0; i < 24; i++) {
const item = {} as any;
item.type = i + '';
item.value = 10;
data.push(item);
}
const dv = new DataSet.View().source(data).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent'
});
const stackInterval1Opts = {
position: 'percent',
color: ['type', ['rgba(255, 255, 255, 0)']],
style: {
stroke: '#444',
lineWidth: 1
},
tooltip: false,
select: false,
};
const stackInterval2Opts = {
position: 'type*value',
size: ['type', function(val) {
if (val % 3 === 0) {
return 4;
} else {
return 0;
}
}],
color: '#444',
tooltip: false,
label: ['type', function(val) {
if (val % 3 === 0) {
return text[val / 3];
}
return '';
}, {
offset: 15,
textStyle: {
fontSize: 12,
fontWeight: 'bold',
fill: '#bfbfbf'
}
}]
};
const userData = [
{ type: '睡眠', value: 70 },
{ type: '淡茶 & 烟斗 & 冥想', value: 10 },
{ type: '写作', value: 10 },
{ type: '教课', value: 40 },
{ type: '酒吧吃肉配白酒', value: 40 },
{ type: '散步', value: 10 },
{ type: '拜访马大大', value: 30 },
{ type: '阅读', value: 30 },
];
const userDv = new DataSet.View().source(userData).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent'
});
const userScale = [{
dataKey: 'percent',
formatter: (val: any) => {
return (val * 100).toFixed(2) + '%';
}
}];
const stackInterval3Opts = {
position: 'percent',
color: 'type',
label: ['type', {
offset: 40,
}],
select: false,
};
export default class App extends React.Component {
render() {
return (
<div>
<Chart forceFit height={400} padding={80}>
<Tooltip showTitle={false} />
<View data={dv}>
<Coord type="theta" innerRadius={0.9} />
<StackInterval {...stackInterval1Opts} />
<Guide type="text" position={[ '50%', '50%' ]} content="24 hours"
style={{
lineHeight: 240,
fontSize: '30',
fill: '#262626',
textAlign: 'center'}}
/>
</View>
<View data={dv}>
<Coord type="polar" innerRadius={0.9} />
<StackInterval {...stackInterval2Opts} />
</View>
<View data={userDv} scale={userScale}>
<Coord type="theta" innerRadius={0.75} />
<StackInterval {...stackInterval3Opts} />
</View>
</Chart>
</div>
);
}
}