ADD more indictaors, BB,RSI and Z-score
This commit is contained in:
+76
-38
@@ -50,6 +50,7 @@
|
||||
}
|
||||
|
||||
.table {
|
||||
/*table-layout: fixed;
|
||||
/* table-layout: auto; */ /* Default - let it be auto for data safety */
|
||||
width: 100%;
|
||||
|
||||
@@ -82,6 +83,21 @@
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 10px 8px;
|
||||
}
|
||||
/* Price Trend Colors */
|
||||
.text-up { color: #28a745 !important; } /* Success Green */
|
||||
.text-down { color: #dc3545 !important; } /* Danger Red */
|
||||
|
||||
/* Table Cell Styling */
|
||||
#tableBody td {
|
||||
padding: 8px 4px;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Custom heatmaps for Z-score */
|
||||
.bg-oversold { background-color: #d1e7dd !important; color: #0f5132 !important; }
|
||||
.bg-overbought { background-color: #f8d7da !important; color: #842029 !important; }
|
||||
|
||||
/* 3. Sticky Column Logic (Instrument) */
|
||||
.table td:first-child,
|
||||
@@ -210,7 +226,9 @@
|
||||
<div class="container-fluid p-0">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 text-dark">Portfolio Signals</h5>
|
||||
<h5 class="mb-0 p-2 shadow-sm" style="background: linear-gradient(90deg, #007bff, #6610f2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;">
|
||||
Portfolio Signals
|
||||
</h5>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span id="loading">Updating...</span>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="loadData()">
|
||||
@@ -230,10 +248,14 @@
|
||||
<th style="min-width: 25px;">Date</th>
|
||||
<th style="min-width: 25px;">Close</th>
|
||||
<th style="min-width: 25px;">Chg%</th>
|
||||
<th style="min-width: 100px;">52W Range</th>
|
||||
<th style="min-width: 85px;">20 EMA</th>
|
||||
<th style="min-width: 25px;">50 EMA</th>
|
||||
<th style="min-width: 25px;">100 EMA</th>
|
||||
<th style="min-width: 25px;">L--52W--H</th>
|
||||
<th class="min-width: 50px;">RSI</th>
|
||||
<th class="min-width: 25px;">BB %B</th>
|
||||
<th class="min-width: 25px;">Z60</th>
|
||||
<th class="min-width: 25px;">Z120</th>
|
||||
<th style="min-width: 25px;">25 EMA%</th>
|
||||
<th style="min-width: 25px;">50 EMA%</th>
|
||||
<th style="min-width: 25px;">100 EMA%</th>
|
||||
<th style="min-width: 25px;">200 EMA</th>
|
||||
<th style="min-width: 60px;">K/D</th>
|
||||
</tr>
|
||||
@@ -267,8 +289,30 @@
|
||||
const colorClass = num >= 0 ? 'text-up' : 'text-down';
|
||||
return `<span class="${colorClass}">${sign}${num.toFixed(1)}%</span>`;
|
||||
};
|
||||
// Function for Z-Score (Heatmap style)
|
||||
const getZColor = (val) => {
|
||||
if (val === "N/A") return "";
|
||||
if (val >= 2) return 'style="background-color: #ffcccc; color: #cc0000; font-weight: bold;"'; // Overbought
|
||||
if (val <= -2) return 'style="background-color: #ccffcc; color: #006600; font-weight: bold;"'; // Oversold
|
||||
return "";
|
||||
};
|
||||
// Function for RSI (Text-only Traffic Ligh style)
|
||||
const getRSIColor = (val) => {
|
||||
if (val === "N/A") return "";
|
||||
if (val >= 70) return 'class="text-danger fw-bold"'; // Red Text
|
||||
if (val <= 30) return 'class="text-success fw-bold"'; // Green Text
|
||||
return "";
|
||||
};
|
||||
// Function for BB (Text-only Traffic Ligh style)
|
||||
const getBBColor = (val) => {
|
||||
if (val === "N/A" || val === null) return "";
|
||||
const numericVal = parseFloat(val);
|
||||
// Traffic Light Logic
|
||||
if (numericVal >= 1.0) return 'class="text-danger fw-bold"'; // Above Upper Band
|
||||
if (numericVal <= 0.0) return 'class="text-success fw-bold"'; // Below Lower Band
|
||||
return 'class="text-muted"'; // Neutral
|
||||
};
|
||||
|
||||
// --- 3. Load Table Data ---
|
||||
async function loadData() {
|
||||
console.log("Starting loadData...");
|
||||
const loading = document.getElementById('loading');
|
||||
@@ -279,73 +323,70 @@
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/summary');
|
||||
const result = await response.json(); // result is { last_sync: "...", data: [...] }
|
||||
const result = await response.json();
|
||||
|
||||
// 1. Update the Navbar Sync Time from Server
|
||||
// 1. Update Sync Time
|
||||
if (syncDisplay && result.last_sync) {
|
||||
syncDisplay.innerText = result.last_sync;
|
||||
syncDisplay.classList.add('text-success');
|
||||
setTimeout(() => syncDisplay.classList.remove('text-success'), 2000);
|
||||
}
|
||||
|
||||
// 2. Extract the instruments list
|
||||
const data = result.data;
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" class="p-4 text-center">No data found. Please run Sync.</td></tr>';
|
||||
tbody.innerHTML = '<tr><td colspan="14" class="p-4 text-center">No data found. Please run Sync.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Prepare variables for the loop
|
||||
let htmlContent = '';
|
||||
const todayStr = new Date().toISOString().split('T')[0];
|
||||
|
||||
// 4. Loop through each item
|
||||
data.forEach(item => {
|
||||
// --- A. Error Row Handling ---
|
||||
// --- A. Error Handling ---
|
||||
if (item.error || !item.last_close || item.last_close === 'N/A') {
|
||||
htmlContent += `
|
||||
<tr>
|
||||
<td><div class="fw-bold text-muted">${item.name || item.symbol}</div></td>
|
||||
<td colspan="9" class="text-center p-3">
|
||||
<td colspan="13" class="text-center p-3">
|
||||
<span class="badge bg-warning text-dark">Needs Sync</span>
|
||||
<small class="text-muted ms-2">Local CSV not found or corrupted.</small>
|
||||
<small class="text-muted ms-2">Data not found or corrupted.</small>
|
||||
</td>
|
||||
</tr>`;
|
||||
return; // Skip to next item
|
||||
return;
|
||||
}
|
||||
|
||||
// --- B. Date & Style Calculations ---
|
||||
// --- B. Preparation & Math ---
|
||||
let displayDate = item.last_date || "N/A";
|
||||
let dateColor = '#dc3545'; // Default red for stale
|
||||
|
||||
let dateColor = '#dc3545';
|
||||
if (item.last_date && item.last_date.includes('-')) {
|
||||
const parts = item.last_date.split('-');
|
||||
displayDate = `${parts[2]}/${parts[1]}`; // DD/MM format
|
||||
displayDate = `${parts[2]}/${parts[1]}`;
|
||||
dateColor = (item.last_date === todayStr) ? '#28a745' : '#dc3545';
|
||||
}
|
||||
|
||||
const current = parseFloat(item.last_close) || 0;
|
||||
const low = parseFloat(item.low_52) || 0;
|
||||
const high = parseFloat(item.high_52) || 0;
|
||||
|
||||
// 52W Range Progress Bar
|
||||
|
||||
// 52W Range calculation
|
||||
let rangePct = high > low ? Math.min(Math.max(((current - low) / (high - low)) * 100, 0), 100) : 0;
|
||||
const rangeColor = rangePct > 80 ? 'text-danger' : (rangePct < 20 ? 'text-success' : 'text-muted');
|
||||
|
||||
// Freshness class for the badge
|
||||
// Indicators
|
||||
const rsiVal = item.rsi !== null ? item.rsi : "N/A";
|
||||
const bbRaw = parseFloat(item.bb_pct);
|
||||
const bbDisplay = !isNaN(bbRaw) ? (bbRaw * 100).toFixed(0) + '%' : 'N/A';
|
||||
const z60Val = item.z60 !== null ? item.z60 : "N/A";
|
||||
const z120Val = item.z120 !== null ? item.z120 : "N/A";
|
||||
|
||||
const isFresh = item.last_date === todayStr;
|
||||
const dateBadgeClass = isFresh ? 'badge bg-success-subtle text-success border border-success-subtle' : 'text-muted';
|
||||
|
||||
// --- C. Construct Row ---
|
||||
// --- C. Construct Row (14 Columns) ---
|
||||
htmlContent += `
|
||||
<tr>
|
||||
<td><div class="fw-bold">${item.name || item.symbol}</div></td>
|
||||
<td>
|
||||
<span class="${dateBadgeClass}" style="color: ${dateColor} !important; font-size: 0.75rem; padding: 2px 5px; border-radius: 4px;">
|
||||
${displayDate}
|
||||
</span>
|
||||
</td>
|
||||
<td><span class="table-date ${dateBadgeClass}" style="color: ${dateColor} !important;">${displayDate}</span></td>
|
||||
<td class="fw-bold">${item.last_close}</td>
|
||||
<td class="${item.change_pct >= 0 ? 'text-up' : 'text-down'}">
|
||||
${item.change_pct >= 0 ? '+' : ''}${item.change_pct}%
|
||||
@@ -358,6 +399,10 @@
|
||||
<div class="progress-bar bg-primary" style="width: ${rangePct}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td ${getRSIColor(rsiVal)} class="text-center">${rsiVal}</td>
|
||||
<td ${getBBColor(item.bb_pct)} class="text-center">${bbDisplay}</td>
|
||||
<td ${getZColor(z60Val)} class="text-center">${z60Val}</td>
|
||||
<td ${getZColor(z120Val)} class="text-center">${z120Val}</td>
|
||||
<td>${typeof formatEma === 'function' ? formatEma(item.last_ema20) : item.last_ema20}</td>
|
||||
<td>${typeof formatEma === 'function' ? formatEma(item.last_ema50) : item.last_ema50}</td>
|
||||
<td>${typeof formatEma === 'function' ? formatEma(item.last_ema100) : item.last_ema100}</td>
|
||||
@@ -366,18 +411,11 @@
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
// 5. Final Injection
|
||||
tbody.innerHTML = htmlContent;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fetch error:", error);
|
||||
if (syncDisplay) {
|
||||
syncDisplay.innerText = "OFFLINE";
|
||||
syncDisplay.classList.add('text-danger');
|
||||
}
|
||||
if (tbody) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" class="text-danger p-4 text-center">Error loading summary. Check server logs.</td></tr>';
|
||||
}
|
||||
if (tbody) tbody.innerHTML = '<tr><td colspan="14" class="text-danger p-4 text-center">Error loading data.</td></tr>';
|
||||
} finally {
|
||||
if (loading) loading.style.display = 'none';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user