profit_loss attached to frontend. buttons buggy
This commit is contained in:
Giulio De Pasquale
parent
d240398cce
commit
f3edea53cf
@ -206,9 +206,6 @@ class BfxWrapper(BfxRest):
|
||||
|
||||
profit_loss = end_quote - (start_quote + movements_quote)
|
||||
|
||||
# print(f"Start: {start}, End: {end}")
|
||||
# print(f"{start_bg} {end_bg} {movements_bg}")
|
||||
|
||||
profit_loss_percentage = profit_loss / (start_quote + movements_quote) * 100
|
||||
|
||||
|
||||
|
||||
2
main.py
2
main.py
@ -95,7 +95,7 @@ def on_get_profit_loss(message):
|
||||
profit_loss = loop.run_until_complete(bot.get_profit_loss(start, end))
|
||||
|
||||
socketio.emit("put_profit_loss", {
|
||||
"pl" : profit_loss[0],
|
||||
"pl": profit_loss[0],
|
||||
"pl_perc": profit_loss[1]
|
||||
})
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import React, {Component} from "react";
|
||||
import {NewTickMessage} from "../types";
|
||||
import {EventName, GetProfitLossMessage, NewTickMessage, PutProfitLossMessage} from "../types";
|
||||
import {socket} from "../index";
|
||||
import {DateTime} from "luxon";
|
||||
|
||||
type QuoteStatusProps = {
|
||||
percentage?: boolean,
|
||||
@ -54,7 +56,7 @@ export class QuoteStatus extends Component<QuoteStatusProps> {
|
||||
<>
|
||||
<span className="text-4xl text-bold align-top">{this.renderSign()}{this.props.quote_symbol}</span>
|
||||
<span className="text-5xl">{this.whole.toLocaleString()}</span>
|
||||
<span className="text-3xl align-top">.{this.decimal}</span>
|
||||
<span className="text-3xl align-top">.{Math.abs(this.decimal)}</span>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -75,11 +77,13 @@ export class QuoteStatus extends Component<QuoteStatusProps> {
|
||||
}
|
||||
|
||||
type DateButtonProps = {
|
||||
label: string
|
||||
label: string,
|
||||
onClick: any,
|
||||
selected_default?: boolean
|
||||
}
|
||||
|
||||
type DateButtonState = {
|
||||
selected: boolean
|
||||
selected: boolean,
|
||||
}
|
||||
|
||||
class DateButton extends Component<DateButtonProps, DateButtonState> {
|
||||
@ -88,7 +92,7 @@ class DateButton extends Component<DateButtonProps, DateButtonState> {
|
||||
private currentClass: string;
|
||||
|
||||
state = {
|
||||
selected: false
|
||||
selected: this.props.selected_default
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@ -97,28 +101,116 @@ class DateButton extends Component<DateButtonProps, DateButtonState> {
|
||||
this.updateClass()
|
||||
}
|
||||
|
||||
toggleState() {
|
||||
this.setState({selected: !this.state.selected})
|
||||
this.updateClass()
|
||||
onClick() {
|
||||
this.setState({selected: !this.state.selected}, this.updateClass)
|
||||
|
||||
this.props.onClick()
|
||||
}
|
||||
|
||||
updateClass() {
|
||||
this.currentClass = this.state.selected ? this.classSelected : this.classNotSelected;
|
||||
this.currentClass = this.state.selected ? this.classSelected : this.classNotSelected
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button type="button"
|
||||
className={this.currentClass} onClick={() => this.toggleState()}>
|
||||
<button key={this.props.label} type="button"
|
||||
className={this.currentClass} onClick={this.onClick.bind(this)}>
|
||||
{this.props.label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class Statusbar extends Component<NewTickMessage> {
|
||||
const PeriodUnit = {
|
||||
SECOND: "second",
|
||||
MINUTE: "minute",
|
||||
HOUR: "hour",
|
||||
DAY: "day",
|
||||
WEEK: "week",
|
||||
MONTH: "month",
|
||||
YEAR: "year"
|
||||
}
|
||||
|
||||
type StatusBarState = {
|
||||
pl_period_unit: string,
|
||||
pl_period_amount: number,
|
||||
pl: number,
|
||||
pl_perc: number
|
||||
}
|
||||
|
||||
export class Statusbar extends Component<NewTickMessage, StatusBarState> {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
pl_period_unit: PeriodUnit.WEEK,
|
||||
pl_period_amount: 1,
|
||||
pl: 0.0,
|
||||
pl_perc: 0.0
|
||||
}
|
||||
|
||||
this.emitGetProfitLoss = this.emitGetProfitLoss.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
socket.on(EventName.PutProfitLoss, (data: PutProfitLossMessage) => {
|
||||
this.setState({
|
||||
pl: data.pl,
|
||||
pl_perc: data.pl_perc
|
||||
})
|
||||
})
|
||||
|
||||
socket.on(EventName.FirstConnect, this.emitGetProfitLoss)
|
||||
socket.on(EventName.NewTick, this.emitGetProfitLoss)
|
||||
}
|
||||
|
||||
|
||||
durationObjectfromStr(str: string) {
|
||||
switch (str) {
|
||||
case PeriodUnit.MINUTE:
|
||||
return {
|
||||
minutes: this.state.pl_period_amount
|
||||
}
|
||||
case PeriodUnit.HOUR:
|
||||
return {
|
||||
hours: this.state.pl_period_amount
|
||||
}
|
||||
case PeriodUnit.DAY:
|
||||
return {
|
||||
days: this.state.pl_period_amount
|
||||
}
|
||||
case PeriodUnit.WEEK:
|
||||
return {
|
||||
weeks: this.state.pl_period_amount
|
||||
}
|
||||
case PeriodUnit.MONTH:
|
||||
return {
|
||||
months: this.state.pl_period_amount
|
||||
}
|
||||
case PeriodUnit.YEAR:
|
||||
return {
|
||||
years: this.state.pl_period_amount
|
||||
}
|
||||
default:
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
emitGetProfitLoss() {
|
||||
const message: GetProfitLossMessage = {
|
||||
start: DateTime.local().minus(this.durationObjectfromStr(this.state.pl_period_unit)).toMillis(),
|
||||
end: DateTime.local().toMillis()
|
||||
}
|
||||
|
||||
socket.emit(EventName.GetProfitLoss, message)
|
||||
}
|
||||
|
||||
changeProfitLossPeriod(amount: number, unit: string) {
|
||||
this.setState({
|
||||
pl_period_amount: amount,
|
||||
pl_period_unit: unit
|
||||
}, this.emitGetProfitLoss)
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -132,24 +224,21 @@ export class Statusbar extends Component<NewTickMessage> {
|
||||
<div className="hidden lg:flex">
|
||||
<button type="button"
|
||||
className="appearance-none py-4 text-blue-600 border-b border-blue-dark mr-6">
|
||||
Bitcoin · CA$21,404.74
|
||||
</button>
|
||||
<button type="button"
|
||||
className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark mr-6">
|
||||
Ethereum · CA$884.80
|
||||
</button>
|
||||
<button type="button"
|
||||
className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
|
||||
Litecoin · CA$358.24
|
||||
Bitcoin
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex text-sm">
|
||||
<DateButton label={"1m"}/>
|
||||
<DateButton label={"1D"}/>
|
||||
<DateButton label={"1W"}/>
|
||||
<DateButton label={"1M"}/>
|
||||
<DateButton label={"1Y"}/>
|
||||
<DateButton label={"ALL"}/>
|
||||
<DateButton key={PeriodUnit.MINUTE} label={"1m"}
|
||||
onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.MINUTE)}/>
|
||||
<DateButton key={PeriodUnit.DAY} label={"1D"}
|
||||
onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.DAY)}/>
|
||||
<DateButton key={PeriodUnit.WEEK} label={"1W"} selected_default={true}
|
||||
onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.WEEK)}/>
|
||||
<DateButton key={PeriodUnit.MONTH} label={"1M"}
|
||||
onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.MONTH)}/>
|
||||
<DateButton key={PeriodUnit.YEAR} label={"1Y"}
|
||||
onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.YEAR)}/>
|
||||
{/*<DateButton label={"ALL"} onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.MINUTE)}/>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -168,8 +257,6 @@ export class Statusbar extends Component<NewTickMessage> {
|
||||
<select
|
||||
className="block appearance-none w-full bg-white border border-grey-light px-4 py-2 pr-8 rounded">
|
||||
<option>BTC</option>
|
||||
<option>ETH</option>
|
||||
<option>LTC</option>
|
||||
</select>
|
||||
<div className="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-gray-300">
|
||||
<svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
|
||||
@ -188,12 +275,15 @@ export class Statusbar extends Component<NewTickMessage> {
|
||||
</div>
|
||||
<div className="w-1/3 text-center py-8">
|
||||
<div className="border-r">
|
||||
<QuoteStatus quote_symbol={"GBP"} sign={true} amount={12134.20} subtitle={"since last month"}/>
|
||||
<QuoteStatus key={this.state.pl} quote_symbol={"USD"} sign={true} amount={this.state.pl}
|
||||
subtitle={"since last ".concat(this.state.pl_period_unit)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/3 text-center py-8">
|
||||
<div>
|
||||
<QuoteStatus percentage={true} sign={true} amount={-100.45} subtitle={"since last month"}/>
|
||||
<QuoteStatus key={this.state.pl_perc} percentage={true} sign={true}
|
||||
amount={this.state.pl_perc}
|
||||
subtitle={"since last ".concat(this.state.pl_period_unit)}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -25,6 +25,11 @@ export type FirstConnectMessage = {
|
||||
balances: Array<Balance>
|
||||
}
|
||||
|
||||
export type GetProfitLossMessage = {
|
||||
start: number,
|
||||
end: number
|
||||
}
|
||||
|
||||
export type NewEventMessage = {
|
||||
tick: number,
|
||||
kind: string,
|
||||
@ -52,6 +57,11 @@ export type PositionProp = {
|
||||
profit_loss_percentage: number
|
||||
}
|
||||
|
||||
export type PutProfitLossMessage = {
|
||||
pl: number,
|
||||
pl_perc: number
|
||||
}
|
||||
|
||||
/*******************************
|
||||
* ENUMS
|
||||
*******************************/
|
||||
@ -60,6 +70,8 @@ export enum EventName {
|
||||
NewTick = "new_tick",
|
||||
FirstConnect = "first_connect",
|
||||
NewEvent = "new_event",
|
||||
ClosePosition = "close_position"
|
||||
ClosePosition = "close_position",
|
||||
GetProfitLoss = "get_profit_loss",
|
||||
PutProfitLoss = "put_profit_loss"
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user