06/01 Optimize porfolio page

This commit is contained in:
2026-06-01 17:29:57 -04:00
parent e040f0a0f8
commit 7815060e89
3 changed files with 111 additions and 13 deletions
+12 -5
View File
@@ -315,10 +315,11 @@
{% endif %}{% endfor %}
];
// Fetch all day-changes in parallel
// Fetch today's open→current day change for every ticker (parallel)
// Uses the lightweight /api/daychange/ endpoint (meta only, no history)
Promise.all(
tickerRows.map(r =>
fetch(`{{ url_for('investments.api_price_history', ticker='__T__') }}`.replace('__T__', r.ticker) + '?tf=1W')
fetch(`{{ url_for('investments.api_day_change', ticker='__T__') }}`.replace('__T__', r.ticker))
.then(res => res.ok ? res.json() : null)
.then(data => ({ id: r.id, data }))
.catch(() => ({ id: r.id, data: null }))
@@ -330,6 +331,7 @@
if (data && data.day_change !== undefined) {
const badge = cell.querySelector('.chg-badge') || cell;
badge.className = 'chg-badge ' + chgClass(data.day_change);
badge.title = `Open: ${fmtPrice(data.open)} → Current: ${fmtPrice(data.current)}`;
badge.innerHTML =
`<i class="bi ${chgIcon(data.day_change)}"></i>` +
(data.day_change >= 0 ? '+' : '') +
@@ -390,12 +392,17 @@
// Info line
const tfLabel = { '1W':'1 Week','1M':'1 Month','3M':'3 Months','6M':'6 Months','1Y':'1 Year' }[tf] || tf;
const dayChgHtml = data.day_change !== undefined
? `Today (open→now): <strong class="${data.day_change >= 0 ? 'text-income' : 'text-expense'}">${
fmtChg(data.day_change, data.day_change_pct)
}</strong> &nbsp;(open ${fmtPrice(data.open_price)}) &nbsp;·&nbsp; `
: '';
infoEl.innerHTML =
`Current: <strong>${fmtPrice(data.current)}</strong> &nbsp;·&nbsp; ` +
`${tfLabel} change: <strong class="${data.period_change >= 0 ? 'text-income' : 'text-expense'}">${
dayChgHtml +
`${tfLabel}: <strong class="${data.period_change >= 0 ? 'text-income' : 'text-expense'}">${
fmtChg(data.period_change, data.period_change_pct)
}</strong> &nbsp;·&nbsp; ` +
`Prev close: ${fmtPrice(data.prev_close)}`;
}</strong>`;
const lineColor = data.period_change >= 0 ? '#10b981' : '#ef4444';
const fillColor = data.period_change >= 0 ? '#10b98118' : '#ef444418';