tailwind #9
@ -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',
|
||||
|
@ -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>
|
||||
|
@ -14,6 +14,7 @@ export type NewTickData = {
|
||||
|
||||
export type PositionState = {
|
||||
id: number,
|
||||
base_price: number,
|
||||
symbol: string,
|
||||
profit_loss: number,
|
||||
profit_loss_percentage: number
|
||||
|
Loading…
Reference in New Issue
Block a user