Refactor Portfolio balance.

[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
new file mode 100644 (file)
index 0000000..d141aa8
--- /dev/null
+++ b/cmd/web/js/balance.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import moment from 'moment';
+
+class CurrencyLogo extends React.Component {
+    render = () => {
+      return <div className="d-inline-block h-100">
+               <img className="currency-logo align-top"
+                  src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
+                  title={this.props.currency}
+                  alt={this.props.currency} />
+             </div>;
+    }
+ }
+
+ var formatVariation = (variation) => {
+  var variationAbs = Math.abs(variation);
+  if (variation === 0.0) {
+    return <span>{variationAbs}%</span>;
+  } else if (variation > 0) {
+    return <span className="performance-up">+{variationAbs}%</span>;
+  }
+  return <span className="performance-down">-{variationAbs}%</span>;
+};
+
+
+class CurrencyRateHeader extends React.Component {
+    render = () => {
+        return <React.Fragment>
+              <div className="row text-center">
+                <div className="d-inline col-2">Asset</div>
+                <div className="d-inline col-2">Position</div>
+                <div className="d-inline col-2">Qty</div>
+                <div className="d-inline col-2">Value (BTC)</div>
+                <div className="d-inline col-2">Weight</div>
+                <div className="d-inline col-2">Perf %</div>
+              </div>
+            </React.Fragment>;
+    }
+}
+
+class CurrencyRate extends React.Component {
+    render = () => {
+        return <React.Fragment>
+              <div className="row text-center">
+                <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /><span>{this.props.currency}</span></div>
+                <div className="d-inline col-2">{this.props.positionType}</div>
+                <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>
+            </React.Fragment>;
+    }
+}
+
+class Assets extends React.Component {
+    render = () => {
+        var currencies = Object.keys(this.props.balances).map(function(currency) {
+            var balance = this.props.balances[currency];
+            balance.currency = currency;
+            return <div className="row" key={currency}>
+                    <div className="col-12"><CurrencyRate {...balance} /></div>
+                  </div>;
+        }.bind(this));
+
+        return <div className="assets">
+          <CurrencyRateHeader />
+          {currencies}
+        </div>;
+    }
+}
+
+class PFBalance extends React.Component {
+    render = () => {
+        var date = moment(this.props.periodStart).format('MMM Do, h:mma');
+        return <React.Fragment>
+            <div className="h-100 align-self-center balance">
+              <div className="row">
+                <div className="col-8">
+                   Current balance
+                </div>
+                <div className="col-4 text-center h-100 btcValue">
+                  <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span>
+                </div>
+              </div>
+              <div className="row">
+                <div className="col-8">
+                  <em>since {date}</em>
+                </div>
+                <div className="col-4 variation text-center">
+                   <strong>{formatVariation(this.props.variationP)}</strong>
+                </div>
+              </div>
+            </div>
+        </React.Fragment>;
+    }
+}
+
+export {PFBalance, Assets};