Skip to content
This repository was archived by the owner on Sep 17, 2021. It is now read-only.

Commit 88b76ce

Browse files
Amaury Lietmarzolfb
Amaury Liet
authored and
marzolfb
committed
Feature/improve smoothline chart (#183)
* Add strokeDasharray Allow functions as options to specify per graph settings. * Display points over graph * Fix tests * Add dynamicLineRendering test
1 parent 0111246 commit 88b76ce

12 files changed

+531
-129
lines changed

‎example/src/App.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import PieChartBasic from './pie/PieChartBasic'
3030
import StockLineChartBasic from './stockline/StockLineChartBasic'
3131
import StockLineChartStaticTickLabels from './stockline/StockLineChartStaticTickLabels'
3232
import StockLineChartDynamicTickLabels from './stockline/StockLineChartDynamicTickLabels'
33+
import StockLineChartDynamicLineRendering from './stockline/StockLineChartDynamicLineRendering'
3334

3435
import SmoothLineChartBasic from './smoothline/SmoothLineChartBasic'
3536
import SmoothLineChartRegions from './smoothline/SmoothLineChartRegions'
@@ -82,6 +83,10 @@ class HomeScreen extends React.Component {
8283
onPress={() => navigate('StockLineChartDynamicTickLabels')}
8384
title="StockLine - Dynamic Labels"
8485
/>
86+
<Button
87+
onPress={() => navigate('StockLineChartDynamicLineRendering')}
88+
title="StockLine - Dynamic Line Rendering"
89+
/>
8590
<Button
8691
onPress={() => navigate('SmoothLineChartBasic')}
8792
title="SmoothLine - Basic"
@@ -118,6 +123,7 @@ const App = StackNavigator({
118123
StockLineChartBasic: { screen: StockLineChartBasic },
119124
StockLineChartStaticTickLabels: { screen: StockLineChartStaticTickLabels },
120125
StockLineChartDynamicTickLabels: { screen: StockLineChartDynamicTickLabels },
126+
StockLineChartDynamicLineRendering: { screen: StockLineChartDynamicLineRendering },
121127
SmoothLineChartBasic: { screen: SmoothLineChartBasic },
122128
SmoothLineChartRegions: { screen: SmoothLineChartRegions },
123129
SmoothLineChartRegionsExtended: { screen: SmoothLineChartRegionsExtended },

‎example/src/Menu.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,11 @@ class Menu extends Component {
118118
style={styles.subitem}>
119119
StockLine w/Dynamic Tick Labels
120120
</Text>
121+
<Text
122+
onPress={() => this.props.onItemSelected('StockLineChartDynamicLineRendering')}
123+
style={styles.subitem}>
124+
StockLine w/Dynamic Line Rendering
125+
</Text>
121126
</View>
122127
{/*End StockLine Charts*/}
123128

‎example/src/stockline/StockLineChartBasic.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ SPDX-Copyright: Copyright (c) Capital One Services, LLC
1616
SPDX-License-Identifier: Apache-2.0
1717
*/
1818

19-
'use strict'
19+
'use strict';
2020

2121
import React, { Component } from 'react';
22-
import { View, Text, StyleSheet } from 'react-native';
22+
import { View, StyleSheet } from 'react-native';
2323

24-
import { StockLine } from 'react-native-pathjs-charts'
24+
import { StockLine } from 'react-native-pathjs-charts';
2525

2626
const styles = StyleSheet.create({
2727
container: {
@@ -37,7 +37,7 @@ class StockLineChartBasic extends Component {
3737
title: `StockLine - Basic`,
3838
});
3939
render() {
40-
let data = [
40+
const data = [
4141
[{
4242
"x": 0,
4343
"y": 47782
@@ -212,8 +212,8 @@ class StockLineChartBasic extends Component {
212212
"x": 18,
213213
"y": 153227
214214
}]
215-
]
216-
let options = {
215+
];
216+
const options = {
217217
width: 250,
218218
height: 250,
219219
color: '#2980B9',
@@ -257,13 +257,13 @@ class StockLineChartBasic extends Component {
257257
fill: '#34495E'
258258
}
259259
}
260-
}
260+
};
261261

262262
return (
263263
<View style={styles.container}>
264264
<StockLine data={data} options={options} xKey='x' yKey='y' />
265265
</View>
266-
)
266+
);
267267
}
268268
}
269269

‎example/src/stockline/StockLineChartDynamicLineRendering.js‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
/*
2+
Copyright 2016 Capital One Services, LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and limitations under the License.
14+
15+
SPDX-Copyright: Copyright (c) Capital One Services, LLC
16+
SPDX-License-Identifier: Apache-2.0
17+
*/
18+
19+
'use strict';
20+
21+
import React, { Component } from 'react';
22+
import { View, StyleSheet } from 'react-native';
23+
import { Text, Circle } from 'react-native-svg';
24+
25+
import { StockLine } from 'react-native-pathjs-charts';
26+
27+
const styles = StyleSheet.create({
28+
container: {
29+
flex: 1,
30+
justifyContent: 'center',
31+
alignItems: 'center',
32+
backgroundColor: '#f7f7f7',
33+
},
34+
});
35+
36+
class StockLineChartDynamicLineRendering extends Component {
37+
static navigationOptions = ({ navigation }) => ({
38+
title: `StockLine - Dynamic Line Rendering`,
39+
});
40+
render() {
41+
const data = [
42+
[{
43+
"x": 0,
44+
"y": 47782
45+
}, {
46+
"x": 1,
47+
"y": 48497
48+
}, {
49+
"x": 2,
50+
"y": 77128
51+
}, {
52+
"x": 3,
53+
"y": 73413
54+
}, {
55+
"x": 4,
56+
"y": 58257
57+
}, {
58+
"x": 5,
59+
"y": 40579
60+
}, {
61+
"x": 6,
62+
"y": 72893
63+
}, {
64+
"x": 7,
65+
"y": 60663
66+
}, {
67+
"x": 8,
68+
"y": 15715
69+
}, {
70+
"x": 9,
71+
"y": 40305
72+
}, {
73+
"x": 10,
74+
"y": 68592
75+
}, {
76+
"x": 11,
77+
"y": 95664
78+
}, {
79+
"x": 12,
80+
"y": 17908
81+
}, {
82+
"x": 13,
83+
"y": 22838
84+
}],
85+
[{
86+
"x": 0,
87+
"y": 132189
88+
}, {
89+
"x": 1,
90+
"y": 61705
91+
}, {
92+
"x": 2,
93+
"y": 154976
94+
}, {
95+
"x": 3,
96+
"y": 81304
97+
}, {
98+
"x": 4,
99+
"y": 172572
100+
}, {
101+
"x": 5,
102+
"y": 140656
103+
}, {
104+
"x": 6,
105+
"y": 148606
106+
}, {
107+
"x": 7,
108+
"y": 53010
109+
}, {
110+
"x": 8,
111+
"y": 110783
112+
}, {
113+
"x": 9,
114+
"y": 196446
115+
}, {
116+
"x": 10,
117+
"y": 117057
118+
}, {
119+
"x": 11,
120+
"y": 186765
121+
}, {
122+
"x": 12,
123+
"y": 174908
124+
}, {
125+
"x": 13,
126+
"y": 75247
127+
}, {
128+
"x": 14,
129+
"y": 192894
130+
}, {
131+
"x": 15,
132+
"y": 150356
133+
}],
134+
[{
135+
"x": 0,
136+
"y": 125797
137+
}, {
138+
"x": 1,
139+
"y": 256656
140+
}, {
141+
"x": 2,
142+
"y": 222260
143+
}, {
144+
"x": 3,
145+
"y": 265642
146+
}, {
147+
"x": 4,
148+
"y": 263902
149+
}, {
150+
"x": 5,
151+
"y": 113453
152+
}, {
153+
"x": 6,
154+
"y": 289461
155+
}, {
156+
"x": 7,
157+
"y": 293850
158+
}, {
159+
"x": 8,
160+
"y": 206079
161+
}, {
162+
"x": 9,
163+
"y": 240859
164+
}, {
165+
"x": 10,
166+
"y": 152776
167+
}, {
168+
"x": 11,
169+
"y": 297282
170+
}, {
171+
"x": 12,
172+
"y": 175177
173+
}, {
174+
"x": 13,
175+
"y": 169233
176+
}, {
177+
"x": 14,
178+
"y": 237827
179+
}, {
180+
"x": 15,
181+
"y": 242429
182+
}, {
183+
"x": 16,
184+
"y": 218230
185+
}, {
186+
"x": 17,
187+
"y": 161511
188+
}, {
189+
"x": 18,
190+
"y": 153227
191+
}]
192+
];
193+
let options = {
194+
width: 250,
195+
height: 250,
196+
color: '#2980B9',
197+
margin: {
198+
top: 10,
199+
left: 35,
200+
bottom: 30,
201+
right: 10
202+
},
203+
animate: {
204+
type: 'delayed',
205+
duration: 200
206+
},
207+
axisX: {
208+
showAxis: true,
209+
showLines: true,
210+
showLabels: true,
211+
showTicks: true,
212+
zeroAxis: false,
213+
orient: 'bottom',
214+
tickValues: [],
215+
label: {
216+
fontFamily: 'Arial',
217+
fontSize: 8,
218+
fontWeight: true,
219+
fill: '#34495E'
220+
}
221+
},
222+
axisY: {
223+
showAxis: true,
224+
showLines: true,
225+
showLabels: true,
226+
showTicks: true,
227+
zeroAxis: false,
228+
orient: 'left',
229+
tickValues: [],
230+
label: {
231+
fontFamily: 'Arial',
232+
fontSize: 8,
233+
fontWeight: true,
234+
fill: '#34495E'
235+
}
236+
},
237+
strokeWidth: 2,
238+
239+
showAreas: (curve: number, index: number) => index === 0,
240+
241+
showPoints: (graphIndex: number, pointIndex: number) =>
242+
graphIndex === 1 && pointIndex === data[1].length - 1,
243+
renderPoint: () => [
244+
<Text
245+
key="valueLegend"
246+
fontFamily="Arial"
247+
fontSize={14}
248+
fontWeight="normal"
249+
fill="#101010"
250+
textAnchor="middle"
251+
x={0}
252+
y={20}
253+
>
254+
{data[1][data[1].length - 1].y}
255+
</Text>,
256+
<Circle key="light" fill='#34495E' cx={0} cy={0} r={10} fillOpacity={0.5} />,
257+
<Circle key="full" fill='#34495E' cx={0} cy={0} r={7} fillOpacity={1} />,
258+
],
259+
260+
strokeDasharray: (curve: number, index: number) => (index === 2 ? [5] : []),
261+
strokeOpacity: (curve: number, index: number) => (index === 2 ? 0.3 : 1),
262+
};
263+
264+
return (
265+
<View style={styles.container}>
266+
<StockLine data={data} options={options} xKey='x' yKey='y' />
267+
</View>
268+
);
269+
}
270+
}
271+
272+
export default StockLineChartDynamicLineRendering;

0 commit comments

Comments
 (0)