cmd/web/js/balance.jsx

   1 import React from 'react';
   2 import moment from 'moment';
   3 import classnames from 'classnames';
   4
   5 class CurrencyLogo extends React.Component {
   6     render = () => {
   7       var className = classnames('cc', this.props.currency, 'currency-logo');
   8       return <i className={className}
   9                 title={this.props.currency}
  10                 alt={this.props.currency}></i>;
  11     }
  12  }
  13
  14  var formatVariation = (variation) => {
  15   var variationAbs = Math.abs(variation);
  16   if (variation === 0.0) {
  17     return <span>{variationAbs}%</span>;
  18   } else if (variation > 0) {
  19     return <span className="performance-up">+{variationAbs}%</span>;
  20   }
  21   return <span className="performance-down">-{variationAbs}%</span>;
  22 };
  23
  24
  25 class CurrencyRateHeader extends React.Component {
  26     render = () => {
  27         return <React.Fragment>
  28               <div className="row text-center">
  29                 <div className="d-inline col-2">Asset</div>
  30                 <div className="d-inline col-2">Position</div>
  31                 <div className="d-inline col-2">Qty</div>
  32                 <div className="d-inline col-2">Value (BTC)</div>
  33                 <div className="d-inline col-2">Weight</div>
  34                 <div className="d-inline col-2">Perf %</div>
  35               </div>
  36             </React.Fragment>;
  37     }
  38 }
  39
  40 class CurrencyRate extends React.Component {
  41     render = () => {
  42         return <React.Fragment>
  43               <div className="row text-center">
  44                 <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /> <span>{this.props.currency}</span></div>
  45                 <div className="d-inline col-2">{this.props.positionType}</div>
  46                 <div className="d-inline col-2">{this.props.quantity}</div>
  47                 <div className="d-inline col-2">{this.props.BTCValue}</div>
  48                 <div className="d-inline col-2">{this.props.weight}%</div>
  49                 <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP)}</div>
  50               </div>
  51             </React.Fragment>;
  52     }
  53 }
  54
  55 class Assets extends React.Component {
  56     render = () => {
  57         var currencies = Object.keys(this.props.balances).map(function(currency) {
  58             var balance = this.props.balances[currency];
  59             balance.currency = currency;
  60             return <div className="row" key={currency}>
  61                     <div className="col-12"><CurrencyRate {...balance} /></div>
  62                   </div>;
  63         }.bind(this));
  64
  65         return <div className="assets">
  66           <CurrencyRateHeader />
  67           {currencies}
  68         </div>;
  69     }
  70 }
  71
  72 class PFBalance extends React.Component {
  73     render = () => {
  74         var date = moment(this.props.periodStart).format('MMM Do, h:mma');
  75         return <React.Fragment>
  76             <div className="h-100 align-self-center balance">
  77               <div className="row">
  78                 <div className="col-8">
  79                    Current balance
  80                 </div>
  81                 <div className="col-4 text-center h-100 btcValue">
  82                   <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span>
  83                 </div>
  84               </div>
  85               <div className="row">
  86                 <div className="col-8">
  87                   <em>since {date}</em>
  88                 </div>
  89                 <div className="col-4 variation text-center">
  90                    <strong>{formatVariation(this.props.variationP)}</strong>
  91                 </div>
  92               </div>
  93             </div>
  94         </React.Fragment>;
  95     }
  96 }
  97
  98 class PFBalanceMinimal extends React.Component {
  99     render = () => {
 100         return <React.Fragment>
 101             <div className="balance">
 102               <div className="col-12">
 103                 <CurrencyLogo currency="BTC" /> <span><strong>{this.props.balance}</strong> <strong>{formatVariation(this.props.variationP)}</strong></span>
 104               </div>
 105             </div>
 106         </React.Fragment>;
 107     }
 108 }
 109
 110 export {PFBalance, Assets, PFBalanceMinimal};