Display total balance/performance.

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

import React from 'react';
import moment from 'moment';
import classnames from 'classnames';

class CurrencyLogo extends React.Component {
    render = () => {
      var className = classnames('bt', 'bt-' + this.props.currency.toLowerCase(), 'currency-logo');
      return <i className={className}
                aria-hidden="true"
                title={this.props.currency}></i>;
    }
 }

 var formatVariation = (variation, isPercent) => {
  var variationAbs = Math.abs(variation);
  var suffix = '';
  if (isPercent === true) {
    suffix = '%';
  }

  if (variation === 0.0) {
    return <span>{variationAbs}{suffix}</span>;
  } else if (variation > 0) {
    return <span className="performance-up">+{variationAbs}{suffix}</span>;
  }
  return <span className="performance-down">-{variationAbs}{suffix}</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, true)}</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, true)}</strong>
                </div>
              </div>
            </div>
        </React.Fragment>;
    }
}

class PFBalanceMinimal extends React.Component {
    render = () => {
        return <React.Fragment>
            <div className="balance">
              <div className="col-12">
                <CurrencyLogo currency="BTC" /> <span><strong>{this.props.balance}</strong> <strong>{formatVariation(this.props.variationP, this.props.isPercent)}</strong></span>
              </div>
            </div>
        </React.Fragment>;
    }
}

export {PFBalance, Assets, PFBalanceMinimal};