gitea/historical-prices
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Separate data sync from UI rendering, change colunm width

Browse Source
This commit is contained in:
tab888
2026-01-27 07:12:09 +08:00
parent 61b32bbdd7
commit 9e7f474d5e
5 changed files with 1691 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+151 -42
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Financial Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
:root {
--header-bg: #4a5568;
@@ -96,6 +97,21 @@
}
#loading { display: none; margin-left: 10px; font-size: 0.8rem; color: #666; }
/* 1. Ensure the 52W column is wide enough for the progress bar */
.table td:nth-child(4), .table th:nth-child(4) {
min-width: 140px;
text-align: left;
}
/* 2. Narrow the EMA and K/D columns since they only have small numbers */
.table td:nth-child(n+5), .table th:nth-child(n+5) {
min-width: 75px;
}
/* 3. Give the Instrument column a bit more breathing room if names are long */
.table td:first-child, .table th:first-child {
min-width: 180px; /* Increased from 140px */
}
</style>
</head>
<body>
@@ -104,9 +120,16 @@
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0 text-dark">Portfolio Signals</h5>
<div>
<span id="loading">Updating...</span>
<button class="btn btn-refresh btn-sm" onclick="loadData()">Refresh</button>
<div class="d-flex align-items-center gap-2">
<span id="loading" class="me-2" style="display:none;">Updating...</span>
<button class="btn btn-outline-secondary btn-sm" onclick="loadData()">
<i class="bi bi-arrow-clockwise"></i> Refresh Table
</button>
<button id="syncBtn" class="btn btn-primary btn-sm" onclick="runGlobalSync()">
<i class="bi bi-cloud-download"></i> Sync New Data
</button>
</div>
</div>
<div class="card-body p-0">
@@ -114,15 +137,14 @@
<table class="table table-hover table-striped mb-0">
<thead>
<tr>
<th>Instrument</th>
<th>Close</th>
<th>Chg%</th>
<th>52W Range</th>
<th>v20 EMA</th>
<th>v50 EMA</th>
<th>v100 EMA</th>
<th>v200 EMA</th>
<th>K/D</th>
<th style="width: 25%;">Instrument</th>
<th style="width: 10%;">Close</th>
<th style="width: 10%;">Chg%</th>
<th style="width: 10%;">52W Range</th> <th style="width: 8%;">20 EMA</th>
<th style="width: 10%;">50 EMA</th>
<th style="width: 10%;">100 EMA</th>
<th style="width: 10%;">200 EMA</th>
<th style="width: 5%;">K/D</th>
</tr>
</thead>
<tbody id="tableBody">
@@ -133,13 +155,30 @@
</div>
</div>
</div>
<script>
console.log("Script block loaded successfully.");
// --- 1. Helper Function for K/D Styling ---
// Defined at the top level so it's ready before loadData runs
function formatKD(val) {
if (!val || val === "N/A" || !val.includes('/')) return `<span class="text-muted">N/A</span>`;
const [k, d] = val.split('/').map(v => parseFloat(v));
let colorClass = 'text-dark'; // Default
if (k >= 80) colorClass = 'text-danger fw-bold'; // Overbought
else if (k <= 20) colorClass = 'text-success fw-bold'; // Oversold
return `<span class="${colorClass}">${val}</span>`;
}
// --- 2. Load Table Data (Fast) ---
async function loadData() {
console.log("Starting loadData...");
const loading = document.getElementById('loading');
const tbody = document.getElementById('tableBody');
loading.style.display = 'inline';
if (loading) loading.style.display = 'inline';
try {
const response = await fetch('/api/summary');
@@ -147,47 +186,117 @@
tbody.innerHTML = '';
if (data.length === 0) {
tbody.innerHTML = '<tr><td colspan="9" class="p-4">No instruments found in CSV.</td></tr>';
if (!data || data.length === 0) {
tbody.innerHTML = '<tr><td colspan="9" class="p-4">No data found. Please run Sync.</td></tr>';
return;
}
data.forEach(item => {
// Helper to format EMA offsets with +/- and Colors
const formatEma = (val) => {
if (val === "N/A" || val === null) return `<span class="text-muted">N/A</span>`;
const sign = val > 0 ? "+" : "";
const colorClass = val >= 0 ? 'text-up' : 'text-down';
return `<span class="${colorClass}">${sign}${val}%</span>`;
};
const row = `
data.forEach(item => {
// 1. GATEKEEPER: Check if the item has an error or is missing data
if (item.error || !item.last_close) {
const errorRow = `
<tr>
<td>${item.symbol}</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}%
<td>${item.symbol || 'Unknown'}</td>
<td colspan="8" class="text-center p-3">
<span class="badge bg-warning text-dark">
<i class="bi bi-exclamation-triangle"></i> Needs Sync
</span>
<small class="text-muted ms-2">Local CSV not found or corrupted.</small>
</td>
<td class="text-muted small">${item.low_52} - ${item.high_52}</td>
<td>${formatEma(item.last_ema20)}</td>
<td>${formatEma(item.last_ema50)}</td>
<td>${formatEma(item.last_ema100)}</td>
<td>${formatEma(item.last_ema200)}</td>
<td><span class="badge badge-kd">${item.kd_values}</span></td>
</tr>
`;
tbody.innerHTML += row;
});
tbody.innerHTML += errorRow;
return; // This skips the rest of the math and goes to the next fund
}
// --- A. Helper for EMA colors (Your existing code) ---
const formatEma = (val) => {
if (val === "N/A" || val === null || val === undefined) return `<span class="text-muted">N/A</span>`;
const num = parseFloat(val);
const sign = num > 0 ? "+" : "";
const colorClass = num >= 0 ? 'text-up' : 'text-down';
return `<span class="${colorClass}">${sign}${num.toFixed(1)}%</span>`;
};
// --- B. Calculate 52W Range logic ---
const current = parseFloat(item.last_close) || 0;
const low = parseFloat(item.low_52) || 0;
const high = parseFloat(item.high_52) || 0;
let rangePct = 0;
if (high > low) {
rangePct = ((current - low) / (high - low)) * 100;
rangePct = Math.min(Math.max(rangePct, 0), 100);
}
const rangeColor = rangePct > 80 ? 'text-danger' : (rangePct < 20 ? 'text-success' : 'text-muted');
// --- C. Build the Row (Your existing code) ---
const row = `
<tr>
<td>${item.symbol}</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}%
</td>
<td class="${rangeColor} small">
<div class="d-flex justify-content-between mb-1" style="min-width: 100px;">
<span>${item.low_52}</span>
<span>${item.high_52}</span>
</div>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-primary" style="width: ${rangePct}%"></div>
</div>
</td>
<td>${formatEma(item.last_ema20)}</td>
<td>${formatEma(item.last_ema50)}</td>
<td>${formatEma(item.last_ema100)}</td>
<td>${formatEma(item.last_ema200)}</td>
<td>${formatKD(item.kd_values)}</td>
</tr>
`;
tbody.innerHTML += row;
});
} catch (error) {
console.error("Fetch error:", error);
tbody.innerHTML = '<tr><td colspan="9" class="text-danger p-4">Error connecting to server.</td></tr>';
tbody.innerHTML = '<tr><td colspan="9" class="text-danger p-4">Error loading local data. Check Console.</td></tr>';
} finally {
loading.style.display = 'none';
if (loading) loading.style.display = 'none';
}
}
// Initial Load
document.addEventListener('DOMContentLoaded', loadData);
// --- 3. Run Global Sync (Slow) ---
async function runGlobalSync() {
const syncBtn = document.getElementById('syncBtn');
const loading = document.getElementById('loading');
if (!syncBtn) return;
syncBtn.disabled = true;
const originalText = syncBtn.innerHTML;
syncBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Syncing...`;
if (loading) loading.style.display = 'inline';
try {
const response = await fetch('/api/sync', { method: 'POST' });
if (!response.ok) throw new Error("Server error during sync");
await loadData(); // Reload table after sync
alert("Sync Complete! Data updated.");
} catch (error) {
console.error("Sync error:", error);
alert("Sync failed. Check terminal for Python errors.");
} finally {
syncBtn.disabled = false;
syncBtn.innerHTML = originalText;
if (loading) loading.style.display = 'none';
}
}
// --- 4. Initial Trigger ---
window.onload = function() {
loadData();
};
</script>
</body>