import React, {Component} from "react" import {Badge, Button, Container, Table} from "react-bootstrap" import {NewTickData, PositionState, socket} from '../'; export class PositionTable extends Component<{}, { positions: Array }> { testPosition: PositionState = { base_price: 1, id: 1, profit_loss: 1000, profit_loss_percentage: 1000, state: "loss", symbol: "PAPARCOIN" } state = { positions: [] } constructor(props) { super(props) } stateVariantFromStr(state: string): string { const lower_state = state.toLowerCase() let res: string; if (lower_state.includes("profit")) { res = "success" } else if (lower_state.includes("break")) { res = "primary" } else { res = "danger" } return res } plColorFromStr(amount: number): string { if (amount > 0) { return "success" } else { return "danger" } } componentDidMount() { socket.on('new_tick', (data: NewTickData) => { this.setState({ positions: data.positions }) }) } tableData() { return this.state.positions.map((position: PositionState) => { return ( {position.state} {position.symbol} {position.base_price.toFixed(2)} {position.profit_loss.toFixed(2)} {position.profit_loss_percentage.toFixed(2)} % ) }) } render() { return (

Open positions

{this.tableData()}
State Symbol Base price P/L P/L % Action
) } }