From: jloup <jean-loup.jamet@trainline.com>
Date: Thu, 19 Jul 2018 16:00:20 +0000 (+0200)
Subject: Display total balance/performance.
X-Git-Tag: v0.0.24
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=1fcb77583201f9979a839fcae2dd642edc25af96;p=perso%2FImmae%2FProjets%2FCryptomonnaies%2FCryptoportfolio%2FFront.git

Display total balance/performance.
---

diff --git a/api/admin.go b/api/admin.go
index 3b16d87..e4bfda5 100644
--- a/api/admin.go
+++ b/api/admin.go
@@ -4,13 +4,18 @@ import (
 	"fmt"
 
 	"git.immae.eu/Cryptoportfolio/Front.git/db"
+	"github.com/shopspring/decimal"
 )
 
 type GetAllPortfoliosQuery struct {
 	In struct {
 		Market string
 	}
-	Out map[string]Portfolio
+	Out struct {
+		Portfolios        map[string]Portfolio `json:"portfolios"`
+		TotalBTCValue     decimal.Decimal      `json:"totalBtcValue"`
+		TotalBTCVariation decimal.Decimal      `json:"totalBtcVariation"`
+	}
 }
 
 func (q GetAllPortfoliosQuery) ValidateParams() *Error {
@@ -27,7 +32,7 @@ func (q GetAllPortfoliosQuery) Run() (interface{}, *Error) {
 		return nil, NewInternalError(err)
 	}
 
-	q.Out = make(map[string]Portfolio)
+	q.Out.Portfolios = make(map[string]Portfolio)
 
 	for _, marketConfig := range u {
 		report, err := GetWeekPortfolio(marketConfig)
@@ -39,8 +44,13 @@ func (q GetAllPortfoliosQuery) Run() (interface{}, *Error) {
 			return nil, NewInternalError(err)
 		}
 
-		q.Out[marketConfig.User.Email] = report.Round()
+		q.Out.Portfolios[marketConfig.User.Email] = report.Round()
+		q.Out.TotalBTCValue = q.Out.TotalBTCValue.Add(report.Performance.Value)
+		q.Out.TotalBTCVariation = q.Out.TotalBTCVariation.Add(report.Performance.Variation)
 	}
 
+	q.Out.TotalBTCValue = q.Out.TotalBTCValue.Round(3)
+	q.Out.TotalBTCVariation = q.Out.TotalBTCVariation.Round(3)
+
 	return q.Out, nil
 }
diff --git a/cmd/web/js/admin.jsx b/cmd/web/js/admin.jsx
index 81ce15d..19eb3ef 100644
--- a/cmd/web/js/admin.jsx
+++ b/cmd/web/js/admin.jsx
@@ -6,7 +6,7 @@ import Panel from './panel.js';
 class AdminDashboard extends React.Component {
   constructor(state) {
     super(state);
-    this.state = {'portfolios': null};
+    this.state = {'portfolios': null, 'globalPerformance': null};
   }
 
   load = () => {
@@ -16,7 +16,13 @@ class AdminDashboard extends React.Component {
         return;
       }
 
-      this.setState({'portfolios': data});
+      this.setState({
+        'portfolios': data.portfolios,
+        'globalPerformance': {
+          'totalBtcValue':     data.totalBtcValue,
+          'totalBtcVariation': data.totalBtcVariation
+        }
+      });
     }.bind(this));
   }
 
@@ -28,15 +34,24 @@ class AdminDashboard extends React.Component {
     if (this.state.portfolios === null) {
       return <div></div>;
     }
+
+    var globalPerformance = <div className="row" key="global">
+      <div className="col-6"><span>Total:</span></div>
+      <div className="col-6 text-center">
+        <PFBalanceMinimal variationP={this.state.globalPerformance.totalBtcVariation} balance={this.state.globalPerformance.totalBtcValue} isPercent={false}/>
+      </div>
+    </div>;
     var portfolios = Object.keys(this.state.portfolios).map(function(email) {
       return <div className="row" key={email}>
                <div className="col-6"><span>{email}:</span></div>
                <div className="col-6 text-center">
-                 <PFBalanceMinimal variationP={this.state.portfolios[email].performance.variationP} balance={this.state.portfolios[email].value} periodStart={this.state.portfolios[email].periodStart}/>
+                 <PFBalanceMinimal variationP={this.state.portfolios[email].performance.variationP} balance={this.state.portfolios[email].value} isPercent={true}/>
                </div>
              </div>;
     }.bind(this));
 
+    portfolios.push(<hr key="hr"/>, globalPerformance);
+
     return <Panel component={<div>{portfolios}</div>} title="Portfolios Overview"/>;
   }
 
diff --git a/cmd/web/js/balance.jsx b/cmd/web/js/balance.jsx
index 1915511..429538d 100644
--- a/cmd/web/js/balance.jsx
+++ b/cmd/web/js/balance.jsx
@@ -11,14 +11,19 @@ class CurrencyLogo extends React.Component {
     }
  }
 
- var formatVariation = (variation) => {
+ var formatVariation = (variation, isPercent) => {
   var variationAbs = Math.abs(variation);
+  var suffix = '';
+  if (isPercent === true) {
+    suffix = '%';
+  }
+
   if (variation === 0.0) {
-    return <span>{variationAbs}%</span>;
+    return <span>{variationAbs}{suffix}</span>;
   } else if (variation > 0) {
-    return <span className="performance-up">+{variationAbs}%</span>;
+    return <span className="performance-up">+{variationAbs}{suffix}</span>;
   }
-  return <span className="performance-down">-{variationAbs}%</span>;
+  return <span className="performance-down">-{variationAbs}{suffix}</span>;
 };
 
 
@@ -46,7 +51,7 @@ class CurrencyRate extends React.Component {
                 <div className="d-inline col-2">{this.props.quantity}</div>
                 <div className="d-inline col-2">{this.props.BTCValue}</div>
                 <div className="d-inline col-2">{this.props.weight}%</div>
-                <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP)}</div>
+                <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP, true)}</div>
               </div>
             </React.Fragment>;
     }
@@ -87,7 +92,7 @@ class PFBalance extends React.Component {
                   <em>since {date}</em>
                 </div>
                 <div className="col-4 variation text-center">
-                   <strong>{formatVariation(this.props.variationP)}</strong>
+                   <strong>{formatVariation(this.props.variationP, true)}</strong>
                 </div>
               </div>
             </div>
@@ -100,7 +105,7 @@ class PFBalanceMinimal extends React.Component {
         return <React.Fragment>
             <div className="balance">
               <div className="col-12">
-                <CurrencyLogo currency="BTC" /> <span><strong>{this.props.balance}</strong> <strong>{formatVariation(this.props.variationP)}</strong></span>
+                <CurrencyLogo currency="BTC" /> <span><strong>{this.props.balance}</strong> <strong>{formatVariation(this.props.variationP, this.props.isPercent)}</strong></span>
               </div>
             </div>
         </React.Fragment>;