]>
Commit | Line | Data |
---|---|---|
1 | import React from 'react'; | |
2 | import moment from 'moment'; | |
3 | ||
4 | class CurrencyLogo extends React.Component { | |
5 | render = () => { | |
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} /> | |
11 | </div>; | |
12 | } | |
13 | } | |
14 | ||
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>; | |
21 | } | |
22 | return <span className="performance-down">-{variationAbs}%</span>; | |
23 | }; | |
24 | ||
25 | ||
26 | class CurrencyRateHeader extends React.Component { | |
27 | render = () => { | |
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> | |
36 | </div> | |
37 | </React.Fragment>; | |
38 | } | |
39 | } | |
40 | ||
41 | class CurrencyRate extends React.Component { | |
42 | render = () => { | |
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> | |
51 | </div> | |
52 | </React.Fragment>; | |
53 | } | |
54 | } | |
55 | ||
56 | class Assets extends React.Component { | |
57 | render = () => { | |
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> | |
63 | </div>; | |
64 | }.bind(this)); | |
65 | ||
66 | return <div className="assets"> | |
67 | <CurrencyRateHeader /> | |
68 | {currencies} | |
69 | </div>; | |
70 | } | |
71 | } | |
72 | ||
73 | class PFBalance extends React.Component { | |
74 | render = () => { | |
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"> | |
78 | <div className="row"> | |
79 | <div className="col-8"> | |
80 | Current balance | |
81 | </div> | |
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> | |
84 | </div> | |
85 | </div> | |
86 | <div className="row"> | |
87 | <div className="col-8"> | |
88 | <em>since {date}</em> | |
89 | </div> | |
90 | <div className="col-4 variation text-center"> | |
91 | <strong>{formatVariation(this.props.variationP)}</strong> | |
92 | </div> | |
93 | </div> | |
94 | </div> | |
95 | </React.Fragment>; | |
96 | } | |
97 | } | |
98 | ||
99 | export {PFBalance, Assets}; |