1 import React from 'react';
2 import moment from 'moment';
4 class CurrencyLogo extends React.Component {
6 return <div className="d-inline-block h-100">
7 <img className="currency-logo align-top"
8 src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
9 title={this.props.currency}
10 alt={this.props.currency} />
15 var formatVariation = (variation) => {
16 var variationAbs = Math.abs(variation);
17 if (variation === 0.0) {
18 return <span>{variationAbs}%</span>;
19 } else if (variation > 0) {
20 return <span className="performance-up">+{variationAbs}%</span>;
22 return <span className="performance-down">-{variationAbs}%</span>;
26 class CurrencyRateHeader extends React.Component {
28 return <React.Fragment>
29 <div className="row text-center">
30 <div className="d-inline col-2">Asset</div>
31 <div className="d-inline col-2">Position</div>
32 <div className="d-inline col-2">Qty</div>
33 <div className="d-inline col-2">Value (BTC)</div>
34 <div className="d-inline col-2">Weight</div>
35 <div className="d-inline col-2">Perf %</div>
41 class CurrencyRate extends React.Component {
43 return <React.Fragment>
44 <div className="row text-center">
45 <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /><span>{this.props.currency}</span></div>
46 <div className="d-inline col-2">{this.props.positionType}</div>
47 <div className="d-inline col-2">{this.props.quantity}</div>
48 <div className="d-inline col-2">{this.props.BTCValue}</div>
49 <div className="d-inline col-2">{this.props.weight}%</div>
50 <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP)}</div>
56 class Assets extends React.Component {
58 var currencies = Object.keys(this.props.balances).map(function(currency) {
59 var balance = this.props.balances[currency];
60 balance.currency = currency;
61 return <div className="row" key={currency}>
62 <div className="col-12"><CurrencyRate {...balance} /></div>
66 return <div className="assets">
67 <CurrencyRateHeader />
73 class PFBalance extends React.Component {
75 var date = moment(this.props.periodStart).format('MMM Do, h:mma');
76 return <React.Fragment>
77 <div className="h-100 align-self-center balance">
79 <div className="col-8">
82 <div className="col-4 text-center h-100 btcValue">
83 <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span>
87 <div className="col-8">
90 <div className="col-4 variation text-center">
91 <strong>{formatVariation(this.props.variationP)}</strong>
99 export {PFBalance, Assets};