Skip to content

Commit 0776d00

Browse files
rodrigo-britorodrigo-brito
committed
refactor(chart): replace chart data with REST api
1 parent 3a096b6 commit 0776d00

File tree

5 files changed

+300
-120
lines changed

5 files changed

+300
-120
lines changed

‎examples/backtesting/main.go‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,10 @@ func main() {
5454
exchange.WithDataFeed(csvFeed),
5555
)
5656

57-
chart := plot.NewChart()
57+
chart := plot.NewChart(plot.WithIndicators(
58+
plot.EMA(9, "red"),
59+
plot.RSI(14, "purple"),
60+
))
5861

5962
bot, err := ninjabot.NewBot(
6063
ctx,

‎plot/assets/chart.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@
1010
<title>Ninja Bot - Trade Results</title>
1111
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
1212
</head>
13-
<script>
14-
const candles = {{ .Candles }};
15-
</script>
1613
<script defer src="/assets/chart.js"></script>
1714
<style>
1815
.coin {
@@ -45,7 +42,7 @@
4542
</style>
4643
<body>
4744
<ul>
48-
{{range $val := .Pairs}}
45+
{{range $val := .pairs}}
4946
<li><a class="coin" href="/?pair={{ $val }}">{{ $val }}</a></li>
5047
{{end}}
5148
</ul>

‎plot/assets/chart.js‎

Lines changed: 105 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -5,110 +5,116 @@ function unpack(rows, key) {
55
}
66

77
document.addEventListener("DOMContentLoaded", function () {
8-
const candleStickData = {
9-
name: "Candles",
10-
x: unpack(candles, "time"),
11-
close: unpack(candles, "close"),
12-
open: unpack(candles, "open"),
13-
low: unpack(candles, "low"),
14-
high: unpack(candles, "high"),
15-
type: "candlestick",
16-
xaxis: "x",
17-
yaxis: "y",
18-
};
8+
const params = new URLSearchParams(window.location.search)
9+
const pair = params.get("pair") || ""
10+
fetch("/data?pair="+pair).
11+
then(data => data.json())
12+
.then(data => {
13+
const candleStickData = {
14+
name: "Candles",
15+
x: unpack(data.candles, "time"),
16+
close: unpack(data.candles, "close"),
17+
open: unpack(data.candles, "open"),
18+
low: unpack(data.candles, "low"),
19+
high: unpack(data.candles, "high"),
20+
type: "candlestick",
21+
xaxis: "x",
22+
yaxis: "y",
23+
};
1924

20-
const points = [];
21-
const annotations = [];
22-
candles.forEach((candle) => {
23-
candle.orders.forEach(order => {
24-
const point = {
25-
time: candle.time,
26-
position: order.price,
27-
side: order.side,
28-
color: "green"
29-
}
30-
if (order.side === "SELL") {
31-
point.color = "red"
32-
}
33-
points.push(point);
25+
const points = [];
26+
const annotations = [];
27+
data.candles.forEach((candle) => {
28+
candle.orders.forEach(order => {
29+
const point = {
30+
time: candle.time,
31+
position: order.price,
32+
side: order.side,
33+
color: "green"
34+
}
35+
if (order.side === "SELL") {
36+
point.color = "red"
37+
}
38+
points.push(point);
3439

35-
const annotation = {
36-
x: candle.time,
37-
y: candle.low,
38-
xref: "x",
39-
yref: "y",
40-
text: "B",
41-
hovertext: `${order.time}
42-
<br>ID: ${order.id}
43-
<br>Price: ${order.price.toLocaleString()}
44-
<br>Size: ${order.quantity.toPrecision(4).toLocaleString()}
45-
<br>Type: ${order.type}
46-
<br>${(order.profit && "Profit: " + (order.profit * 100).toPrecision(2).toLocaleString() + "%") || ""}`,
47-
showarrow: true,
48-
arrowcolor: "green",
49-
valign: "bottom",
50-
borderpad: 4,
51-
arrowhead: 2,
52-
ax: 0,
53-
ay: 20,
54-
font: {
55-
size: 12,
56-
color: "green",
57-
},
58-
};
40+
const annotation = {
41+
x: candle.time,
42+
y: candle.low,
43+
xref: "x",
44+
yref: "y",
45+
text: "B",
46+
hovertext: `${order.time}
47+
<br>ID: ${order.id}
48+
<br>Price: ${order.price.toLocaleString()}
49+
<br>Size: ${order.quantity.toPrecision(4).toLocaleString()}
50+
<br>Type: ${order.type}
51+
<br>${(order.profit && "Profit: " + (order.profit * 100).toPrecision(2).toLocaleString() + "%") || ""}`,
52+
showarrow: true,
53+
arrowcolor: "green",
54+
valign: "bottom",
55+
borderpad: 4,
56+
arrowhead: 2,
57+
ax: 0,
58+
ay: 20,
59+
font: {
60+
size: 12,
61+
color: "green",
62+
},
63+
};
5964

60-
if (order.side === "SELL") {
61-
annotation.font.color = "red";
62-
annotation.arrowcolor = "red";
63-
annotation.text = "S";
64-
annotation.y = candle.high;
65-
annotation.ay = -20;
66-
annotation.valign = "top";
67-
}
68-
annotations.push(annotation);
65+
if (order.side === "SELL") {
66+
annotation.font.color = "red";
67+
annotation.arrowcolor = "red";
68+
annotation.text = "S";
69+
annotation.y = candle.high;
70+
annotation.ay = -20;
71+
annotation.valign = "top";
72+
}
73+
annotations.push(annotation);
74+
});
6975
});
70-
});
7176

72-
const sellPoints = points.filter(p => p.side === "SELL");
73-
const buyPoints = points.filter(p => p.side === "BUY");
74-
const buyData = {
75-
name: "Buy Points",
76-
x: unpack(buyPoints, "time"),
77-
y: unpack(buyPoints, "position"),
78-
mode: 'markers',
79-
type: 'scatter',
80-
marker: {
81-
color: "green",
82-
}
83-
};
84-
const sellData = {
85-
name: "Sell Points",
86-
x: unpack(sellPoints, "time"),
87-
y: unpack(sellPoints, "position"),
88-
mode: 'markers',
89-
type: 'scatter',
90-
marker: {
91-
color: "red",
92-
}
93-
};
77+
const sellPoints = points.filter(p => p.side === "SELL");
78+
const buyPoints = points.filter(p => p.side === "BUY");
79+
const buyData = {
80+
name: "Buy Points",
81+
x: unpack(buyPoints, "time"),
82+
y: unpack(buyPoints, "position"),
83+
mode: 'markers',
84+
type: 'scatter',
85+
marker: {
86+
color: "green",
87+
}
88+
};
89+
const sellData = {
90+
name: "Sell Points",
91+
x: unpack(sellPoints, "time"),
92+
y: unpack(sellPoints, "position"),
93+
mode: 'markers',
94+
type: 'scatter',
95+
marker: {
96+
color: "red",
97+
}
98+
};
9499

95-
var layout = {
96-
dragmode: "pan",
97-
margin: {
98-
r: 10,
99-
t: 25,
100-
b: 40,
101-
l: 60,
102-
},
103-
showlegend: true,
104-
xaxis: {
105-
autorange: true
106-
},
107-
yaxis: {
108-
autorange: true
109-
},
110-
annotations: annotations,
111-
};
100+
var layout = {
101+
dragmode: "pan",
102+
margin: {
103+
r: 10,
104+
t: 25,
105+
b: 40,
106+
l: 60,
107+
},
108+
showlegend: true,
109+
xaxis: {
110+
autorange: true
111+
},
112+
yaxis: {
113+
autorange: true
114+
},
115+
annotations: annotations,
116+
};
112117

113-
Plotly.newPlot("graph", [candleStickData, buyData, sellData], layout);
118+
Plotly.newPlot("graph", [candleStickData, buyData, sellData], layout);
119+
})
114120
});

0 commit comments

Comments
 (0)