first commit
This commit is contained in:
@@ -0,0 +1,779 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var body = document.body;
|
||||
var tabbar = document.getElementById("tabbar");
|
||||
var panels = document.getElementById("tab-panels");
|
||||
var chartRangeState = {}; // targetKey -> last-picked range, survives panel refresh
|
||||
var chartModeState = {}; // targetKey -> "simple" | "advanced"
|
||||
var baseCurrencySymbol = body.dataset.currencySymbol || "";
|
||||
var pollMs = (parseInt(body.dataset.poll, 10) || 60) * 1000;
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Formatting (mirrors internal/web/format.go closely enough for live ticks)
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
function fmtMoney(v) {
|
||||
var neg = v < 0;
|
||||
if (neg) v = -v;
|
||||
var s = v.toFixed(2);
|
||||
var parts = s.split(".");
|
||||
var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
return (neg ? "-" : "") + baseCurrencySymbol + intPart + "." + parts[1];
|
||||
}
|
||||
|
||||
function signClass(v) {
|
||||
return v > 0 ? "gain" : v < 0 ? "loss" : "flat";
|
||||
}
|
||||
|
||||
function flash(el) {
|
||||
el.classList.remove("flash");
|
||||
void el.offsetWidth;
|
||||
el.classList.add("flash");
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Kraken public WebSocket v2 — live ticker for price/value/P&L, purely a
|
||||
// between-poll smoothing layer. REST panel refresh remains the source of
|
||||
// truth for deltas, charts, and everything else.
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
var wsSocket = null;
|
||||
var wsSubscribers = {}; // symbol -> [callback, ...]
|
||||
var lastTickAt = {}; // symbol -> ms, throttles DOM writes to ~1/sec
|
||||
|
||||
function sendSubscribe(symbols) {
|
||||
if (wsSocket && wsSocket.readyState === 1 && symbols.length) {
|
||||
wsSocket.send(JSON.stringify({ method: "subscribe", params: { channel: "ticker", symbol: symbols } }));
|
||||
}
|
||||
}
|
||||
|
||||
function ensureWebSocket() {
|
||||
if (wsSocket && (wsSocket.readyState === 0 || wsSocket.readyState === 1)) return wsSocket;
|
||||
try {
|
||||
wsSocket = new WebSocket("wss://ws.kraken.com/v2");
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
wsSocket.addEventListener("open", function () {
|
||||
sendSubscribe(Object.keys(wsSubscribers));
|
||||
});
|
||||
wsSocket.addEventListener("message", function (e) {
|
||||
var msg;
|
||||
try { msg = JSON.parse(e.data); } catch (err) { return; }
|
||||
if (msg.channel !== "ticker" || !msg.data) return;
|
||||
msg.data.forEach(function (tick) {
|
||||
var callbacks = wsSubscribers[tick.symbol];
|
||||
if (!callbacks || typeof tick.last !== "number") return;
|
||||
var now = Date.now();
|
||||
if (lastTickAt[tick.symbol] && now - lastTickAt[tick.symbol] < 1000) return;
|
||||
lastTickAt[tick.symbol] = now;
|
||||
callbacks.forEach(function (cb) { cb(tick.last); });
|
||||
});
|
||||
});
|
||||
wsSocket.addEventListener("close", function () {
|
||||
wsSocket = null;
|
||||
setTimeout(ensureWebSocket, 4000);
|
||||
});
|
||||
wsSocket.addEventListener("error", function () {
|
||||
try { wsSocket.close(); } catch (e) { /* ignore */ }
|
||||
});
|
||||
return wsSocket;
|
||||
}
|
||||
|
||||
function subscribeTicker(symbol, callback) {
|
||||
if (!symbol) return;
|
||||
var isNew = !wsSubscribers[symbol] || wsSubscribers[symbol].length === 0;
|
||||
if (!wsSubscribers[symbol]) wsSubscribers[symbol] = [];
|
||||
wsSubscribers[symbol].push(callback);
|
||||
var ws = ensureWebSocket();
|
||||
if (isNew && ws && ws.readyState === 1) sendSubscribe([symbol]);
|
||||
}
|
||||
|
||||
function wireLiveTicker(root) {
|
||||
// Dashboard rows: live price/value/P&L per currency.
|
||||
root.querySelectorAll("tr[data-ws-symbol]").forEach(function (tr) {
|
||||
var symbol = tr.dataset.wsSymbol;
|
||||
var holdings = parseFloat(tr.dataset.holdings) || 0;
|
||||
var cost = parseFloat(tr.dataset.cost) || 0;
|
||||
var fxRate = parseFloat(tr.dataset.fxRate) || 1;
|
||||
var priceCell = tr.querySelector('[data-field="price"]');
|
||||
var valueCell = tr.querySelector('[data-field="value"]');
|
||||
var plCell = tr.querySelector('[data-field="pl"]');
|
||||
|
||||
subscribeTicker(symbol, function (last) {
|
||||
var price = last * fxRate;
|
||||
var value = holdings * price;
|
||||
if (priceCell) priceCell.textContent = fmtMoney(price);
|
||||
if (valueCell) valueCell.textContent = fmtMoney(value);
|
||||
if (plCell) {
|
||||
var pl = value - cost;
|
||||
plCell.textContent = fmtMoney(pl);
|
||||
plCell.classList.remove("gain", "loss", "flat");
|
||||
plCell.classList.add(signClass(pl));
|
||||
}
|
||||
flash(tr);
|
||||
});
|
||||
});
|
||||
|
||||
// Position page hero: single currency, live value/P&L.
|
||||
var hero = root.querySelector("[data-ws-hero]");
|
||||
if (hero) {
|
||||
var symbol = hero.dataset.wsHero;
|
||||
var holdings = parseFloat(hero.dataset.holdings) || 0;
|
||||
var cost = parseFloat(hero.dataset.cost) || 0;
|
||||
var fxRate = parseFloat(hero.dataset.fxRate) || 1;
|
||||
var valueEl = hero.querySelector('[data-field="hero-value"]');
|
||||
var plEl = hero.querySelector('[data-field="hero-pl"]');
|
||||
subscribeTicker(symbol, function (last) {
|
||||
var value = holdings * last * fxRate;
|
||||
var pl = value - cost;
|
||||
if (valueEl) valueEl.textContent = fmtMoney(value);
|
||||
if (plEl) {
|
||||
var pct = cost ? (pl / cost * 100) : 0;
|
||||
var sign = pct >= 0 ? "+" : "";
|
||||
plEl.textContent = fmtMoney(pl) + " (" + sign + pct.toFixed(2) + "%)";
|
||||
plEl.classList.remove("gain", "loss", "flat");
|
||||
plEl.classList.add(signClass(pl));
|
||||
}
|
||||
flash(hero);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Topbar portfolio total: lives in base.html outside any tab panel, so it
|
||||
// is wired once here (not per-panel) and stays live across every page.
|
||||
// Server-rendered value is the initial paint; /api/summary refresh (every
|
||||
// poll cycle) keeps holdings/cost authoritative, and Kraken WS ticks
|
||||
// smooth the value in between polls.
|
||||
function initTopbar() {
|
||||
var valueEl = document.querySelector('[data-field="topbar-value"]');
|
||||
var plEl = document.querySelector('[data-field="topbar-pl"]');
|
||||
var wrap = document.querySelector('[data-topbar]') || (valueEl && valueEl.closest(".topbar-total"));
|
||||
if (!valueEl) return;
|
||||
|
||||
var positions = []; // {symbol, holdings, cost, fxRate, value}
|
||||
var subscribed = {}; // ws symbol -> true, so refresh() never double-subscribes
|
||||
|
||||
function render() {
|
||||
var total = 0, cost = 0;
|
||||
positions.forEach(function (p) { total += p.value; cost += p.cost; });
|
||||
var pl = total - cost;
|
||||
var pct = cost ? (pl / cost * 100) : 0;
|
||||
var sign = pct >= 0 ? "+" : "";
|
||||
valueEl.textContent = fmtMoney(total);
|
||||
if (plEl) {
|
||||
plEl.textContent = fmtMoney(pl) + " (" + sign + pct.toFixed(2) + "%)";
|
||||
plEl.classList.remove("gain", "loss", "flat");
|
||||
plEl.classList.add(signClass(pl));
|
||||
}
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
fetch("/api/summary").then(function (r) { return r.json(); }).then(function (data) {
|
||||
positions = (data.positions || []).map(function (p) {
|
||||
return { symbol: p.ws_symbol, holdings: p.holdings, cost: p.cost, fxRate: p.fx_rate, value: p.value };
|
||||
});
|
||||
render();
|
||||
positions.forEach(function (p) {
|
||||
if (!p.symbol || subscribed[p.symbol]) return;
|
||||
subscribed[p.symbol] = true;
|
||||
subscribeTicker(p.symbol, function (last) {
|
||||
positions.forEach(function (q) {
|
||||
if (q.symbol === p.symbol) q.value = q.holdings * last * q.fxRate;
|
||||
});
|
||||
render();
|
||||
if (wrap) flash(wrap);
|
||||
});
|
||||
});
|
||||
}).catch(function () { /* transient error: keep last known values */ });
|
||||
}
|
||||
|
||||
refresh();
|
||||
setInterval(refresh, pollMs);
|
||||
}
|
||||
|
||||
function initPanel(root) {
|
||||
root.querySelectorAll(".chart-controls").forEach(function (controls) {
|
||||
var kind = controls.dataset.chart; // "portfolio" | "currency"
|
||||
var currency = controls.dataset.currency;
|
||||
var targetKey = kind === "portfolio" ? "portfolio" : "currency:" + currency;
|
||||
var svg = root.querySelector('[data-chart-target="' + targetKey + '"]');
|
||||
var emptyEl = root.querySelector('[data-chart-empty="' + targetKey + '"]');
|
||||
var captionEl = root.querySelector('[data-chart-caption="' + targetKey + '"]');
|
||||
if (!svg) return;
|
||||
var symbol = svg.dataset.symbol || "";
|
||||
if (emptyEl && emptyEl.dataset.defaultText === undefined) {
|
||||
emptyEl.dataset.defaultText = emptyEl.textContent;
|
||||
}
|
||||
|
||||
var load = function (range) {
|
||||
chartRangeState[targetKey] = range;
|
||||
var url = kind === "portfolio"
|
||||
? "/api/chart/portfolio?range=" + range
|
||||
: "/api/chart/currency/" + encodeURIComponent(currency) + "?range=" + range;
|
||||
fetchJSON(targetKey, url).then(function (points) {
|
||||
if (points === STALE) return;
|
||||
renderChart(svg, emptyEl, captionEl, points, symbol);
|
||||
}).catch(function (err) {
|
||||
showChartError(svg, emptyEl, captionEl, err);
|
||||
});
|
||||
};
|
||||
|
||||
controls.querySelectorAll("button[data-range]").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
controls.querySelectorAll("button").forEach(function (b) { b.classList.remove("active"); });
|
||||
btn.classList.add("active");
|
||||
load(btn.dataset.range);
|
||||
});
|
||||
});
|
||||
|
||||
var savedRange = chartRangeState[targetKey] || "all";
|
||||
controls.querySelectorAll("button[data-range]").forEach(function (b) {
|
||||
b.classList.toggle("active", b.dataset.range === savedRange);
|
||||
});
|
||||
load(savedRange);
|
||||
});
|
||||
|
||||
initAdvancedCharts(root);
|
||||
initSortableTables(root);
|
||||
wireLiveTicker(root);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Shared fetch helper for chart/candle data: turns a non-2xx response
|
||||
// into a real error (so a rate-limit or server error surfaces instead of
|
||||
// silently failing to parse as JSON), and drops out-of-order responses
|
||||
// when the user switches timeframes faster than requests return.
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
var STALE = {};
|
||||
var requestToken = {};
|
||||
|
||||
function fetchJSON(key, url) {
|
||||
var token = (requestToken[key] = (requestToken[key] || 0) + 1);
|
||||
return fetch(url).then(function (r) {
|
||||
if (!r.ok) return r.text().then(function (t) { throw new Error(t || ("HTTP " + r.status)); });
|
||||
return r.json();
|
||||
}).then(function (data) {
|
||||
return requestToken[key] === token ? data : STALE;
|
||||
}, function (err) {
|
||||
if (requestToken[key] !== token) return STALE;
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
function friendlyChartError(err) {
|
||||
var msg = String((err && err.message) || err);
|
||||
if (msg.indexOf("Too many requests") !== -1) {
|
||||
return "Kraken rate-limited this request — it'll work again in a moment.";
|
||||
}
|
||||
return "Couldn't load chart data right now — try again shortly.";
|
||||
}
|
||||
|
||||
function showChartError(svg, emptyEl, captionEl, err) {
|
||||
svg.hidden = true;
|
||||
if (emptyEl) {
|
||||
emptyEl.hidden = false;
|
||||
emptyEl.textContent = friendlyChartError(err);
|
||||
}
|
||||
if (captionEl) captionEl.textContent = "";
|
||||
}
|
||||
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
|
||||
function fmtAxisDate(unixSeconds, spanSeconds) {
|
||||
var d = new Date(unixSeconds * 1000);
|
||||
if (spanSeconds > 400 * 24 * 3600) return d.toLocaleDateString(undefined, { month: "short", year: "2-digit" });
|
||||
if (spanSeconds > 3 * 24 * 3600) return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
return d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
function fmtAxisValue(v, symbol) {
|
||||
var sign = v < 0 ? "-" : "";
|
||||
var abs = Math.abs(v);
|
||||
var s = abs >= 1000 ? (abs / 1000).toFixed(1) + "k" : abs.toFixed(abs < 10 ? 4 : 2);
|
||||
return sign + symbol + s;
|
||||
}
|
||||
|
||||
function svgEl(tag, attrs) {
|
||||
var el = document.createElementNS(svgns, tag);
|
||||
for (var k in attrs) el.setAttribute(k, attrs[k]);
|
||||
return el;
|
||||
}
|
||||
|
||||
// Picks up to targetCount tick indices, evenly spaced by TIME (not by
|
||||
// array index — data can have irregular gaps, e.g. after a restart),
|
||||
// then drops any tick that lands within minPxGap of the previous one so
|
||||
// labels never overlap on dense data. xAtIndex(i) must return that
|
||||
// point's pixel x position.
|
||||
function pickTicks(points, targetCount, minPxGap, xAtIndex) {
|
||||
var t0 = points[0].t, t1 = points[points.length - 1].t;
|
||||
var span = t1 - t0 || 1;
|
||||
var chosen = [];
|
||||
var lastX = -Infinity;
|
||||
for (var i = 0; i < targetCount; i++) {
|
||||
var targetT = t0 + (i / (targetCount - 1 || 1)) * span;
|
||||
var best = 0, bestDiff = Infinity;
|
||||
for (var j = 0; j < points.length; j++) {
|
||||
var diff = Math.abs(points[j].t - targetT);
|
||||
if (diff < bestDiff) { bestDiff = diff; best = j; }
|
||||
}
|
||||
var x = xAtIndex(best);
|
||||
if (x - lastX < minPxGap) continue;
|
||||
chosen.push(best);
|
||||
lastX = x;
|
||||
}
|
||||
return chosen;
|
||||
}
|
||||
|
||||
function renderChart(svg, emptyEl, captionEl, points, symbol) {
|
||||
while (svg.firstChild) svg.removeChild(svg.firstChild);
|
||||
if (!points || points.length < 2) {
|
||||
if (emptyEl) {
|
||||
emptyEl.hidden = false;
|
||||
emptyEl.textContent = emptyEl.dataset.defaultText || emptyEl.textContent;
|
||||
}
|
||||
if (captionEl) captionEl.textContent = "";
|
||||
svg.hidden = true;
|
||||
return;
|
||||
}
|
||||
if (emptyEl) emptyEl.hidden = true;
|
||||
svg.hidden = false;
|
||||
|
||||
var W = 600, H = 220, ML = 68, MR = 12, MT = 12, MB = 26;
|
||||
var plotW = W - ML - MR, plotH = H - MT - MB;
|
||||
svg.setAttribute("viewBox", "0 0 " + W + " " + H);
|
||||
|
||||
var values = points.map(function (p) { return p.v; });
|
||||
var min = Math.min.apply(null, values), max = Math.max.apply(null, values);
|
||||
var range = (max - min) || Math.abs(max) || 1;
|
||||
var t0 = points[0].t, t1 = points[points.length - 1].t;
|
||||
var tSpan = (t1 - t0) || 1;
|
||||
|
||||
function xAt(t) { return ML + ((t - t0) / tSpan) * plotW; }
|
||||
function yAt(v) { return MT + (1 - (v - min) / range) * plotH; }
|
||||
|
||||
// Y gridlines + value labels (min, mid, max)
|
||||
[min, (min + max) / 2, max].forEach(function (v) {
|
||||
var y = yAt(v);
|
||||
svg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
|
||||
var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
|
||||
text.textContent = fmtAxisValue(v, symbol);
|
||||
svg.appendChild(text);
|
||||
});
|
||||
|
||||
// X-axis date labels: evenly spaced by time, collision-avoided.
|
||||
pickTicks(points, 5, 70, function (i) { return xAt(points[i].t); }).forEach(function (idx) {
|
||||
var p = points[idx];
|
||||
var text = svgEl("text", { x: xAt(p.t), y: H - 6, class: "chart-axis-label chart-axis-x" });
|
||||
text.textContent = fmtAxisDate(p.t, tSpan);
|
||||
svg.appendChild(text);
|
||||
});
|
||||
|
||||
// Price/value line
|
||||
var coords = points.map(function (p) { return xAt(p.t).toFixed(2) + "," + yAt(p.v).toFixed(2); });
|
||||
var poly = svgEl("polyline", { points: coords.join(" ") });
|
||||
var trend = values[values.length - 1] === values[0] ? "flat" : (values[values.length - 1] > values[0] ? "gain" : "loss");
|
||||
poly.setAttribute("class", "chart-line " + trend);
|
||||
svg.appendChild(poly);
|
||||
|
||||
// Issue transparency: when a range shows the exact same span as "all"
|
||||
// available history, a shorter timeframe looks identical — say why.
|
||||
if (captionEl) {
|
||||
var spanDays = tSpan / 86400;
|
||||
var first = new Date(t0 * 1000).toLocaleDateString();
|
||||
var last = new Date(t1 * 1000).toLocaleDateString();
|
||||
captionEl.textContent = spanDays < 1
|
||||
? "Showing all recorded history (tracking started " + first + ") — longer ranges will look different once more history builds up."
|
||||
: "Showing " + first + " – " + last;
|
||||
}
|
||||
}
|
||||
|
||||
var sortState = {}; // sortKey -> {key, dir}
|
||||
|
||||
function cellSortValue(row, colIndex) {
|
||||
var cell = row.children[colIndex];
|
||||
if (!cell) return "";
|
||||
if (cell.dataset.sortValue !== undefined) {
|
||||
if (cell.dataset.sortValue === "") return -Infinity;
|
||||
var n = parseFloat(cell.dataset.sortValue);
|
||||
return isNaN(n) ? -Infinity : n;
|
||||
}
|
||||
return cell.textContent.trim().toLowerCase();
|
||||
}
|
||||
|
||||
function initSortableTables(root) {
|
||||
root.querySelectorAll("table.sortable[data-sort-key]").forEach(function (table) {
|
||||
var sortKey = table.dataset.sortKey;
|
||||
var tbody = table.querySelector("tbody");
|
||||
if (!tbody) return;
|
||||
|
||||
function applySort(colKey, dir) {
|
||||
var colIndex = -1;
|
||||
table.querySelectorAll("th[data-sort]").forEach(function (th) {
|
||||
th.classList.remove("sort-asc", "sort-desc");
|
||||
if (th.dataset.sort === colKey) {
|
||||
colIndex = Array.prototype.indexOf.call(th.parentElement.children, th);
|
||||
th.classList.add(dir === 1 ? "sort-asc" : "sort-desc");
|
||||
}
|
||||
});
|
||||
if (colIndex === -1) return;
|
||||
var rows = Array.prototype.slice.call(tbody.querySelectorAll("tr"));
|
||||
rows.sort(function (a, b) {
|
||||
var av = cellSortValue(a, colIndex), bv = cellSortValue(b, colIndex);
|
||||
if (av < bv) return -1 * dir;
|
||||
if (av > bv) return 1 * dir;
|
||||
return 0;
|
||||
});
|
||||
rows.forEach(function (r) { tbody.appendChild(r); });
|
||||
}
|
||||
|
||||
table.querySelectorAll("th[data-sort]").forEach(function (th) {
|
||||
th.addEventListener("click", function () {
|
||||
var key = th.dataset.sort;
|
||||
var prev = sortState[sortKey];
|
||||
var dir = prev && prev.key === key ? prev.dir * -1 : 1;
|
||||
sortState[sortKey] = { key: key, dir: dir };
|
||||
applySort(key, dir);
|
||||
});
|
||||
});
|
||||
|
||||
var saved = sortState[sortKey];
|
||||
if (saved) applySort(saved.key, saved.dir);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// Advanced chart: candlesticks + Bollinger Bands + RSI
|
||||
// ---------------------------------------------------------------------
|
||||
|
||||
function initAdvancedCharts(root) {
|
||||
root.querySelectorAll("[data-advanced-chart]").forEach(function (wrap) {
|
||||
var currency = wrap.dataset.currency;
|
||||
var targetKey = "currency:" + currency;
|
||||
var simpleEls = wrap.querySelectorAll("[data-chart-simple]");
|
||||
var advancedWrap = wrap.querySelector("[data-chart-advanced]");
|
||||
var priceSvg = wrap.querySelector("[data-candle-price]");
|
||||
var rsiSvg = wrap.querySelector("[data-candle-rsi]");
|
||||
var candleEmptyEl = wrap.querySelector("[data-candle-empty]");
|
||||
var toggle = wrap.querySelector("[data-chart-mode-toggle]");
|
||||
var rangeControls = wrap.querySelector(".chart-controls");
|
||||
if (!toggle || !advancedWrap) return;
|
||||
|
||||
function setMode(mode) {
|
||||
chartModeState[targetKey] = mode;
|
||||
var advanced = mode === "advanced";
|
||||
advancedWrap.hidden = !advanced;
|
||||
simpleEls.forEach(function (el) { el.hidden = advanced; });
|
||||
toggle.textContent = advanced ? "Simple view" : "Advanced view";
|
||||
if (advanced) loadCandles();
|
||||
}
|
||||
|
||||
function currentRange() {
|
||||
var active = rangeControls && rangeControls.querySelector("button.active");
|
||||
return active ? active.dataset.range : "all";
|
||||
}
|
||||
|
||||
function loadCandles() {
|
||||
var candleKey = "candles:" + currency;
|
||||
fetchJSON(candleKey, "/api/candles/" + encodeURIComponent(currency) + "?range=" + currentRange())
|
||||
.then(function (series) {
|
||||
if (series === STALE) return;
|
||||
if (candleEmptyEl) candleEmptyEl.hidden = true;
|
||||
priceSvg.hidden = false;
|
||||
renderCandles(priceSvg, rsiSvg, series);
|
||||
})
|
||||
.catch(function (err) { showChartError(priceSvg, candleEmptyEl, null, err); });
|
||||
}
|
||||
|
||||
toggle.addEventListener("click", function () {
|
||||
setMode(chartModeState[targetKey] === "advanced" ? "simple" : "advanced");
|
||||
});
|
||||
if (rangeControls) {
|
||||
rangeControls.querySelectorAll("button[data-range]").forEach(function (btn) {
|
||||
btn.addEventListener("click", function () {
|
||||
if (chartModeState[targetKey] === "advanced") loadCandles();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setMode(chartModeState[targetKey] === "advanced" ? "advanced" : "simple");
|
||||
});
|
||||
}
|
||||
|
||||
function sma(values, period, idx) {
|
||||
if (idx + 1 < period) return null;
|
||||
var sum = 0;
|
||||
for (var i = idx + 1 - period; i <= idx; i++) sum += values[i];
|
||||
return sum / period;
|
||||
}
|
||||
|
||||
function renderCandles(priceSvg, rsiSvg, series) {
|
||||
if (!priceSvg) return;
|
||||
while (priceSvg.firstChild) priceSvg.removeChild(priceSvg.firstChild);
|
||||
if (rsiSvg) while (rsiSvg.firstChild) rsiSvg.removeChild(rsiSvg.firstChild);
|
||||
|
||||
var candles = series && series.candles ? series.candles : [];
|
||||
if (candles.length < 2) return;
|
||||
|
||||
var W = 600, PH = 260, ML = 56, MR = 12, MT = 10, MB = 4;
|
||||
var plotW = W - ML - MR, plotH = PH - MT - MB;
|
||||
priceSvg.setAttribute("viewBox", "0 0 " + W + " " + PH);
|
||||
|
||||
var lows = candles.map(function (c) { return c.l; });
|
||||
var highs = candles.map(function (c) { return c.h; });
|
||||
var bandVals = [];
|
||||
(series.bb_upper || []).forEach(function (v) { if (v !== null) bandVals.push(v); });
|
||||
(series.bb_lower || []).forEach(function (v) { if (v !== null) bandVals.push(v); });
|
||||
var min = Math.min.apply(null, lows.concat(bandVals.length ? bandVals : lows));
|
||||
var max = Math.max.apply(null, highs.concat(bandVals.length ? bandVals : highs));
|
||||
var range = (max - min) || 1;
|
||||
|
||||
var t0 = candles[0].t, t1 = candles[candles.length - 1].t;
|
||||
var tSpan = (t1 - t0) || 1;
|
||||
var slot = plotW / candles.length;
|
||||
|
||||
function xAt(i) { return ML + (i + 0.5) * slot; }
|
||||
function yAt(v) { return MT + (1 - (v - min) / range) * plotH; }
|
||||
|
||||
[min, (min + max) / 2, max].forEach(function (v) {
|
||||
var y = yAt(v);
|
||||
priceSvg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
|
||||
var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
|
||||
text.textContent = fmtAxisValue(v, "");
|
||||
priceSvg.appendChild(text);
|
||||
});
|
||||
|
||||
// Bollinger Bands band + lines. pathFor takes the y-scaler so it can be
|
||||
// reused for RSI below (0-100 scale) as well as price-scale series.
|
||||
function pathFor(arr, yFn) {
|
||||
var pts = [];
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (arr[i] === null || arr[i] === undefined) continue;
|
||||
pts.push(xAt(i).toFixed(2) + "," + yFn(arr[i]).toFixed(2));
|
||||
}
|
||||
return pts;
|
||||
}
|
||||
var upperPts = pathFor(series.bb_upper || [], yAt);
|
||||
var lowerPts = pathFor(series.bb_lower || [], yAt);
|
||||
if (upperPts.length && lowerPts.length) {
|
||||
var band = svgEl("polygon", { points: upperPts.join(" ") + " " + lowerPts.slice().reverse().join(" "), class: "bb-band" });
|
||||
priceSvg.appendChild(band);
|
||||
priceSvg.appendChild(svgEl("polyline", { points: upperPts.join(" "), class: "bb-line" }));
|
||||
priceSvg.appendChild(svgEl("polyline", { points: lowerPts.join(" "), class: "bb-line" }));
|
||||
}
|
||||
var midPts = pathFor(series.bb_middle || [], yAt);
|
||||
if (midPts.length) priceSvg.appendChild(svgEl("polyline", { points: midPts.join(" "), class: "bb-mid" }));
|
||||
|
||||
// Candlesticks
|
||||
candles.forEach(function (c, i) {
|
||||
var x = xAt(i);
|
||||
var up = c.c >= c.o;
|
||||
var cls = up ? "candle-up" : "candle-down";
|
||||
priceSvg.appendChild(svgEl("line", { x1: x, x2: x, y1: yAt(c.h), y2: yAt(c.l), class: "candle-wick " + cls }));
|
||||
var bodyTop = yAt(Math.max(c.o, c.c));
|
||||
var bodyH = Math.max(1, Math.abs(yAt(c.o) - yAt(c.c)));
|
||||
var bw = Math.max(1, slot * 0.6);
|
||||
priceSvg.appendChild(svgEl("rect", {
|
||||
x: (x - bw / 2).toFixed(2), y: bodyTop.toFixed(2),
|
||||
width: bw.toFixed(2), height: bodyH.toFixed(2), class: "candle-body " + cls,
|
||||
}));
|
||||
});
|
||||
|
||||
// X-axis dates (shared scale with RSI below): evenly spaced by time,
|
||||
// collision-avoided.
|
||||
pickTicks(candles, 5, 70, xAt).forEach(function (idx) {
|
||||
var text = svgEl("text", { x: xAt(idx), y: PH - 6, class: "chart-axis-label chart-axis-x" });
|
||||
text.textContent = fmtAxisDate(candles[idx].t, tSpan);
|
||||
priceSvg.appendChild(text);
|
||||
});
|
||||
|
||||
if (!rsiSvg) return;
|
||||
var RH = 90;
|
||||
rsiSvg.setAttribute("viewBox", "0 0 " + W + " " + RH);
|
||||
var rMT = 10, rMB = 20, rPlotH = RH - rMT - rMB;
|
||||
function ry(v) { return rMT + (1 - v / 100) * rPlotH; }
|
||||
[30, 50, 70].forEach(function (level) {
|
||||
var y = ry(level);
|
||||
rsiSvg.appendChild(svgEl("line", { x1: ML, x2: W - MR, y1: y, y2: y, class: "chart-grid" }));
|
||||
var text = svgEl("text", { x: ML - 8, y: y, class: "chart-axis-label chart-axis-y" });
|
||||
text.textContent = level;
|
||||
rsiSvg.appendChild(text);
|
||||
});
|
||||
var rsiPts = pathFor(series.rsi || [], ry);
|
||||
if (rsiPts.length) rsiSvg.appendChild(svgEl("polyline", { points: rsiPts.join(" "), class: "rsi-line" }));
|
||||
}
|
||||
|
||||
// Favourite star toggle works on any page (delegated), independent of tabs.
|
||||
document.addEventListener("click", function (e) {
|
||||
var btn = e.target.closest("[data-favourite-toggle]");
|
||||
if (!btn) return;
|
||||
var currency = btn.dataset.currency;
|
||||
var next = btn.dataset.favourite;
|
||||
fetch("/api/favourite", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: "currency=" + encodeURIComponent(currency) + "&favourite=" + next,
|
||||
}).then(function () {
|
||||
if (typeof refreshPanel === "function") refreshPanel("portfolio");
|
||||
});
|
||||
});
|
||||
|
||||
initTopbar();
|
||||
|
||||
if (!tabbar || !panels) {
|
||||
// Settings page: no tab system, just wire up any charts on the page.
|
||||
initPanel(document);
|
||||
return;
|
||||
}
|
||||
|
||||
var STORAGE_KEY = "basis:tabs";
|
||||
var FIXED_TABS = { portfolio: "Portfolio", transfers: "Transfers" };
|
||||
var page = body.dataset.page; // "portfolio" | "position" | "transfers"
|
||||
var current = body.dataset.current;
|
||||
|
||||
function loadStoredTabs() {
|
||||
try {
|
||||
var raw = sessionStorage.getItem(STORAGE_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
function saveStoredTabs(tabs) {
|
||||
try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(tabs)); } catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
var openTabs = loadStoredTabs().filter(function (c) { return c !== current; });
|
||||
if (page === "position" && current) openTabs.push(current);
|
||||
saveStoredTabs(openTabs);
|
||||
|
||||
var activeKey = page === "position" ? "pos:" + current : (FIXED_TABS[page] ? page : "portfolio");
|
||||
|
||||
function panelKey(id) { return FIXED_TABS[id] ? id : "pos:" + id; }
|
||||
function panelURL(id) {
|
||||
if (id === "portfolio") return "/api/panel/portfolio";
|
||||
if (id === "transfers") return "/api/panel/transfers";
|
||||
return "/api/panel/position/" + encodeURIComponent(id);
|
||||
}
|
||||
function pageURL(id) {
|
||||
if (id === "portfolio") return "/";
|
||||
if (id === "transfers") return "/transfers";
|
||||
return "/position/" + encodeURIComponent(id);
|
||||
}
|
||||
|
||||
function renderTabbar() {
|
||||
tabbar.innerHTML = "";
|
||||
function make(key, label, closable) {
|
||||
var btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "tab-btn" + (key === activeKey ? " active" : "");
|
||||
btn.setAttribute("role", "tab");
|
||||
var span = document.createElement("span");
|
||||
span.textContent = label;
|
||||
btn.appendChild(span);
|
||||
if (closable) {
|
||||
var close = document.createElement("span");
|
||||
close.className = "tab-close";
|
||||
close.textContent = "×";
|
||||
close.addEventListener("click", function (e) { e.stopPropagation(); closeTab(key); });
|
||||
btn.appendChild(close);
|
||||
}
|
||||
btn.addEventListener("click", function () {
|
||||
activateTab(FIXED_TABS[key] ? key : key.slice(4));
|
||||
});
|
||||
tabbar.appendChild(btn);
|
||||
}
|
||||
make("portfolio", "Portfolio", false);
|
||||
make("transfers", "Transfers", false);
|
||||
openTabs.forEach(function (c) { make("pos:" + c, c, true); });
|
||||
}
|
||||
|
||||
function ensurePanel(id) {
|
||||
var key = panelKey(id);
|
||||
var el = panels.querySelector('[data-panel="' + key + '"]');
|
||||
if (el) return Promise.resolve(el);
|
||||
el = document.createElement("div");
|
||||
el.className = "tab-panel";
|
||||
el.dataset.panel = key;
|
||||
panels.appendChild(el);
|
||||
return fetch(panelURL(id)).then(function (r) { return r.text(); }).then(function (html) {
|
||||
el.innerHTML = html;
|
||||
initPanel(el);
|
||||
return el;
|
||||
});
|
||||
}
|
||||
|
||||
function activateTab(id) {
|
||||
if (!FIXED_TABS[id] && openTabs.indexOf(id) === -1) {
|
||||
openTabs.push(id);
|
||||
saveStoredTabs(openTabs);
|
||||
}
|
||||
ensurePanel(id).then(function () {
|
||||
var key = panelKey(id);
|
||||
panels.querySelectorAll(".tab-panel").forEach(function (p) {
|
||||
p.classList.toggle("active", p.dataset.panel === key);
|
||||
});
|
||||
activeKey = key;
|
||||
renderTabbar();
|
||||
var url = pageURL(id);
|
||||
if (location.pathname !== url) history.pushState({ tab: id }, "", url);
|
||||
});
|
||||
}
|
||||
|
||||
function closeTab(key) {
|
||||
var currency = key.slice(4);
|
||||
openTabs = openTabs.filter(function (c) { return c !== currency; });
|
||||
saveStoredTabs(openTabs);
|
||||
var el = panels.querySelector('[data-panel="' + key + '"]');
|
||||
if (el) el.remove();
|
||||
if (activeKey === key) {
|
||||
activateTab("portfolio");
|
||||
} else {
|
||||
renderTabbar();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", function () {
|
||||
var path = location.pathname;
|
||||
if (path === "/") { activateTab("portfolio"); return; }
|
||||
if (path === "/transfers") { activateTab("transfers"); return; }
|
||||
var m = path.match(/^\/position\/([^/]+)/);
|
||||
if (m) activateTab(decodeURIComponent(m[1]));
|
||||
});
|
||||
|
||||
document.addEventListener("click", function (e) {
|
||||
var link = e.target.closest("[data-open-tab]");
|
||||
if (!link) return;
|
||||
e.preventDefault();
|
||||
activateTab(link.dataset.openTab);
|
||||
});
|
||||
|
||||
function refreshPanel(id) {
|
||||
if (!panels) return;
|
||||
var key = panelKey(id);
|
||||
var el = panels.querySelector('[data-panel="' + key + '"]');
|
||||
if (!el) return;
|
||||
fetch(panelURL(id)).then(function (r) { return r.text(); }).then(function (html) {
|
||||
el.innerHTML = html;
|
||||
initPanel(el);
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
var id = FIXED_TABS[activeKey] ? activeKey : activeKey.slice(4);
|
||||
refreshPanel(id);
|
||||
}, pollMs);
|
||||
|
||||
// --- initial render: wire up what the server already sent down. Other
|
||||
// previously-open tabs are NOT pre-created here — ensurePanel() lazily
|
||||
// fetches them the first time they're actually activated, whether by
|
||||
// clicking their tab button or a currency link. (A prior version created
|
||||
// empty placeholder panels here, which made ensurePanel() think they were
|
||||
// already loaded and skip fetching — that's the "only the last tab has
|
||||
// data after refresh" bug.) ---
|
||||
renderTabbar();
|
||||
var initialPanel = panels.querySelector(".tab-panel.active");
|
||||
if (initialPanel) initPanel(initialPanel);
|
||||
})();
|
||||
@@ -0,0 +1,563 @@
|
||||
:root {
|
||||
--bg: #0b0e11;
|
||||
--surface: #14181d;
|
||||
--surface-alt: #1b2027;
|
||||
--border: #232830;
|
||||
--text: #e6e8eb;
|
||||
--text-dim: #8b93a1;
|
||||
--gain: #3ddc84;
|
||||
--loss: #ff6b5e;
|
||||
--accent: #e8b34c;
|
||||
--font-body: "Inter", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a { color: inherit; }
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.topbar-total {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.6rem;
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.topbar-value {
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.topbar-pl {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.topbar nav a {
|
||||
text-decoration: none;
|
||||
color: var(--text-dim);
|
||||
margin-left: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.topbar nav a:hover, .topbar nav a:focus-visible {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.topbar nav a.active { color: var(--text); }
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 1.25rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-bottom: none;
|
||||
padding: 0.5rem 0.9rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.tab-btn .tab-close {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
padding: 0.1rem 0.25rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab-btn .tab-close:hover { color: var(--loss); background: var(--surface-alt); }
|
||||
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; }
|
||||
|
||||
.hero {
|
||||
padding: 2rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.hero-label {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: clamp(2rem, 6vw, 3.5rem);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.hero-pl, .hero-sub {
|
||||
margin-top: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.back {
|
||||
text-decoration: none;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.back:hover { color: var(--accent); }
|
||||
|
||||
.notice, .hint {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.notice a, .hint a { color: var(--accent); }
|
||||
|
||||
.notice.error { color: var(--loss); }
|
||||
|
||||
.qr-code {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0.75rem 0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.secret-key {
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.08em;
|
||||
background: var(--surface-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.logout-form { display: inline; margin-left: 1.5rem; }
|
||||
.logout-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-body);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.logout-btn:hover { color: var(--text); }
|
||||
|
||||
.login-body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.login-main { width: 100%; max-width: 380px; padding: 1.5rem; }
|
||||
|
||||
.login-panel { padding: 2rem; }
|
||||
|
||||
.login-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent);
|
||||
font-size: 1.3rem;
|
||||
margin: 0 0 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-panel .form { flex-direction: column; align-items: stretch; }
|
||||
.login-panel .form label { flex: none; }
|
||||
.login-panel button[type="submit"] { margin-top: 0.5rem; }
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-overlay[hidden] { display: none; }
|
||||
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.modal h2 { margin-top: 0; font-size: 1.05rem; }
|
||||
.modal .form { flex-direction: column; align-items: stretch; }
|
||||
.modal .form label { flex: none; }
|
||||
.modal button[type="submit"] { margin-top: 0.5rem; }
|
||||
|
||||
.empty { color: var(--text-dim); }
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
table.ledger {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.star-cell { width: 2rem; text-align: center !important; padding-left: 0.5rem !important; padding-right: 0.25rem !important; }
|
||||
|
||||
.star-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--border);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.15rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.star-btn:hover { color: var(--accent); }
|
||||
.star-btn.active { color: var(--accent); }
|
||||
|
||||
tr.is-favourite { background: rgba(232, 179, 76, 0.05); }
|
||||
|
||||
.ledger th, .ledger td {
|
||||
padding: 0.65rem 0.5rem;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.ledger th:first-of-type, .ledger td:first-of-type {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.ledger th:first-child, .ledger td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ledger th {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.ledger th[data-sort] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.ledger th[data-sort]:hover { color: var(--text); }
|
||||
.ledger th[data-sort]::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.6em;
|
||||
margin-left: 0.2em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ledger th[data-sort].sort-asc::after { content: "▲"; opacity: 1; color: var(--accent); }
|
||||
.ledger th[data-sort].sort-desc::after { content: "▼"; opacity: 1; color: var(--accent); }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 5px;
|
||||
background: var(--surface-alt);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.badge.buy { color: var(--gain); background: rgba(61, 220, 132, 0.12); }
|
||||
.badge.sell { color: var(--loss); background: rgba(255, 107, 94, 0.12); }
|
||||
.badge.deposit { color: var(--accent); background: rgba(232, 179, 76, 0.12); }
|
||||
.badge.withdrawal { color: var(--text-dim); background: var(--surface-alt); }
|
||||
|
||||
.ledger tbody tr:hover { background: var(--surface-alt); }
|
||||
.ledger tbody tr:last-child td { border-bottom: none; }
|
||||
|
||||
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
|
||||
.chip {
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: var(--surface-alt);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.chip.gain { color: var(--gain); background: rgba(61, 220, 132, 0.12); }
|
||||
.chip.loss { color: var(--loss); background: rgba(255, 107, 94, 0.12); }
|
||||
|
||||
.gain { color: var(--gain); }
|
||||
.loss { color: var(--loss); }
|
||||
.flat { color: var(--text-dim); }
|
||||
|
||||
#rows.pulse { animation: pulse 0.6s ease-out; }
|
||||
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem 1.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.status { color: var(--text-dim); font-size: 0.9rem; }
|
||||
.status.ok { color: var(--gain); }
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.form.grid label { min-width: 140px; }
|
||||
|
||||
.form label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
flex: 1 1 160px;
|
||||
}
|
||||
|
||||
.form input, .form select {
|
||||
background: var(--surface-alt);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 0.65rem;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form input:focus-visible, .form select:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: #14181d;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem 1.1rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover { filter: brightness(1.08); }
|
||||
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
|
||||
|
||||
.toggle-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggle-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.toggle-list li:last-child { border-bottom: none; }
|
||||
|
||||
.toggle {
|
||||
background: var(--surface-alt);
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
.toggle.is-hidden { color: var(--text-dim); }
|
||||
|
||||
.chart-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 1rem 1.25rem 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chart-controls button {
|
||||
background: var(--surface-alt);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
.chart-controls button.active { background: var(--accent); color: #14181d; }
|
||||
.chart-controls button.mode-toggle { margin-left: auto; }
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
aspect-ratio: 600 / 220;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.chart[hidden] { display: none; }
|
||||
|
||||
.chart-line {
|
||||
fill: none;
|
||||
stroke-width: 1.6;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
.chart-line.gain { stroke: var(--gain); }
|
||||
.chart-line.loss { stroke: var(--loss); }
|
||||
.chart-line.flat { stroke: var(--text-dim); }
|
||||
|
||||
.chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
|
||||
|
||||
.chart-axis-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
fill: var(--text-dim);
|
||||
}
|
||||
.chart-axis-y { text-anchor: end; dominant-baseline: middle; }
|
||||
.chart-axis-x { text-anchor: middle; }
|
||||
|
||||
.chart-empty { color: var(--text-dim); font-size: 0.85rem; padding: 2.5rem 0; text-align: center; }
|
||||
|
||||
.chart-caption { color: var(--text-dim); font-size: 0.78rem; margin: 0.4rem 0 0.75rem; }
|
||||
|
||||
.chart-sublabel { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0.75rem 0 0.25rem; }
|
||||
|
||||
.candle-chart { aspect-ratio: 600 / 260; }
|
||||
.rsi-chart { aspect-ratio: 600 / 90; margin-bottom: 0.5rem; }
|
||||
|
||||
.candle-wick { stroke-width: 1; vector-effect: non-scaling-stroke; }
|
||||
.candle-wick.candle-up { stroke: var(--gain); }
|
||||
.candle-wick.candle-down { stroke: var(--loss); }
|
||||
.candle-body.candle-up { fill: var(--gain); }
|
||||
.candle-body.candle-down { fill: var(--loss); }
|
||||
|
||||
.bb-band { fill: rgba(139, 147, 161, 0.08); stroke: none; }
|
||||
.bb-line { fill: none; stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
|
||||
.bb-mid { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
||||
.rsi-line { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
|
||||
|
||||
.staked-note { color: var(--text-dim); font-size: 0.78rem; }
|
||||
|
||||
@keyframes live-flash { from { background: rgba(232, 179, 76, 0.18); } to { background: transparent; } }
|
||||
.flash { animation: live-flash 0.8s ease-out; }
|
||||
tr.flash { animation: none; } /* row background flash would fight is-favourite tint; cells still flash individually via inherited rule below */
|
||||
tr[data-ws-symbol].flash td { animation: live-flash 0.8s ease-out; }
|
||||
|
||||
@media (max-width: 860px) {
|
||||
table.ledger thead { display: none; }
|
||||
table.ledger, table.ledger tbody, table.ledger tr, table.ledger td { display: block; width: 100%; }
|
||||
.table-scroll { overflow-x: visible; }
|
||||
table.ledger tr {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin: 0.6rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
}
|
||||
table.ledger td {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
padding: 0.45rem 0;
|
||||
text-align: right;
|
||||
white-space: normal;
|
||||
}
|
||||
table.ledger td:last-child { border-bottom: none; }
|
||||
table.ledger td::before {
|
||||
content: attr(data-label);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
text-align: left;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
table.ledger td.star-cell { justify-content: flex-end; padding: 0.3rem 0 !important; }
|
||||
table.ledger td.star-cell::before { content: ""; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar { padding: 1rem 1.25rem; }
|
||||
main { padding: 1.25rem; }
|
||||
.form { flex-direction: column; align-items: stretch; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#rows.pulse { animation: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user