websrc/components/RPlot.tsx

@@ -21,6 +21,7 @@ type PlotState = {
     x: Array<number>,
     y: Array<number>,
     current_price_line: PriceLine,
+    positions_price_lines: Array<PriceLine>,
 }
 
 class RPlot extends Component<{}, PlotState> {
@@ -28,6 +29,7 @@ class RPlot extends Component<{}, PlotState> {
         x: [],
         y: [],
         current_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
+        positions_price_lines: []
     }
 
     constructor(props) {
@@ -59,6 +61,15 @@ class RPlot extends Component<{}, PlotState> {
             const x = new_x.slice(Math.max(new_x.length - 500, 0));
             const y = new_y.slice(Math.max(new_y.length - 500, 0));
 
+            const position_price_lines = data.positions.map((pstat): PriceLine => {
+                return {
+                    x0: 0,
+                    y0: pstat.base_price,
+                    x1: data.tick,
+                    y1: pstat.base_price
+                }
+            })
+
             this.setState({
                 x: x,
                 y: y,
@@ -68,11 +79,31 @@ class RPlot extends Component<{}, PlotState> {
                     x1: data.tick,
                     y1: data.price
                 },
+                positions_price_lines: position_price_lines
             })
         })
     }
 
     render() {
+        let additional_shapes = []
+
+        if (this.state.positions_price_lines.length > 0) {
+            additional_shapes = this.state.positions_price_lines.map((priceline: PriceLine) => {
+                return {
+                    type: 'line',
+                    x0: priceline.x0,
+                    y0: priceline.y0,
+                    x1: priceline.x1,
+                    y1: priceline.y1,
+                    line: {
+                        color: 'rgb(1, 1, 1)',
+                        width: 1,
+                        dash: 'solid'
+                    }
+                }
+            })
+        }
+
         return (
             <Plot
                 data={[
@@ -105,7 +136,7 @@ class RPlot extends Component<{}, PlotState> {
                                 dash: 'dashdot'
                             }
                         },
-                    ],
+                    ].concat(additional_shapes),
                     xaxis: {
                         title: {
                             text: 'Tick',
@@ -137,6 +168,7 @@ class RPlot extends Component<{}, PlotState> {
             />
         )
     }
+
 }
 
 export default RPlot;