From 2bc78af8881b162df4ff4b9b2b25d150ff01df82 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Wed, 18 Jun 2025 20:37:56 +0300
Subject: [PATCH] better imbalance styles

---
 web/cob_dashboard.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/cob_dashboard.html b/web/cob_dashboard.html
index d962d24..d980f4c 100644
--- a/web/cob_dashboard.html
+++ b/web/cob_dashboard.html
@@ -970,7 +970,7 @@
             const askCount = stats.ask_levels || 0;
             document.getElementById(`${prefix}-levels`).textContent = `${bidCount + askCount}`;
             
-            // Show aggregated imbalance (all time windows)
+            // Show aggregated imbalance (all time windows) with color coding
             const symbol = prefix === 'btc' ? 'BTC/USDT' : 'ETH/USDT';
             const history = imbalanceHistory[symbol];
             const imbalance1s = (history.avg1s * 100).toFixed(1);
@@ -978,8 +978,17 @@
             const imbalance15s = (history.avg15s * 100).toFixed(1);
             const imbalance30s = (history.avg30s * 100).toFixed(1);
             
-            document.getElementById(`${prefix}-imbalance`).textContent = 
-                `${imbalance1s}% (1s) | ${imbalance5s}% (5s) | ${imbalance15s}% (15s) | ${imbalance30s}% (30s)`;
+            // Helper function to get color based on imbalance value
+            function getImbalanceColor(value) {
+                return parseFloat(value) < 0 ? '#ff6b6b' : '#00ff88';
+            }
+            
+            // Create colored HTML for each imbalance
+            document.getElementById(`${prefix}-imbalance`).innerHTML = 
+                `<span style="color: ${getImbalanceColor(imbalance1s)}">${imbalance1s}% (1s)</span> | ` +
+                `<span style="color: ${getImbalanceColor(imbalance5s)}">${imbalance5s}% (5s)</span> | ` +
+                `<span style="color: ${getImbalanceColor(imbalance15s)}">${imbalance15s}% (15s)</span> | ` +
+                `<span style="color: ${getImbalanceColor(imbalance30s)}">${imbalance30s}% (30s)</span>`;
             
             document.getElementById(`${prefix}-updates`).textContent = updateCounts[symbol];
         }