Display total balance/performance.

[perso/Immae/Projets/Cryptomonnaies/Cryptoportfolio/Front.git] / cmd / web / js / balance.jsx

diff --git a/cmd/web/js/balance.jsx b/cmd/web/js/balance.jsx
index 19155118e97d29782126eb5917ed564733cfd33e..429538d6b72eefb620d9c9ffc11f06c31be36ea3 100644 (file)
--- 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>;