core/websrc/components/Tables.tsx

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<PositionState> }> {
    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 (<tr key={position.id}>
                <td className={"align-middle"}><Badge
                    variant={this.stateVariantFromStr(position.state)}>{position.state}</Badge></td>
                <td className={"align-middle"}>{position.symbol}</td>
                <td className={"align-middle"}>{position.base_price.toFixed(2)}</td>
                <td className={"align-middle"}>{position.amount.toFixed(5)}</td>
                <td className={"align-middle"}>{position.profit_loss.toFixed(2)}</td>
                <td className={"align-middle"}>{position.profit_loss_percentage.toFixed(2)} %</td>
                <td className={"align-middle"}><Button size={"sm"} variant={"danger"} onClick={() => {
                    socket.emit("close", ({"id": position.id}))
                }}>Close</Button></td>
            </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 align-middle">
                    <thead>
                    <tr>
                        <th>State</th>
                        <th>Symbol</th>
                        <th>Base price</th>
                        <th>Amount</th>
                        <th>P/L</th>
                        <th>P/L %</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.tableData()}
                    </tbody>
                </Table>
            </Container>
        )
    }
}