]>
Commit | Line | Data |
---|---|---|
1 | import React from 'react'; | |
2 | import moment from 'moment'; | |
3 | import classnames from 'classnames'; | |
4 | ||
5 | class CurrencyLogo extends React.Component { | |
6 | render = () => { | |
7 | var className = classnames('bt', 'bt-' + this.props.currency.toLowerCase(), 'currency-logo'); | |
8 | return <i className={className} | |
9 | aria-hidden="true" | |
10 | title={this.props.currency}></i>; | |
11 | } | |
12 | } | |
13 | ||
14 | var formatVariation = (variation, isPercent) => { | |
15 | var variationAbs = Math.abs(variation); | |
16 | var suffix = ''; | |
17 | if (isPercent === true) { | |
18 | suffix = '%'; | |
19 | } | |
20 | ||
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>; | |
25 | } | |
26 | return <span className="performance-down">-{variationAbs}{suffix}</span>; | |
27 | }; | |
28 | ||
29 | ||
30 | class CurrencyRateHeader extends React.Component { | |
31 | render = () => { | |
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> | |
40 | </div> | |
41 | </React.Fragment>; | |
42 | } | |
43 | } | |
44 | ||
45 | class CurrencyRate extends React.Component { | |
46 | render = () => { | |
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> | |
55 | </div> | |
56 | </React.Fragment>; | |
57 | } | |
58 | } | |
59 | ||
60 | class Assets extends React.Component { | |
61 | render = () => { | |
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> | |
67 | </div>; | |
68 | }.bind(this)); | |
69 | ||
70 | return <div className="assets"> | |
71 | <CurrencyRateHeader /> | |
72 | {currencies} | |
73 | </div>; | |
74 | } | |
75 | } | |
76 | ||
77 | class PFBalance extends React.Component { | |
78 | render = () => { | |
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"> | |
82 | <div className="row"> | |
83 | <div className="col-8"> | |
84 | Current balance | |
85 | </div> | |
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> | |
88 | </div> | |
89 | </div> | |
90 | <div className="row"> | |
91 | <div className="col-8"> | |
92 | <em>since {date}</em> | |
93 | </div> | |
94 | <div className="col-4 variation text-center"> | |
95 | <strong>{formatVariation(this.props.variationP, true)}</strong> | |
96 | </div> | |
97 | </div> | |
98 | </div> | |
99 | </React.Fragment>; | |
100 | } | |
101 | } | |
102 | ||
103 | class PFBalanceMinimal extends React.Component { | |
104 | render = () => { | |
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> | |
109 | </div> | |
110 | </div> | |
111 | </React.Fragment>; | |
112 | } | |
113 | } | |
114 | ||
115 | export {PFBalance, Assets, PFBalanceMinimal}; |