blob: 19155118e97d29782126eb5917ed564733cfd33e (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
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) => {
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>;
}
}
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)}</strong></span>
</div>
</div>
</React.Fragment>;
}
}
export {PFBalance, Assets, PFBalanceMinimal};
|
