Display total balance/performance.v0.0.24

2 files changed, 30 insertions, 10 deletions

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