diff options
Diffstat (limited to 'cmd/web/js/balance.jsx')
-rw-r--r-- | cmd/web/js/balance.jsx | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/cmd/web/js/balance.jsx b/cmd/web/js/balance.jsx new file mode 100644 index 0000000..d141aa8 --- /dev/null +++ b/cmd/web/js/balance.jsx | |||
@@ -0,0 +1,99 @@ | |||
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}; | ||