Skip to content

Commit

Permalink
Web UI: Replace tradingview.com widget with trade chart using our own…
Browse files Browse the repository at this point in the history 
… data (DeviaVir#1171)

Uses plotly.js (bundled) and the REST API to plot price, volume, OCHL (using lookback) as well as buy/sell signals.
  • Loading branch information
@defkev @DeviaVir
defkev authored and DeviaVir committed Jan 18, 2018
1 parent 57c54a1 commit f6bc7bf
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 21 deletions.
2 changes: 1 addition & 1 deletion extensions/output/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ module.exports = function container (get) {

app.get('/', function (req, res) {
let datas = objectWithoutKey(tradeObject, 'options');
datas = objectWithoutKey(tradeObject, 'lookback');
datas = objectWithoutKey(tradeObject);
res.render('dashboard', datas);
});

Expand Down
2 changes: 2 additions & 0 deletions lib/engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ module.exports = function container (get, set, clear) {
s.lookback = []
s.day_count = 1
s.my_trades = []
s.trades = []
s.vol_since_last_blink = 0
if (so.strategy) {
s.strategy = get('strategies.' + so.strategy)
Expand Down Expand Up @@ -149,6 +150,7 @@ module.exports = function container (get, set, clear) {
s.period.close_time = trade.time
s.strategy.calculate(s)
s.vol_since_last_blink += trade.size
s.trades.push(trade)
}

function executeStop (do_sell_stop) {
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"number-abbreviate": "^2.0.0",
"numbro": "highvelocityspace/numbro",
"path": "^0.12.7",
"plotly.js": "^1.32.0",
"poloniex.js": "0.0.8",
"popper.js": "^1.12.9",
"postcss-loader": "^2.0.9",
Expand All @@ -85,6 +86,7 @@
"style-loader": "^0.19.1",
"talib": "drorgl/node-talib#b30dd674e5b11822ea93bb253001169f1bc99e15",
"timebucket": "^0.4.0",
"transform-loader": "^0.2.4",
"trend": "0.3.0",
"url-loader": "^0.6.2",
"uuid": "^3.1.0",
Expand Down
147 changes: 127 additions & 20 deletions templates/dashboard.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,27 +147,134 @@
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12 col-12">
<div class="white-box">
<h3 class="box-title"><%= exchange.name.toUpperCase() %> <%= asset.toUpperCase() %>/<%= currency.toUpperCase() %> Live chart</h3>
<div style="height: 405px;">
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"autosize": true,
"symbol": "<%= (exchange.name.toUpperCase() === 'GDAX' ? 'COINBASE' : exchange.name.toUpperCase()) %>:<%= asset.toUpperCase() %><%= currency.toUpperCase() %>",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"save_image": false,
"hideideas": true
});
</script>
<h3 class="box-title"><%= exchange.name.toUpperCase() %> <%= asset.toUpperCase() %>/<%= currency.toUpperCase() %> Trade chart</h3>
<div id="trades_plot" style="height: 505px;">
</div>
<!-- TradingView Widget END -->
<script src="/assets-wp/plotly.bundle.js" charset="utf8"></script>
<script type="text/javascript">
function unpack(rows, key) {
return rows.map(function(row) {
if (key == 'time') {
// Plotly’s date format is 'yyyy-mm-dd HH:MM:SS.ssssss'
return new Date(row.time - ((new Date()).getTimezoneOffset() * 60000)).toISOString().replace(/T/g, ' ').replace(/Z/g, '');
} else {
return row[key];
}
});
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var tradeData = JSON.parse(this.responseText);
var trades = tradeData.trades;
var lookback = tradeData.lookback;
var my_trades = tradeData.my_trades;
var price = {
type: "scatter",
name: 'Price',
mode: 'lines+markers',
x: unpack(trades, 'time'),
y: unpack(trades, 'price')
};
var volume = {
type: 'bar',
name: 'Volume',
yaxis: 'y2',
opacity: '0.25',
x: unpack(trades, 'time'),
y: unpack(trades, 'size'),
width: 3600*4
};
var ohlc = {
type: 'ohlc',
name: 'OHLC',
x: unpack(lookback, 'time'),
open: unpack(lookback, 'open'),
high: unpack(lookback, 'high'),
low: unpack(lookback, 'low'),
close: unpack(lookback, 'close')
};
var data = [ price, volume, ohlc ];
var lastTrade = new Date(price.x[price.x.length - 1]);
lastTrade.setMinutes(lastTrade.getMinutes() + 1);
var rangeEnd = new Date(lastTrade - ((new Date()).getTimezoneOffset() * 60000)).toISOString().replace(/T/g, ' ').replace(/Z/g, '');
lastTrade.setMinutes(lastTrade.getMinutes() - 61);
var rangeStart = new Date(lastTrade - ((new Date()).getTimezoneOffset() * 60000)).toISOString().replace(/T/g, ' ').replace(/Z/g, '');
var layout = {
showlegend: false,
xaxis: {
range: [ rangeStart, rangeEnd ],
rangeselector: {
buttons: [
{
count: 5,
label: '5m',
step: 'minute',
stepmode: 'todate'
},
{
count: 30,
label: '30m',
step: 'minute',
stepmode: 'todate'
},
{
count: 1,
label: '1h',
step: 'hour',
stepmode: 'todate'
},
{
step: 'all'
}
]
},
rangeslider: {},
type: 'date'
},
yaxis: {
title: 'Price',
overlaying: 'y2',
side: 'right'
},
yaxis2: {
title: 'Volume',
side: 'left'
},
annotations: []
};
for (i = 0; i < my_trades.length; i++) {
layout.annotations.push({
x: new Date(my_trades[i].time - ((new Date()).getTimezoneOffset() * 60000)).toISOString().replace(/T/g, ' ').replace(/Z/g, ''),
y: my_trades[i].price,
xref: 'x',
yref: 'y',
text: my_trades[i].type,
ax: 0,
ay: -50
});
}
Plotly.newPlot('trades_plot', data, layout);
window.onresize = function() {
Plotly.Plots.resize('trades_plot');
};
}
};
xmlhttp.open("GET", "/trades", true);
xmlhttp.send();
</script>
</div>
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions webpack-src/js/plotly.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
var Plotly = require('plotly.js/lib/core');

Plotly.register([
require('plotly.js/lib/bar'),
require('plotly.js/lib/ohlc')
]);

module.exports = Plotly;
12 changes: 12 additions & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const webpack = require('webpack');
module.exports = {
entry: {
app: './webpack-src/js/app.js',
plotly: './webpack-src/js/plotly.js'
},
plugins: [
new webpack.ProvidePlugin({
Expand Down Expand Up @@ -60,6 +61,17 @@ module.exports = {
options: '$'
}]
},
{
test: /\.js$/,
use: 'transform-loader?plotly.js/tasks/util/compress_attributes.js',
},
{
test: require.resolve('./webpack-src/js/plotly.js'),
use: [{
loader: 'expose-loader',
options: 'Plotly'
}]
}
],
},
}

0 comments on commit f6bc7bf

Please sign in to comment.