Polish: Navy/Gold Pie Chart & Ownership Table

static/script.js

@@ -91,7 +91,7 @@ function updateDashboard(data) {
     // 2. IPO STRUCTURING (The Pro Layer)
     if (data.structure) {
         document.getElementById('s-final-price').textContent = `$${data.structure.final_price.toFixed(2)}`;
-        document.getElementById('s-dilution').textContent = `${data.structure.dilution}%`;
+        document.getElementById('s-raise').textContent = `$${data.structure.capital_raised.toFixed(0)}M`;
 
         // Down-Round Alert
         const drAlert = document.getElementById('dr-alert');
@@ -102,26 +102,63 @@ function updateDashboard(data) {
             drAlert.style.display = 'none';
         }
 
-        // Ownership Pie Chart
+        // --- VISUALIZATION: PIE CHART & TABLE ---
+        const existingShares = data.structure.ownership["Existing Shareholders"];
+        const newShares = data.structure.ownership["New Public Investors"];
+        const totalShares = data.structure.total_shares;
+
+        // 1. Generate Table HTML
+        const tableHTML = `
+            <table style="width:100%; border-collapse:collapse; color:#eee;">
+                <thead>
+                    <tr style="border-bottom:1px solid #444; color:#888;">
+                        <th style="text-align:left; padding-bottom:5px;">Group</th>
+                        <th style="text-align:right; padding-bottom:5px;">Shares (M)</th>
+                        <th style="text-align:right; padding-bottom:5px;">% Own</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td style="padding:8px 0; color:#a0c4ff;">Existing</td>
+                        <td style="text-align:right;">${existingShares.toFixed(2)}</td>
+                        <td style="text-align:right;">${((existingShares / totalShares) * 100).toFixed(1)}%</td>
+                    </tr>
+                    <tr>
+                        <td style="padding:8px 0; color:#FFD700;">New Investors</td>
+                        <td style="text-align:right;">${newShares.toFixed(2)}</td>
+                        <td style="text-align:right;">${((newShares / totalShares) * 100).toFixed(1)}%</td>
+                    </tr>
+                    <tr style="border-top:1px solid #444; font-weight:bold;">
+                        <td style="padding-top:8px;">Total</td>
+                        <td style="text-align:right; padding-top:8px;">${totalShares.toFixed(2)}</td>
+                        <td style="text-align:right; padding-top:8px;">100%</td>
+                    </tr>
+                </tbody>
+            </table>
+        `;
+        document.getElementById('ownership-table').innerHTML = tableHTML;
+
+        // 2. Render Pie Chart (Navy & Gold)
         const ownerData = [{
-            values: [data.structure.ownership["Existing Shareholders"], data.structure.ownership["New Public Investors"]],
+            values: [existingShares, newShares],
             labels: ['Existing Holders', 'New Public Investors'],
             type: 'pie',
-            marker: { colors: ['#333', '#FFD700'] }, // Grey vs Gold
-            textinfo: 'label+percent',
-            hole: 0.4
+            marker: { colors: ['#001F3F', '#D4AF37'] }, // Navy vs Gold
+            textinfo: 'percent',
+            hoverinfo: 'label+value+percent',
+            hole: 0.6
         }];
 
         const ownerLayout = {
             paper_bgcolor: 'rgba(0,0,0,0)',
             plot_bgcolor: 'rgba(0,0,0,0)',
-            font: { color: '#ccc' },
+            font: { color: '#ccc', family: 'Inter' },
             showlegend: false,
-            margin: { t: 10, b: 10, l: 10, r: 10 },
-            height: 250
+            margin: { t: 0, b: 0, l: 0, r: 0 },
+            height: 220
         };
 
-        Plotly.newPlot('ownership-chart', ownerData, ownerLayout, { responsive: true });
+        Plotly.newPlot('ownership-chart', ownerData, ownerLayout, { responsive: true, displayModeBar: false });
     }