core/websrc/components/Tables.tsx
Giulio De Pasquale 2cbb21f6cf code cleanup
2020-12-14 18:52:43 +00:00

56 lines
1.6 KiB
TypeScript

import React, {Component} from "react"
import {Container, Table} from "react-bootstrap"
import {NewTickData, PositionState, socket} from '../';
export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
state = {
positions: []
}
constructor(props) {
super(props)
}
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.toFixed(2)}</th>
<th>{position.profit_loss_percentage.toFixed(2)} %</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>
)
}
}