]>
Commit | Line | Data |
---|---|---|
24e47979 | 1 | import React from 'react'; |
2 | import moment from 'moment'; | |
d5b8f0ff | 3 | import classnames from 'classnames'; |
24e47979 | 4 | |
5 | class CurrencyLogo extends React.Component { | |
6 | render = () => { | |
335b0c9b | 7 | var className = classnames('bt', 'bt-' + this.props.currency.toLowerCase(), 'currency-logo'); |
d5b8f0ff | 8 | return <i className={className} |
335b0c9b | 9 | aria-hidden="true" |
10 | title={this.props.currency}></i>; | |
24e47979 | 11 | } |
12 | } | |
13 | ||
14 | var formatVariation = (variation) => { | |
15 | var variationAbs = Math.abs(variation); | |
16 | if (variation === 0.0) { | |
17 | return <span>{variationAbs}%</span>; | |
18 | } else if (variation > 0) { | |
19 | return <span className="performance-up">+{variationAbs}%</span>; | |
20 | } | |
21 | return <span className="performance-down">-{variationAbs}%</span>; | |
22 | }; | |
23 | ||
24 | ||
25 | class CurrencyRateHeader extends React.Component { | |
26 | render = () => { | |
27 | return <React.Fragment> | |
28 | <div className="row text-center"> | |
29 | <div className="d-inline col-2">Asset</div> | |
30 | <div className="d-inline col-2">Position</div> | |
31 | <div className="d-inline col-2">Qty</div> | |
32 | <div className="d-inline col-2">Value (BTC)</div> | |
33 | <div className="d-inline col-2">Weight</div> | |
34 | <div className="d-inline col-2">Perf %</div> | |
35 | </div> | |
36 | </React.Fragment>; | |
37 | } | |
38 | } | |
39 | ||
40 | class CurrencyRate extends React.Component { | |
41 | render = () => { | |
42 | return <React.Fragment> | |
43 | <div className="row text-center"> | |
d5b8f0ff | 44 | <div className="d-inline col-2 text-left"><CurrencyLogo currency={this.props.currency} /> <span>{this.props.currency}</span></div> |
24e47979 | 45 | <div className="d-inline col-2">{this.props.positionType}</div> |
46 | <div className="d-inline col-2">{this.props.quantity}</div> | |
47 | <div className="d-inline col-2">{this.props.BTCValue}</div> | |
48 | <div className="d-inline col-2">{this.props.weight}%</div> | |
49 | <div className="d-inline col-2">{formatVariation(this.props.positionPerformanceP)}</div> | |
50 | </div> | |
51 | </React.Fragment>; | |
52 | } | |
53 | } | |
54 | ||
55 | class Assets extends React.Component { | |
56 | render = () => { | |
57 | var currencies = Object.keys(this.props.balances).map(function(currency) { | |
58 | var balance = this.props.balances[currency]; | |
59 | balance.currency = currency; | |
60 | return <div className="row" key={currency}> | |
61 | <div className="col-12"><CurrencyRate {...balance} /></div> | |
62 | </div>; | |
63 | }.bind(this)); | |
64 | ||
65 | return <div className="assets"> | |
66 | <CurrencyRateHeader /> | |
67 | {currencies} | |
68 | </div>; | |
69 | } | |
70 | } | |
71 | ||
72 | class PFBalance extends React.Component { | |
73 | render = () => { | |
74 | var date = moment(this.props.periodStart).format('MMM Do, h:mma'); | |
75 | return <React.Fragment> | |
76 | <div className="h-100 align-self-center balance"> | |
77 | <div className="row"> | |
78 | <div className="col-8"> | |
79 | Current balance | |
80 | </div> | |
81 | <div className="col-4 text-center h-100 btcValue"> | |
82 | <CurrencyLogo currency="BTC" /> <span className="h-100 align-middle"><strong>{this.props.balance}</strong></span> | |
83 | </div> | |
84 | </div> | |
85 | <div className="row"> | |
86 | <div className="col-8"> | |
87 | <em>since {date}</em> | |
88 | </div> | |
89 | <div className="col-4 variation text-center"> | |
90 | <strong>{formatVariation(this.props.variationP)}</strong> | |
91 | </div> | |
92 | </div> | |
93 | </div> | |
94 | </React.Fragment>; | |
95 | } | |
96 | } | |
97 | ||
2e4885d9 | 98 | class PFBalanceMinimal extends React.Component { |
99 | render = () => { | |
100 | return <React.Fragment> | |
101 | <div className="balance"> | |
102 | <div className="col-12"> | |
103 | <CurrencyLogo currency="BTC" /> <span><strong>{this.props.balance}</strong> <strong>{formatVariation(this.props.variationP)}</strong></span> | |
104 | </div> | |
105 | </div> | |
106 | </React.Fragment>; | |
107 | } | |
108 | } | |
109 | ||
110 | export {PFBalance, Assets, PFBalanceMinimal}; |