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
|
import React from 'react';
import {
View,
Dimensions,
} from 'react-native';
import {
RkComponent,
RkTheme,
RkText,
} from 'react-native-ui-kitten';
import {
VictoryChart,
VictoryAxis,
VictoryArea,
VictoryScatter,
VictoryGroup,
} from 'victory-native';
export class AreaChart extends RkComponent {
state = {
data: [
{ x: 1, y: 1 },
{ x: 2, y: 2 },
{ x: 3, y: 1 },
{ x: 4, y: 2 },
{ x: 5, y: 3 },
{ x: 6, y: 3 },
{ x: 7, y: 4 },
{ x: 8, y: 3 },
{ x: 9, y: 2 },
{ x: 10, y: 4 },
],
};
componentWillMount() {
this.size = Dimensions.get('window').width;
}
componentDidMount() {
this.setStateInterval = setInterval(() => {
let positive = Math.random() > 0.5;
let newValue = this.state.data[this.state.data.length - 1].y;
if (newValue > 3) {
positive = false;
} else if (newValue < 2) {
positive = true;
}
newValue = positive ? newValue + 1 : newValue - 1;
const newData = this.state.data.map((d, i) => ({
x: d.x,
y: i === this.state.data.length - 1 ? newValue : this.state.data[i + 1].y,
}));
this.setState({
data: newData,
});
}, 3000);
}
componentWillUnmount() {
clearInterval(this.setStateInterval);
}
render = () => (
<View>
<RkText rkType='header4'>REAL TIME VISITORS</RkText>
<VictoryChart
padding={{
top: 20, left: 40, right: 5, bottom: 5,
}}
width={this.size - 60}>
<VictoryAxis
tickValues={[]}
style={{
axis: { stroke: 'transparent' },
}}
/>
<VictoryAxis
dependentAxis
tickValues={['50', '100', '150', '200']}
style={{
axis: { stroke: 'transparent' },
grid: { stroke: RkTheme.current.colors.disabled, strokeWidth: 0.5 },
tickLabels: {
fontSize: 14,
stroke: RkTheme.current.colors.text.secondary,
fill: RkTheme.current.colors.text.secondary,
fontFamily: RkTheme.current.fonts.family.regular,
strokeWidth: 0.5,
},
}}
/>
<VictoryGroup data={this.state.data}>
<VictoryArea
style={{
data: {
fill: RkTheme.current.colors.charts.area.fill,
fillOpacity: 0.5,
stroke: RkTheme.current.colors.charts.area.stroke,
strokeOpacity: 0.8,
strokeWidth: 1.5,
},
}}
/>
<VictoryScatter
style={{
data: {
fill: 'white',
stroke: RkTheme.current.colors.charts.area.stroke,
strokeOpacity: 0.8,
strokeWidth: 1.5,
},
}}
/>
</VictoryGroup>
</VictoryChart>
</View>
);
}
|
