test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Futures Screener - Debug Test</title>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
        .debug-info { background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .cards { display: flex; flex-wrap: wrap; gap: 15px; }
        .card { background: white; border-radius: 8px; padding: 15px; width: 300px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 8px; }
        .card-row { display: flex; justify-content: space-between; margin: 5px 0; }
        .bid { color: #e74c3c; }
        .ask { color: #27ae60; }
        .error { background: #ffe6e6; color: #c0392b; padding: 15px; border-radius: 8px; }
        .success { background: #e6ffe6; color: #27ae60; padding: 15px; border-radius: 8px; }
    </style>
</head>
<body>
    <h1>Futures Screener - Debug Test</h1>
    
    <div class="debug-info">
        <p>Testing API: <code id="api-url">Loading...</code></p>
        <p>Status: <span id="status">⏳ Loading...</span></p>
        <p id="data-info"></p>
        <button onclick="loadData()">Reload Data</button>
    </div>
    
    <div id="error" class="error" style="display:none"></div>
    <div id="success" class="success" style="display:none"></div>
    
    <div id="cards" class="cards"></div>
    
    <script>
        async function loadData() {
            const status = document.getElementById('status');
            const errorDiv = document.getElementById('error');
            const successDiv = document.getElementById('success');
            const dataInfo = document.getElementById('data-info');
            const cards = document.getElementById('cards');
            
            errorDiv.style.display = 'none';
            successDiv.style.display = 'none';
            status.textContent = '⏳ Loading...';
            cards.innerHTML = '';
            
            const url = 'https://futures-screener.szhub.space/densities/simple?symbols=BTCUSDT,ETHUSDT,XRPUSDT&minNotional=0&windowPct=5&depthLimit=10';
            document.getElementById('api-url').textContent = url;
            
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                
                const result = await response.json();
                const data = result.data || [];
                
                console.log('Raw data received:', data.length, 'entries');
                console.log('Sample entry:', data[0]);
                
                // Group by symbol
                const grouped = new Map();
                data.forEach(entry => {
                    if (!grouped.has(entry.symbol)) {
                        grouped.set(entry.symbol, { bid: null, ask: null });
                    }
                    if (entry.side === 'bid') {
                        grouped.get(entry.symbol).bid = entry;
                    } else if (entry.side === 'ask') {
                        grouped.get(entry.symbol).ask = entry;
                    }
                });
                
                console.log('Grouped size:', grouped.size);
                console.log('Grouped entries:', [...grouped.entries()]);
                
                // Update info
                dataInfo.innerHTML = `
                    Total entries: <strong>${data.length}</strong><br>
                    Unique symbols: <strong>${grouped.size}</strong><br>
                    Symbols: <strong>${[...grouped.keys()].join(', ')}</strong>
                `;
                
                if (grouped.size === 0) {
                    throw new Error('Grouped size is 0! Check data structure.');
                }
                
                // Render cards
                cards.innerHTML = '';
                for (const [symbol, sides] of grouped.entries()) {
                    const card = document.createElement('div');
                    card.className = 'card';
                    card.innerHTML = `
                        <div class="card-header">${symbol}</div>
                        <div class="card-row bid">
                            <span>🔴 BID:</span>
                            <span>${sides.bid ? sides.bid.price.toFixed(4) : '—'}</span>
                        </div>
                        <div class="card-row ask">
                            <span>🟢 ASK:</span>
                            <span>${sides.ask ? sides.ask.price.toFixed(4) : '—'}</span>
                        </div>
                        <div class="card-row">
                            <span>Score:</span>
                            <span>${Math.max(sides.bid?.score || 0, sides.ask?.score || 0).toFixed(4)}</span>
                        </div>
                    `;
                    cards.appendChild(card);
                }
                
                status.textContent = '✅ Loaded successfully';
                successDiv.textContent = `Successfully loaded ${data.length} levels, ${grouped.size} symbols`;
                successDiv.style.display = 'block';
                
            } catch (error) {
                console.error('Load error:', error);
                status.textContent = '❌ Error';
                errorDiv.textContent = `Error: ${error.message}`;
                errorDiv.style.display = 'block';
                dataInfo.innerHTML = `Error loading data: ${error.message}`;
            }
        }
        
        // Load on page load
        document.addEventListener('DOMContentLoaded', loadData);
    </script>
</body>
</html>
📜 Git History

c62f8acrefactor: fix vol1/2/3 order, add GitHub skill, update docs4 months ago
Show last diff