dekun
1044 lines
29 KiB
JavaScript
1044 lines
29 KiB
JavaScript
/** 多周期 K 线 · SQLite 后端 + localStorage · 弹窗大图 Lightweight Charts */
|
||
|
||
const CHART_INTERVALS = ["5m", "15m", "30m", "1h", "4h", "1d", "1w"];
|
||
const INTERVAL_LIMITS = {
|
||
"5m": 1000,
|
||
"15m": 1000,
|
||
"30m": 1000,
|
||
"1h": 1000,
|
||
"4h": 1000,
|
||
"1d": 500,
|
||
"1w": 500,
|
||
};
|
||
|
||
const chartDataCache = new Map();
|
||
const chartQueue = [];
|
||
let chartQueueRunning = false;
|
||
const CHART_FETCH_GAP_MS = 120;
|
||
|
||
const LS_KLINE_PREFIX = "ba_kline_";
|
||
const KLINE_TTL_MS = 60 * 60 * 1000;
|
||
|
||
const COLORS = {
|
||
bg: "#0d1118",
|
||
grid: "#2a3548",
|
||
up: "#0ecb81",
|
||
down: "#f6465d",
|
||
volUp: "rgba(14, 203, 129, 0.55)",
|
||
volDown: "rgba(246, 70, 93, 0.55)",
|
||
text: "#8b9cb3",
|
||
};
|
||
|
||
const MINI_SIZE = { w: 380, h: 100 };
|
||
/** 弹窗 K 线区域固定尺寸（带鱼屏居中大图） */
|
||
const MODAL_CHART_SIZE = { w: 1920, h: 1080 };
|
||
/** 自动模式下右侧留空的 K 线根数 */
|
||
const CHART_RIGHT_OFFSET_BARS = 10;
|
||
const DEFAULT_MINI_INTERVAL = "1d";
|
||
|
||
let chartModalSymbol = "";
|
||
let chartModalInterval = "1d";
|
||
let lwcChart = null;
|
||
let lwcCandleSeries = null;
|
||
let lwcVolumeSeries = null;
|
||
let lwcResizeObserver = null;
|
||
let lwcPriceLines = [];
|
||
const symbolPriceMeta = new Map();
|
||
let lwcModalCandles = [];
|
||
let lwcModalInterval = "1d";
|
||
let lwcModalPriceMeta = { tick_size: "0.01", price_precision: 2 };
|
||
let lwcOnVisibleRangeChange = null;
|
||
let lwcOnCrosshairMove = null;
|
||
let lwcOnChartClick = null;
|
||
let lwcPinnedCandleTime = null;
|
||
|
||
const BINANCE_KLINE_WS = "wss://fstream.binance.com/ws";
|
||
let klineWs = null;
|
||
let klineWsSymbol = "";
|
||
let klineWsInterval = "";
|
||
let klineWsReconnectTimer = null;
|
||
let modalMetaBase = { count: 0, source: "db", interval: "1d" };
|
||
let highLowWsRaf = 0;
|
||
|
||
function cacheKey(symbol, interval) {
|
||
return `${symbol}:${interval}`;
|
||
}
|
||
|
||
function limitForInterval(interval) {
|
||
return INTERVAL_LIMITS[interval] || 500;
|
||
}
|
||
|
||
function modalChartSize() {
|
||
return {
|
||
w: Math.min(MODAL_CHART_SIZE.w, window.innerWidth - 32),
|
||
h: Math.min(MODAL_CHART_SIZE.h, window.innerHeight - 32),
|
||
};
|
||
}
|
||
|
||
function loadKlineFromLS(symbol, interval) {
|
||
try {
|
||
const raw = localStorage.getItem(LS_KLINE_PREFIX + symbol + "_" + interval);
|
||
if (!raw) return null;
|
||
const obj = JSON.parse(raw);
|
||
if (!obj?.candles?.length || Date.now() - (obj.ts || 0) > KLINE_TTL_MS) return null;
|
||
return obj;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function saveKlineToLS(symbol, interval, candles, source, priceMeta) {
|
||
try {
|
||
localStorage.setItem(
|
||
LS_KLINE_PREFIX + symbol + "_" + interval,
|
||
JSON.stringify({
|
||
ts: Date.now(),
|
||
candles,
|
||
source,
|
||
interval,
|
||
tick_size: priceMeta?.tick_size,
|
||
price_precision: priceMeta?.price_precision,
|
||
})
|
||
);
|
||
} catch {
|
||
/* quota */
|
||
}
|
||
}
|
||
|
||
function sourceLabel(source) {
|
||
if (source === "ws") return "实时";
|
||
if (source === "browser") return "浏览器";
|
||
if (source === "db") return "本地";
|
||
if (source === "db_stale") return "本地(旧)";
|
||
if (source === "memory") return "缓存";
|
||
return "同步";
|
||
}
|
||
|
||
function parseMinMove(tickSize) {
|
||
const n = Number(tickSize);
|
||
return Number.isFinite(n) && n > 0 ? n : 0.01;
|
||
}
|
||
|
||
function formatPrice(price, precision) {
|
||
return Number(price).toFixed(precision);
|
||
}
|
||
|
||
function formatVolume(val) {
|
||
const v = Number(val);
|
||
if (!Number.isFinite(v)) return "—";
|
||
if (v >= 1e8) return `${(v / 1e8).toFixed(2)}亿`;
|
||
if (v >= 1e4) return `${(v / 1e4).toFixed(2)}万`;
|
||
return v.toFixed(2);
|
||
}
|
||
|
||
function calcAmplitude(candle) {
|
||
const open = Number(candle.open);
|
||
const high = Number(candle.high);
|
||
const low = Number(candle.low);
|
||
if (!open) return "—";
|
||
return `${(((high - low) / open) * 100).toFixed(2)}%`;
|
||
}
|
||
|
||
function lwcTimeEquals(a, b) {
|
||
if (a == null || b == null) return false;
|
||
if (typeof a === "number" && typeof b === "number") return a === b;
|
||
if (typeof a === "object" && typeof b === "object") {
|
||
return a.year === b.year && a.month === b.month && a.day === b.day;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function findCandleByLwcTime(time) {
|
||
if (time == null) return null;
|
||
for (const c of lwcModalCandles) {
|
||
if (lwcTimeEquals(toLwcTime(c.time, lwcModalInterval), time)) return c;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function formatCandleTimeLabel(ms, interval) {
|
||
const d = new Date(ms);
|
||
if (interval === "1d" || interval === "1w") {
|
||
return d.toLocaleDateString("zh-CN");
|
||
}
|
||
return d.toLocaleString("zh-CN", {
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
hour12: false,
|
||
});
|
||
}
|
||
|
||
function renderOhlcPanel(candle, modeLabel) {
|
||
const panel = document.getElementById("chart-ohlc-panel");
|
||
if (!panel) return;
|
||
if (!candle) {
|
||
panel.innerHTML = '<span class="chart-ohlc-empty">—</span>';
|
||
return;
|
||
}
|
||
|
||
const precision = lwcModalPriceMeta.price_precision ?? 2;
|
||
const up = Number(candle.close) >= Number(candle.open);
|
||
const closeCls = up ? "up" : "down";
|
||
const vol = formatVolume(candle.quote_volume || candle.volume);
|
||
const timeLabel = formatCandleTimeLabel(candle.time, lwcModalInterval);
|
||
|
||
panel.innerHTML = `
|
||
<div class="chart-ohlc-head">
|
||
<span class="chart-ohlc-mode">${modeLabel}</span>
|
||
<span class="chart-ohlc-time">${timeLabel}</span>
|
||
</div>
|
||
<div class="chart-ohlc-row">
|
||
<span>开 <b>${formatPrice(candle.open, precision)}</b></span>
|
||
<span>高 <b class="up">${formatPrice(candle.high, precision)}</b></span>
|
||
<span>低 <b class="down">${formatPrice(candle.low, precision)}</b></span>
|
||
<span>收 <b class="${closeCls}">${formatPrice(candle.close, precision)}</b></span>
|
||
<span>量 <b>${vol}</b></span>
|
||
<span>振幅 <b>${calcAmplitude(candle)}</b></span>
|
||
</div>`;
|
||
}
|
||
|
||
function showLatestOhlcPanel() {
|
||
const last = lwcModalCandles[lwcModalCandles.length - 1];
|
||
renderOhlcPanel(last, "最新");
|
||
}
|
||
|
||
function updateOhlcFromTime(time, modeLabel) {
|
||
const candle = findCandleByLwcTime(time);
|
||
if (candle) renderOhlcPanel(candle, modeLabel);
|
||
}
|
||
|
||
function applyChartRightOffset() {
|
||
if (!lwcChart) return;
|
||
lwcChart.timeScale().applyOptions({ rightOffset: CHART_RIGHT_OFFSET_BARS });
|
||
}
|
||
|
||
function fitChartContent() {
|
||
if (!lwcChart) return;
|
||
applyChartRightOffset();
|
||
lwcChart.timeScale().fitContent();
|
||
}
|
||
|
||
function onChartAutoscale() {
|
||
if (!lwcChart) return;
|
||
lwcPinnedCandleTime = null;
|
||
fitChartContent();
|
||
lwcChart.priceScale("right").applyOptions({ autoScale: true });
|
||
requestAnimationFrame(() => {
|
||
updateHighLowForVisibleWindow();
|
||
showLatestOhlcPanel();
|
||
});
|
||
}
|
||
|
||
function unbindChartInteractions() {
|
||
if (lwcChart && lwcOnCrosshairMove) {
|
||
lwcChart.unsubscribeCrosshairMove(lwcOnCrosshairMove);
|
||
}
|
||
if (lwcChart && lwcOnChartClick) {
|
||
lwcChart.unsubscribeClick(lwcOnChartClick);
|
||
}
|
||
lwcOnCrosshairMove = null;
|
||
lwcOnChartClick = null;
|
||
}
|
||
|
||
function bindChartInteractions() {
|
||
if (!lwcChart) return;
|
||
unbindChartInteractions();
|
||
|
||
lwcOnCrosshairMove = (param) => {
|
||
if (lwcPinnedCandleTime != null) return;
|
||
if (param.time) {
|
||
updateOhlcFromTime(param.time, "当前");
|
||
return;
|
||
}
|
||
showLatestOhlcPanel();
|
||
};
|
||
|
||
lwcOnChartClick = (param) => {
|
||
if (!param.time) return;
|
||
if (lwcPinnedCandleTime != null && lwcTimeEquals(lwcPinnedCandleTime, param.time)) {
|
||
lwcPinnedCandleTime = null;
|
||
updateOhlcFromTime(param.time, "当前");
|
||
return;
|
||
}
|
||
lwcPinnedCandleTime = param.time;
|
||
updateOhlcFromTime(param.time, "选中");
|
||
};
|
||
|
||
lwcChart.subscribeCrosshairMove(lwcOnCrosshairMove);
|
||
lwcChart.subscribeClick(lwcOnChartClick);
|
||
}
|
||
|
||
function rememberPriceMeta(symbol, meta) {
|
||
if (!meta?.tick_size) return null;
|
||
const priceMeta = {
|
||
tick_size: meta.tick_size,
|
||
price_precision: Number(meta.price_precision ?? 2),
|
||
};
|
||
symbolPriceMeta.set(symbol, priceMeta);
|
||
return priceMeta;
|
||
}
|
||
|
||
function getPriceMeta(symbol, fallback) {
|
||
return (
|
||
symbolPriceMeta.get(symbol) ||
|
||
(fallback?.tick_size ? rememberPriceMeta(symbol, fallback) : null) || {
|
||
tick_size: "0.01",
|
||
price_precision: 2,
|
||
}
|
||
);
|
||
}
|
||
|
||
function findCandleExtremes(candles, interval) {
|
||
let maxHigh = -Infinity;
|
||
let minLow = Infinity;
|
||
let highTime = null;
|
||
let lowTime = null;
|
||
for (const c of candles) {
|
||
if (c.high > maxHigh) {
|
||
maxHigh = c.high;
|
||
highTime = toLwcTime(c.time, interval);
|
||
}
|
||
if (c.low < minLow) {
|
||
minLow = c.low;
|
||
lowTime = toLwcTime(c.time, interval);
|
||
}
|
||
}
|
||
return { maxHigh, minLow, highTime, lowTime };
|
||
}
|
||
|
||
function candlesInLogicalRange(candles, range) {
|
||
if (!range || !candles.length) return candles;
|
||
const from = Math.max(0, Math.floor(range.from));
|
||
const to = Math.min(candles.length - 1, Math.ceil(range.to));
|
||
if (from > to) return [];
|
||
return candles.slice(from, to + 1);
|
||
}
|
||
|
||
function updateHighLowForVisibleWindow() {
|
||
if (!lwcChart || !lwcCandleSeries || !lwcModalCandles.length) return;
|
||
const range = lwcChart.timeScale().getVisibleLogicalRange();
|
||
const visible = candlesInLogicalRange(lwcModalCandles, range);
|
||
const subset = visible.length ? visible : lwcModalCandles;
|
||
applyHighLowAnnotations(subset, lwcModalInterval, lwcModalPriceMeta);
|
||
}
|
||
|
||
function bindVisibleRangeHighLow() {
|
||
if (!lwcChart) return;
|
||
unbindVisibleRangeHighLow();
|
||
lwcOnVisibleRangeChange = () => {
|
||
updateHighLowForVisibleWindow();
|
||
};
|
||
lwcChart.timeScale().subscribeVisibleLogicalRangeChange(lwcOnVisibleRangeChange);
|
||
}
|
||
|
||
function unbindVisibleRangeHighLow() {
|
||
if (lwcChart && lwcOnVisibleRangeChange) {
|
||
lwcChart.timeScale().unsubscribeVisibleLogicalRangeChange(lwcOnVisibleRangeChange);
|
||
}
|
||
lwcOnVisibleRangeChange = null;
|
||
}
|
||
|
||
function toLwcTime(ms, interval) {
|
||
if (interval === "1d" || interval === "1w") {
|
||
const d = new Date(ms);
|
||
return {
|
||
year: d.getUTCFullYear(),
|
||
month: d.getUTCMonth() + 1,
|
||
day: d.getUTCDate(),
|
||
};
|
||
}
|
||
return Math.floor(ms / 1000);
|
||
}
|
||
|
||
function candlesToLwc(candles, interval) {
|
||
const ohlc = [];
|
||
const vol = [];
|
||
for (const c of candles) {
|
||
const t = toLwcTime(c.time, interval);
|
||
const up = c.close >= c.open;
|
||
ohlc.push({
|
||
time: t,
|
||
open: c.open,
|
||
high: c.high,
|
||
low: c.low,
|
||
close: c.close,
|
||
});
|
||
vol.push({
|
||
time: t,
|
||
value: Number(c.quote_volume || c.volume || 0),
|
||
color: up ? COLORS.volUp : COLORS.volDown,
|
||
});
|
||
}
|
||
return { ohlc, vol };
|
||
}
|
||
|
||
function upsertModalCandleFromWs(k) {
|
||
const candle = {
|
||
time: Number(k.t),
|
||
open: Number(k.o),
|
||
high: Number(k.h),
|
||
low: Number(k.l),
|
||
close: Number(k.c),
|
||
volume: Number(k.v),
|
||
quote_volume: Number(k.q),
|
||
};
|
||
const idx = lwcModalCandles.findIndex((c) => c.time === candle.time);
|
||
if (idx >= 0) {
|
||
lwcModalCandles[idx] = candle;
|
||
} else if (
|
||
!lwcModalCandles.length ||
|
||
candle.time > lwcModalCandles[lwcModalCandles.length - 1].time
|
||
) {
|
||
lwcModalCandles.push(candle);
|
||
const max = limitForInterval(lwcModalInterval);
|
||
while (lwcModalCandles.length > max) lwcModalCandles.shift();
|
||
}
|
||
return candle;
|
||
}
|
||
|
||
function applyRealtimeCandle(candle) {
|
||
if (!lwcCandleSeries || !lwcVolumeSeries) return;
|
||
const t = toLwcTime(candle.time, lwcModalInterval);
|
||
const up = candle.close >= candle.open;
|
||
lwcCandleSeries.update({
|
||
time: t,
|
||
open: candle.open,
|
||
high: candle.high,
|
||
low: candle.low,
|
||
close: candle.close,
|
||
});
|
||
lwcVolumeSeries.update({
|
||
time: t,
|
||
value: Number(candle.quote_volume || candle.volume || 0),
|
||
color: up ? COLORS.volUp : COLORS.volDown,
|
||
});
|
||
}
|
||
|
||
function syncChartCacheFromModal() {
|
||
const key = cacheKey(chartModalSymbol, lwcModalInterval);
|
||
const cached = chartDataCache.get(key);
|
||
if (cached) {
|
||
cached.candles = lwcModalCandles.slice();
|
||
cached.source = "ws";
|
||
}
|
||
}
|
||
|
||
function scheduleHighLowFromWs() {
|
||
if (highLowWsRaf) return;
|
||
highLowWsRaf = requestAnimationFrame(() => {
|
||
highLowWsRaf = 0;
|
||
updateHighLowForVisibleWindow();
|
||
});
|
||
}
|
||
|
||
function onWsKlineUpdate(k) {
|
||
const candle = upsertModalCandleFromWs(k);
|
||
applyRealtimeCandle(candle);
|
||
syncChartCacheFromModal();
|
||
if (lwcPinnedCandleTime == null) {
|
||
renderOhlcPanel(candle, "实时");
|
||
}
|
||
scheduleHighLowFromWs();
|
||
}
|
||
|
||
function isKlineWsLive() {
|
||
return klineWs?.readyState === WebSocket.OPEN;
|
||
}
|
||
|
||
function updateModalHint() {
|
||
const hint = document.getElementById("chart-modal-hint");
|
||
if (!hint) return;
|
||
const src = isKlineWsLive() ? "实时 WS" : sourceLabel(modalMetaBase.source);
|
||
hint.textContent = `${modalMetaBase.count} 根 · ${src} · 十字线看当前 · 点击选中 · Esc 关闭`;
|
||
}
|
||
|
||
function disconnectKlineWs() {
|
||
if (klineWsReconnectTimer) {
|
||
clearTimeout(klineWsReconnectTimer);
|
||
klineWsReconnectTimer = null;
|
||
}
|
||
if (klineWs) {
|
||
klineWs.onopen = null;
|
||
klineWs.onmessage = null;
|
||
klineWs.onclose = null;
|
||
klineWs.onerror = null;
|
||
try {
|
||
klineWs.close();
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
klineWs = null;
|
||
}
|
||
klineWsSymbol = "";
|
||
klineWsInterval = "";
|
||
}
|
||
|
||
function scheduleKlineWsReconnect() {
|
||
if (!chartModalSymbol || klineWsReconnectTimer) return;
|
||
klineWsReconnectTimer = setTimeout(() => {
|
||
klineWsReconnectTimer = null;
|
||
if (chartModalSymbol) connectKlineWs(chartModalSymbol, chartModalInterval);
|
||
}, 3000);
|
||
}
|
||
|
||
function connectKlineWs(symbol, interval) {
|
||
disconnectKlineWs();
|
||
const sym = symbol.toUpperCase();
|
||
const iv = interval.toLowerCase();
|
||
klineWsSymbol = sym;
|
||
klineWsInterval = iv;
|
||
|
||
const ws = new WebSocket(`${BINANCE_KLINE_WS}/${sym.toLowerCase()}@kline_${iv}`);
|
||
klineWs = ws;
|
||
|
||
ws.onopen = () => updateModalHint();
|
||
|
||
ws.onmessage = (ev) => {
|
||
try {
|
||
const msg = JSON.parse(ev.data);
|
||
if (msg.e !== "kline" || !msg.k) return;
|
||
if (msg.k.s !== sym || msg.k.i !== iv) return;
|
||
onWsKlineUpdate(msg.k);
|
||
} catch {
|
||
/* ignore malformed */
|
||
}
|
||
};
|
||
|
||
ws.onclose = () => {
|
||
if (klineWs === ws) {
|
||
klineWs = null;
|
||
updateModalHint();
|
||
if (chartModalSymbol && klineWsSymbol === sym && klineWsInterval === iv) {
|
||
scheduleKlineWsReconnect();
|
||
}
|
||
}
|
||
};
|
||
|
||
ws.onerror = () => updateModalHint();
|
||
}
|
||
|
||
function enqueueCharts(root) {
|
||
root.querySelectorAll(".mini-chart[data-symbol]").forEach((box) => {
|
||
const symbol = box.dataset.symbol;
|
||
if (!symbol || box.dataset.loaded === "1" || box.dataset.loading === "1") return;
|
||
chartQueue.push(box);
|
||
});
|
||
runChartQueue();
|
||
}
|
||
|
||
async function runChartQueue() {
|
||
if (chartQueueRunning) return;
|
||
chartQueueRunning = true;
|
||
while (chartQueue.length) {
|
||
const box = chartQueue.shift();
|
||
if (!box || !box.isConnected) continue;
|
||
await loadMiniChart(box);
|
||
await sleep(CHART_FETCH_GAP_MS);
|
||
}
|
||
chartQueueRunning = false;
|
||
}
|
||
|
||
function sleep(ms) {
|
||
return new Promise((r) => setTimeout(r, ms));
|
||
}
|
||
|
||
function volOf(c) {
|
||
return Number(c.quote_volume || c.volume || 0);
|
||
}
|
||
|
||
function setupCanvas(canvas, displayW, displayH) {
|
||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||
canvas.style.width = `${displayW}px`;
|
||
canvas.style.height = `${displayH}px`;
|
||
const pw = Math.floor(displayW * dpr);
|
||
const ph = Math.floor(displayH * dpr);
|
||
if (canvas.width !== pw || canvas.height !== ph) {
|
||
canvas.width = pw;
|
||
canvas.height = ph;
|
||
}
|
||
const ctx = canvas.getContext("2d");
|
||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
return { ctx, w: displayW, h: displayH };
|
||
}
|
||
|
||
function drawCandlestickChart(canvas, candles, options = {}) {
|
||
if (!canvas || !candles.length) return;
|
||
|
||
const large = options.large === true;
|
||
const size = large ? modalChartSize() : MINI_SIZE;
|
||
const volRatio = large ? 0.22 : 0.32;
|
||
const pad = large
|
||
? { t: 16, r: 16, b: 28, l: 56 }
|
||
: { t: 6, r: 6, b: 14, l: 6 };
|
||
|
||
const { ctx, w, h } = setupCanvas(canvas, size.w, size.h);
|
||
const priceH = (h - pad.t - pad.b) * (1 - volRatio);
|
||
const volH = (h - pad.t - pad.b) * volRatio;
|
||
const volTop = pad.t + priceH + (large ? 8 : 4);
|
||
const plotW = w - pad.l - pad.r;
|
||
const n = candles.length;
|
||
const step = plotW / n;
|
||
|
||
let pMin = Infinity;
|
||
let pMax = -Infinity;
|
||
let vMax = 0;
|
||
for (const c of candles) {
|
||
pMin = Math.min(pMin, c.low);
|
||
pMax = Math.max(pMax, c.high);
|
||
vMax = Math.max(vMax, volOf(c));
|
||
}
|
||
const pRange = pMax - pMin || 1;
|
||
vMax = vMax || 1;
|
||
|
||
const yPrice = (p) => pad.t + priceH * (1 - (p - pMin) / pRange);
|
||
const yVol = (v) => volTop + volH * (1 - v / vMax);
|
||
|
||
ctx.clearRect(0, 0, w, h);
|
||
ctx.fillStyle = COLORS.bg;
|
||
ctx.fillRect(0, 0, w, h);
|
||
|
||
ctx.strokeStyle = COLORS.grid;
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(pad.l, volTop - 2);
|
||
ctx.lineTo(w - pad.r, volTop - 2);
|
||
ctx.stroke();
|
||
|
||
const bodyW = Math.max(large ? 2 : 1, step * (large ? 0.72 : 0.68));
|
||
|
||
for (let i = 0; i < n; i++) {
|
||
const c = candles[i];
|
||
const up = c.close >= c.open;
|
||
const x = pad.l + i * step + step / 2;
|
||
const color = up ? COLORS.up : COLORS.down;
|
||
const volColor = up ? COLORS.volUp : COLORS.volDown;
|
||
|
||
const yHigh = yPrice(c.high);
|
||
const yLow = yPrice(c.low);
|
||
const yOpen = yPrice(c.open);
|
||
const yClose = yPrice(c.close);
|
||
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = large ? 1.5 : 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, yHigh);
|
||
ctx.lineTo(x, yLow);
|
||
ctx.stroke();
|
||
|
||
const top = Math.min(yOpen, yClose);
|
||
const bodyHeight = Math.max(large ? 2 : 1, Math.abs(yClose - yOpen));
|
||
ctx.fillStyle = color;
|
||
ctx.fillRect(x - bodyW / 2, top, bodyW, bodyHeight);
|
||
|
||
const v = volOf(c);
|
||
const barH = volH * (v / vMax);
|
||
if (barH > 0.5) {
|
||
ctx.fillStyle = volColor;
|
||
ctx.fillRect(x - bodyW / 2, yVol(v), bodyW, barH);
|
||
}
|
||
}
|
||
}
|
||
|
||
function drawEmptyChart(canvas) {
|
||
if (!canvas) return;
|
||
const { ctx, w, h } = setupCanvas(canvas, MINI_SIZE.w, MINI_SIZE.h);
|
||
ctx.fillStyle = "#1a2332";
|
||
ctx.fillRect(0, 0, w, h);
|
||
ctx.fillStyle = COLORS.text;
|
||
ctx.font = "13px sans-serif";
|
||
ctx.fillText("暂无数据", w / 2 - 28, h / 2);
|
||
}
|
||
|
||
async function fetchKlines(symbol, interval = DEFAULT_MINI_INTERVAL, forceRefresh = false) {
|
||
const key = cacheKey(symbol, interval);
|
||
if (!forceRefresh) {
|
||
const cached = chartDataCache.get(key);
|
||
if (cached) return cached;
|
||
|
||
const ls = loadKlineFromLS(symbol, interval);
|
||
if (ls) {
|
||
const priceMeta = rememberPriceMeta(symbol, ls);
|
||
const result = {
|
||
candles: ls.candles,
|
||
source: ls.source || "browser",
|
||
interval,
|
||
tick_size: priceMeta?.tick_size,
|
||
price_precision: priceMeta?.price_precision,
|
||
};
|
||
chartDataCache.set(key, result);
|
||
return result;
|
||
}
|
||
}
|
||
|
||
const limit = limitForInterval(interval);
|
||
const refreshQ = forceRefresh ? "&refresh=true" : "";
|
||
const res = await fetch(`/api/chart/${symbol}?interval=${interval}&limit=${limit}${refreshQ}`);
|
||
if (!res.ok) {
|
||
const err = await res.json().catch(() => ({}));
|
||
throw new Error(err.detail || res.statusText);
|
||
}
|
||
const data = await res.json();
|
||
const priceMeta = rememberPriceMeta(symbol, data);
|
||
const result = {
|
||
candles: data.candles || [],
|
||
source: data.source || "db",
|
||
interval,
|
||
tick_size: priceMeta.tick_size,
|
||
price_precision: priceMeta.price_precision,
|
||
};
|
||
chartDataCache.set(key, result);
|
||
saveKlineToLS(symbol, interval, result.candles, result.source, priceMeta);
|
||
return result;
|
||
}
|
||
|
||
async function loadMiniChart(box) {
|
||
const symbol = box.dataset.symbol;
|
||
if (!symbol) return;
|
||
box.dataset.loading = "1";
|
||
const canvas = box.querySelector("canvas");
|
||
const status = box.querySelector(".chart-status");
|
||
if (status) status.textContent = "加载…";
|
||
|
||
try {
|
||
const { candles, source } = await fetchKlines(symbol, DEFAULT_MINI_INTERVAL);
|
||
if (!candles.length) throw new Error("无K线数据");
|
||
drawCandlestickChart(canvas, candles, { large: false });
|
||
box.dataset.loaded = "1";
|
||
if (status) status.textContent = `${candles.length}日·${sourceLabel(source)}`;
|
||
box.title = `${symbol} 日K ${candles.length}根 (${sourceLabel(source)})，点击查看大图`;
|
||
} catch (e) {
|
||
if (status) status.textContent = "—";
|
||
box.title = `${symbol}: ${e.message}`;
|
||
drawEmptyChart(canvas);
|
||
} finally {
|
||
box.dataset.loading = "0";
|
||
}
|
||
}
|
||
|
||
function destroyLwcChart() {
|
||
disconnectKlineWs();
|
||
unbindVisibleRangeHighLow();
|
||
unbindChartInteractions();
|
||
clearHighLowAnnotations();
|
||
lwcModalCandles = [];
|
||
lwcPinnedCandleTime = null;
|
||
if (lwcResizeObserver) {
|
||
lwcResizeObserver.disconnect();
|
||
lwcResizeObserver = null;
|
||
}
|
||
if (lwcChart) {
|
||
lwcChart.remove();
|
||
lwcChart = null;
|
||
lwcCandleSeries = null;
|
||
lwcVolumeSeries = null;
|
||
}
|
||
}
|
||
|
||
function clearHighLowAnnotations() {
|
||
if (lwcCandleSeries) {
|
||
lwcPriceLines.forEach((line) => {
|
||
try {
|
||
lwcCandleSeries.removePriceLine(line);
|
||
} catch {
|
||
/* already removed */
|
||
}
|
||
});
|
||
lwcCandleSeries.setMarkers([]);
|
||
}
|
||
lwcPriceLines = [];
|
||
}
|
||
|
||
function applySeriesPriceFormat(priceMeta) {
|
||
if (!lwcCandleSeries) return;
|
||
const precision = priceMeta.price_precision;
|
||
const minMove = parseMinMove(priceMeta.tick_size);
|
||
lwcCandleSeries.applyOptions({
|
||
priceFormat: {
|
||
type: "price",
|
||
precision,
|
||
minMove,
|
||
},
|
||
});
|
||
}
|
||
|
||
function applyHighLowAnnotations(candles, interval, priceMeta) {
|
||
if (!lwcCandleSeries || !candles.length) return;
|
||
clearHighLowAnnotations();
|
||
|
||
const { maxHigh, minLow, highTime, lowTime } = findCandleExtremes(candles, interval);
|
||
if (!Number.isFinite(maxHigh) || !Number.isFinite(minLow)) return;
|
||
|
||
const precision = priceMeta.price_precision;
|
||
const highText = formatPrice(maxHigh, precision);
|
||
const lowText = formatPrice(minLow, precision);
|
||
|
||
lwcPriceLines.push(
|
||
lwcCandleSeries.createPriceLine({
|
||
price: maxHigh,
|
||
color: COLORS.up,
|
||
lineWidth: 1,
|
||
lineStyle: LightweightCharts.LineStyle.Dotted,
|
||
axisLabelVisible: true,
|
||
title: `最高 ${highText}`,
|
||
}),
|
||
lwcCandleSeries.createPriceLine({
|
||
price: minLow,
|
||
color: COLORS.down,
|
||
lineWidth: 1,
|
||
lineStyle: LightweightCharts.LineStyle.Dotted,
|
||
axisLabelVisible: true,
|
||
title: `最低 ${lowText}`,
|
||
})
|
||
);
|
||
|
||
const markers = [];
|
||
if (highTime != null) {
|
||
markers.push({
|
||
time: highTime,
|
||
position: "aboveBar",
|
||
color: COLORS.up,
|
||
shape: "circle",
|
||
text: `高 ${highText}`,
|
||
});
|
||
}
|
||
if (lowTime != null) {
|
||
markers.push({
|
||
time: lowTime,
|
||
position: "belowBar",
|
||
color: COLORS.down,
|
||
shape: "circle",
|
||
text: `低 ${lowText}`,
|
||
});
|
||
}
|
||
lwcCandleSeries.setMarkers(markers);
|
||
}
|
||
|
||
function ensureLwcChart(container) {
|
||
if (typeof LightweightCharts === "undefined") {
|
||
container.innerHTML = '<p class="chart-lwc-fallback">图表库加载失败</p>';
|
||
return null;
|
||
}
|
||
|
||
destroyLwcChart();
|
||
const { w, h } = modalChartSize();
|
||
container.style.width = `${w}px`;
|
||
container.style.height = `${h}px`;
|
||
|
||
lwcChart = LightweightCharts.createChart(container, {
|
||
width: w,
|
||
height: h,
|
||
layout: {
|
||
background: { color: COLORS.bg },
|
||
textColor: COLORS.text,
|
||
},
|
||
grid: {
|
||
vertLines: { visible: false },
|
||
horzLines: { visible: false },
|
||
},
|
||
crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
|
||
rightPriceScale: { borderColor: COLORS.grid },
|
||
timeScale: {
|
||
borderColor: COLORS.grid,
|
||
timeVisible: true,
|
||
secondsVisible: false,
|
||
rightOffset: CHART_RIGHT_OFFSET_BARS,
|
||
},
|
||
});
|
||
|
||
lwcCandleSeries = lwcChart.addCandlestickSeries({
|
||
upColor: COLORS.up,
|
||
downColor: COLORS.down,
|
||
borderUpColor: COLORS.up,
|
||
borderDownColor: COLORS.down,
|
||
wickUpColor: COLORS.up,
|
||
wickDownColor: COLORS.down,
|
||
});
|
||
|
||
lwcVolumeSeries = lwcChart.addHistogramSeries({
|
||
priceFormat: { type: "volume" },
|
||
priceScaleId: "",
|
||
});
|
||
lwcVolumeSeries.priceScale().applyOptions({
|
||
scaleMargins: { top: 0.82, bottom: 0 },
|
||
});
|
||
|
||
lwcResizeObserver = new ResizeObserver(() => {
|
||
if (!lwcChart || !container.isConnected) return;
|
||
const rect = container.getBoundingClientRect();
|
||
if (rect.width > 0 && rect.height > 0) {
|
||
lwcChart.applyOptions({ width: rect.width, height: rect.height });
|
||
}
|
||
});
|
||
lwcResizeObserver.observe(container);
|
||
|
||
bindVisibleRangeHighLow();
|
||
bindChartInteractions();
|
||
|
||
return lwcChart;
|
||
}
|
||
|
||
function renderLwcChart(candles, interval, priceMeta) {
|
||
const container = document.getElementById("chart-modal-container");
|
||
if (!container) return;
|
||
|
||
if (!lwcChart) ensureLwcChart(container);
|
||
if (!lwcCandleSeries || !lwcVolumeSeries) return;
|
||
|
||
const meta = getPriceMeta(chartModalSymbol, priceMeta);
|
||
applySeriesPriceFormat(meta);
|
||
|
||
lwcModalCandles = candles;
|
||
lwcModalInterval = interval;
|
||
lwcModalPriceMeta = meta;
|
||
lwcPinnedCandleTime = null;
|
||
|
||
const { ohlc, vol } = candlesToLwc(candles, interval);
|
||
lwcCandleSeries.setData(ohlc);
|
||
lwcVolumeSeries.setData(vol);
|
||
fitChartContent();
|
||
requestAnimationFrame(() => {
|
||
updateHighLowForVisibleWindow();
|
||
showLatestOhlcPanel();
|
||
});
|
||
}
|
||
|
||
function updateIntervalTabs() {
|
||
document.querySelectorAll(".chart-interval-btn").forEach((btn) => {
|
||
btn.classList.toggle("active", btn.dataset.interval === chartModalInterval);
|
||
});
|
||
}
|
||
|
||
function updateModalMeta(candles, source, interval) {
|
||
modalMetaBase = { count: candles.length, source, interval };
|
||
const title = document.getElementById("chart-modal-title");
|
||
if (title) {
|
||
title.textContent = `${chartModalSymbol} · ${interval.toUpperCase()} K线`;
|
||
}
|
||
updateModalHint();
|
||
}
|
||
|
||
async function loadModalChart(interval) {
|
||
chartModalInterval = interval;
|
||
updateIntervalTabs();
|
||
|
||
const container = document.getElementById("chart-modal-container");
|
||
const hint = document.getElementById("chart-modal-hint");
|
||
if (hint) hint.textContent = "加载中…";
|
||
|
||
try {
|
||
const { candles, source, tick_size, price_precision } = await fetchKlines(
|
||
chartModalSymbol,
|
||
interval,
|
||
true
|
||
);
|
||
if (!candles.length) throw new Error("无K线数据");
|
||
renderLwcChart(candles, interval, { tick_size, price_precision });
|
||
updateModalMeta(candles, source, interval);
|
||
connectKlineWs(chartModalSymbol, interval);
|
||
} catch (e) {
|
||
disconnectKlineWs();
|
||
if (hint) hint.textContent = `加载失败: ${e.message}`;
|
||
destroyLwcChart();
|
||
if (container) {
|
||
container.innerHTML = `<p class="chart-lwc-fallback">${e.message}</p>`;
|
||
}
|
||
}
|
||
}
|
||
|
||
function closeChartModal() {
|
||
const modal = document.getElementById("chart-modal");
|
||
if (!modal) return;
|
||
modal.classList.add("hidden");
|
||
destroyLwcChart();
|
||
chartModalSymbol = "";
|
||
}
|
||
|
||
async function openChartModal(symbol) {
|
||
const key = cacheKey(symbol, DEFAULT_MINI_INTERVAL);
|
||
const cached = chartDataCache.get(key);
|
||
if (!cached?.candles?.length) {
|
||
try {
|
||
await fetchKlines(symbol, DEFAULT_MINI_INTERVAL);
|
||
} catch {
|
||
return;
|
||
}
|
||
}
|
||
|
||
chartModalSymbol = symbol;
|
||
chartModalInterval = DEFAULT_MINI_INTERVAL;
|
||
|
||
const modal = document.getElementById("chart-modal");
|
||
modal.classList.remove("hidden");
|
||
|
||
const container = document.getElementById("chart-modal-container");
|
||
if (container) container.innerHTML = "";
|
||
|
||
await loadModalChart(DEFAULT_MINI_INTERVAL);
|
||
}
|
||
|
||
function setupChartModal() {
|
||
let modal = document.getElementById("chart-modal");
|
||
if (!modal) {
|
||
modal = document.createElement("div");
|
||
modal.id = "chart-modal";
|
||
modal.className = "chart-modal hidden";
|
||
modal.innerHTML = `
|
||
<div class="chart-modal-inner">
|
||
<button type="button" class="chart-modal-close" aria-label="关闭">×</button>
|
||
<div class="chart-modal-head">
|
||
<h3 id="chart-modal-title"></h3>
|
||
<div class="chart-interval-tabs" id="chart-interval-tabs"></div>
|
||
</div>
|
||
<p class="chart-modal-hint" id="chart-modal-hint"></p>
|
||
<div class="chart-modal-canvas-wrap">
|
||
<div id="chart-ohlc-panel" class="chart-ohlc-panel"></div>
|
||
<button type="button" id="chart-autoscale-btn" class="chart-autoscale-btn">自动</button>
|
||
<div id="chart-modal-container" class="chart-lwc-container"></div>
|
||
</div>
|
||
</div>`;
|
||
document.body.appendChild(modal);
|
||
|
||
const tabs = modal.querySelector("#chart-interval-tabs");
|
||
CHART_INTERVALS.forEach((iv) => {
|
||
const btn = document.createElement("button");
|
||
btn.type = "button";
|
||
btn.className = "chart-interval-btn";
|
||
btn.dataset.interval = iv;
|
||
btn.textContent = iv;
|
||
btn.addEventListener("click", () => {
|
||
if (iv === chartModalInterval || !chartModalSymbol) return;
|
||
loadModalChart(iv);
|
||
});
|
||
tabs.appendChild(btn);
|
||
});
|
||
|
||
modal.querySelector(".chart-modal-close").onclick = closeChartModal;
|
||
document.getElementById("chart-autoscale-btn")?.addEventListener("click", onChartAutoscale);
|
||
modal.addEventListener("click", (e) => {
|
||
if (e.target === modal) closeChartModal();
|
||
});
|
||
document.addEventListener("keydown", (e) => {
|
||
if (e.key === "Escape") closeChartModal();
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
if (!chartModalSymbol || !lwcChart) return;
|
||
const container = document.getElementById("chart-modal-container");
|
||
if (!container?.isConnected) return;
|
||
const { w, h } = modalChartSize();
|
||
container.style.width = `${w}px`;
|
||
container.style.height = `${h}px`;
|
||
lwcChart.applyOptions({ width: w, height: h });
|
||
});
|
||
}
|
||
|
||
document.body.addEventListener("click", (e) => {
|
||
const box = e.target.closest(".mini-chart[data-symbol]");
|
||
if (!box || box.dataset.loaded !== "1") return;
|
||
openChartModal(box.dataset.symbol);
|
||
});
|
||
}
|
||
|
||
setupChartModal();
|