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 | yAxisSuffix="k"
|
132 | chartConfig={chartConfig}
|
133 | style={graphStyle}
|
134 | verticalLabelRotation={20}
|
135 | onDataPointClick={({ value, getColor }) =>
|
136 | showMessage({
|
137 | message: `${value}`,
|
138 | description: "You selected this value",
|
139 | backgroundColor: getColor(0.9)
|
140 | })
|
141 | }
|
142 | formatXLabel={label => label.toUpperCase()}
|
143 | />
|
144 | <FlashMessage duration={1000} />
|
145 | <Text style={labelStyle}>Progress Chart</Text>
|
146 | <ProgressChart
|
147 | data={progressChartData}
|
148 | width={width}
|
149 | height={height}
|
150 | chartConfig={chartConfig}
|
151 | style={graphStyle}
|
152 | hideLegend={false}
|
153 | />
|
154 | <Text style={labelStyle}>Bar Graph</Text>
|
155 | <BarChart
|
156 | width={width}
|
157 | height={height}
|
158 | data={data}
|
159 | yAxisLabel="$"
|
160 | chartConfig={chartConfig}
|
161 | style={graphStyle}
|
162 | />
|
163 | <Text style={labelStyle}>Stacked Bar Graph</Text>
|
164 | <StackedBarChart
|
165 | style={graphStyle}
|
166 | data={stackedBarGraphData}
|
167 | width={width}
|
168 | height={220}
|
169 | chartConfig={chartConfig}
|
170 | />
|
171 | <Text style={labelStyle}>Pie Chart</Text>
|
172 | <PieChart
|
173 | data={pieChartData}
|
174 | height={height}
|
175 | width={width}
|
176 | chartConfig={chartConfig}
|
177 | accessor="population"
|
178 | style={graphStyle}
|
179 | backgroundColor="transparent"
|
180 | paddingLeft="15"
|
181 | />
|
182 | <Text style={labelStyle}>Line Chart</Text>
|
183 | <LineChart
|
184 | data={data}
|
185 | width={width}
|
186 | height={height}
|
187 | yAxisLabel="$"
|
188 | chartConfig={chartConfig}
|
189 | style={graphStyle}
|
190 | />
|
191 | <Text style={labelStyle}>Contribution Graph</Text>
|
192 | <ContributionGraph
|
193 | values={contributionData}
|
194 | width={width}
|
195 | height={height}
|
196 | endDate={new Date("2016-05-01")}
|
197 | numDays={105}
|
198 | chartConfig={chartConfig}
|
199 | style={graphStyle}
|
200 | />
|
201 | <Text style={labelStyle}>Line Chart</Text>
|
202 | <LineChart
|
203 | data={data}
|
204 | width={width}
|
205 | height={height}
|
206 | yAxisLabel="$"
|
207 | segments={5}
|
208 | chartConfig={chartConfig}
|
209 | style={graphStyle}
|
210 | hidePointsAtIndex={[0, data.datasets[0].data.length - 1]}
|
211 | />
|
212 | <Text style={labelStyle}>Line Chart with shadow background as line color</Text>
|
213 | <LineChart
|
214 | bezier
|
215 | data={data}
|
216 | width={width}
|
217 | height={height}
|
218 | yAxisLabel="$"
|
219 | segments={5}
|
220 | chartConfig={{
|
221 | ...chartConfig,
|
222 | useShadowColorFromDataset: true
|
223 | }}
|
224 | style={graphStyle}
|
225 | hidePointsAtIndex={[0, data.datasets[0].data.length - 1]}
|
226 | />
|
227 |
|
228 | <Text style={labelStyle}>Scrollable Line Chart</Text>
|
229 | <LineChart
|
230 | data={{
|
231 | labels: [
|
232 | "January",
|
233 | "February",
|
234 | "March",
|
235 | "April",
|
236 | "May",
|
237 | "June"
|
238 | ],
|
239 | datasets: [
|
240 | {
|
241 | data: [
|
242 | Math.random() * 100,
|
243 | Math.random() * 100,
|
244 | Math.random() * 100,
|
245 | Math.random() * 100,
|
246 | Math.random() * 100,
|
247 | Math.random() * 100,
|
248 | Math.random() * 100
|
249 | ]
|
250 | }
|
251 | ]
|
252 | }}
|
253 | width={Dimensions.get("window").width} // from react-native
|
254 | height={220}
|
255 | withInnerLines={false}
|
256 | withDots={false}
|
257 | withShadow={false}
|
258 | withScrollableDot={true}
|
259 | yAxisInterval={1} // optional, defaults to 1
|
260 | chartConfig={{
|
261 | backgroundGradientFrom: "#1F1F1F",
|
262 | decimalPlaces: 2, // optional, defaults to 2dp
|
263 | color: (opacity = 1) => "#FF5500",
|
264 | labelColor: (opacity = 1) => "#A0A0A0",
|
265 | linejoinType: "round",
|
266 |
|
267 | scrollableDotFill: "#fff",
|
268 | scrollableDotRadius: 6,
|
269 | scrollableDotStrokeColor: "#FF5500",
|
270 | scrollableDotStrokeWidth: 3,
|
271 |
|
272 | scrollableInfoViewStyle: {
|
273 | justifyContent: "center",
|
274 | alignContent: "center",
|
275 | backgroundColor: "#121212",
|
276 | borderRadius: 2
|
277 | },
|
278 | scrollableInfoTextStyle: {
|
279 | color: "#C4C4C4",
|
280 | marginHorizontal: 4,
|
281 | flex: 1,
|
282 | textAlign: "center"
|
283 | },
|
284 | scrollableInfoSize: { width: 65, height: 30 },
|
285 | scrollableInfoOffset: 15
|
286 | }}
|
287 | style={{
|
288 | marginVertical: 8
|
289 | }}
|
290 | />
|
291 | </ScrollView>
|
292 | );
|
293 | })}
|
294 | </ScrollableTabView>
|
295 | );
|
296 | }
|
297 | }
|