Skip to content

Commit 1c50de9

Browse files
saurabhdixittrivenisaurabhdixittriveni
committed
New practice for chart.
1 parent 0f63c80 commit 1c50de9

32 files changed

+1674
-26
lines changed

‎ChartWrapperDemo.js‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
import React from 'react';
2+
import {
3+
AppRegistry,
4+
StyleSheet,
5+
Text,
6+
View,
7+
processColor,
8+
LayoutAnimation,
9+
SafeAreaView,
10+
} from 'react-native';
11+
import update from 'immutability-helper';
12+
13+
import {LineChart} from 'react-native-charts-wrapper';
14+
15+
const greenBlue = 'rgb(26, 182, 151)';
16+
const petrel = 'rgb(59, 145, 153)';
17+
18+
class LineChartScreen extends React.Component {
19+
constructor() {
20+
super();
21+
22+
this.state = {};
23+
}
24+
25+
handleSelect(event) {
26+
let entry = event.nativeEvent;
27+
if (entry == null) {
28+
this.setState({...this.state, selectedEntry: null});
29+
} else {
30+
this.setState({...this.state, selectedEntry: JSON.stringify(entry)});
31+
}
32+
33+
console.log(event.nativeEvent);
34+
}
35+
36+
render() {
37+
return (
38+
<SafeAreaView>
39+
<View style={{flex: 1}}>
40+
<View style={{height: 80}}>
41+
<Text> selected entry</Text>
42+
<Text> {this.state.selectedEntry}</Text>
43+
</View>
44+
45+
<View style={styles.container}>
46+
<LineChart
47+
style={styles.chart}
48+
data={{
49+
dataSets: [
50+
{
51+
values: [
52+
{
53+
y: 65,
54+
x: 0,
55+
marker: '65 kg',
56+
},
57+
{
58+
y: 77,
59+
x: 1,
60+
marker: '77 kg',
61+
},
62+
{
63+
y: 76,
64+
x: 2,
65+
marker: '76 kg',
66+
},
67+
{
68+
y: 74,
69+
x: 3,
70+
marker: '74 kg',
71+
},
72+
{
73+
y: 76,
74+
x: 4,
75+
marker: '76 kg',
76+
},
77+
{
78+
y: 65,
79+
x: 5,
80+
marker: 'Today: 65 kg',
81+
},
82+
],
83+
label: '',
84+
config: {
85+
mode: 'CUBIC_BEZIER',
86+
drawValues: false,
87+
lineWidth: 2,
88+
drawCircles: true,
89+
circleColor: processColor(petrel),
90+
drawCircleHole: false,
91+
circleRadius: 5,
92+
highlightColor: processColor('transparent'),
93+
color: processColor(petrel),
94+
drawFilled: true,
95+
fillGradient: {
96+
colors: [processColor('red'), processColor('black')],
97+
positions: [0, 0.5],
98+
angle: 90,
99+
orientation: 'LEFT_RIGHT',
100+
},
101+
fillAlpha: 1000,
102+
valueTextSize: 15,
103+
axisDependency: 'left',
104+
},
105+
},
106+
107+
{
108+
values: [
109+
{
110+
y: 35,
111+
x: 0,
112+
marker: '35 kg',
113+
},
114+
{
115+
y: 47,
116+
x: 1,
117+
marker: '47 kg',
118+
},
119+
{
120+
y: 46,
121+
x: 2,
122+
marker: '46 kg',
123+
},
124+
{
125+
y: 44,
126+
x: 3,
127+
marker: '44 kg',
128+
},
129+
{
130+
y: 46,
131+
x: 4,
132+
marker: '46 kg',
133+
},
134+
{
135+
y: 35,
136+
x: 5,
137+
marker: 'Today: 35 kg',
138+
},
139+
],
140+
label: '',
141+
config: {
142+
mode: 'CUBIC_BEZIER',
143+
drawValues: false,
144+
lineWidth: 2,
145+
drawCircles: true,
146+
circleColor: processColor(petrel),
147+
drawCircleHole: false,
148+
circleRadius: 5,
149+
highlightColor: processColor('transparent'),
150+
color: processColor(petrel),
151+
drawFilled: true,
152+
fillGradient: {
153+
colors: [processColor('green'), processColor('blue')],
154+
positions: [0, 0.5],
155+
angle: 90,
156+
orientation: 'RIGHT_LEFT',
157+
},
158+
fillAlpha: 1000,
159+
valueTextSize: 15,
160+
axisDependency: 'right',
161+
},
162+
},
163+
],
164+
}}
165+
chartDescription={{text: ''}}
166+
legend={{
167+
enabled: false,
168+
}}
169+
marker={{
170+
enabled: true,
171+
markerColor: processColor('white'),
172+
textColor: processColor('black'),
173+
}}
174+
xAxis={{
175+
enabled: true,
176+
granularity: 1,
177+
drawLabels: true,
178+
position: 'BOTTOM',
179+
drawAxisLine: true,
180+
drawGridLines: false,
181+
fontFamily: 'HelveticaNeue-Medium',
182+
fontWeight: 'bold',
183+
textSize: 12,
184+
textColor: processColor('gray'),
185+
valueFormatter: ['M', 'T', 'W', 'T', 'F', 'S'],
186+
}}
187+
yAxis={{
188+
left: {
189+
enabled: false,
190+
},
191+
right: {
192+
enabled: false,
193+
},
194+
}}
195+
autoScaleMinMaxEnabled={true}
196+
animation={{
197+
durationX: 0,
198+
durationY: 1500,
199+
easingY: 'EaseInOutQuart',
200+
}}
201+
drawGridBackground={false}
202+
drawBorders={false}
203+
touchEnabled={true}
204+
dragEnabled={false}
205+
scaleEnabled={false}
206+
scaleXEnabled={false}
207+
scaleYEnabled={false}
208+
pinchZoom={false}
209+
doubleTapToZoomEnabled={false}
210+
dragDecelerationEnabled={true}
211+
dragDecelerationFrictionCoef={0.99}
212+
keepPositionOnRotation={false}
213+
onSelect={this.handleSelect.bind(this)}
214+
onChange={(event) => console.log(event.nativeEvent)}
215+
/>
216+
</View>
217+
</View>
218+
</SafeAreaView>
219+
);
220+
}
221+
}
222+
223+
const styles = StyleSheet.create({
224+
container: {
225+
flex: 1,
226+
backgroundColor: '#F5FCFF',
227+
padding: 20,
228+
},
229+
chart: {
230+
height: 250,
231+
},
232+
});
233+
234+
export default LineChartScreen;

0 commit comments

Comments
 (0)