From 1718c37751d4109d37455344b3aa7977e2d4fe2f Mon Sep 17 00:00:00 2001
From: Giulio De Pasquale <giulio@depasquale.eu>
Date: Mon, 14 Dec 2020 15:37:12 +0000
Subject: [PATCH] added dashed line on last price

---
 websrc/components/RPlot.tsx | 50 +++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx
index ea36df8..a03ed19 100644
--- a/websrc/components/RPlot.tsx
+++ b/websrc/components/RPlot.tsx
@@ -10,9 +10,18 @@ type FirstConnectData = {
     prices: Array<number>
 }
 
+
+type PriceLine = {
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number
+}
+
 type PlotState = {
     x: Array<number>,
-    y: Array<number>
+    y: Array<number>,
+    price_line: PriceLine
 }
 
 class RPlot extends Component<{}, PlotState> {
@@ -22,14 +31,24 @@ class RPlot extends Component<{}, PlotState> {
 
     state = {
         x: [],
-        y: []
+        y: [],
+        price_line: { x0: 0, x1: 0, y0: 0, y1: 0 }
     }
 
     componentDidMount() {
         socket.on("first_connect", (data: FirstConnectData) => {
+            var last_tick = data.ticks[data.ticks.length - 1]
+            var last_price = data.prices[data.prices.length - 1]
+
             this.setState({
                 x: data.ticks,
-                y: data.prices
+                y: data.prices,
+                price_line: {
+                    x0: 0,
+                    y0: last_price,
+                    x1: last_tick,
+                    y1: last_price
+                }
             })
         })
 
@@ -44,6 +63,12 @@ class RPlot extends Component<{}, PlotState> {
             this.setState({
                 x: x,
                 y: y,
+                price_line: {
+                    x0: 0,
+                    y0: data.price,
+                    x1: data.tick,
+                    y1: data.price
+                }
             })
         })
     }
@@ -57,10 +82,25 @@ class RPlot extends Component<{}, PlotState> {
                         y: this.state.y,
                         type: 'scatter',
                         mode: 'lines+markers',
-                        "marker.colorbar": { tickformat: ".1f"}
+                        "marker.colorbar": { tickformat: ".1f" }
                     },
                 ]}
-                layout={{ dragmode: "pan", autosize: true }}
+                layout={{
+                    dragmode: "pan", autosize: true, shapes: [
+                        {
+                            type: 'line',
+                            x0: this.state.price_line.x0,
+                            y0: this.state.price_line.y0,
+                            x1: this.state.price_line.x1,
+                            y1: this.state.price_line.y1,
+                            line: {
+                                color: 'rgb(50, 171, 96)',
+                                width: 2,
+                                dash: 'dashdot'
+                            }
+                        },
+                    ]
+                }}
                 config={{
                     scrollZoom: true,
                     displayModeBar: false,