websrc/components/RPlot.tsx

@@ -21,7 +21,6 @@ type PlotState = {
     x: Array<number>,
     y: Array<number>,
     h_price_line: PriceLine,
-    v_price_line: PriceLine
 }
 
 class RPlot extends Component<{}, PlotState> {
@@ -29,7 +28,6 @@ class RPlot extends Component<{}, PlotState> {
         x: [],
         y: [],
         h_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
-        v_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
     }
 
     constructor(props) {
@@ -38,8 +36,8 @@ class RPlot extends Component<{}, PlotState> {
 
     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]
+            const last_tick = data.ticks[data.ticks.length - 1];
+            const last_price = data.prices[data.prices.length - 1];
 
             this.setState({
                 x: data.ticks,
@@ -50,22 +48,16 @@ class RPlot extends Component<{}, PlotState> {
                     x1: last_tick,
                     y1: last_price
                 },
-                v_price_line: {
-                    x0: last_tick,
-                    y0: 0,
-                    x1: last_tick,
-                    y1: last_price
-                }
             })
         })
 
         socket.on("new_tick", (data: NewTickData) => {
-            var new_x = [...this.state.x, data.tick]
-            var new_y = [...this.state.y, data.price]
+            const new_x = [...this.state.x, data.tick];
+            const new_y = [...this.state.y, data.price];
 
             // cutting to up to 500 entries (last 500)
-            var x = new_x.slice(Math.max(new_x.length - 500, 0))
-            var y = new_y.slice(Math.max(new_y.length - 500, 0))
+            const x = new_x.slice(Math.max(new_x.length - 500, 0));
+            const y = new_y.slice(Math.max(new_y.length - 500, 0));
 
             this.setState({
                 x: x,
@@ -76,12 +68,6 @@ class RPlot extends Component<{}, PlotState> {
                     x1: data.tick,
                     y1: data.price
                 },
-                v_price_line: {
-                    x0: data.tick,
-                    y0: 0,
-                    x1: data.tick,
-                    y1: data.price
-                }
             })
         })
     }
@@ -95,7 +81,6 @@ class RPlot extends Component<{}, PlotState> {
                         y: this.state.y,
                         type: 'scatter',
                         mode: 'lines+markers',
-                        "marker.colorbar": {tickformat: "r"}
                     },
                 ]}
                 layout={{
@@ -107,7 +92,6 @@ class RPlot extends Component<{}, PlotState> {
                         pad: 4
                     },
                     dragmode: "pan",
-                    // autosize: true, 
                     shapes: [
                         {
                             type: 'line',

websrc/components/Tables.tsx

@@ -21,10 +21,11 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
     }
 
     tableData() {
-        return this.state.positions.map((position: PositionState, idx) => {
+        return this.state.positions.map((position: PositionState) => {
             return (<tr key={position.id}>
                 <th>{position.id}</th>
                 <th>{position.symbol}</th>
+                <th>{position.base_price.toFixed(2)}</th>
                 <th>{position.profit_loss.toFixed(2)}</th>
                 <th>{position.profit_loss_percentage.toFixed(2)} %</th>
             </tr>)
@@ -42,6 +43,7 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
                     <tr>
                         <th>ID</th>
                         <th>Symbol</th>
+                        <th>Base price</th>
                         <th>P/L</th>
                         <th>P/L %</th>
                     </tr>

websrc/index.tsx

@@ -14,6 +14,7 @@ export type NewTickData = {
 
 export type PositionState = {
     id: number,
+    base_price: number,
     symbol: string,
     profit_loss: number,
     profit_loss_percentage: number