refactor(chart): replace chart data with REST api

rodrigo-brito · Oct 3, 2021 · 0776d00 · 0776d00
1 parent 3a096b6
commit 0776d00
Show file tree

Hide file tree

Showing 5 changed files with 300 additions and 120 deletions.
diff --git a/examples/backtesting/main.go b/examples/backtesting/main.go
@@ -54,7 +54,10 @@ func main() {
 		exchange.WithDataFeed(csvFeed),
 	)
 
-	chart := plot.NewChart()
+	chart := plot.NewChart(plot.WithIndicators(
+		plot.EMA(9, "red"),
+		plot.RSI(14, "purple"),
+	))
 
 	bot, err := ninjabot.NewBot(
 		ctx,

diff --git a/plot/assets/chart.html b/plot/assets/chart.html
@@ -10,9 +10,6 @@
     <title>Ninja Bot - Trade Results</title>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   </head>
-  <script>
-      const candles = {{ .Candles }};
-  </script>
   <script defer src="/assets/chart.js"></script>
   <style>
     .coin {
@@ -45,7 +42,7 @@
   </style>
   <body>
     <ul>
-      {{range $val := .Pairs}}
+      {{range $val := .pairs}}
         <li><a class="coin" href="/?pair={{ $val }}">{{ $val }}</a></li>
       {{end}}
     </ul>

diff --git a/plot/assets/chart.js b/plot/assets/chart.js
@@ -5,110 +5,116 @@ function unpack(rows, key) {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-    const candleStickData = {
-        name: "Candles",
-        x: unpack(candles, "time"),
-        close: unpack(candles, "close"),
-        open: unpack(candles, "open"),
-        low: unpack(candles, "low"),
-        high: unpack(candles, "high"),
-        type: "candlestick",
-        xaxis: "x",
-        yaxis: "y",
-    };
+    const params = new URLSearchParams(window.location.search)
+    const pair = params.get("pair") || ""
+    fetch("/data?pair="+pair).
+    then(data => data.json())
+    .then(data => {
+        const candleStickData = {
+            name: "Candles",
+            x: unpack(data.candles, "time"),
+            close: unpack(data.candles, "close"),
+            open: unpack(data.candles, "open"),
+            low: unpack(data.candles, "low"),
+            high: unpack(data.candles, "high"),
+            type: "candlestick",
+            xaxis: "x",
+            yaxis: "y",
+        };
 
-    const points = [];
-    const annotations = [];
-    candles.forEach((candle) => {
-        candle.orders.forEach(order => {
-            const point = {
-                time: candle.time,
-                position: order.price,
-                side: order.side,
-                color: "green"
-            }
-            if (order.side === "SELL") {
-                point.color = "red"
-            }
-            points.push(point);
+        const points = [];
+        const annotations = [];
+        data.candles.forEach((candle) => {
+            candle.orders.forEach(order => {
+                const point = {
+                    time: candle.time,
+                    position: order.price,
+                    side: order.side,
+                    color: "green"
+                }
+                if (order.side === "SELL") {
+                    point.color = "red"
+                }
+                points.push(point);
 
-            const annotation = {
-                x: candle.time,
-                y: candle.low,
-                xref: "x",
-                yref: "y",
-                text: "B",
-                hovertext: `${order.time}
-                    <br>ID: ${order.id}
-                    <br>Price: ${order.price.toLocaleString()}
-                    <br>Size: ${order.quantity.toPrecision(4).toLocaleString()}
-                    <br>Type: ${order.type}
-                    <br>${(order.profit && "Profit: " + (order.profit * 100).toPrecision(2).toLocaleString() + "%") || ""}`,
-                showarrow: true,
-                arrowcolor: "green",
-                valign: "bottom",
-                borderpad: 4,
-                arrowhead: 2,
-                ax: 0,
-                ay: 20,
-                font: {
-                    size: 12,
-                    color: "green",
-                },
-            };
+                const annotation = {
+                    x: candle.time,
+                    y: candle.low,
+                    xref: "x",
+                    yref: "y",
+                    text: "B",
+                    hovertext: `${order.time}
+                        <br>ID: ${order.id}
+                        <br>Price: ${order.price.toLocaleString()}
+                        <br>Size: ${order.quantity.toPrecision(4).toLocaleString()}
+                        <br>Type: ${order.type}
+                        <br>${(order.profit && "Profit: " + (order.profit * 100).toPrecision(2).toLocaleString() + "%") || ""}`,
+                    showarrow: true,
+                    arrowcolor: "green",
+                    valign: "bottom",
+                    borderpad: 4,
+                    arrowhead: 2,
+                    ax: 0,
+                    ay: 20,
+                    font: {
+                        size: 12,
+                        color: "green",
+                    },
+                };
 
-            if (order.side === "SELL") {
-                annotation.font.color = "red";
-                annotation.arrowcolor = "red";
-                annotation.text = "S";
-                annotation.y = candle.high;
-                annotation.ay = -20;
-                annotation.valign = "top";
-            }
-            annotations.push(annotation);
+                if (order.side === "SELL") {
+                    annotation.font.color = "red";
+                    annotation.arrowcolor = "red";
+                    annotation.text = "S";
+                    annotation.y = candle.high;
+                    annotation.ay = -20;
+                    annotation.valign = "top";
+                }
+                annotations.push(annotation);
+            });
         });
-    });
 
-    const sellPoints = points.filter(p => p.side === "SELL");
-    const buyPoints = points.filter(p => p.side === "BUY");
-    const buyData = {
-        name: "Buy Points",
-        x: unpack(buyPoints, "time"),
-        y: unpack(buyPoints, "position"),
-        mode: 'markers',
-        type: 'scatter',
-        marker: {
-            color: "green",
-        }
-    };
-    const sellData = {
-        name: "Sell Points",
-        x: unpack(sellPoints, "time"),
-        y: unpack(sellPoints, "position"),
-        mode: 'markers',
-        type: 'scatter',
-        marker: {
-            color: "red",
-        }
-    };
+        const sellPoints = points.filter(p => p.side === "SELL");
+        const buyPoints = points.filter(p => p.side === "BUY");
+        const buyData = {
+            name: "Buy Points",
+            x: unpack(buyPoints, "time"),
+            y: unpack(buyPoints, "position"),
+            mode: 'markers',
+            type: 'scatter',
+            marker: {
+                color: "green",
+            }
+        };
+        const sellData = {
+            name: "Sell Points",
+            x: unpack(sellPoints, "time"),
+            y: unpack(sellPoints, "position"),
+            mode: 'markers',
+            type: 'scatter',
+            marker: {
+                color: "red",
+            }
+        };
 
-    var layout = {
-        dragmode: "pan",
-        margin: {
-            r: 10,
-            t: 25,
-            b: 40,
-            l: 60,
-        },
-        showlegend: true,
-        xaxis: {
-            autorange: true
-        },
-        yaxis: {
-            autorange: true
-        },
-        annotations: annotations,
-    };
+        var layout = {
+            dragmode: "pan",
+            margin: {
+                r: 10,
+                t: 25,
+                b: 40,
+                l: 60,
+            },
+            showlegend: true,
+            xaxis: {
+                autorange: true
+            },
+            yaxis: {
+                autorange: true
+            },
+            annotations: annotations,
+        };
 
-    Plotly.newPlot("graph", [candleStickData, buyData, sellData], layout);
+        Plotly.newPlot("graph", [candleStickData, buyData, sellData], layout);
+    })
 });