fix(charts): fix trade arrows for current trades

Now the arrows are shown when the trade is inserted. The arrow colors are similar to fxTrade ones.
albertosantini · Feb 4, 2016 · a485339 · a485339
1 parent 8833ad0
commit a485339
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git a/src/client/app/charts/charts.css b/src/client/app/charts/charts.css
@@ -61,7 +61,7 @@ path.tradearrow {
     }
 
 path.tradearrow.buy {
-    fill: #0000FF;
+    fill: rgb(114, 213, 255);
 }
 
 path.tradearrow.buy-pending {
@@ -71,7 +71,7 @@ path.tradearrow.buy-pending {
 }
 
 path.tradearrow.sell {
-    fill: #9900FF;
+    fill: rgb(243, 198, 113);
 }
 
 .tradearrow path.highlight {

diff --git a/src/client/app/components/charts.directive.js b/src/client/app/components/charts.directive.js
@@ -37,7 +37,6 @@
                 if (csv && csv.length > 0) {
                     myInstrument = scope.instrument;
                     myGranularity = scope.granularity;
-                    myTrades = scope.trades;
 
                     refreshChart = drawChart(element[0], csv);
 
@@ -90,8 +89,6 @@
                         lastData.low = lastData.close;
                     }
 
-                    myTrades = scope.trades;
-
                     refreshChart();
                 }
 
@@ -311,13 +308,6 @@
                 });
 
                 svg.select("g.candlestick").datum(data);
-                svg.select("g.tradearrow").datum(myTrades.map(function (trade) {
-                    return {
-                        date: new Date(trade.time),
-                        type: trade.side,
-                        price: trade.price
-                    };
-                }));
                 svg.select("g.sma.ma-0").datum(sma0Calculator(data));
                 svg.select("g.sma.ma-1").datum(sma1Calculator(data));
                 svg.select("g.volume").datum(data);
@@ -351,17 +341,16 @@
 
                     svg.select("g.candlestick").call(ohlc);
 
-                    var datum = svg.select("g.tradearrow").datum();
-                    svg.select("g.tradearrow").datum()
-                        .splice.apply(datum, [0, datum.length].concat(
-                                myTrades.map(function (trade) {
-                                    return {
-                                        date: new Date(trade.time),
-                                        type: trade.side,
-                                        price: trade.price
-                                    };
-                                })));
-                    svg.select("g.tradearrow").call(tradearrow);
+                    svg.select("g.tradearrow").remove();
+                    svg.append("g").attr("class", "tradearrow");
+                    myTrades = scope.trades.map(function (trade) {
+                        return {
+                            date: new Date(trade.time),
+                            type: trade.side,
+                            price: trade.price
+                        };
+                    });
+                    svg.select("g.tradearrow").datum(myTrades).call(tradearrow);
 
                     // Recalculate indicators and update the SAME array and
                     // redraw moving average