update positions page

r0fls · Jul 22, 2024 · fbf422e · fbf422e
1 parent 915e72d
commit fbf422e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/trading-dashboard/src/Positions.css b/trading-dashboard/src/Positions.css
@@ -36,30 +36,50 @@
 
 .info-box-container {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: left;
+  margin-bottom: 20px;
+}
+
+.balance-container {
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  margin-right: 20px;
 }
 
 .info-box {
-  flex: 1 1 200px;
+  display: inline-block;
   background-color: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 0.25rem;
   padding: 0.75rem 1.25rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
   text-align: center;
   font-size: 1.25rem;
   color: #212529;
+  margin: 5px 0;
 }
 
-.info-box strong {
-  display: block;
-  font-weight: 700;
+.filtered-value-box {
+  display: inline-block;
+  background-color: white;
+  font-size: 2.5em;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15px;
 }
 
 .pie-chart-container {
-  flex: 1 1 200px;
-  max-width: 300px; /* Set a max width for the chart */
-  margin: 0 auto;
+  flex-shrink: 0;
+  max-width: 300px;
+}
+.info-box-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.info-box {
+  margin: 5px; /* Add some spacing between delta and theta */
 }
diff --git a/trading-dashboard/src/Positions.js b/trading-dashboard/src/Positions.js
@@ -147,15 +147,22 @@ const Positions = () => {
       ) : (
         <>
           <div className="info-box-container mb-3">
-            <div className="info-box">
-              <strong>Total Delta:</strong> {totalDelta.toFixed(2)}
-            </div>
-            <div className="info-box">
-              <strong>Total Theta:</strong> {totalTheta.toFixed(2)}
-            </div>
-            <div className="pie-chart-container">
-              <Pie data={data} />
+            <div className="balance-container">
+              <div className="filtered-value-box">
+                ${((totalStocksValue + totalOptionsValue + totalCashValue).toFixed(2)).toLocaleString()}
+              </div>
+              <div className="info-box-row">
+                <div className="info-box">
+                  <strong>Delta:</strong> {totalDelta.toFixed(2)}
+                </div>
+                <div className="info-box">
+                  <strong>Theta:</strong> {totalTheta.toFixed(2)}
+                </div>
+              </div>
             </div>
+		    <div className="pie-chart-container">
+		      <Pie data={data} />
+			</div>
           </div>
           <div className="table-responsive">
             <Table striped bordered hover className="positions-table">

diff --git a/ui/app.py b/ui/app.py
@@ -480,14 +480,14 @@ def get_positions():
             (Balance.timestamp == cash_subquery.c.latest_cash_timestamp)
         ).filter(Balance.type == 'cash').all()
 
-        cash_balances = {f"{balance.broker}_{balance.strategy}": balance.balance for balance in latest_cash_balances}
+        cash_balances = {f"{balance.broker}_{balance.strategy}": round(balance.balance, 2) for balance in latest_cash_balances}
 
         return jsonify({
             'positions': positions_data,
             'total_delta': total_delta,
             'total_theta': total_theta,
-            'total_stocks_value': total_stocks_value,
-            'total_options_value': total_options_value,
+            'total_stocks_value': round(total_stocks_value, 2),
+            'total_options_value': round(total_options_value, 2),
             'cash_balances': cash_balances
         })
     except Exception as e: