diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx index c694e3b..a7798b4 100644 --- a/websrc/components/RPlot.tsx +++ b/websrc/components/RPlot.tsx @@ -21,7 +21,6 @@ type PlotState = { x: Array, y: Array, 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', diff --git a/websrc/components/Tables.tsx b/websrc/components/Tables.tsx index 330cc86..b062301 100644 --- a/websrc/components/Tables.tsx +++ b/websrc/components/Tables.tsx @@ -21,10 +21,11 @@ export class PositionTable extends Component<{}, { positions: Array { + return this.state.positions.map((position: PositionState) => { return ( {position.id} {position.symbol} + {position.base_price.toFixed(2)} {position.profit_loss.toFixed(2)} {position.profit_loss_percentage.toFixed(2)} % ) @@ -42,6 +43,7 @@ export class PositionTable extends Component<{}, { positions: Array ID Symbol + Base price P/L P/L % diff --git a/websrc/index.tsx b/websrc/index.tsx index 20114d3..5f30412 100644 --- a/websrc/index.tsx +++ b/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