rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

revamped position table

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-19 21:52:40 +00:00
parent 3979a4f86f
commit edbe6002df
1 changed files with 83 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
websrc/components/Tables.tsx
View File

@ -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> <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<Table id="positions" size="sm" hover striped bordered className="mt-2 text-center align-middle"> <table className="min-w-full divide-y divide-gray-200">
<thead>
<thead className="bg-gray-50">
<tr> <tr>
<th>State</th> {this.renderTableHead()}
<th>Symbol</th>
<th>Base price</th>
<th>Amount</th>
<th>P/L</th>
<th>P/L %</th>
<th>Action</th>
</tr> </tr>
</thead> </thead>
<tbody>
{this.tableData()} <tbody className="bg-white divide-y divide-gray-200">
{this.renderTableRows()}
</tbody> </tbody>
</Table> </table>
</Container> </div>
</div>
</div>
</div>
) )
} }
} }