profit_loss attached to frontend. buttons buggy

bfxbot/bfxwrapper.py

@@ -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
 
 

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]
     })
 

websrc/components/Statusbar.tsx

@@ -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() {
+    onClick() {
-        this.setState({selected: !this.state.selected})
+        this.setState({selected: !this.state.selected}, this.updateClass)
-        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"
+            <button key={this.props.label} type="button"
-                    className={this.currentClass} onClick={() => this.toggleState()}>
+                    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 &middot; CA$21,404.74
+                                Bitcoin
-                            </button>
-                            <button type="button"
-                                    className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark mr-6">
-                                Ethereum &middot; CA$884.80
-                            </button>
-                            <button type="button"
-                                    className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark">
-                                Litecoin &middot; CA$358.24
                             </button>
                         </div>
                         <div className="flex text-sm">
-                            <DateButton label={"1m"}/>
+                            <DateButton key={PeriodUnit.MINUTE} label={"1m"}
-                            <DateButton label={"1D"}/>
+                                        onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.MINUTE)}/>
-                            <DateButton label={"1W"}/>
+                            <DateButton key={PeriodUnit.DAY} label={"1D"}
-                            <DateButton label={"1M"}/>
+                                        onClick={() => this.changeProfitLossPeriod(1, PeriodUnit.DAY)}/>
-                            <DateButton label={"1Y"}/>
+                            <DateButton key={PeriodUnit.WEEK} label={"1W"} selected_default={true}
-                            <DateButton label={"ALL"}/>
+                                        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>

websrc/types.ts

@@ -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"
 }