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
123
124
125
|
import React from 'react';
import { View } from 'react-native';
import {
RkComponent,
RkText,
RkTheme,
RkStyleSheet,
} from 'react-native-ui-kitten';
import { VictoryPie } from 'victory-native';
import { Svg, Text as SvgText } from 'react-native-svg';
import { scale } from '../../utils/scale';
export class DoughnutChart extends RkComponent {
state = {
selected: 0,
data: [
{
x: 1,
y: 240,
title: '24%',
name: 'Likes',
color: RkTheme.current.colors.charts.doughnut[0],
},
{
x: 2,
y: 270,
title: '27%',
name: 'Comments',
color: RkTheme.current.colors.charts.doughnut[1],
},
{
x: 3,
y: 170,
title: '17%',
name: 'Shares',
color: RkTheme.current.colors.charts.doughnut[2],
},
{
x: 4,
y: 320,
title: '32%',
name: 'People',
color: RkTheme.current.colors.charts.doughnut[3],
},
],
};
size = 300;
fontSize = 40;
computeColors = () => this.state.data.map(i => i.color);
onPeopleChartPressed = (event, props) => {
this.setState({
selected: props.index,
});
};
renderMarkdown = () => this.state.data.map(this.renderMarkdownItem);
renderMarkdownItem = (item) => (
<View key={item.name} style={styles.legendItem}>
<View style={[styles.itemBadge, { backgroundColor: item.color }]} />
<RkText rkType="primary3">{item.name}</RkText>
</View>
);
render = () => (
<View>
<RkText rkType='header4'>AUDIENCE OVERVIEW</RkText>
<View style={{ alignSelf: 'center' }}>
<Svg width={scale(this.size)} height={scale(this.size)}>
<VictoryPie
labels={[]}
width={scale(this.size)}
height={scale(this.size)}
colorScale={this.computeColors()}
data={this.state.data}
standalone={false}
padding={scale(25)}
innerRadius={scale(70)}
events={[{
target: 'data',
eventHandlers: {
onPressIn: this.onPeopleChartPressed,
},
}]}
/>
<SvgText
textAnchor="middle"
verticalAnchor="middle"
x={scale(this.size / 2)}
y={scale(this.size / 2)}
height={scale(this.fontSize)}
fontSize={scale(this.fontSize)}
fontFamily={RkTheme.current.fonts.family.regular}
stroke={RkTheme.current.colors.text.base}
fill={RkTheme.current.colors.text.base}>
{this.state.data[this.state.selected].title}
</SvgText>
</Svg>
</View>
<View style={styles.legendContainer}>
{this.renderMarkdown()}
</View>
</View>
);
}
const styles = RkStyleSheet.create(() => ({
legendContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
},
legendItem: {
flexDirection: 'row',
alignItems: 'center',
},
itemBadge: {
width: 10,
height: 10,
borderRadius: 5,
marginRight: 5,
},
}));
|
