Skip to content

Commit 5ce3976

Browse files
saurabhdixittrivenisaurabhdixittriveni
committed
Changes for depth chart in react-native.
1 parent cf4dda0 commit 5ce3976

File tree

3 files changed

+257
-16
lines changed

3 files changed

+257
-16
lines changed

HeighChart1.js renamed to HighChart1.js

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,32 +64,44 @@ const HeighChart1 = () => {
6464
const apiBack = axios.create({
6565
baseURL:
6666
'https://poloniex.com/public?command=returnOrderBook&currencyPair=BTC_ETH&depth=50',
67-
timeout: 1000,
67+
//timeout: 1000,
6868
});
69+
6970
useEffect(() => {
7071
apiBack
7172
.get('')
7273
.then((res) =>
7374
setState({...state, bids: res.data.bids, asks: res.data.asks}),
7475
);
75-
}, []);
76+
}, [state]);
7677

7778
var conf = {
7879
chart: {
7980
type: 'area',
80-
animation: Highcharts.svg, // don't animate in old IE
81+
animation: false, // don't animate in old IE
8182
marginRight: 10,
82-
// events: {
83-
// load: function () {
84-
// // set up the updating of the chart each second
85-
// var series = this.series[0];
86-
// setInterval(function () {
87-
// var x = new Date().getTime(), // current time
88-
// y = Math.random();
89-
// series.addPoint([x, y], true, true);
90-
// }, 1000);
91-
// },
92-
// },
83+
center: [0.0],
84+
threshold: 0,
85+
events: {
86+
load: function () {
87+
// set up the updating of the chart each second
88+
let series1 = [],
89+
series2 = [];
90+
setInterval(function () {
91+
apiBack.get('').then((res) => {
92+
res.data.bids.map((item, index) => {
93+
if (JSON.stringify(item) !== JSON.stringify(state.bids[index]))
94+
series1.push(item);
95+
});
96+
res.data.asks.map((item, index) => {
97+
if (JSON.stringify(item) !== JSON.stringify(state.asks[index]))
98+
series2.push(item);
99+
});
100+
});
101+
setState({...state, bids: series1, asks: series2});
102+
}, 2000);
103+
},
104+
},
93105
},
94106
title: {
95107
text: 'Live random data',
@@ -168,6 +180,7 @@ const HeighChart1 = () => {
168180
series: [
169181
{
170182
name: 'Bids',
183+
type: 'area',
171184
// data: [
172185
// [0.1435, 242.521842],
173186
// [0.1436, 206.49862099999999],
@@ -196,6 +209,7 @@ const HeighChart1 = () => {
196209
},
197210
{
198211
name: 'Asks',
212+
type: 'area',
199213
// data: [
200214
// [0.1524, 0.948665],
201215
// [0.1539, 35.510715],
@@ -233,6 +247,7 @@ const HeighChart1 = () => {
233247
thousandsSep: '.',
234248
},
235249
};
250+
236251
return (
237252
<SafeAreaView style={{flex: 1, backgroundColor: 'green'}}>
238253
<View style={{flex: 1, backgroundColor: 'black'}}>

‎HighChart2.js‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import React, {useState, useEffect} from 'react';
2+
import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
3+
import ChartView from 'react-native-highcharts';
4+
import axios from 'axios';
5+
/**
6+
* Request data from the server, add it to the graph and set a timeout
7+
* to request again
8+
*/
9+
function processData(list, type, desc) {
10+
var res = [];
11+
// Convert to data points
12+
for (var i = 0; i < list.length; i++) {
13+
list[i] = {
14+
value: Number(list[i][0]),
15+
volume: Number(list[i][1]),
16+
};
17+
}
18+
19+
// Sort list just in case
20+
list.sort(function (a, b) {
21+
if (a.value > b.value) {
22+
return 1;
23+
} else if (a.value < b.value) {
24+
return -1;
25+
} else {
26+
return 0;
27+
}
28+
});
29+
30+
// Calculate cummulative volume
31+
if (desc) {
32+
for (var i = list.length - 1; i >= 0; i--) {
33+
if (i < list.length - 1) {
34+
list[i].totalvolume = list[i + 1].totalvolume + list[i].volume;
35+
} else {
36+
list[i].totalvolume = list[i].volume;
37+
}
38+
// var dp = {};
39+
// dp['value'] = list[i].value;
40+
// dp[type + 'volume'] = list[i].volume;
41+
// dp[type + 'totalvolume'] = list[i].totalvolume;
42+
res.unshift([list[i].value, list[i].totalvolume]);
43+
}
44+
} else {
45+
for (var i = 0; i < list.length; i++) {
46+
if (i > 0) {
47+
list[i].totalvolume = list[i - 1].totalvolume + list[i].volume;
48+
} else {
49+
list[i].totalvolume = list[i].volume;
50+
}
51+
// var dp = {};
52+
// dp['value'] = list[i].value;
53+
// dp[type + 'volume'] = list[i].volume;
54+
// dp[type + 'totalvolume'] = list[i].totalvolume;
55+
res.push([list[i].value, list[i].totalvolume]);
56+
}
57+
}
58+
return res;
59+
}
60+
61+
const HighChart2 = () => {
62+
var Highcharts = 'Highcharts';
63+
const apiBack = axios.create({
64+
baseURL:
65+
'https://poloniex.com/public?command=returnOrderBook&currencyPair=BTC_ETH&depth=50',
66+
//timeout: 1000,
67+
});
68+
69+
const [state, setState] = useState({
70+
chartOptions: {
71+
chart: {
72+
type: 'area',
73+
animation: false, // don't animate in old IE
74+
marginRight: 10,
75+
center: [0.0],
76+
threshold: 0,
77+
// events: {
78+
// load: function () {
79+
// // set up the updating of the chart each second
80+
// // var series = this.series[0],
81+
// // series1 = this.series[1];
82+
// setInterval(function () {
83+
// alert('runnning');
84+
// var y = Math.random();
85+
// series.addPoint(y, true, true);
86+
// series1.addPoint(y, true, true);
87+
// // apiBack
88+
// // .get('')
89+
// // .then((res) => res.json())
90+
// // .then((res) => {
91+
// // setState({
92+
// // ...state,
93+
// // chartOptions: {
94+
// // ...state.chartOptions,
95+
// // series: [
96+
// // {data: processData(res.data.bids, 'bids', true)},
97+
// // {data: processData(res.data.asks, 'asks', false)},
98+
// // ],
99+
// // },
100+
// // });
101+
// // });
102+
// // series.redraw();
103+
// // series1.redraw();
104+
// }, 5000);
105+
// },
106+
// },
107+
},
108+
series: [
109+
{
110+
data: [],
111+
},
112+
{
113+
data: [],
114+
},
115+
],
116+
title: {
117+
text: 'Live random data',
118+
},
119+
xAxis: {
120+
minPadding: 0,
121+
maxPadding: 0,
122+
plotLines: [
123+
{
124+
color: '#888',
125+
//value: state.asks.length && state.asks[0][0],
126+
width: 1,
127+
label: {
128+
text: 'Actual price',
129+
rotation: 90,
130+
},
131+
},
132+
],
133+
title: {
134+
text: 'Price',
135+
},
136+
},
137+
yAxis: [
138+
{
139+
lineWidth: 1,
140+
gridLineWidth: 1,
141+
title: null,
142+
tickWidth: 1,
143+
tickLength: 5,
144+
tickPosition: 'inside',
145+
labels: {
146+
align: 'left',
147+
x: 8,
148+
},
149+
},
150+
{
151+
opposite: true,
152+
linkedTo: 0,
153+
lineWidth: 1,
154+
gridLineWidth: 0,
155+
title: null,
156+
tickWidth: 1,
157+
tickLength: 5,
158+
tickPosition: 'inside',
159+
labels: {
160+
align: 'right',
161+
x: -8,
162+
},
163+
},
164+
],
165+
tooltip: {
166+
backgroundColor: '#FCFFC5',
167+
borderColor: 'black',
168+
borderRadius: 10,
169+
borderWidth: 3,
170+
crosshairs: [true, true],
171+
formatter: function () {
172+
return (
173+
'<b>' + this.series.name + '</b><br/>' + this.x + '<br/>' + this.y
174+
);
175+
},
176+
},
177+
legend: {
178+
enabled: false,
179+
},
180+
plotOptions: {
181+
area: {
182+
fillOpacity: 0.2,
183+
lineWidth: 1,
184+
step: 'center',
185+
},
186+
},
187+
exporting: {
188+
enabled: false,
189+
},
190+
},
191+
});
192+
193+
useEffect(() => {
194+
apiBack.get('').then((res) =>
195+
setState({
196+
...state,
197+
chartOptions: {
198+
...state.chartOptions,
199+
series: [
200+
{data: processData(res.data.bids, 'bids', true)},
201+
{data: processData(res.data.asks, 'asks', false)},
202+
],
203+
},
204+
}),
205+
);
206+
}, []);
207+
208+
return (
209+
<SafeAreaView style={{flex: 1, backgroundColor: 'green'}}>
210+
<View style={{flex: 1, backgroundColor: 'black'}}>
211+
<ChartView
212+
style={{height: 300, overflow: 'hidden'}}
213+
config={state.chartOptions}
214+
//options={state.chartOptions}
215+
originWhitelist={['']}
216+
javaScriptEnabled={true}
217+
domStorageEnabled={true}
218+
useWebKit={true}
219+
scalesPageToFit={undefined}></ChartView>
220+
</View>
221+
</SafeAreaView>
222+
);
223+
};
224+
225+
export default HighChart2;

‎index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ import App from './App';
2828
//import DepthCHart1 from './DepthCHart1';
2929
//import CombineChart from './CombineChart';
3030
//import HeighChart from './HeighChart';
31-
import HeighChart1 from './HeighChart1';
31+
import HighChart1 from './HighChart1';
32+
import HighChart2 from './HighChart2';
3233

3334
import {name as appName} from './app.json';
3435

35-
AppRegistry.registerComponent(appName, () => HeighChart1);
36+
AppRegistry.registerComponent(appName, () => HighChart2);

0 commit comments

Comments
 (0)