Merge pull request #19 from cs0320-2021/frontend-tweaks

added link, gain

5 files changed, 92 insertions, 39 deletions

diff --git a/react-frontend/public/link-icon.svg b/react-frontend/public/link-icon.svg
new file mode 100644
index 0000000..926cbcb
--- /dev/null
+++ b/react-frontend/public/link-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="24" stroke="lightgreen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>
\ No newline at end of file
diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js
index 3a3a11f..436fa17 100644
--- a/react-frontend/src/components/InvestorInfo.js
+++ b/react-frontend/src/components/InvestorInfo.js
@@ -14,8 +14,10 @@ import uuid from "react-uuid";
 function InvestorInfo(props) {
   const [info, setInfo] = useState({
     percentGain: 0,
+    moneyIn: 0,
+    moneyOut: 0,
     percentSP500: 0,
-    holdings: []
+    holdings: [],
   });
 
   const [showStocks, setShowStocks] = useState(false);
@@ -26,7 +28,7 @@ function InvestorInfo(props) {
       return;
     }
 
-    const toEpochMilli = date => Date.parse(date);
+    const toEpochMilli = (date) => Date.parse(date);
 
     console.log({
       selectedId: props.selectedId,
@@ -46,37 +48,42 @@ function InvestorInfo(props) {
       },
       credentials: "same-origin",
     })
-    .then(res  => res.json())
-    .then(data => {
-      console.log(data);
-      setInfo(data);
-      props.setShowSelectedInfo(true);
-    })
-    .catch(err => console.log(err));
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setInfo(data);
+        props.setShowSelectedInfo(true);
+      })
+      .catch((err) => console.log(err));
   };
 
   const stockTable = () => {
     return (
       <>
-      <li class="Stock-row">
-        <div className="tableHeader">
-          <div className="symbol-row">Symbol</div>
-          <div className="gain-row">Realized gain</div>
-          <div className="gain-row">Unrealized gain</div>
-        </div>
-      </li>
-      {info.holdings.map(holding => 
-      <li class="Stock-row">
-        <div className="symbol-row">{holding.ticker}</div>
-        <div className="gain-row">{holding.realizedGain.toFixed(3)}</div>
-        <div className="gain-row">{holding.unrealizedGain.toFixed(3)}</div>
-      </li>)}
+        <li class="Stock-row">
+          <div className="tableHeader">
+            <div className="symbol-row">Symbol</div>
+            <div className="gain-row">Realized gain</div>
+            <div className="gain-row">Unrealized gain</div>
+          </div>
+        </li>
+        {info.holdings.map((holding) => (
+          <li class="Stock-row">
+            <div className="symbol-row">{holding.ticker}</div>
+            <div className="gain-row">{holding.realizedGain.toFixed(3)}</div>
+            <div className="gain-row">{holding.unrealizedGain.toFixed(3)}</div>
+          </li>
+        ))}
       </>
     );
   };
 
-  const followerList = () => 
-    props.followers.map(follower => <li key={uuid()} class="Clickable-name" onClick={() => props.setSelectedId(follower.id)}>{follower.name}</li>);
+  const followerList = () =>
+    props.followers.map((follower) => (
+      <li key={uuid()} class="Clickable-name" onClick={() => props.setSelectedId(follower.id)}>
+        {follower.name}
+      </li>
+    ));
 
   // Hook that updates when selected has changed
   useEffect(() => getInfo(), [props.selectedId]);
@@ -84,15 +91,20 @@ function InvestorInfo(props) {
   return (
     <div className="Chosen-user" hidden={!props.showSelectedInfo}>
       <h3>
-        <span onClick={() => props.setShowSelectedInfo(false)}><img className="Img-btn" src="assets/round_arrow_back_white_18dp.png" alt="image"/></span>
+        <span onClick={() => props.setShowSelectedInfo(false)}>
+          <img className="Img-btn" src="assets/round_arrow_back_white_18dp.png" alt="image" />
+        </span>
         <span>CIK: {props.selectedId}</span>
       </h3>
       <h2 id="investerName">
-        {props.name}
+        <a href={"https://sec.report/CIK/" + props.selectedId + "/Insider-Trades"} target="_blank">
+          {props.name}
+          <img src="link-icon.svg" alt="image" />
+        </a>
       </h2>
       <div id="top-bar">
         <div id="gain-number">
-          <p className="bigNumber">{info.percentGain.toFixed(3)}$</p> gain
+          <p className="bigNumber">{(info.moneyOut - info.moneyIn).toFixed(3)}$</p> gain
         </div>
 
         <div>
@@ -104,23 +116,48 @@ function InvestorInfo(props) {
       <div>
         <div className="Checkin">
           <div className="Img-flex">
-                <span className="tableHeader">View trades</span>
-                <img className="Img-btn" hidden={showStocks} onClick={() => setShowStocks(toggle => !toggle)} src="assets/round_expand_more_white_18dp.png" alt="image"/>
-                <img className="Img-btn" hidden={!showStocks} onClick={() => setShowStocks(toggle => !toggle)} src="assets/round_expand_less_white_18dp.png" alt="image"/>
+            <span className="tableHeader">View returns</span>
+            <img
+              className="Img-btn"
+              hidden={showStocks}
+              onClick={() => setShowStocks((toggle) => !toggle)}
+              src="assets/round_expand_more_white_18dp.png"
+              alt="image"
+            />
+            <img
+              className="Img-btn"
+              hidden={!showStocks}
+              onClick={() => setShowStocks((toggle) => !toggle)}
+              src="assets/round_expand_less_white_18dp.png"
+              alt="image"
+            />
           </div>
-          <ul hidden={!showStocks} class="Stock-table">{stockTable()}</ul>
+          <ul hidden={!showStocks} class="Stock-table">
+            {stockTable()}
+          </ul>
         </div>
 
         <div className="Checkin" hidden={!followerList}>
           <div className="Img-flex">
-              <span className="tableHeader">View followers</span>
-              <img className="Img-btn" hidden={showFollowers} onClick={() => setShowFollowers(toggle => !toggle)} src="assets/round_expand_more_white_18dp.png" alt="image"/>
-              <img className="Img-btn" hidden={!showFollowers} onClick={() => setShowFollowers(toggle => !toggle)} src="assets/round_expand_less_white_18dp.png" alt="image"/>
+            <span className="tableHeader">View followers</span>
+            <img
+              className="Img-btn"
+              hidden={showFollowers}
+              onClick={() => setShowFollowers((toggle) => !toggle)}
+              src="assets/round_expand_more_white_18dp.png"
+              alt="image"
+            />
+            <img
+              className="Img-btn"
+              hidden={!showFollowers}
+              onClick={() => setShowFollowers((toggle) => !toggle)}
+              src="assets/round_expand_less_white_18dp.png"
+              alt="image"
+            />
           </div>
           <ul hidden={!showFollowers}>{followerList()}</ul>
         </div>
       </div>
-
     </div>
   );
 }
diff --git a/react-frontend/src/css/InvesterInfo.css b/react-frontend/src/css/InvesterInfo.css
index fcfb29c..3501b70 100644
--- a/react-frontend/src/css/InvesterInfo.css
+++ b/react-frontend/src/css/InvesterInfo.css
@@ -54,3 +54,8 @@
 .gain-row {
   margin-right: 20px;
 }
+
+a {
+  color: lightgreen;
+  text-decoration: none;
+}
diff --git a/src/main/java/edu/brown/cs/student/term/Main.java b/src/main/java/edu/brown/cs/student/term/Main.java
index 6ba2393..d1e5604 100644
--- a/src/main/java/edu/brown/cs/student/term/Main.java
+++ b/src/main/java/edu/brown/cs/student/term/Main.java
@@ -189,12 +189,17 @@ public final class Main {
       double gains = profit.calculateGainsSingle(holder_id);
       double sp500PercentGain = profit.compareToSP500();
 
+      double percentGain = 100 * (gains / profit.getMoneyInput());
+      if (profit.getMoneyInput() == 0) {
+        percentGain = 0;
+      }
+
       Map<String, Object> res = new HashMap<>();
       res.put("holder_id", holder_id);
       res.put("moneyIn", profit.getMoneyInput());
       res.put("moneyOut", profit.getMoneyInput() + gains);
       res.put("holdings", holdings);
-      res.put("percentGain", 100 * (gains / profit.getMoneyInput()));
+      res.put("percentGain", percentGain);
       res.put("SP500", (1 + sp500PercentGain) * profit.getMoneyInput());
       res.put("percentSP500", 100 * sp500PercentGain);
       System.err.println("LOG: Returning to GUI " + res);
diff --git a/src/main/java/edu/brown/cs/student/term/profit/ProfitCalculation.java b/src/main/java/edu/brown/cs/student/term/profit/ProfitCalculation.java
index d5fa872..4b19899 100644
--- a/src/main/java/edu/brown/cs/student/term/profit/ProfitCalculation.java
+++ b/src/main/java/edu/brown/cs/student/term/profit/ProfitCalculation.java
@@ -299,17 +299,22 @@ public class ProfitCalculation {
     if (!tablesFilled) {
       organizeOrders(id);
       getRealizedGains();
+      getUnrealizedGains();
       tablesFilled = true;
     }
 
 
-    double realizedGains = 0;
+    double gains = 0;
 
     for (double value : realizedGainsMap.values()) {
-      realizedGains += value;
+      gains += value;
+    }
+
+    for (double value: unrealizedGainsMap.values()) {
+      gains += value;
     }
 
-    return realizedGains;
+    return gains;
   }
 
   public List<StockHolding> getHoldingsList(Integer id) {