added base price to position table. plot code cleanup
This commit is contained in:
parent
2cbb21f6cf
commit
e57daf3760
@ -21,7 +21,6 @@ type PlotState = {
|
|||||||
x: Array<number>,
|
x: Array<number>,
|
||||||
y: Array<number>,
|
y: Array<number>,
|
||||||
h_price_line: PriceLine,
|
h_price_line: PriceLine,
|
||||||
v_price_line: PriceLine
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class RPlot extends Component<{}, PlotState> {
|
class RPlot extends Component<{}, PlotState> {
|
||||||
@ -29,7 +28,6 @@ class RPlot extends Component<{}, PlotState> {
|
|||||||
x: [],
|
x: [],
|
||||||
y: [],
|
y: [],
|
||||||
h_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
|
h_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
|
||||||
v_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -38,8 +36,8 @@ class RPlot extends Component<{}, PlotState> {
|
|||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
socket.on("first_connect", (data: FirstConnectData) => {
|
socket.on("first_connect", (data: FirstConnectData) => {
|
||||||
var last_tick = data.ticks[data.ticks.length - 1]
|
const last_tick = data.ticks[data.ticks.length - 1];
|
||||||
var last_price = data.prices[data.prices.length - 1]
|
const last_price = data.prices[data.prices.length - 1];
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
x: data.ticks,
|
x: data.ticks,
|
||||||
@ -50,22 +48,16 @@ class RPlot extends Component<{}, PlotState> {
|
|||||||
x1: last_tick,
|
x1: last_tick,
|
||||||
y1: last_price
|
y1: last_price
|
||||||
},
|
},
|
||||||
v_price_line: {
|
|
||||||
x0: last_tick,
|
|
||||||
y0: 0,
|
|
||||||
x1: last_tick,
|
|
||||||
y1: last_price
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
socket.on("new_tick", (data: NewTickData) => {
|
socket.on("new_tick", (data: NewTickData) => {
|
||||||
var new_x = [...this.state.x, data.tick]
|
const new_x = [...this.state.x, data.tick];
|
||||||
var new_y = [...this.state.y, data.price]
|
const new_y = [...this.state.y, data.price];
|
||||||
|
|
||||||
// cutting to up to 500 entries (last 500)
|
// cutting to up to 500 entries (last 500)
|
||||||
var x = new_x.slice(Math.max(new_x.length - 500, 0))
|
const x = new_x.slice(Math.max(new_x.length - 500, 0));
|
||||||
var y = new_y.slice(Math.max(new_y.length - 500, 0))
|
const y = new_y.slice(Math.max(new_y.length - 500, 0));
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
x: x,
|
x: x,
|
||||||
@ -76,12 +68,6 @@ class RPlot extends Component<{}, PlotState> {
|
|||||||
x1: data.tick,
|
x1: data.tick,
|
||||||
y1: data.price
|
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,
|
y: this.state.y,
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
mode: 'lines+markers',
|
mode: 'lines+markers',
|
||||||
"marker.colorbar": {tickformat: "r"}
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
layout={{
|
layout={{
|
||||||
@ -107,7 +92,6 @@ class RPlot extends Component<{}, PlotState> {
|
|||||||
pad: 4
|
pad: 4
|
||||||
},
|
},
|
||||||
dragmode: "pan",
|
dragmode: "pan",
|
||||||
// autosize: true,
|
|
||||||
shapes: [
|
shapes: [
|
||||||
{
|
{
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
@ -21,10 +21,11 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
|
|||||||
}
|
}
|
||||||
|
|
||||||
tableData() {
|
tableData() {
|
||||||
return this.state.positions.map((position: PositionState, idx) => {
|
return this.state.positions.map((position: PositionState) => {
|
||||||
return (<tr key={position.id}>
|
return (<tr key={position.id}>
|
||||||
<th>{position.id}</th>
|
<th>{position.id}</th>
|
||||||
<th>{position.symbol}</th>
|
<th>{position.symbol}</th>
|
||||||
|
<th>{position.base_price.toFixed(2)}</th>
|
||||||
<th>{position.profit_loss.toFixed(2)}</th>
|
<th>{position.profit_loss.toFixed(2)}</th>
|
||||||
<th>{position.profit_loss_percentage.toFixed(2)} %</th>
|
<th>{position.profit_loss_percentage.toFixed(2)} %</th>
|
||||||
</tr>)
|
</tr>)
|
||||||
@ -42,6 +43,7 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
|
|||||||
<tr>
|
<tr>
|
||||||
<th>ID</th>
|
<th>ID</th>
|
||||||
<th>Symbol</th>
|
<th>Symbol</th>
|
||||||
|
<th>Base price</th>
|
||||||
<th>P/L</th>
|
<th>P/L</th>
|
||||||
<th>P/L %</th>
|
<th>P/L %</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -14,6 +14,7 @@ export type NewTickData = {
|
|||||||
|
|
||||||
export type PositionState = {
|
export type PositionState = {
|
||||||
id: number,
|
id: number,
|
||||||
|
base_price: number,
|
||||||
symbol: string,
|
symbol: string,
|
||||||
profit_loss: number,
|
profit_loss: number,
|
||||||
profit_loss_percentage: number
|
profit_loss_percentage: number
|
||||||
|
Loading…
Reference in New Issue
Block a user