revamped position table
This commit is contained in:
parent
3979a4f86f
commit
edbe6002df
@ -1,87 +1,111 @@
|
|||||||
import React, {Component} from "react"
|
import React, {Component} from "react"
|
||||||
import {Badge, Button, Container, Table} from "react-bootstrap"
|
import {PositionProp} from "../types";
|
||||||
import {socket} from '../';
|
|
||||||
import {PositionCloseMessage, PositionProp} from "../types";
|
|
||||||
|
|
||||||
|
export class PositionsTable extends Component<{ positions: Array<PositionProp> }> {
|
||||||
export class PositionTable extends Component<{ positions: Array<PositionProp> }> {
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props);
|
||||||
}
|
}
|
||||||
|
|
||||||
stateVariantFromStr(state: string): string {
|
stateColor(state: string): string {
|
||||||
const lower_state = state.toLowerCase()
|
const lower_state = state.toLowerCase()
|
||||||
let res: string;
|
let res: string
|
||||||
|
|
||||||
if (lower_state.includes("profit")) {
|
if (lower_state.includes("profit")) {
|
||||||
res = "success"
|
res = "green"
|
||||||
} else if (lower_state.includes("break")) {
|
} else if (lower_state.includes("break")) {
|
||||||
res = "primary"
|
res = "yellow"
|
||||||
} else {
|
} else {
|
||||||
res = "danger"
|
res = "red"
|
||||||
}
|
}
|
||||||
|
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
plColorFromStr(amount: number): string {
|
|
||||||
if (amount > 0) {
|
renderTableHead() {
|
||||||
return "success"
|
return ["status", "currency pair", "base price", "amount", "Profit/Loss", "actions"].map((entry) => {
|
||||||
} else {
|
return (
|
||||||
return "danger"
|
<th scope="col"
|
||||||
}
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
{entry}
|
||||||
|
</th>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
tableData() {
|
renderTableRows() {
|
||||||
return this.props.positions.map((position: PositionProp) => {
|
return this.props.positions.map((position) => {
|
||||||
let row_bg = "";
|
const stateBg = "bg-".concat(this.stateColor(position.state)).concat("-100 ")
|
||||||
|
const stateText = "text-".concat(this.stateColor(position.state)).concat("-800 ")
|
||||||
|
const stateClass = "px-2 inline-flex text-xs leading-5 font-semibold rounded-full ".concat(stateBg).concat(stateText)
|
||||||
|
|
||||||
if (!position.state.toLowerCase().includes("break")) {
|
return (
|
||||||
row_bg = "table-" + this.plColorFromStr(position.profit_loss)
|
<tr key={position.id}>
|
||||||
}
|
{/* Status */}
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
className={stateClass}>
|
||||||
|
{position.state}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
return (<tr key={position.id} className={row_bg}>
|
<td className="px-6 py-1 whitespace-nowrap">
|
||||||
<td className={"align-middle"}><Badge
|
<div className="text-sm text-gray-900">{position.symbol}</div>
|
||||||
variant={this.stateVariantFromStr(position.state)}>{position.state}</Badge></td>
|
{/*<div className="text-sm text-gray-500">{position.}</div>*/}
|
||||||
<td className={"align-middle"}>{position.symbol}</td>
|
</td>
|
||||||
<td className={"align-middle"}>{position.base_price.toFixed(2)}</td>
|
|
||||||
<td className={"align-middle"}>{position.amount.toFixed(5)}</td>
|
<td className="px-6 py-1 whitespace-nowrap">
|
||||||
<td className={"align-middle"}>{position.profit_loss.toFixed(2)}</td>
|
<div className="text-sm text-gray-900">{position.base_price.toLocaleString()} USD/BTC</div>
|
||||||
<td className={"align-middle"}>{position.profit_loss_percentage.toFixed(2)} %</td>
|
{/*<div className="text-sm text-gray-500">Insert total % here?</div>*/}
|
||||||
<td className={"align-middle"}><Button size={"sm"} variant={"danger"} onClick={() => {
|
</td>
|
||||||
const message: PositionCloseMessage = {
|
|
||||||
message_name: "close_position",
|
<td className="px-6 py-1 whitespace-nowrap">
|
||||||
position_id: position.id,
|
<div className="text-sm text-gray-900">{position.amount.toFixed(5)} BTC</div>
|
||||||
}
|
<div className="text-sm text-gray-500">Insert total % here?</div>
|
||||||
socket.emit(message.message_name, (message))
|
</td>
|
||||||
}}>Close</Button></td>
|
|
||||||
</tr>)
|
<td className="px-6 py-1 whitespace-nowrap">
|
||||||
|
<div className="text-sm text-gray-900">{position.profit_loss.toLocaleString()} USD</div>
|
||||||
|
<div className="text-sm text-gray-500">{position.profit_loss_percentage.toFixed(2)}%</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<div className="p-2 md:w-40">
|
||||||
|
<div
|
||||||
|
className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100">
|
||||||
|
<span className="ml-2">Close</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Container className="d-flex flex-column mt-2">
|
<div className="flex flex-col">
|
||||||
<div className="border-bottom">
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||||
<h2>Open positions</h2>
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||||
|
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
{this.renderTableHead()}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{this.renderTableRows()}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Table id="positions" size="sm" hover striped bordered className="mt-2 text-center align-middle">
|
</div>
|
||||||
<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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user