blob: d141aa8447d291a7eee7bd131ab3c54286b82238 (
plain) (
tree)
|
|
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};
|