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
|
import React from 'react';
import {
View,
ScrollView,
} from 'react-native';
import {
RkText,
RkStyleSheet,
RkTheme,
} from 'react-native-ui-kitten';
import { FontAwesome } from '../../assets/icons';
import {
ProgressChart,
DoughnutChart,
AreaChart,
AreaSmoothedChart,
} from '../../components/';
export class Dashboard extends React.Component {
static navigationOptions = {
title: 'Dashboard'.toUpperCase(),
};
state = {
data: {
statItems: [
{
name: 'Stars',
value: '4,512',
icon: 'github',
background: RkTheme.current.colors.dashboard.stars,
},
{
name: 'Tweets',
value: '2,256',
icon: 'twitter',
background: RkTheme.current.colors.dashboard.tweets,
},
{
name: 'Likes',
value: '1,124',
icon: 'facebook',
background: RkTheme.current.colors.dashboard.likes,
},
],
},
};
renderStatItem = (item) => (
<View style={[styles.statItemContainer, { backgroundColor: item.background }]} key={item.name}>
<View>
<RkText rkType='header6' style={styles.statItemValue}>{item.value}</RkText>
<RkText rkType='secondary7' style={styles.statItemName}>{item.name}</RkText>
</View>
<RkText rkType='awesome hero' style={styles.statItemIcon}>{FontAwesome[item.icon]}</RkText>
</View>
);
render = () => {
const chartBackgroundStyle = { backgroundColor: RkTheme.current.colors.control.background };
return (
<ScrollView style={styles.screen}>
<View style={styles.statItems}>
{this.state.data.statItems.map(this.renderStatItem)}
</View>
<View style={[styles.chartBlock, chartBackgroundStyle]}>
<DoughnutChart />
</View>
<View style={[styles.chartBlock, chartBackgroundStyle]}>
<AreaChart />
</View>
<View style={[styles.chartBlock, chartBackgroundStyle]}>
<ProgressChart />
</View>
<View style={[styles.chartBlock, chartBackgroundStyle]}>
<AreaSmoothedChart />
</View>
</ScrollView>
);
};
}
const styles = RkStyleSheet.create(theme => ({
screen: {
backgroundColor: theme.colors.screen.scroll,
paddingHorizontal: 15,
},
statItems: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: 15,
},
statItemContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 3,
paddingHorizontal: 10,
paddingVertical: 10,
},
statItemIcon: {
alignSelf: 'center',
marginLeft: 10,
color: 'white',
},
statItemValue: {
color: 'white',
},
statItemName: {
color: 'white',
},
chartBlock: {
padding: 15,
marginBottom: 15,
justifyContent: 'center',
},
}));
|
