1 import React from 'react';
2 import moment from 'moment';
3 import classnames from 'classnames';
5 class CurrencyLogo extends React.Component {
7 var className = classnames('bt', 'bt-' + this.props.currency.toLowerCase(), 'currency-logo');
8 return <i className={className}
10 title={this.props.currency}></i>;
14 var formatVariation = (variation, isPercent) => {
15 var variationAbs = Math.abs(variation);
17 if (isPercent === true) {
21 if (variation === 0.0) {
22 return <span>{variationAbs}{suffix}</span>;
23 } else if (variation > 0) {
24 return <span className="performance-up">+{variationAbs}{suffix}</span>;
26 return <span className="performance-down">-{variationAbs}{suffix}</span>;
30 class CurrencyRateHeader extends React.Component {
32 return <React.Fragment>
33 <div className="row text-center">
34 <div className="d-inline col-2">Asset</div>
35 <div className="d-inline col-2">Position</div>
36 <div className="d-inline col-2">Qty</div>
37 <div className="d-inline col-2">Value (BTC)</div>
38 <div className="d-inline col-2">Weight</div>
39 <div className="d-inline col-2">Perf %</div>
45 class CurrencyRate extends React.Component {
47 return <React.Fragment>
48 <div className="row text-center">
49 <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /> <span>{this.props.currency}</span></div>
50 <div className="d-inline col-2">{this.props.positionType}</div>
51 <div className="d-inline col-2">{this.props.quantity}</div>
52 <div className="d-inline col-2">{this.props.BTCValue}</div>
53 <div className="d-inline col-2">{this.props.weight}%</div>
54 <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP, true)}</div>
60 class Assets extends React.Component {
62 var currencies = Object.keys(this.props.balances).map(function(currency) {
63 var balance = this.props.balances[currency];
64 balance.currency = currency;
65 return <div className="row" key={currency}>
66 <div className="col-12"><CurrencyRate {...balance} /></div>
70 return <div className="assets">
71 <CurrencyRateHeader />
77 class PFBalance extends React.Component {
79 var date = moment(this.props.periodStart).format('MMM Do, h:mma');
80 return <React.Fragment>
81 <div className="h-100 align-self-center balance">
83 <div className="col-8">
86 <div className="col-4 text-center h-100 btcValue">
87 <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span>
91 <div className="col-8">
94 <div className="col-4 variation text-center">
95 <strong>{formatVariation(this.props.variationP, true)}</strong>
103 class PFBalanceMinimal extends React.Component {
105 return <React.Fragment>
106 <div className="balance">
107 <div className="col-12">
108 <CurrencyLogo currency="BTC" /> <span><strong>{this.props.balance}</strong> <strong>{formatVariation(this.props.variationP, this.props.isPercent)}</strong></span>
115 export {PFBalance, Assets, PFBalanceMinimal};