Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Recession Radar - Real-time Economic Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .indicator-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| } | |
| .indicator-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .status-healthy { | |
| border-left: 4px solid #10b981; | |
| } | |
| .status-caution { | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .status-warning { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .gauge-container { | |
| width: 100%; | |
| height: 120px; | |
| position: relative; | |
| } | |
| .sparkline-container { | |
| width: 100%; | |
| height: 60px; | |
| } | |
| .trend-up { | |
| color: #10b981; | |
| } | |
| .trend-down { | |
| color: #ef4444; | |
| } | |
| .trend-neutral { | |
| color: #64748b; | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(5, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { | |
| visibility: hidden; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .indicator-card { | |
| margin-bottom: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Recession Radar</h1> | |
| <p class="text-gray-600">Real-time economic dashboard tracking recession signals</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center bg-white rounded-lg shadow-sm p-3"> | |
| <i class="fas fa-clock text-gray-500 mr-2"></i> | |
| <div> | |
| <span class="text-sm font-medium text-gray-500">Last updated:</span> | |
| <span class="text-sm font-medium text-gray-800 ml-1" id="currentDateTime">Tuesday, April 15, 2025, 3:29 AM PDT</span> | |
| </div> | |
| <button id="refreshBtn" class="ml-4 p-1 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-sync-alt text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="mr-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Current Economic Assessment</h3> | |
| <p class="text-sm text-gray-600">Based on the latest available data, the economy shows mixed signals with <span class="font-medium">moderate expansion</span> but some areas of concern.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- GDP Growth Rate --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-healthy"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">GDP Growth Rate</h3> | |
| <p class="text-sm text-gray-500">Quarterly economic growth</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">+2.8%</span> | |
| <i class="fas fa-arrow-up trend-up ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">Q1 2025 (Advance Estimate)</div> | |
| <div class="h-40"> | |
| <canvas id="gdpChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Healthy</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Late May 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CPI Inflation --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-caution"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">CPI Inflation (YoY)</h3> | |
| <p class="text-sm text-gray-500">Consumer price index</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">+3.2%</span> | |
| <i class="fas fa-arrow-down trend-down ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">March 2025</div> | |
| <div class="h-40"> | |
| <canvas id="cpiChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-yellow-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Caution</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Mid-May 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Unemployment Rate --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-healthy"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Unemployment Rate</h3> | |
| <p class="text-sm text-gray-500">Percentage of labor force</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">3.8%</span> | |
| <i class="fas fa-equals trend-neutral ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">March 2025</div> | |
| <div class="h-40"> | |
| <canvas id="unemploymentChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Healthy</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Early May 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manufacturing PMI --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-healthy"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Manufacturing PMI</h3> | |
| <p class="text-sm text-gray-500">Purchasing Managers' Index</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">51.5</span> | |
| <i class="fas fa-arrow-up trend-up ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">March 2025 (50+ = expansion)</div> | |
| <div class="gauge-container"> | |
| <div id="pmiGauge"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Healthy</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Early May 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Consumer Confidence --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-caution"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Consumer Confidence</h3> | |
| <p class="text-sm text-gray-500">Index of consumer sentiment</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">98.0</span> | |
| <i class="fas fa-arrow-down trend-down ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">April 2025 (Preliminary)</div> | |
| <div class="sparkline-container"> | |
| <canvas id="confidenceChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-yellow-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Caution</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Late April 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Jobless Claims --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-healthy"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Initial Jobless Claims</h3> | |
| <p class="text-sm text-gray-500">Weekly unemployment filings</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">210K</span> | |
| <i class="fas fa-equals trend-neutral ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">Week ending April 12, 2025</div> | |
| <div class="sparkline-container"> | |
| <canvas id="joblessChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Healthy</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Updated every Thursday</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Retail Sales --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-healthy"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Retail Sales (MoM)</h3> | |
| <p class="text-sm text-gray-500">Monthly consumer spending</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">+0.5%</span> | |
| <i class="fas fa-arrow-up trend-up ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">March 2025</div> | |
| <div class="sparkline-container"> | |
| <canvas id="retailChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Healthy</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Mid-May 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Housing Starts --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-caution"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Housing Starts</h3> | |
| <p class="text-sm text-gray-500">Annualized new construction</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">1.42M</span> | |
| <i class="fas fa-arrow-down trend-down ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">March 2025</div> | |
| <div class="h-40"> | |
| <canvas id="housingChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-yellow-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Caution</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next update: Mid-May 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Federal Funds Rate --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-caution"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Fed Funds Rate</h3> | |
| <p class="text-sm text-gray-500">Central bank interest rate</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">5.25-5.50%</span> | |
| <i class="fas fa-equals trend-neutral ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">Current target range</div> | |
| <div class="h-40"> | |
| <canvas id="fedRateChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-yellow-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Caution</span> | |
| </div> | |
| <div class="text-xs text-gray-500">Next FOMC: Late April 2025</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- S&P 500 (Real-time) --> | |
| <div class="indicator-card bg-white rounded-lg overflow-hidden status-healthy"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">S&P 500 Index</h3> | |
| <p class="text-sm text-gray-500">Real-time market index</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">5,050</span> | |
| <i class="fas fa-equals trend-neutral ml-2"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-500 mb-1">As of 3:29 AM PDT</div> | |
| <div class="h-40"> | |
| <canvas id="sp500Chart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-xs font-medium text-gray-500">Healthy</span> | |
| </div> | |
| <div class="text-xs text-gray-500 flex items-center"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-blue-500 mr-1 blink"></span> | |
| <span>Live updating</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Summary Section --> | |
| <div class="mt-8 bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Current Economic Assessment</h2> | |
| <div class="prose prose-sm max-w-none text-gray-600"> | |
| <p>Based on the latest available data as of <strong>April 15, 2025</strong>, the U.S. economy presents a mixed picture with <span class="text-green-600 font-medium">moderate expansion</span> but some areas of concern.</p> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-green-800 flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> Positive Indicators | |
| </h3> | |
| <ul class="mt-2 space-y-1 text-sm text-green-700"> | |
| <li><i class="fas fa-arrow-up mr-1"></i> GDP growth at +2.8% (Q1 2025)</li> | |
| <li><i class="fas fa-user-tie mr-1"></i> Unemployment stable at 3.8%</li> | |
| <li><i class="fas fa-store mr-1"></i> Retail sales up 0.5% MoM</li> | |
| <li><i class="fas fa-industry mr-1"></i> Manufacturing PMI in expansion (51.5)</li> | |
| </ul> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-yellow-800 flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> Areas of Concern | |
| </h3> | |
| <ul class="mt-2 space-y-1 text-yellow-700"> | |
| <li><i class="fas fa-home mr-1"></i> Housing starts declining</li> | |
| <li><i class="fas fa-smile mr-1"></i> Consumer confidence decreasing</li> | |
| <li><i class="fas fa-percentage mr-1"></i> Fed funds rate remains elevated</li> | |
| <li><i class="fas fa-chart-line mr-1"></i> Inflation still above target at 3.2%</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-blue-800 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Key Takeaways | |
| </h3> | |
| <p class="mt-2 text-sm text-blue-700">While the economy continues to expand, the combination of high interest rates, moderating inflation, and declining consumer confidence suggests potential headwinds ahead. The labor market remains strong, but housing market weakness bears watching.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 pt-8 border-t border-gray-200"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recession Radar</h2> | |
| <p class="text-sm text-gray-500">Tracking economic signals in near real-time</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-question-circle"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center md:text-left"> | |
| <p class="text-xs text-gray-400">Data sources: U.S. Bureau of Economic Analysis, Bureau of Labor Statistics, Federal Reserve, Census Bureau, ISM, The Conference Board</p> | |
| <p class="text-xs text-gray-400 mt-1">This dashboard is for informational purposes only and should not be considered financial advice.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Update current date time | |
| function updateDateTime() { | |
| const now = new Date(); | |
| const options = { | |
| weekday: 'long', | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric', | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| timeZoneName: 'short' | |
| }; | |
| document.getElementById('currentDateTime').textContent = now.toLocaleDateString('en-US', options); | |
| } | |
| // Refresh button | |
| document.getElementById('refreshBtn').addEventListener('click', function() { | |
| this.classList.add('animate-spin'); | |
| setTimeout(() => { | |
| this.classList.remove('animate-spin'); | |
| updateDateTime(); | |
| // In a real app, you would refresh data here | |
| }, 1000); | |
| }); | |
| // Initialize charts when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateDateTime(); | |
| // GDP Chart | |
| const gdpCtx = document.getElementById('gdpChart').getContext('2d'); | |
| new Chart(gdpCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Q3 2024', 'Q4 2024', 'Q1 2025'], | |
| datasets: [{ | |
| label: 'GDP Growth %', | |
| data: [2.1, 2.5, 2.8], | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true, | |
| pointBackgroundColor: '#10b981', | |
| pointRadius: 4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| grid: { | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // CPI Chart | |
| const cpiCtx = document.getElementById('cpiChart').getContext('2d'); | |
| new Chart(cpiCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Dec 2024', 'Jan 2025', 'Feb 2025', 'Mar 2025'], | |
| datasets: [{ | |
| label: 'CPI YoY %', | |
| data: [3.8, 3.6, 3.4, 3.2], | |
| borderColor: '#f59e0b', | |
| backgroundColor: 'rgba(245, 158, 11, 0.1)', | |
| tension: 0.3, | |
| fill: true, | |
| pointBackgroundColor: '#f59e0b', | |
| pointRadius: 4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| grid: { | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Unemployment Chart | |
| const unemploymentCtx = document.getElementById('unemploymentChart').getContext('2d'); | |
| new Chart(unemploymentCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Dec 2024', 'Jan 2025', 'Feb 2025', 'Mar 2025'], | |
| datasets: [{ | |
| label: 'Unemployment %', | |
| data: [3.7, 3.8, 3.8, 3.8], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.1, | |
| fill: true, | |
| pointBackgroundColor: '#3b82f6', | |
| pointRadius: 4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 3.5, | |
| max: 4.0, | |
| grid: { | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // PMI Gauge | |
| const pmiGauge = { | |
| chart: { | |
| type: 'radialBar', | |
| height: 120, | |
| width: '100%' | |
| }, | |
| series: [51.5], | |
| plotOptions: { | |
| radialBar: { | |
| startAngle: -135, | |
| endAngle: 135, | |
| hollow: { | |
| margin: 0, | |
| size: '70%', | |
| }, | |
| track: { | |
| background: '#e2e8f0', | |
| strokeWidth: '97%', | |
| margin: 5, | |
| }, | |
| dataLabels: { | |
| name: { | |
| offsetY: -10, | |
| color: '#64748b', | |
| fontSize: '13px' | |
| }, | |
| value: { | |
| color: '#1e293b', | |
| fontSize: '20px', | |
| fontWeight: 'bold', | |
| show: true, | |
| offsetY: 0, | |
| formatter: function(val) { | |
| return val; | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| fill: { | |
| colors: ['#10b981'] | |
| }, | |
| stroke: { | |
| lineCap: 'round' | |
| }, | |
| labels: ['Manufacturing PMI'] | |
| }; | |
| new ApexCharts(document.querySelector("#pmiGauge"), pmiGauge).render(); | |
| // Consumer Confidence Chart | |
| const confidenceCtx = document.getElementById('confidenceChart').getContext('2d'); | |
| new Chart(confidenceCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr'], | |
| datasets: [{ | |
| label: 'Consumer Confidence', | |
| data: [105.2, 102.5, 100.1, 98.0], | |
| borderColor: '#f59e0b', | |
| backgroundColor: 'transparent', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| pointBackgroundColor: '#f59e0b', | |
| pointRadius: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| display: false | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| elements: { | |
| line: { | |
| fill: false | |
| } | |
| } | |
| } | |
| }); | |
| // Jobless Claims Chart | |
| const joblessCtx = document.getElementById('joblessChart').getContext('2d'); | |
| new Chart(joblessCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], | |
| datasets: [{ | |
| label: 'Jobless Claims (K)', | |
| data: [215, 212, 210, 210], | |
| borderColor: '#10b981', | |
| backgroundColor: 'transparent', | |
| borderWidth: 2, | |
| tension: 0.1, | |
| pointBackgroundColor: '#10b981', | |
| pointRadius: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| display: false | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| elements: { | |
| line: { | |
| fill: false | |
| } | |
| } | |
| } | |
| }); | |
| // Retail Sales Chart | |
| const retailCtx = document.getElementById('retailChart').getContext('2d'); | |
| new Chart(retailCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Dec', 'Jan', 'Feb', 'Mar'], | |
| datasets: [{ | |
| label: 'Retail Sales MoM %', | |
| data: [-0.2, 0.3, 0.1, 0.5], | |
| borderColor: '#10b981', | |
| backgroundColor: 'transparent', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| pointBackgroundColor: '#10b981', | |
| pointRadius: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| display: false | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| elements: { | |
| line: { | |
| fill: false | |
| } | |
| } | |
| } | |
| }); | |
| // Housing Starts Chart | |
| const housingCtx = document.getElementById('housingChart').getContext('2d'); | |
| new Chart(housingCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Dec 2024', 'Jan 2025', 'Feb 2025', 'Mar 2025'], | |
| datasets: [{ | |
| label: 'Housing Starts (M)', | |
| data: [1.52, 1.48, 1.45, 1.42], | |
| backgroundColor: '#f59e0b', | |
| borderRadius: 4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 1.3, | |
| max: 1.6, | |
| grid: { | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + 'M'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Fed Rate Chart | |
| const fedRateCtx = document.getElementById('fedRateChart').getContext('2d'); | |
| new Chart(fedRateCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Dec 2024', 'Jan 2025', 'Feb 2025', 'Mar 2025', 'Apr 2025'], | |
| datasets: [{ | |
| label: 'Fed Funds Rate %', | |
| data: [5.25, 5.25, 5.25, 5.25, 5.25], | |
| borderColor: '#f59e0b', | |
| backgroundColor: 'rgba(245, 158, 11, 0.1)', | |
| tension: 0, | |
| fill: true, | |
| pointBackgroundColor: '#f59e0b', | |
| pointRadius: 4, | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 5.0, | |
| max: 5.5, | |
| grid: { | |
| drawBorder: false | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // S&P 500 Chart (with simulated real-time updates) | |
| const sp500Ctx = document.getElementById('sp500Chart').getContext('2d'); | |
| const sp500Chart = new Chart(sp500Ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['9:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM', '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM', '3:00 PM', '3:29 PM'], | |
| datasets: [{ | |
| label: 'S&P 500', | |
| data: [5030, 5035, 5042, 5048, 5055, 5052, 5048, 5045, 5042, 5048, 5050, 5052, 5050], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.1, | |
| fill: true, | |
| pointBackgroundColor: '#3b82f6', | |
| pointRadius: 0, | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| display: false | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| }, | |
| animation: { | |
| duration: 0 | |
| } | |
| } | |
| }); | |
| // Simulate real-time updates for S&P 500 | |
| setInterval(() => { | |
| const lastValue = sp500Chart.data.datasets[0].data[sp500Chart.data.datasets[0].data.length - 1]; | |
| const newValue = lastValue + (Math.random() * 4 - 2); // Random small fluctuation | |
| // Remove first data point and add new one | |
| sp500Chart.data.datasets[0].data.shift(); | |
| sp500Chart.data.datasets[0].data.push(newValue); | |
| // Update the displayed value | |
| document.querySelector('.indicator-card.status-healthy:nth-child(9) .text-xl').textContent = Math.round(newValue); | |
| sp500Chart.update(); | |
| }, 5000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AI4U2/recession-radar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |