-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
126 lines (123 loc) · 3.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
<style>
html{
background: #eeeee4;
}
</style>
</head>
<body>
<div id="root"><div id="data">⏳ Loading data...</div><div id="message">❌ Disconnected!</div></div>
<script>
function mapCouchToLightweight(rows){
return rows.map(kv=>{
const date = {
year: kv.key[1] || 0,
month: kv.key[2] || 0,
day: kv.key[3] || 0,
hour: kv.key[4] || 0,
minute: kv.key[5] || 0,
second: kv.key[6] || 0,
}
let time = new Date(`${date.month}/${date.day}/${date.year} ${date.hour}:${date.minute}:${date.second}`)
console.log({
open: kv.value.o,
close: kv.value.c,
low: kv.value.l,
high: kv.value.h,
time: time.getTime()/1000
// time: {year: kv.key[1], month: kv.key[2], day: kv.key[3], hour: kv.key[4]}
})
return {
open: kv.value.o,
close: kv.value.c,
low: kv.value.l,
high: kv.value.h,
time: time.getTime()/1000
// time: {year: kv.key[1], month: kv.key[2], day: kv.key[3], hour: kv.key[4]}
}
})
}
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300, timeScale: {
timeVisible: true,
secondsVisible: true,
} });
const lineSeries = chart.addCandlestickSeries({
upColor: 'rgb(38,166,154)',
downColor: 'rgb(255,82,82)',
wickUpColor: 'rgb(38,166,154)',
wickDownColor: 'rgb(255,82,82)',
borderVisible: false,
});
function setData(data){
document.getElementById('data').innerHTML = '✅ Loaded Data for 21582668'
lineSeries.setData(mapCouchToLightweight(data.rows));
chart.timeScale().fitContent()
}
function setMessage(msg){
document.getElementById('message').innerHTML = msg
}
const db = new PouchDB('http://localhost:5984/blocks', {auth: {
username: 'admin',
password: 'dex'
}})
// _design/chart/_view/sieve
db.query('blocks/ohlc', {
reduce: true, group: true, group_level: 6,
startkey: [ 21582668, 0, 0, 0, 0, 0, 0 ],
endkey: [ 21582668, Date.now(), 0, 0, 0, 0, 0 ],
}).then(function (res) {
// got the query results
setData(res)
}).catch(function (err) {
// some error
});
let retry = 0;
(
function run(){
setMessage('🚀 Connecting...')
console.log({
msg: '🚀 Connecting to Service...',
retry
});
const ws = new WebSocket('ws://localhost:9001/');
window.ws = ws;
ws.onopen = function () {
const msg = '⚡ Connected: Waiting for messages...'
setMessage(msg)
console.log({
msg,
retry
});
// socket.send(`asset/${15322902}`);
ws.send(`blocks`);
};
// Listen for messages
ws.addEventListener('message', function (event) {
console.log({msg: '📝 Message Received', event: event.data});
setMessage(`⬇ Message: ${event.data}`);
let {type} = JSON.parse(event.data);
if(type === 'SHUTDOWN') ws.close();
});
ws.onclose = function({reason}) {
const msg = '💥 Socket Closed'
setMessage(msg)
console.log({
msg,
reason,
retry,
});
setTimeout(function() {
retry++;
run();
}, 1000);
};
})();
</script>
</body>
</html>