dashboard: color ladder levels red/green on cells (Bootstrap table overrides row colors), add direction icons

This commit is contained in:
Harwinder Sekhon
2026-08-16 21:02:24 -04:00
parent f6bea859e5
commit 9a63099b76
+7 -5
View File
@@ -281,14 +281,16 @@ function ladder(levels, price) {
if (price != null) rows.push({ here: true, v: +price });
rows.sort((a, b) => b.v - a.v);
const body = rows.map(row => {
if (row.here) return `<tr class="table-primary fw-bold"><td>current price</td>
if (row.here) return `<tr class="table-primary fw-bold"><td><i class="bi bi-geo-alt-fill me-1"></i>current price</td>
<td class="num text-end">${fmt$(row.v)}</td><td class="num text-end">—</td><td class="small text-secondary">spot</td></tr>`;
const d = price != null ? row.v - price : null;
return `<tr class="${d == null ? "" : d > 0 ? "text-danger" : "text-success"}">
const cls = d == null ? "" : d > 0 ? "text-danger" : "text-success";
const icon = d == null ? "" : d > 0 ? "bi-arrow-up-short" : "bi-arrow-down-short";
return `<tr>
<td class="text-secondary">${esc(row.label)}</td>
<td class="num text-end">${fmt$(row.v)}</td>
<td class="num text-end">${d == null ? "" : signed(d) + (atr ? ` · ${signed(d / atr, 2)} ATR` : "")}</td>
<td class="small text-secondary">${d == null ? "" : d > 0 ? "resistance" : "support"}</td></tr>`;
<td class="num text-end ${cls}">${fmt$(row.v)}</td>
<td class="num text-end ${cls}">${d == null ? "" : signed(d) + (atr ? ` · ${signed(d / atr, 2)} ATR` : "")}</td>
<td class="small ${cls}">${d == null ? "" : `<i class="bi ${icon}"></i>${d > 0 ? "resistance" : "support"}`}</td></tr>`;
}).join("");
return `<table class="table table-sm ladder"><thead><tr><th>Level</th><th class="text-end">Price</th>
<th class="text-end">vs. spot</th><th>Role</th></tr></thead><tbody>${body}</tbody></table>`;