diff --git a/src/Components/PortfolioBuilderApp/PortfolioBuilderApp.jsx b/src/Components/PortfolioBuilderApp/PortfolioBuilderApp.jsx index 74ac5b7..a8b6b49 100644 --- a/src/Components/PortfolioBuilderApp/PortfolioBuilderApp.jsx +++ b/src/Components/PortfolioBuilderApp/PortfolioBuilderApp.jsx @@ -11,6 +11,8 @@ class PortfolioBuilderApp extends Component { super(props); this.allScripPrices = data.price; + this.allScripEPS = data.eps; + this.state = { portfolioScripPrices: { // scrip name : current price @@ -102,6 +104,7 @@ class PortfolioBuilderApp extends Component { addScripToPortfolio={this.addScripToPortfolio} /> { const count = this.props.portfolioScripCounts[scripName]; const price = this.props.portfolioScripPrices[scripName]; @@ -19,6 +20,27 @@ class PortfolioManager extends Component { return netWorth; } + calcTotalEarnings() { + let totalEarnings = 0; + Object.keys(this.props.portfolioScripCounts).forEach((scripName) => { + const count = this.props.portfolioScripCounts[scripName]; + const eps = this.props.allScripEPS[scripName]; + totalEarnings += (eps * count); + }); + + return totalEarnings; + } + + calcPortfolioPE() { + const portfolioPE = (this.calcNetWorth() / this.calcTotalEarnings()); + + if (Number.isNaN(portfolioPE)) { + return 0; + } + + return portfolioPE; + } + weightInPortfolio(scripName) { const count = this.props.portfolioScripCounts[scripName]; const price = this.props.portfolioScripPrices[scripName]; @@ -31,9 +53,134 @@ class PortfolioManager extends Component { return weight; } - render() { + renderPortfolioEditor() { + const portfolioScripPrices = this.props.portfolioScripPrices; + const portfolioScripCounts = this.props.portfolioScripCounts; + + return ( +
+
+
+ STOCK +
+
+ PRICE +
+
+ SHARES +
+
+ WEIGHT +
+
+ +
+
+
+
+ { + Object.keys(portfolioScripPrices).map((scripName) => { + return ( +
+
+ {scripName} +
+
+ + {Math.round(portfolioScripPrices[scripName])} +
+
+ + + {portfolioScripCounts[scripName]} + + +
+
+ { + Math.round(this.weightInPortfolio(scripName)) + } + % +
+
+ +
+
+
+ ); + }) + } +
+
+ ); + } + + renderPortfolioOverview() { const portfolioScripPrices = this.props.portfolioScripPrices; + return ( +
+
+ Portfolio Overview +
+
+
+
+
+
+
Stocks
+
+ {Object.keys(portfolioScripPrices).length} +
+
+
+
Net Worth
+
+ + { + Math.round(this.calcNetWorth()) + } +
+
+
+
P/E Ratio
+
+ { + Math.round(this.calcPortfolioPE()) + } +
+
+
+ +
+
+
+ +
+ ); + } + + render() { return (
-
-
-
- STOCK -
-
- PRICE -
-
- SHARES -
-
- WEIGHT -
-
- -
-
-
-
- { - Object.keys(portfolioScripPrices).map((scripName) => { - return ( -
-
- {scripName} -
-
- - {Math.round(this.props.portfolioScripPrices[scripName])} -
-
- - - {this.props.portfolioScripCounts[scripName]} - - -
-
- { - Math.round(this.weightInPortfolio(scripName)) - } - % -
-
- -
-
-
- ); - }) - } - -
-
-
- -
+ {this.renderPortfolioEditor()} + {this.renderPortfolioOverview()}