core/websrc/components/Tables.tsx
2020-12-14 14:50:31 +00:00

57 lines
1.5 KiB
TypeScript

import React from "react"
import { Component } from "react"
import { Container, Table } from "react-bootstrap"
import { NewTickData, PositionState, socket } from '../';
export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
constructor(props) {
super(props)
}
state = {
positions: []
}
componentDidMount() {
socket.on('new_tick', (data: NewTickData) => {
this.setState({
positions: data.positions
})
})
}
tableData() {
return this.state.positions.map((position: PositionState, idx) => {
return (<tr key={position.id}>
<th>{position.id}</th>
<th>{position.symbol}</th>
<th>{position.profit_loss}</th>
<th>{position.profit_loss_percentage} %</th>
</tr>)
})
}
render() {
return (
<Container className="d-flex flex-column mt-2">
<div className="border-bottom">
<h2>Open positions</h2>
</div>
<Table id="positions" size="sm" hover striped bordered className="mt-2 text-center">
<thead>
<tr>
<th>ID</th>
<th>Symbol</th>
<th>P/L</th>
<th>P/L %</th>
</tr>
</thead>
<tbody>
{this.tableData()}
</tbody>
</Table>
</Container>
)
}
}