1 | import "babel-polyfill";
|
2 | import React from "react";
|
3 | import { ScrollView, StatusBar, Dimensions, Text } from "react-native";
|
4 | import ScrollableTabView from "react-native-scrollable-tab-view";
|
5 | import FlashMessage, { showMessage } from "react-native-flash-message";
|
6 | import LineChart from "./src/line-chart";
|
7 | import PieChart from "./src/pie-chart";
|
8 | import ProgressChart from "./src/progress-chart";
|
9 | import BarChart from "./src/bar-chart";
|
10 | import StackedBarChart from "./src/stackedbar-chart";
|
11 | import ContributionGraph from "./src/contribution-graph";
|
12 | import {
|
13 | data,
|
14 | contributionData,
|
15 | pieChartData,
|
16 | progressChartData,
|
17 | stackedBarGraphData
|
18 | } from "./data";
|
19 |
|
20 |
|
21 | const chartConfigs = [
|
22 | {
|
23 | backgroundColor: "#000000",
|
24 | backgroundGradientFrom: "#1E2923",
|
25 | backgroundGradientTo: "#08130D",
|
26 | color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
|
27 | style: {
|
28 | borderRadius: 16
|
29 | }
|
30 | },
|
31 | {
|
32 | backgroundColor: "#022173",
|
33 | backgroundGradientFrom: "#022173",
|
34 | backgroundGradientTo: "#1b3fa0",
|
35 | color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
36 | style: {
|
37 | borderRadius: 16
|
38 | },
|
39 | propsForBackgroundLines: {
|
40 | strokeDasharray: ""
|
41 | }
|
42 | },
|
43 | {
|
44 | backgroundColor: "#ffffff",
|
45 | backgroundGradientFrom: "#ffffff",
|
46 | backgroundGradientTo: "#ffffff",
|
47 | color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`
|
48 | },
|
49 | {
|
50 | backgroundColor: "#26872a",
|
51 | backgroundGradientFrom: "#43a047",
|
52 | backgroundGradientTo: "#66bb6a",
|
53 | color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
54 | style: {
|
55 | borderRadius: 16
|
56 | }
|
57 | },
|
58 | {
|
59 | backgroundColor: "#000000",
|
60 | backgroundGradientFrom: "#000000",
|
61 | backgroundGradientTo: "#000000",
|
62 | color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
|
63 | },
|
64 | {
|
65 | backgroundColor: "#0091EA",
|
66 | backgroundGradientFrom: "#0091EA",
|
67 | backgroundGradientTo: "#0091EA",
|
68 | color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
|
69 | },
|
70 | {
|
71 | backgroundColor: "#e26a00",
|
72 | backgroundGradientFrom: "#fb8c00",
|
73 | backgroundGradientTo: "#ffa726",
|
74 | color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
75 | style: {
|
76 | borderRadius: 16
|
77 | }
|
78 | },
|
79 | {
|
80 | backgroundColor: "#b90602",
|
81 | backgroundGradientFrom: "#e53935",
|
82 | backgroundGradientTo: "#ef5350",
|
83 | color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
|
84 | style: {
|
85 | borderRadius: 16
|
86 | }
|
87 | },
|
88 | {
|
89 | backgroundColor: "#ff3e03",
|
90 | backgroundGradientFrom: "#ff3e03",
|
91 | backgroundGradientTo: "#ff3e03",
|
92 | color: (opacity = 1) => `rgba(${0}, ${0}, ${0}, ${opacity})`
|
93 | }
|
94 | ];
|
95 |
|
96 | export default class App extends React.Component {
|
97 | renderTabBar() {
|
98 | return <StatusBar hidden />;
|
99 | }
|
100 |
|
101 | render() {
|
102 | const { width } = Dimensions.get("window");
|
103 | const height = 256;
|
104 | return (
|
105 | <ScrollableTabView renderTabBar={this.renderTabBar}>
|
106 | {chartConfigs.map(chartConfig => {
|
107 | const labelStyle = {
|
108 | color: chartConfig.color(),
|
109 | marginVertical: 10,
|
110 | textAlign: "center",
|
111 | fontSize: 16
|
112 | };
|
113 | const graphStyle = {
|
114 | marginVertical: 8,
|
115 | ...chartConfig.style
|
116 | };
|
117 | return (
|
118 | <ScrollView
|
119 | key={Math.random()}
|
120 | style={{
|
121 | backgroundColor: chartConfig.backgroundColor
|
122 | }}
|
123 | >
|
124 | <Text style={labelStyle}>Bezier Line Chart</Text>
|
125 | <LineChart
|
126 | bezier
|
127 | data={data}
|
128 | width={width}
|
129 | height={height}
|
130 | yAxisLabel="$"
|
131 | chartConfig={chartConfig}
|
132 | style={graphStyle}
|
133 | verticalLabelRotation={30}
|
134 | onDataPointClick={({ value, getColor }) =>
|
135 | showMessage({
|
136 | message: `${value}`,
|
137 | description: "You selected this value",
|
138 | backgroundColor: getColor(0.9)
|
139 | })
|
140 | }
|
141 | />
|
142 | <FlashMessage duration={1000} />
|
143 | <Text style={labelStyle}>Progress Chart</Text>
|
144 | <ProgressChart
|
145 | data={progressChartData}
|
146 | width={width}
|
147 | height={height}
|
148 | chartConfig={chartConfig}
|
149 | style={graphStyle}
|
150 | />
|
151 | <Text style={labelStyle}>Bar Graph</Text>
|
152 | <BarChart
|
153 | width={width}
|
154 | height={height}
|
155 | data={data}
|
156 | yAxisLabel="$"
|
157 | chartConfig={chartConfig}
|
158 | style={graphStyle}
|
159 | />
|
160 | <Text style={labelStyle}>Stacked Bar Graph</Text>
|
161 | <StackedBarChart
|
162 | style={graphStyle}
|
163 | data={stackedBarGraphData}
|
164 | width={width}
|
165 | height={220}
|
166 | chartConfig={chartConfig}
|
167 | />
|
168 | <Text style={labelStyle}>Pie Chart</Text>
|
169 | <PieChart
|
170 | data={pieChartData}
|
171 | height={height}
|
172 | width={width}
|
173 | chartConfig={chartConfig}
|
174 | accessor="population"
|
175 | style={graphStyle}
|
176 | backgroundColor="transparent"
|
177 | paddingLeft="15"
|
178 | />
|
179 | <Text style={labelStyle}>Line Chart</Text>
|
180 | <LineChart
|
181 | data={data}
|
182 | width={width}
|
183 | height={height}
|
184 | yAxisLabel="$"
|
185 | chartConfig={chartConfig}
|
186 | style={graphStyle}
|
187 | />
|
188 | <Text style={labelStyle}>Contribution Graph</Text>
|
189 | <ContributionGraph
|
190 | values={contributionData}
|
191 | width={width}
|
192 | height={height}
|
193 | endDate={new Date("2016-05-01")}
|
194 | numDays={105}
|
195 | chartConfig={chartConfig}
|
196 | style={graphStyle}
|
197 | />
|
198 | </ScrollView>
|
199 | );
|
200 | })}
|
201 | </ScrollableTabView>
|
202 | );
|
203 | }
|
204 | }
|