Restore colored sentiment indicator boxes and add Bitcoin comparison to all economic charts

Author: elGuille

index.html

@@ -281,6 +281,62 @@
             border-top-color: #60a5fa;
         }
 
+        .sentiment-indicator {
+            margin-top: 12px;
+            padding: 10px 16px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            font-size: 14px;
+            font-weight: 600;
+            border: 2px solid;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .sentiment-indicator.good {
+            background-color: #dcfce7;
+            border-color: #16a34a;
+            color: #15803d;
+            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
+        }
+
+        .sentiment-indicator.bad {
+            background-color: #fee2e2;
+            border-color: #dc2626;
+            color: #b91c1c;
+            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
+        }
+
+        .sentiment-indicator.neutral {
+            background-color: #fef3c7;
+            border-color: #d97706;
+            color: #a16207;
+            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
+        }
+
+        body.dark .sentiment-indicator.good {
+            background-color: #14532d;
+            border-color: #16a34a;
+            color: #bbf7d0;
+            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
+        }
+
+        body.dark .sentiment-indicator.bad {
+            background-color: #991b1b;
+            border-color: #dc2626;
+            color: #fecaca;
+            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+        }
+
+        body.dark .sentiment-indicator.neutral {
+            background-color: #78350f;
+            border-color: #d97706;
+            color: #fed7aa;
+            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
+        }
+
         @keyframes spin {
             0% {
                 transform: rotate(0deg);
@@ -523,7 +579,7 @@ <h2 class="chart-title">💵 DXY vs Bitcoin 3M</h2>
             <!-- Row 2: Industrial Production + Financial Conditions -->
             <div class="charts-row">
                 <div class="chart-card">
-                    <h2 class="chart-title">🏭 Industrial Production</h2>
+                    <h2 class="chart-title">🏭 Industrial Production vs Bitcoin</h2>
                     <div class="chart-container">
                         <canvas id="pmiChart"></canvas>
                     </div>
@@ -534,7 +590,7 @@ <h2 class="chart-title">🏭 Industrial Production</h2>
                 </div>
 
                 <div class="chart-card">
-                    <h2 class="chart-title">📊 Financial Conditions</h2>
+                    <h2 class="chart-title">📊 Financial Conditions vs Bitcoin</h2>
                     <div class="chart-container">
                         <canvas id="nfciChart"></canvas>
                     </div>
@@ -548,7 +604,7 @@ <h2 class="chart-title">📊 Financial Conditions</h2>
             <!-- Row 3: M2 Money Supply + Treasury Account -->
             <div class="charts-row">
                 <div class="chart-card">
-                    <h2 class="chart-title">💰 M2 Money Supply</h2>
+                    <h2 class="chart-title">💰 M2 Money Supply vs Bitcoin</h2>
                     <div class="chart-container">
                         <canvas id="m2Chart"></canvas>
                     </div>
@@ -559,7 +615,7 @@ <h2 class="chart-title">💰 M2 Money Supply</h2>
                 </div>
 
                 <div class="chart-card">
-                    <h2 class="chart-title">🏛️ Treasury Account</h2>
+                    <h2 class="chart-title">🏛️ Treasury Account vs Bitcoin</h2>
                     <div class="chart-container">
                         <canvas id="tgaChart"></canvas>
                     </div>
@@ -1158,10 +1214,10 @@ <h2 class="chart-title">🏛️ Treasury Account</h2>
                 'bitcoinChart': '₿ Bitcoin Price (USD)',
                 'm2BitcoinChart': '📈 M2 vs Bitcoin YoY',
                 'dxyBitcoinChart': '💵 DXY vs Bitcoin 3M',
-                'pmiChart': '🏭 Industrial Production',
-                'nfciChart': '📊 Financial Conditions',
-                'm2Chart': '💰 M2 Money Supply',
-                'tgaChart': '🏛️ Treasury Account'
+                'pmiChart': '🏭 Industrial Production vs Bitcoin',
+                'nfciChart': '📊 Financial Conditions vs Bitcoin',
+                'm2Chart': '💰 M2 Money Supply vs Bitcoin',
+                'tgaChart': '🏛️ Treasury Account vs Bitcoin'
             };
 
             // Find the canvas or restore it if it was replaced by loading/error state
@@ -1255,36 +1311,23 @@ <h2 class="chart-title">🏛️ Treasury Account</h2>
 
             if (!sentimentEl) {
                 sentimentEl = document.createElement('div');
-                sentimentEl.className = 'sentiment-indicator mt-3 flex items-center justify-center space-x-2 p-2 rounded-lg';
+                sentimentEl.className = 'sentiment-indicator';
                 container.appendChild(sentimentEl);
             }
 
             const latestValue = data[data.length - 1].value;
             const sentiment = getCryptoSentiment(label, latestValue, data);
 
-            const colors = {
-                good: 'bg-green-100 dark:bg-green-900/20 border border-green-200 dark:border-green-800',
-                neutral: 'bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800',
-                bad: 'bg-red-100 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
-            };
-
-            const textColors = {
-                good: 'text-green-700 dark:text-green-300',
-                neutral: 'text-yellow-700 dark:text-yellow-300',
-                bad: 'text-red-700 dark:text-red-300'
-            };
-
             const lights = {
                 good: '🟢',
                 neutral: '🟡',
                 bad: '🔴'
             };
 
-            sentimentEl.className = `sentiment-indicator mt-3 flex items-center justify-center space-x-2 p-2 rounded-lg ${colors[sentiment.status]}`;
+            sentimentEl.className = `sentiment-indicator ${sentiment.status}`;
             sentimentEl.innerHTML = `
-                <span class="text-lg">${lights[sentiment.status]}</span>
-                <span class="font-medium ${textColors[sentiment.status]}">${sentiment.status.toUpperCase()}</span>
-                <span class="text-sm ${textColors[sentiment.status]}">${sentiment.reason}</span>
+                <span>${lights[sentiment.status]}</span>
+                <span>${sentiment.status.toUpperCase()}: ${sentiment.reason}</span>
             `;
         }
 
@@ -1333,10 +1376,10 @@ <h2 class="chart-title">🏛️ Treasury Account</h2>
                 'bitcoinChart': '₿ Bitcoin Price (USD)',
                 'm2BitcoinChart': '📈 M2 vs Bitcoin YoY',
                 'dxyBitcoinChart': '💵 DXY vs Bitcoin 3M',
-                'pmiChart': '🏭 Industrial Production',
-                'nfciChart': '📊 Financial Conditions',
-                'm2Chart': '💰 M2 Money Supply',
-                'tgaChart': '🏛️ Treasury Account'
+                'pmiChart': '🏭 Industrial Production vs Bitcoin',
+                'nfciChart': '📊 Financial Conditions vs Bitcoin',
+                'm2Chart': '💰 M2 Money Supply vs Bitcoin',
+                'tgaChart': '🏛️ Treasury Account vs Bitcoin'
             };
 
             // Find the canvas or restore it if it was replaced by loading/error state
@@ -1516,6 +1559,44 @@ <h2 class="chart-title">🏛️ Treasury Account</h2>
                 return { status: 'neutral', reason: 'Mixed currency signals' };
             }
 
+            if (canvasId === 'pmiChart') {
+                // PMI vs Bitcoin
+                const bitcoinTrend = latest2 > data2[data2.length - 5]?.value ? 'rising' : 'falling';
+                if (latest1 > 52 && bitcoinTrend === 'rising') return { status: 'good', reason: 'Strong economy + Bitcoin gains' };
+                if (latest1 < 48 && bitcoinTrend === 'falling') return { status: 'bad', reason: 'Weak economy + Bitcoin decline' };
+                if (latest1 > 52) return { status: 'good', reason: 'Strong industrial expansion' };
+                return { status: 'neutral', reason: 'Mixed economic signals' };
+            }
+
+            if (canvasId === 'nfciChart') {
+                // NFCI vs Bitcoin
+                const bitcoinTrend = latest2 > data2[data2.length - 5]?.value ? 'rising' : 'falling';
+                if (latest1 < -0.5 && bitcoinTrend === 'rising') return { status: 'good', reason: 'Loose conditions + Bitcoin gains' };
+                if (latest1 > 0.5 && bitcoinTrend === 'falling') return { status: 'bad', reason: 'Tight conditions + Bitcoin decline' };
+                if (latest1 < -0.5) return { status: 'good', reason: 'Loose financial conditions' };
+                return { status: 'neutral', reason: 'Mixed financial signals' };
+            }
+
+            if (canvasId === 'm2Chart') {
+                // M2 vs Bitcoin
+                const m2Trend = latest1 > data1[data1.length - 5]?.value ? 'rising' : 'falling';
+                const bitcoinTrend = latest2 > data2[data2.length - 5]?.value ? 'rising' : 'falling';
+                if (m2Trend === 'rising' && bitcoinTrend === 'rising') return { status: 'good', reason: 'Liquidity growth + Bitcoin gains' };
+                if (m2Trend === 'falling' && bitcoinTrend === 'falling') return { status: 'bad', reason: 'Liquidity drain + Bitcoin decline' };
+                if (m2Trend === 'rising') return { status: 'good', reason: 'Increasing liquidity' };
+                return { status: 'neutral', reason: 'Mixed liquidity signals' };
+            }
+
+            if (canvasId === 'tgaChart') {
+                // TGA vs Bitcoin
+                const tgaTrend = latest1 < data1[data1.length - 5]?.value ? 'falling' : 'rising';
+                const bitcoinTrend = latest2 > data2[data2.length - 5]?.value ? 'rising' : 'falling';
+                if (tgaTrend === 'falling' && bitcoinTrend === 'rising') return { status: 'good', reason: 'Liquidity injection + Bitcoin gains' };
+                if (tgaTrend === 'rising' && bitcoinTrend === 'falling') return { status: 'bad', reason: 'Liquidity drain + Bitcoin decline' };
+                if (tgaTrend === 'falling') return { status: 'good', reason: 'Treasury liquidity injection' };
+                return { status: 'neutral', reason: 'Mixed treasury signals' };
+            }
+
             return { status: 'neutral', reason: 'Monitoring trends' };
         }
 
@@ -1777,7 +1858,7 @@ <h2 class="chart-title">🏛️ Treasury Account</h2>
                     showDataError('dxyBitcoinChart', 'DXY or Bitcoin data unavailable');
                 }
 
-                // Create economic indicator charts - REAL DATA ONLY
+                // Create economic indicator charts with Bitcoin comparison - REAL DATA ONLY
                 const economicCharts = [
                     { key: 'pmi', id: 'pmiChart', label: 'PMI', color: '#2563eb', name: 'PMI data' },
                     { key: 'nfci', id: 'nfciChart', label: 'NFCI', color: '#16a34a', name: 'NFCI data' },
@@ -1786,7 +1867,14 @@ <h2 class="chart-title">🏛️ Treasury Account</h2>
                 ];
 
                 economicCharts.forEach(chart => {
-                    if (chartData[chart.key] && chartData[chart.key].length > 0) {
+                    if (chartData[chart.key] && chartData[chart.key].length > 0 && chartData.bitcoin && chartData.bitcoin.length > 0) {
+                        // Create dual axis chart with Bitcoin comparison
+                        const economicData = chartData[chart.key].slice(-settings.dataPoints);
+                        const bitcoinData = chartData.bitcoin.slice(-settings.dataPoints);
+                        createDualAxisChart(chart.id, economicData, bitcoinData, chart.label, 'Bitcoin Price', chart.color, '#f7931a');
+                        chartsCreated++;
+                    } else if (chartData[chart.key] && chartData[chart.key].length > 0) {
+                        // Fallback to single chart if Bitcoin data unavailable
                         createChart(chart.id, chartData[chart.key].slice(-settings.dataPoints), chart.label, chart.color);
                         chartsCreated++;
                     } else {