Update index.html

index.html

@@ -93,6 +93,7 @@
           <div class="label">Position</div>
           <div class="value" id="kpiPos">--</div>
           <div class="small"><span class="muted">Avg cost:</span> <span id="kpiAvg">--</span></div>
+          <div class="small"><span class="muted">Unrealized P&L:</span> <span id="kpiUpnl">--</span></div>
         </div>
       </div>
 
@@ -186,6 +187,10 @@
     orders: [],
     leaderboard: []
   };
+  
+  state.upnl = 0;
+  state.upnlPct = 0;
+
 
   const $ = (id) => document.getElementById(id);
 
@@ -206,8 +211,13 @@
     txt.textContent = status[0] + status.slice(1).toLowerCase();
     $("clientIdText").textContent = "· " + state.clientId;
   }
-
+  
   function recalcEquity(){
+    // Unrealized P&L of the open position
+    state.upnl = (state.price - state.avgCost) * state.shares; // works for long and short
+    const positionNotional = Math.abs(state.shares) * state.avgCost;
+    state.upnlPct = positionNotional > 0 ? (state.upnl / positionNotional) * 100 : 0;
+  
     state.equity = state.cash + state.shares * state.price;
     state.roi = ((state.equity - INITIAL_CASH) / INITIAL_CASH) * 100;
   }
@@ -231,6 +241,9 @@
     $("kpiPos").textContent = state.shares.toLocaleString();
     $("kpiAvg").textContent = fmtPrice(state.avgCost);
 
+    $("kpiUpnl").textContent = (state.shares === 0) ? "0" : fmtMoney(state.upnl);
+    $("kpiUpnl").style.color = (state.upnl >= 0) ? "var(--green)" : "var(--red)";
+
     const ob = $("ordersBody");
     ob.innerHTML = "";
     if (!state.orders.length) {