@363045841yyt/klinechart 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,84 +1,862 @@
-import { createElementBlock, createElementVNode, defineComponent, nextTick, onMounted, onUnmounted, openBlock, ref, watch } from "vue";
-function getKLineTrend(e) {
-	return e.open > e.close ? "down" : e.open < e.close ? "up" : "flat";
-}
-function priceToY(e, n, r, i, a, o) {
-	let s = n - r || 1, c = (e - r) / s;
-	return a + Math.max(1, i - a - o) * (1 - c);
-}
-var tagStyle = {
-	info: "background:#1677ff;color:#fff;border:1px solid #1677ff;",
-	success: "background:#389e0d;color:#fff;border:1px solid #389e0d;",
-	warn: "background:#d46b08;color:#fff;border:1px solid #d46b08;",
-	error: "background:#cf1322;color:#fff;border:1px solid #cf1322;"
-}, leftBase = "padding:4px 8px;font-weight:600;border-radius:6px;", rightBase = "padding:4px 10px;border:1px solid #d9d9d9;background:#fff;color:#111;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;";
-function tagLog(e, n, r) {
-	console.log(`%c${n}%c`, `${leftBase}${tagStyle[e]}`, rightBase, r);
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, withModifiers } from "vue";
+function formatDateToYYYYMMDD(r) {
+	let s = new Intl.DateTimeFormat("zh-CN", {
+		timeZone: "Asia/Shanghai",
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(new Date(r)).reduce((r, s) => (s.type !== "literal" && (r[s.type] = s.value), r), {});
+	return `${s.year}-${s.month}-${s.day}`;
+}
+function formatMonthOrYear(r) {
+	let s = new Date(r), c = s.getFullYear(), l = s.getMonth() + 1;
+	return l === 1 ? {
+		text: String(c),
+		isYear: !0
+	} : {
+		text: String(l).padStart(2, "0"),
+		isYear: !1
+	};
+}
+function monthKey(r) {
+	let s = new Date(r);
+	return `${s.getFullYear()}-${s.getMonth()}`;
+}
+const formatShanghaiDate = formatDateToYYYYMMDD, formatYMDShanghai = formatDateToYYYYMMDD, NEUTRAL_COLOR = "rgba(0, 0, 0, 0.78)";
+function getUpDownColor(r) {
+	return r > 0 ? "rgba(214, 10, 34, 1)" : r < 0 ? "rgba(3, 123, 102, 1)" : NEUTRAL_COLOR;
+}
+function formatWanYi(r, s = 2) {
+	let c = Math.abs(r);
+	return c >= 1e8 ? `${(r / 1e8).toFixed(s)}亿` : c >= 1e4 ? `${(r / 1e4).toFixed(s)}万` : `${Math.round(r)}`;
+}
+function formatSignedNumber(r, s = 2) {
+	return `${r > 0 ? "+" : ""}${r.toFixed(s)}`;
+}
+function formatPercent(r, s = 2) {
+	return `${r.toFixed(s)}%`;
+}
+function formatSignedPercent(r, s = 2) {
+	return `${r > 0 ? "+" : ""}${r.toFixed(s)}%`;
+}
+function calcOpenColor(r, s) {
+	let c = s?.close ?? r.open;
+	return getUpDownColor(r.open - c);
+}
+function calcCloseColor(r) {
+	return getUpDownColor(r.close - r.open);
+}
+function calcChangeColor(r) {
+	return typeof r.changePercent == "number" ? getUpDownColor(r.changePercent) : typeof r.changeAmount == "number" ? getUpDownColor(r.changeAmount) : NEUTRAL_COLOR;
+}
+var _hoisted_1$1 = { class: "kline-tooltip__title" }, _hoisted_2 = { key: 0 }, _hoisted_3 = { class: "kline-tooltip__grid" }, _hoisted_4 = { class: "row" }, _hoisted_5 = { class: "row" }, _hoisted_6 = { class: "row" }, _hoisted_7 = { class: "row" }, _hoisted_8 = {
+	key: 0,
+	class: "row"
+}, _hoisted_9 = {
+	key: 1,
+	class: "row"
+}, _hoisted_10 = {
+	key: 2,
+	class: "row"
+}, _hoisted_11 = {
+	key: 3,
+	class: "row"
+}, _hoisted_12 = {
+	key: 4,
+	class: "row"
+}, _hoisted_13 = {
+	key: 5,
+	class: "row"
+}, KLineTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "KLineTooltip",
+	props: {
+		k: {},
+		index: {},
+		data: {},
+		pos: {},
+		setEl: { type: Function }
+	},
+	setup(s) {
+		let d = s;
+		function f(r) {
+			d.setEl?.(r);
+		}
+		let p = computed(() => {
+			let r = d.k;
+			if (!r) return NEUTRAL_COLOR;
+			let s = d.index;
+			return calcOpenColor(r, typeof s == "number" && s > 0 ? d.data[s - 1] : void 0);
+		}), h = computed(() => {
+			let r = d.k;
+			return r ? calcCloseColor(r) : NEUTRAL_COLOR;
+		}), g = computed(() => {
+			let r = d.k;
+			return r ? calcChangeColor(r) : NEUTRAL_COLOR;
+		});
+		return (r, d) => s.k ? (openBlock(), createElementBlock("div", {
+			key: 0,
+			ref: f,
+			class: "kline-tooltip",
+			style: normalizeStyle({
+				left: `${s.pos.x}px`,
+				top: `${s.pos.y}px`
+			})
+		}, [createElementVNode("div", _hoisted_1$1, [s.k.stockCode ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(s.k.stockCode), 1)) : createCommentVNode("", !0), createElementVNode("span", null, toDisplayString(unref(formatShanghaiDate)(s.k.timestamp)), 1)]), createElementVNode("div", _hoisted_3, [
+			createElementVNode("div", _hoisted_4, [d[0] ||= createElementVNode("span", null, "开", -1), createElementVNode("span", { style: normalizeStyle({ color: p.value }) }, toDisplayString(s.k.open.toFixed(2)), 5)]),
+			createElementVNode("div", _hoisted_5, [d[1] ||= createElementVNode("span", null, "高", -1), createElementVNode("span", null, toDisplayString(s.k.high.toFixed(2)), 1)]),
+			createElementVNode("div", _hoisted_6, [d[2] ||= createElementVNode("span", null, "低", -1), createElementVNode("span", null, toDisplayString(s.k.low.toFixed(2)), 1)]),
+			createElementVNode("div", _hoisted_7, [d[3] ||= createElementVNode("span", null, "收", -1), createElementVNode("span", { style: normalizeStyle({ color: h.value }) }, toDisplayString(s.k.close.toFixed(2)), 5)]),
+			typeof s.k.volume == "number" ? (openBlock(), createElementBlock("div", _hoisted_8, [d[4] ||= createElementVNode("span", null, "成交量", -1), createElementVNode("span", null, toDisplayString(unref(formatWanYi)(s.k.volume)), 1)])) : createCommentVNode("", !0),
+			typeof s.k.turnover == "number" ? (openBlock(), createElementBlock("div", _hoisted_9, [d[5] ||= createElementVNode("span", null, "成交额", -1), createElementVNode("span", null, toDisplayString(unref(formatWanYi)(s.k.turnover)), 1)])) : createCommentVNode("", !0),
+			typeof s.k.amplitude == "number" ? (openBlock(), createElementBlock("div", _hoisted_10, [d[6] ||= createElementVNode("span", null, "振幅", -1), createElementVNode("span", null, toDisplayString(s.k.amplitude), 1)])) : createCommentVNode("", !0),
+			typeof s.k.changePercent == "number" ? (openBlock(), createElementBlock("div", _hoisted_11, [d[7] ||= createElementVNode("span", null, "涨跌幅", -1), createElementVNode("span", { style: normalizeStyle({ color: g.value }) }, toDisplayString(unref(formatSignedPercent)(s.k.changePercent)), 5)])) : createCommentVNode("", !0),
+			typeof s.k.changeAmount == "number" ? (openBlock(), createElementBlock("div", _hoisted_12, [d[8] ||= createElementVNode("span", null, "涨跌额", -1), createElementVNode("span", { style: normalizeStyle({ color: g.value }) }, toDisplayString(unref(formatSignedNumber)(s.k.changeAmount)), 5)])) : createCommentVNode("", !0),
+			typeof s.k.turnoverRate == "number" ? (openBlock(), createElementBlock("div", _hoisted_13, [d[9] ||= createElementVNode("span", null, "换手率", -1), createElementVNode("span", null, toDisplayString(unref(formatPercent)(s.k.turnoverRate)), 1)])) : createCommentVNode("", !0)
+		])], 4)) : createCommentVNode("", !0);
+	}
+}), __plugin_vue_export_helper_default = (r, s) => {
+	let c = r.__vccOpts || r;
+	for (let [r, l] of s) c[r] = l;
+	return c;
+}, KLineTooltip_default = /* @__PURE__ */ __plugin_vue_export_helper_default(KLineTooltip_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8d05acf2"]]);
+function getVisibleRange(r, s, c, l, u) {
+	let d = c + l;
+	return {
+		start: Math.max(0, Math.floor(r / d) - 1),
+		end: Math.min(u, Math.ceil((r + s) / d) + 1)
+	};
+}
+function getVisiblePriceRange(r, s, c) {
+	let l = -Infinity, u = Infinity;
+	for (let d = s; d < c && d < r.length; d++) {
+		let s = r[d];
+		s && (s.high > l && (l = s.high), s.low < u && (u = s.low));
+	}
+	return !Number.isFinite(l) || !Number.isFinite(u) ? {
+		maxPrice: 100,
+		minPrice: 0
+	} : {
+		maxPrice: l,
+		minPrice: u
+	};
+}
+var PriceScale = class {
+	range = {
+		maxPrice: 100,
+		minPrice: 0
+	};
+	height = 1;
+	paddingTop = 0;
+	paddingBottom = 0;
+	setRange(r) {
+		this.range = r;
+	}
+	setHeight(r) {
+		this.height = Math.max(1, r);
+	}
+	setPadding(r, s) {
+		this.paddingTop = Math.max(0, r), this.paddingBottom = Math.max(0, s);
+	}
+	getRange() {
+		return this.range;
+	}
+	getPaddingTop() {
+		return this.paddingTop;
+	}
+	getPaddingBottom() {
+		return this.paddingBottom;
+	}
+	priceToY(r) {
+		let { maxPrice: s, minPrice: c } = this.range, l = s - c || 1, u = (r - c) / l, d = Math.max(1, this.height - this.paddingTop - this.paddingBottom);
+		return this.paddingTop + d * (1 - u);
+	}
+}, Pane = class {
+	id;
+	top = 0;
+	height = 0;
+	priceRange = {
+		maxPrice: 100,
+		minPrice: 0
+	};
+	yAxis = new PriceScale();
+	renderers = [];
+	constructor(r) {
+		this.id = r;
+	}
+	setLayout(r, s) {
+		this.top = r, this.height = Math.max(1, s), this.yAxis.setHeight(this.height);
+	}
+	setPadding(r, s) {
+		this.yAxis.setPadding(r, s);
+	}
+	addRenderer(r) {
+		this.renderers.push(r);
+	}
+	updateRange(r, s) {
+		this.priceRange = getVisiblePriceRange(r, s.start, s.end), this.yAxis.setRange(this.priceRange);
+	}
+}, InteractionController = class {
+	chart;
+	isDragging = !1;
+	dragStartX = 0;
+	scrollStartX = 0;
+	isTouchSession = !1;
+	crosshairPos = null;
+	crosshairIndex = null;
+	hoveredIndex = null;
+	activePaneId = null;
+	tooltipPos = {
+		x: 0,
+		y: 0
+	};
+	tooltipSize = {
+		width: 220,
+		height: 180
+	};
+	constructor(r) {
+		this.chart = r;
+	}
+	onPointerDown(r) {
+		if (r.isPrimary === !1) return;
+		this.isTouchSession = r.pointerType === "touch", this.isDragging = !0, this.updateHoverFromPoint(r.clientX, r.clientY);
+		let s = this.chart.getDom().container;
+		this.dragStartX = r.clientX, this.scrollStartX = s.scrollLeft, this.chart.scheduleDraw();
+	}
+	onPointerMove(r) {
+		if (r.isPrimary === !1) return;
+		let s = this.chart.getDom().container;
+		if (this.isDragging) {
+			let c = this.dragStartX - r.clientX;
+			s.scrollLeft = this.scrollStartX + c, this.updateHoverFromPoint(r.clientX, r.clientY), this.chart.scheduleDraw();
+			return;
+		}
+		this.updateHoverFromPoint(r.clientX, r.clientY), this.chart.scheduleDraw();
+	}
+	onPointerUp(r) {
+		r.isPrimary !== !1 && (this.isDragging = !1);
+	}
+	onPointerLeave(r) {
+		r.isPrimary !== !1 && (this.isDragging = !1, this.isTouchSession = !1, this.clearHover(), this.chart.scheduleDraw());
+	}
+	onMouseDown(r) {
+		if (this.isTouchSession || r.button !== 0) return;
+		let s = this.chart.getDom().container;
+		this.isDragging = !0, this.dragStartX = r.clientX, this.scrollStartX = s.scrollLeft, this.updateHoverFromPoint(r.clientX, r.clientY), this.chart.scheduleDraw(), r.preventDefault();
+	}
+	onMouseMove(r) {
+		if (this.isTouchSession) return;
+		let s = this.chart.getDom().container;
+		if (this.isDragging) {
+			let c = this.dragStartX - r.clientX;
+			s.scrollLeft = this.scrollStartX + c;
+			return;
+		}
+		this.updateHover(r), this.chart.scheduleDraw();
+	}
+	onMouseUp() {
+		this.isTouchSession || (this.isDragging = !1);
+	}
+	onMouseLeave() {
+		this.isTouchSession || (this.isDragging = !1, this.clearHover(), this.chart.scheduleDraw());
+	}
+	onScroll() {
+		this.clearHover(), this.chart.scheduleDraw();
+	}
+	onWheel(r) {
+		let s = this.chart.getDom().container, c = s.getBoundingClientRect(), l = r.clientX - c.left, u = s.scrollLeft;
+		this.clearHover(), this.chart.zoomAt(l, u, r.deltaY);
+	}
+	setTooltipSize(r) {
+		this.tooltipSize = r;
+	}
+	clearHover() {
+		this.crosshairPos = null, this.crosshairIndex = null, this.hoveredIndex = null, this.activePaneId = null;
+	}
+	updateHover(r) {
+		this.updateHoverFromPoint(r.clientX, r.clientY);
+	}
+	updateHoverFromPoint(r, s) {
+		let c = this.chart.getDom().container, l = c.getBoundingClientRect(), u = r - l.left, d = s - l.top, f = this.chart.getOption(), p = Math.max(1, Math.round(l.width)), m = Math.max(1, Math.round(l.height)), h = p - f.rightAxisWidth, g = m - f.bottomAxisHeight;
+		if (u < 0 || d < 0 || u > h || d > g) {
+			this.clearHover();
+			return;
+		}
+		let _ = c.scrollLeft, v = f.kWidth + f.kGap, y = _ + u - f.kGap;
+		if (y < 0) {
+			this.clearHover();
+			return;
+		}
+		let b = this.chart.getData(), x = Math.floor(y / v), S = this.chart.getPanes().find((r) => d >= r.top && d <= r.top + r.height);
+		if (S ? this.activePaneId = S.id : this.activePaneId = null, x >= 0 && x < (b?.length ?? 0)) {
+			this.crosshairIndex = x;
+			let r = f.kGap + x * v + f.kWidth / 2 - _;
+			this.crosshairPos = {
+				x: Math.min(Math.max(r, 0), h),
+				y: Math.min(Math.max(d, 0), g)
+			};
+		} else this.crosshairIndex = null, this.crosshairPos = {
+			x: Math.min(Math.max(u, 0), h),
+			y: Math.min(Math.max(d, 0), g)
+		};
+		let C = typeof this.crosshairIndex == "number" ? b[this.crosshairIndex] : void 0;
+		if (!C || !S) {
+			this.hoveredIndex = null;
+			return;
+		}
+		let w = d - S.top, T = S.yAxis.priceToY(C.open), E = S.yAxis.priceToY(C.close), D = S.yAxis.priceToY(C.high), O = S.yAxis.priceToY(C.low), k = Math.min(T, E), A = Math.max(T, E), j = y - this.crosshairIndex * v, M = f.kWidth / 2, N = w >= k && w <= A && j >= 0 && j <= f.kWidth, P = Math.abs(j - M) <= 3 && w >= D && w <= O;
+		if (!N && !P) {
+			this.hoveredIndex = null;
+			return;
+		}
+		this.hoveredIndex = this.crosshairIndex;
+		let F = this.tooltipSize.width, I = this.tooltipSize.height, L = u + 14, R = u - 14 - F, z = L + F + 12 <= p ? L : R, B = d + 14, V = Math.max(12, p - F - 12), H = Math.max(12, m - I - 12);
+		this.tooltipPos = {
+			x: Math.min(Math.max(z, 12), V),
+			y: Math.min(Math.max(B, 12), H)
+		};
+	}
+};
+function priceToY(r, s, c, l, u, d) {
+	let f = s - c || 1, p = (r - c) / f;
+	return u + Math.max(1, l - u - d) * (1 - p);
+}
+function yToPrice(r, s, c, l, u, d) {
+	let f = s - c || 1, p = Math.max(1, l - u - d);
+	return c + (1 - (Math.min(Math.max(r, u), u + p) - u) / p) * f;
+}
+function roundToPhysicalPixel(r, s) {
+	return Math.round(r * s) / s;
+}
+function alignToPhysicalPixelCenter(r, s) {
+	return (Math.floor(r * s) + .5) / s;
+}
+function alignRect(r, s, c, l, u) {
+	let d = roundToPhysicalPixel(r, u), f = roundToPhysicalPixel(s, u), p = roundToPhysicalPixel(r + c, u), m = roundToPhysicalPixel(s + l, u);
+	return {
+		x: d,
+		y: f,
+		width: Math.max(1 / u, p - d),
+		height: Math.max(1 / u, m - f)
+	};
+}
+function createVerticalLineRect(r, s, c, l) {
+	if (s === c) return null;
+	let u = Math.min(s, c), d = Math.max(s, c), f = Math.round(r * l), p = Math.round(u * l), m = Math.round(d * l);
+	return {
+		x: f / l,
+		y: p / l,
+		width: 1 / l,
+		height: Math.max(1, m - p) / l
+	};
+}
+function createHorizontalLineRect(r, s, c, l) {
+	if (r === s) return null;
+	let u = Math.min(r, s), d = Math.max(r, s), f = Math.round(u * l), p = Math.round(d * l), m = Math.round(c * l);
+	return {
+		x: f / l,
+		y: m / l,
+		width: Math.max(1, p - f) / l,
+		height: 1 / l
+	};
+}
+function drawPriceAxis(r, s) {
+	let { x: c, y: l, width: u, height: d, priceRange: f, yPaddingPx: p = 0, dpr: m, ticks: h = 10, bgColor: g = "rgba(255,255,255,0.85)", textColor: _ = "rgba(0,0,0,0.65)", lineColor: v = "rgba(0,0,0,0.12)", fontSize: y = 16, paddingX: b = 12 } = s, x = p, S = Math.max(0, Math.min(x, Math.floor(d / 2) - 1)), { maxPrice: C, minPrice: w } = f, T = C - w, E = T === 0 ? 0 : T / (Math.max(2, h) - 1);
+	r.fillStyle = g, r.fillRect(c, l, u, d), r.strokeStyle = v, r.lineWidth = 1, r.beginPath(), r.moveTo(alignToPhysicalPixelCenter(c, m), l), r.lineTo(alignToPhysicalPixelCenter(c, m), l + d), r.stroke(), r.font = `${y}px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif`, r.textBaseline = "middle", r.textAlign = "left";
+	let D = c + b;
+	for (let s = 0; s < Math.max(2, h); s++) {
+		let u = T === 0 ? C : C - E * s, f = Math.round(priceToY(u, C, w, d, S, S) + l);
+		r.strokeStyle = v, r.beginPath();
+		let p = alignToPhysicalPixelCenter(f, m);
+		r.moveTo(c, p), r.lineTo(c + 4, p), r.stroke(), r.fillStyle = _, r.fillText(u.toFixed(2), roundToPhysicalPixel(D, m), roundToPhysicalPixel(f, m));
+	}
+}
+function drawCrosshairTimeLabel(r, s) {
+	let { x: c, y: l, width: u, height: d, crosshairX: f, timestamp: p, dpr: m, bgColor: h = "rgba(0,0,0,0.55)", textColor: g = "rgba(255,255,255,0.92)", fontSize: _ = 12, paddingX: v = 8, paddingY: y = 4 } = s, b = formatYMDShanghai(p);
+	r.save(), r.font = `${_}px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif`, r.textBaseline = "middle", r.textAlign = "center";
+	let x = Math.ceil(r.measureText(b).width), S = Math.min(u, x + v * 2), C = Math.min(d, _ + y * 2), w = Math.min(Math.max(f, c + S / 2), c + u - S / 2), T = l + d / 2, E = w - S / 2, D = T - C / 2;
+	r.fillStyle = h, r.fillRect(roundToPhysicalPixel(E, m), roundToPhysicalPixel(D, m), roundToPhysicalPixel(S, m), roundToPhysicalPixel(C, m)), r.fillStyle = g, r.fillText(b, roundToPhysicalPixel(w, m), roundToPhysicalPixel(T, m)), r.restore();
+}
+function drawCrosshairPriceLabel(r, s) {
+	let { x: c, y: l, width: u, height: d, crosshairY: f, priceRange: p, yPaddingPx: m = 0, dpr: h, bgColor: g = "rgba(0,0,0,0.55)", textColor: _ = "rgba(255,255,255,0.92)", fontSize: v = 12, paddingX: y = 12 } = s, b = Math.max(0, Math.min(m, Math.floor(d / 2) - 1)), { maxPrice: x, minPrice: S } = p, C = yToPrice(f - l, x, S, d, b, b).toFixed(2);
+	r.save(), r.font = `${v}px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif`, r.textBaseline = "middle", r.textAlign = "left";
+	let w = r.measureText(C), T = v + 6, E = Math.ceil(w.width + y * 2), D = T, O = Math.min(u, E), k = Math.min(Math.max(f, l + D / 2), l + d - D / 2), A = k - D / 2;
+	r.fillStyle = g, r.fillRect(roundToPhysicalPixel(c, h), roundToPhysicalPixel(A, h), roundToPhysicalPixel(O, h), roundToPhysicalPixel(D, h)), r.fillStyle = _;
+	let j = c + y;
+	r.fillText(C, roundToPhysicalPixel(j, h), roundToPhysicalPixel(k, h)), r.restore();
+}
+function drawTimeAxis(r, s) {
+	let { x: c, y: l, width: u, height: d, data: f, scrollLeft: p, kWidth: m, kGap: h, startIndex: g, endIndex: _, dpr: v, bgColor: y = "rgba(255,255,255,0.85)", textColor: b = "rgba(0,0,0,0.65)", lineColor: x = "rgba(0,0,0,0.12)", fontSize: S = 16, paddingX: C = 12 } = s, w = m + h;
+	r.fillStyle = y, r.fillRect(c, l, u, d), r.strokeStyle = x, r.lineWidth = 1, r.beginPath(), r.moveTo(c, alignToPhysicalPixelCenter(l, v)), r.lineTo(c + u, alignToPhysicalPixelCenter(l, v)), r.stroke(), r.textAlign = "center", r.textBaseline = "middle";
+	let D = l + d / 2;
+	for (let s = Math.max(g, 1); s < _ && s < f.length; s++) {
+		let c = f[s], d = f[s - 1];
+		if (!(!c || !d) && monthKey(c.timestamp) !== monthKey(d.timestamp)) {
+			let d = h + s * w - p, f = C, m = Math.max(C, u - C);
+			if (d >= f && d <= m) {
+				let s = Math.min(Math.max(d, f), m);
+				r.strokeStyle = x, r.beginPath();
+				let u = alignToPhysicalPixelCenter(s, v);
+				r.moveTo(u, l), r.lineTo(u, l + 4), r.stroke();
+				let { text: p, isYear: h } = formatMonthOrYear(c.timestamp);
+				r.fillStyle = b, r.font = `${h ? "bold " : ""}${S}px -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif`, r.fillText(p, roundToPhysicalPixel(s, v), roundToPhysicalPixel(D, v));
+			}
+		}
+	}
+}
+function createYAxisRenderer(r) {
+	return { draw({ ctx: s, pane: c, dpr: l }) {
+		let u = typeof r.ticks == "number" ? r.ticks : Math.max(2, Math.min(8, Math.round(c.height / 80)));
+		drawPriceAxis(s, {
+			x: r.axisX,
+			y: c.top,
+			width: r.axisWidth,
+			height: c.height,
+			priceRange: c.priceRange,
+			yPaddingPx: r.yPaddingPx,
+			dpr: l,
+			ticks: u
+		});
+	} };
+}
+function drawTimeAxisLayer(r) {
+	let { ctx: s, data: c, scrollLeft: l, kWidth: u, kGap: d, startIndex: f, endIndex: p, dpr: m, crosshair: h } = r, g = s.canvas.width / m, _ = s.canvas.height / m;
+	if (s.setTransform(1, 0, 0, 1, 0, 0), s.scale(m, m), s.clearRect(0, 0, g, _), drawTimeAxis(s, {
+		x: 0,
+		y: 0,
+		width: g,
+		height: _,
+		data: c,
+		scrollLeft: l,
+		kWidth: u,
+		kGap: d,
+		startIndex: f,
+		endIndex: p,
+		dpr: m
+	}), h && typeof h.index == "number") {
+		let r = c[h.index];
+		r && drawCrosshairTimeLabel(s, {
+			x: 0,
+			y: 0,
+			width: g,
+			height: _,
+			crosshairX: h.x,
+			timestamp: r.timestamp,
+			dpr: m
+		});
+	}
+}
+function drawCrosshair(r) {
+	let { ctx: s, plotWidth: c, plotHeight: l, dpr: u, x: d, y: f } = r;
+	s.save(), s.beginPath(), s.rect(0, 0, c, l), s.clip(), s.fillStyle = "rgba(0,0,0,0.28)";
+	let p = createVerticalLineRect(d, 0, l, u);
+	p && s.fillRect(p.x, p.y, p.width, p.height);
+	let m = createHorizontalLineRect(0, c, f, u);
+	m && s.fillRect(m.x, m.y, m.width, m.height), s.restore();
+}
+function drawCrosshairPriceLabelForPane(r) {
+	let { ctx: s, pane: c, axisWidth: l, dpr: u, crosshairY: d, yPaddingPx: f } = r;
+	drawCrosshairPriceLabel(s, {
+		x: 0,
+		y: c.top,
+		width: l,
+		height: c.height,
+		crosshairY: d,
+		priceRange: c.priceRange,
+		yPaddingPx: f,
+		dpr: u
+	});
+}
+function calcMAAtIndex(r, s, c) {
+	if (s < c - 1) return;
+	let l = 0;
+	for (let u = 0; u < c; u++) {
+		let c = r[s - u];
+		if (!c) return;
+		l += c.close;
+	}
+	return l / c;
+}
+const MA5_COLOR = "rgba(255, 193, 37, 1)", MA10_COLOR = "rgba(190, 131, 12, 1)", MA20_COLOR = "rgba(69, 112, 249, 1)";
+function drawMALine(r, s, c, l, u, d, f, p, m, h) {
+	if (s.length < m) return;
+	let g = l, _ = c.yPaddingPx ?? 0, v = Math.max(0, Math.min(_, Math.floor(g / 2) - 1)), y = v, b = v, x, S;
+	if (p) x = p.maxPrice, S = p.minPrice;
+	else {
+		x = -Infinity, S = Infinity;
+		for (let r = d; r < f && r < s.length; r++) {
+			let c = s[r];
+			c && (c.high > x && (x = c.high), c.low < S && (S = c.low));
+		}
+	}
+	if (!Number.isFinite(x) || !Number.isFinite(S)) return;
+	let C = c.kWidth + c.kGap;
+	r.strokeStyle = h, r.lineWidth = 1, r.lineJoin = "round", r.lineCap = "round", r.beginPath();
+	let w = !0, T = Math.max(d, m - 1);
+	for (let l = T; l < f && l < s.length; l++) {
+		let d = 0;
+		for (let r = 0; r < m; r++) {
+			let c = s[l - r];
+			if (!c) return;
+			d += c.close;
+		}
+		let f = d / m, p = c.kGap + l * C + c.kWidth / 2, h = priceToY(f, x, S, g, y, b), _ = alignToPhysicalPixelCenter(p, u), v = alignToPhysicalPixelCenter(h, u);
+		w ? (r.moveTo(_, v), w = !1) : r.lineTo(_, v);
+	}
+	r.stroke();
+}
+function drawMA5Line(r, s, c, l, u = 1, d = 0, f = s.length, p) {
+	drawMALine(r, s, c, l, u, d, f, p, 5, MA5_COLOR);
+}
+function drawMA10Line(r, s, c, l, u = 1, d = 0, f = s.length, p) {
+	drawMALine(r, s, c, l, u, d, f, p, 10, MA10_COLOR);
+}
+function drawMA20Line(r, s, c, l, u = 1, d = 0, f = s.length, p) {
+	drawMALine(r, s, c, l, u, d, f, p, 20, MA20_COLOR);
+}
+function drawMALegend(r) {
+	let { ctx: s, data: c, endIndex: l, showMA: u } = r;
+	if (!c.length) return;
+	s.save(), s.font = "12px Arial", s.textBaseline = "top", s.textAlign = "left";
+	let d = Math.min(l - 1, c.length - 1), f = [];
+	if (u.ma5 && f.push({
+		label: "MA5",
+		color: MA5_COLOR,
+		value: calcMAAtIndex(c, d, 5)
+	}), u.ma10 && f.push({
+		label: "MA10",
+		color: MA10_COLOR,
+		value: calcMAAtIndex(c, d, 10)
+	}), u.ma20 && f.push({
+		label: "MA20",
+		color: MA20_COLOR,
+		value: calcMAAtIndex(c, d, 20)
+	}), f.length > 0) {
+		let r = s.measureText("均线").width + 10;
+		for (let c of f) {
+			let l = typeof c.value == "number" ? ` ${c.value.toFixed(2)}` : "";
+			r += s.measureText(`${c.label}${l}`).width + 10;
+		}
+		r -= 10;
+		let c = Math.ceil(r + 16);
+		s.fillStyle = "rgba(255,255,255,0.85)", s.fillRect(8, 8, c, 24);
+		let l = 16;
+		s.fillStyle = "#333", s.fillText("均线", l, 14), l += s.measureText("均线").width + 10;
+		for (let r of f) {
+			let c = typeof r.value == "number" ? ` ${r.value.toFixed(2)}` : "", u = `${r.label}${c}`;
+			s.fillStyle = r.color, s.fillText(u, l, 14), l += s.measureText(u).width + 10;
+		}
+	}
+	s.restore();
+}
+function drawPaneTitle(r) {
+	let { ctx: s, dpr: c, paneTop: l, title: u } = r;
+	s.save(), s.font = "12px Arial", s.textBaseline = "top", s.textAlign = "left", s.fillStyle = "rgba(0,0,0,0.55)";
+	let d = l + 8;
+	s.fillText(u, 8, d), s.restore();
+}
+function drawPaneBorders(r) {
+	let { ctx: s, dpr: c, width: l, panes: u, color: d = "rgba(0,0,0,0.12)", omitOuterTop: f = !1, omitOuterRight: p = !1, omitOuterBottom: m = !1, omitOuterLeft: h = !1 } = r;
+	if (!u.length) return;
+	s.save(), s.strokeStyle = d, s.lineWidth = 1;
+	let g = alignToPhysicalPixelCenter(0, c), _ = alignToPhysicalPixelCenter(l, c), v = Infinity, y = -Infinity;
+	for (let r of u) v = Math.min(v, r.top), y = Math.max(y, r.top + r.height);
+	v = Number.isFinite(v) ? v : 0, y = Number.isFinite(y) ? y : 0;
+	for (let r of u) {
+		let l = alignToPhysicalPixelCenter(r.top, c), u = alignToPhysicalPixelCenter(r.top + r.height, c), d = Math.abs(r.top - v) < 1e-6, b = Math.abs(r.top + r.height - y) < 1e-6;
+		s.beginPath(), f && d || (s.moveTo(g, l), s.lineTo(_, l)), p || (s.moveTo(_, l), s.lineTo(_, u)), m && b || (s.moveTo(g, u), s.lineTo(_, u)), h || (s.moveTo(g, l), s.lineTo(g, u)), s.stroke();
+	}
+	s.restore();
+}
+var Chart = class {
+	dom;
+	opt;
+	data = [];
+	raf = null;
+	viewport = null;
+	panes = [];
+	interaction;
+	onZoomChange;
+	setOnZoomChange(r) {
+		this.onZoomChange = r;
+	}
+	constructor(r, s) {
+		this.dom = r, this.opt = s, this.interaction = new InteractionController(this), this.initPanes();
+	}
+	getPanes() {
+		return this.panes;
+	}
+	setPaneRenderers(r, s) {
+		let c = this.panes.find((s) => s.id === r);
+		if (c) {
+			c.renderers.length = 0;
+			for (let r of s) c.renderers.push(r);
+			this.scheduleDraw();
+		}
+	}
+	getDom() {
+		return this.dom;
+	}
+	getOption() {
+		return this.opt;
+	}
+	updateOptions(r) {
+		this.opt = {
+			...this.opt,
+			...r
+		}, r.panes && this.initPanes(), this.resize();
+	}
+	updateData(r) {
+		this.data = r ?? [], this.scheduleDraw();
+	}
+	getData() {
+		return this.data;
+	}
+	getContentWidth() {
+		let r = this.data?.length ?? 0;
+		return this.opt.kGap + r * (this.opt.kWidth + this.opt.kGap) + this.opt.rightAxisWidth;
+	}
+	resize() {
+		this.computeViewport(), this.layoutPanes(), this.scheduleDraw();
+	}
+	scheduleDraw() {
+		this.raf != null && cancelAnimationFrame(this.raf), this.raf = requestAnimationFrame(() => {
+			this.raf = null, this.draw();
+		});
+	}
+	draw() {
+		let r = this.computeViewport();
+		if (!r) return;
+		let s = this.dom.plotCanvas.getContext("2d"), c = this.dom.yAxisCanvas.getContext("2d"), l = this.dom.xAxisCanvas.getContext("2d");
+		if (!s || !c || !l) return;
+		s.setTransform(1, 0, 0, 1, 0, 0), s.scale(r.dpr, r.dpr), s.clearRect(0, 0, r.plotWidth, r.plotHeight), c.setTransform(1, 0, 0, 1, 0, 0), c.scale(r.dpr, r.dpr), c.clearRect(0, 0, this.opt.rightAxisWidth, r.plotHeight);
+		let { start: u, end: d } = getVisibleRange(r.scrollLeft, r.plotWidth, this.opt.kWidth, this.opt.kGap, this.data.length), f = {
+			start: u,
+			end: d
+		};
+		for (let l of this.panes) {
+			l.updateRange(this.data, f), s.save(), s.beginPath(), s.rect(0, l.top, r.plotWidth, l.height), s.clip(), s.translate(0, l.top);
+			for (let c of l.renderers) c.draw({
+				ctx: s,
+				pane: l,
+				data: this.data,
+				range: f,
+				scrollLeft: r.scrollLeft,
+				kWidth: this.opt.kWidth,
+				kGap: this.opt.kGap,
+				dpr: r.dpr
+			});
+			s.restore(), createYAxisRenderer({
+				axisX: 0,
+				axisWidth: this.opt.rightAxisWidth,
+				yPaddingPx: this.opt.yPaddingPx,
+				ticks: l.id === "sub" ? 2 : void 0
+			}).draw({
+				ctx: c,
+				pane: l,
+				data: this.data,
+				range: f,
+				scrollLeft: r.scrollLeft,
+				kWidth: this.opt.kWidth,
+				kGap: this.opt.kGap,
+				dpr: r.dpr
+			}), this.interaction.crosshairPos && this.interaction.activePaneId === l.id && drawCrosshairPriceLabelForPane({
+				ctx: c,
+				pane: l,
+				axisWidth: this.opt.rightAxisWidth,
+				dpr: r.dpr,
+				crosshairY: this.interaction.crosshairPos.y,
+				yPaddingPx: this.opt.yPaddingPx
+			});
+		}
+		drawPaneBorders({
+			ctx: s,
+			dpr: r.dpr,
+			width: r.plotWidth,
+			panes: [{
+				top: 0,
+				height: r.plotHeight
+			}]
+		});
+		let p = this.panes.find((r) => r.id === "sub");
+		p && drawPaneTitle({
+			ctx: s,
+			dpr: r.dpr,
+			paneTop: p.top,
+			title: "副图(占位)"
+		}), drawTimeAxisLayer({
+			ctx: l,
+			data: this.data,
+			scrollLeft: r.scrollLeft,
+			kWidth: this.opt.kWidth,
+			kGap: this.opt.kGap,
+			startIndex: f.start,
+			endIndex: f.end,
+			dpr: r.dpr,
+			crosshair: this.interaction.crosshairPos && typeof this.interaction.crosshairIndex == "number" ? {
+				x: this.interaction.crosshairPos.x,
+				index: this.interaction.crosshairIndex
+			} : null
+		}), this.interaction.crosshairPos && (s.save(), s.beginPath(), s.rect(0, 0, r.plotWidth, r.plotHeight), s.clip(), drawCrosshair({
+			ctx: s,
+			plotWidth: r.plotWidth,
+			plotHeight: r.plotHeight,
+			dpr: r.dpr,
+			x: this.interaction.crosshairPos.x,
+			y: this.interaction.crosshairPos.y
+		}), s.restore()), drawMALegend({
+			ctx: s,
+			data: this.data,
+			endIndex: f.end,
+			showMA: {
+				ma5: !0,
+				ma10: !0,
+				ma20: !0
+			},
+			dpr: r.dpr
+		});
+	}
+	zoomAt(r, s, c) {
+		let l = this.opt.kWidth + this.opt.kGap, u = (s + r) / l, d = c > 0 ? -1 : 1, f = Math.max(this.opt.minKWidth, Math.min(this.opt.maxKWidth, this.opt.kWidth + d));
+		if (f === this.opt.kWidth) return;
+		let p = this.opt.kGap / this.opt.kWidth, m = Math.max(.5, f * p);
+		this.opt = {
+			...this.opt,
+			kWidth: f,
+			kGap: m
+		};
+		let h = u * (f + m) - r;
+		if (this.onZoomChange) {
+			this.onZoomChange(f, m, h);
+			return;
+		}
+		let g = this.dom.container, _ = Math.max(0, g.scrollWidth - g.clientWidth);
+		g.scrollLeft = Math.min(Math.max(0, h), _), this.scheduleDraw();
+	}
+	destroy() {
+		this.raf != null && cancelAnimationFrame(this.raf), this.raf = null, this.viewport = null, this.panes = [], this.onZoomChange = void 0;
+	}
+	initPanes() {
+		this.panes = this.opt.panes.map((r) => new Pane(r.id));
+	}
+	layoutPanes() {
+		let r = this.viewport;
+		if (!r) return;
+		let s = this.opt.panes.reduce((r, s) => r + (s.ratio ?? 0), 0) || 1, c = Math.max(0, this.opt.paneGap ?? 0), l = 0, u = Math.min(this.panes.length, this.opt.panes.length), d = c * Math.max(0, u - 1), f = Math.max(1, r.plotHeight - d);
+		for (let r = 0; r < u; r++) {
+			let d = this.opt.panes[r], p = this.panes[r];
+			if (!d || !p) continue;
+			let m = r === u - 1 ? f - l : Math.round(f * (d.ratio / s));
+			p.setLayout(l, m), p.setPadding(this.opt.yPaddingPx, this.opt.yPaddingPx), l += m + c;
+		}
+	}
+	computeViewport() {
+		let r = this.dom.container;
+		if (!r) return null;
+		let s = r.getBoundingClientRect(), c = Math.max(1, Math.round(s.width)), l = Math.max(1, Math.round(s.height)), u = r.scrollLeft, d = c - this.opt.rightAxisWidth, f = l - this.opt.bottomAxisHeight, p = window.devicePixelRatio || 1, m = 16 * 1024 * 1024;
+		c * p * (l * p) > m && (p = Math.sqrt(m / (c * l))), this.dom.canvasLayer.style.width = `${c}px`, this.dom.canvasLayer.style.height = `${l}px`, this.dom.plotCanvas.style.width = `${d}px`, this.dom.plotCanvas.style.height = `${f}px`, this.dom.plotCanvas.width = Math.round(d * p), this.dom.plotCanvas.height = Math.round(f * p), this.dom.yAxisCanvas.style.width = `${this.opt.rightAxisWidth}px`, this.dom.yAxisCanvas.style.height = `${f}px`, this.dom.yAxisCanvas.width = Math.round(this.opt.rightAxisWidth * p), this.dom.yAxisCanvas.height = Math.round(f * p), this.dom.xAxisCanvas.style.width = `${d}px`, this.dom.xAxisCanvas.style.height = `${this.opt.bottomAxisHeight}px`, this.dom.xAxisCanvas.width = Math.round(d * p), this.dom.xAxisCanvas.height = Math.round(this.opt.bottomAxisHeight * p);
+		let h = {
+			viewWidth: c,
+			viewHeight: l,
+			plotWidth: d,
+			plotHeight: f,
+			scrollLeft: u,
+			dpr: p
+		};
+		return this.viewport = h, h;
+	}
+};
+function getKLineTrend(r) {
+	return r.open > r.close ? "down" : r.open < r.close ? "up" : "flat";
 }
 var UP_COLOR = "rgba(214, 10, 34, 1)", DOWN_COLOR = "rgba(3, 123, 102, 1)";
-function kLineDraw(e, n, r, i, a = 1) {
-	if (tagLog("info", "kLineDraw", n), n.length === 0) return;
-	let o = i, s = r.yPaddingPx ?? 0, c = Math.max(0, Math.min(s, Math.floor(o / 2) - 1)), l = c, f = c, p = n.reduce((e, n) => Math.max(e, n.high), -Infinity), m = n.reduce((e, n) => Math.min(e, n.low), Infinity);
-	e.lineWidth = 1 / a;
-	let v = r.kGap;
-	for (let i = 0; i < n.length; i++) {
-		let s = n[i];
-		if (!s) continue;
-		let c = priceToY(s.high, p, m, o, l, f), h = priceToY(s.low, p, m, o, l, f), y = priceToY(s.open, p, m, o, l, f), b = priceToY(s.close, p, m, o, l, f), x = Math.min(y, b), S = Math.max(Math.abs(y - b), 2 / a), C = getKLineTrend(s) === "up" ? UP_COLOR : DOWN_COLOR;
-		e.fillStyle = C, e.fillRect(v, x, r.kWidth, S), e.strokeStyle = C, e.lineWidth = 3 / a;
-		let w = v + r.kWidth / 2;
-		e.beginPath(), e.moveTo(w, c), e.lineTo(w, x), e.stroke(), e.beginPath(), e.moveTo(w, x + S), e.lineTo(w, h), e.stroke(), v += r.kWidth + r.kGap;
-	}
-}
-function calcMAx(e, n) {
-	let r = [...e].sort((e, n) => e.timestamp - n.timestamp), i = r.length;
-	if (n <= 0) throw Error("x must be > 0");
-	if (i < n) return [];
-	let a = 0;
-	for (let e = 0; e < n; e++) a += r[e].close;
-	let o = Array(i - n + 1);
-	o[0] = a / n;
-	for (let e = n; e < i; e++) a += r[e].close - r[e - n].close, o[e - n + 1] = a / n;
-	return o;
-}
-function drawMALine(e, n, r, i, a, o, s = 1) {
-	if (n.length === 0) return;
-	let c = [...n].sort((e, n) => e.timestamp - n.timestamp), l = calcMAx(c, a);
-	if (l.length === 0) return;
-	let u = i, f = r.yPaddingPx ?? 0, p = Math.max(0, Math.min(f, Math.floor(u / 2) - 1)), m = p, h = p, g = c.reduce((e, n) => Math.max(e, n.high), -Infinity), _ = c.reduce((e, n) => Math.min(e, n.low), Infinity);
-	if (!Number.isFinite(g) || !Number.isFinite(_) || g <= _) return;
-	let v = Array(l.length);
-	for (let e = 0; e < l.length; e++) v[e] = priceToY(l[e], g, _, u, m, h);
-	e.strokeStyle = o, e.lineWidth = 2 / s, e.beginPath();
-	let b = !1;
-	for (let n = 0; n < v.length; n++) {
-		let i = v[n];
-		if (!Number.isFinite(i)) continue;
-		let o = n + (a - 1), s = r.kGap + o * (r.kWidth + r.kGap) + r.kWidth / 2;
-		b ? e.lineTo(s, i) : (e.moveTo(s, i), b = !0);
-	}
-	b && e.stroke();
-}
-function drawMA10Line(e, n, r, i, a = 1) {
-	drawMALine(e, n, r, i, 10, "rgba(190, 131, 12, 1)", a);
-}
-function drawMA20Line(e, n, r, i, a = 1) {
-	drawMALine(e, n, r, i, 20, "rgba(69, 112, 249, 1)", a);
-}
-function drawMA5Line(e, n, r, i, a = 1) {
-	drawMALine(e, n, r, i, 5, "rgba(251, 186, 62, 1)", a);
-}
-const KLineChart = /* @__PURE__ */ ((e, n) => {
-	let r = e.__vccOpts || e;
-	for (let [e, i] of n) r[e] = i;
-	return r;
-})(/* @__PURE__ */ defineComponent({
+const CandleRenderer = { draw({ ctx: r, pane: s, data: c, range: l, scrollLeft: u, kWidth: d, kGap: f, dpr: p }) {
+	if (!c.length) return;
+	let m = d + f;
+	r.save(), r.translate(-u, 0);
+	for (let u = l.start; u < l.end && u < c.length; u++) {
+		let l = c[u];
+		if (!l) continue;
+		let h = s.yAxis.priceToY(l.open), g = s.yAxis.priceToY(l.close), _ = s.yAxis.priceToY(l.high), v = s.yAxis.priceToY(l.low), y = f + u * m, b = alignRect(y, Math.min(h, g), d, Math.max(Math.abs(h - g), 1), p);
+		r.fillStyle = getKLineTrend(l) === "up" ? UP_COLOR : DOWN_COLOR, r.fillRect(b.x, b.y, b.width, b.height);
+		let x = y + d / 2, S = b.y, C = b.y + b.height, w = Math.max(l.open, l.close), T = Math.min(l.open, l.close);
+		if (l.high > w) {
+			let s = createVerticalLineRect(x, _, S, p);
+			s && r.fillRect(s.x, s.y, s.width, s.height);
+		}
+		if (l.low < T) {
+			let s = createVerticalLineRect(x, C, v, p);
+			s && r.fillRect(s.x, s.y, s.width, s.height);
+		}
+	}
+	r.restore();
+} }, GridLinesRenderer = { draw({ ctx: r, pane: s, data: c, range: l, scrollLeft: u, kWidth: d, kGap: f, dpr: p }) {
+	if (!c.length) return;
+	let m = d + f, h = s.id === "main" ? 6 : 2;
+	r.save(), r.fillStyle = "rgba(0,0,0,0.06)", r.translate(-u, 0);
+	let g = r.canvas.width / p, _ = u, v = u + g, y = s.yAxis.getPaddingTop(), b = s.yAxis.getPaddingBottom(), x = y, S = Math.max(y, s.height - b), C = Math.max(0, S - x);
+	for (let s = 0; s < h; s++) {
+		let c = h <= 1 ? 0 : s / (h - 1), l = createHorizontalLineRect(_, v, Math.round(x + c * C), p);
+		l && r.fillRect(l.x, l.y, l.width, l.height);
+	}
+	function w(r) {
+		let s = new Date(r);
+		return `${s.getFullYear()}-${s.getMonth()}`;
+	}
+	for (let u = Math.max(l.start, 1); u < l.end && u < c.length; u++) {
+		let l = c[u], d = c[u - 1];
+		if (!(!l || !d) && w(l.timestamp) !== w(d.timestamp)) {
+			let c = createVerticalLineRect(f + u * m, 0, s.height, p);
+			c && r.fillRect(c.x, c.y, c.width, c.height);
+		}
+	}
+	r.restore();
+} }, LastPriceLineRenderer = { draw({ ctx: r, pane: s, data: c, range: l, scrollLeft: u, kWidth: d, kGap: f, dpr: p }) {
+	let m = c[c.length - 1];
+	if (!m) return;
+	r.save(), r.translate(-u, 0);
+	let h = Math.round(s.yAxis.priceToY(m.close)), g = d + f, _ = f + l.start * g, v = f + l.end * g;
+	r.strokeStyle = "#F59999", r.lineWidth = 1, r.setLineDash([4, 3]), r.beginPath();
+	let y = (Math.floor(h * p) + .5) / p;
+	r.moveTo(Math.round(_ * p) / p, y), r.lineTo(Math.round(v * p) / p, y), r.stroke(), r.setLineDash([]), r.restore();
+} };
+function createMARenderer(r) {
+	return { draw({ ctx: s, pane: c, data: l, range: u, scrollLeft: d, kWidth: f, kGap: p, dpr: m }) {
+		s.save(), s.translate(-d, 0);
+		let h = {
+			kWidth: f,
+			kGap: p,
+			yPaddingPx: 0
+		};
+		r.ma5 && drawMA5Line(s, l, h, c.height, m, u.start, u.end, c.priceRange), r.ma10 && drawMA10Line(s, l, h, c.height, m, u.start, u.end, c.priceRange), r.ma20 && drawMA20Line(s, l, h, c.height, m, u.start, u.end, c.priceRange), s.restore();
+	} };
+}
+const ExtremaMarkersRenderer = { draw({ ctx: r, pane: s, data: c, range: l, scrollLeft: u, kWidth: d, kGap: f, dpr: p }) {
+	if (!c.length || s.id !== "main") return;
+	let m = Math.max(0, l.start), h = Math.min(c.length, l.end);
+	if (h - m <= 0) return;
+	let g = -Infinity, _ = Infinity, v = m, y = m;
+	for (let r = m; r < h; r++) {
+		let s = c[r];
+		s && (s.high >= g && (g = s.high, v = r), s.low <= _ && (_ = s.low, y = r));
+	}
+	if (!Number.isFinite(g) || !Number.isFinite(_)) return;
+	let b = d + f, x = (r) => f + r * b + d / 2;
+	r.save(), r.translate(-u, 0), drawPriceMarker(r, x(v), s.yAxis.priceToY(g), g, p), drawPriceMarker(r, x(y), s.yAxis.priceToY(_), _, p), r.restore();
+} };
+function drawPriceMarker(r, s, c, l, u) {
+	let d = l.toFixed(2), f = createHorizontalLineRect(s, s + 30, c, u);
+	f && (r.fillStyle = "rgba(0,0,0,0.45)", r.fillRect(f.x, f.y, f.width, f.height));
+	let p = roundToPhysicalPixel(s + 30, u), m = roundToPhysicalPixel(c, u);
+	r.fillStyle = "rgba(0,0,0,0.45)", r.beginPath(), r.arc(p, m, 2, 0, Math.PI * 2), r.fill(), r.font = "12px Arial", r.textBaseline = "middle", r.textAlign = "left", r.fillStyle = "rgba(0,0,0,0.70)", r.fillText(d, roundToPhysicalPixel(s + 30 + 4, u), roundToPhysicalPixel(c, u));
+}
+var _hoisted_1 = { class: "chart-wrapper" };
+const KLineChart = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "KLineChart",
 	props: {
 		data: {},
 		kWidth: { default: 10 },
 		kGap: { default: 2 },
-		yPaddingPx: { default: 60 },
+		yPaddingPx: { default: 0 },
 		showMA: { default: () => ({
 			ma5: !0,
 			ma10: !0,
@@ -87,63 +865,200 @@ const KLineChart = /* @__PURE__ */ ((e, n) => {
 		autoScrollToRight: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		minKWidth: { default: 2 },
+		maxKWidth: { default: 50 },
+		rightAxisWidth: { default: 70 },
+		bottomAxisHeight: { default: 24 },
+		paneRatios: { default: () => [.75, .25] }
 	},
-	setup(r, { expose: u }) {
-		let d = r, f = ref(null), p = ref(null), m = null;
-		function h() {
-			return {
-				kWidth: d.kWidth,
-				kGap: d.kGap,
-				yPaddingPx: d.yPaddingPx
-			};
+	setup(d, { expose: b }) {
+		let x = d, w = ref(null), T = ref(null), E = ref(null), D = ref(null), O = ref(null), k = ref(x.kWidth), A = ref(x.kGap), j = shallowRef(null);
+		function M() {
+			j.value?.scheduleDraw();
 		}
-		function g() {
-			let e = f.value, n = p.value;
-			if (!e || !n || !d.data || d.data.length === 0) return;
-			let r = e.getContext("2d");
-			if (!r) return;
-			let i = d.data, a = n.getBoundingClientRect(), o = Math.max(1, Math.round(a.width)), s = Math.max(1, Math.round(a.height)), c = window.devicePixelRatio || 1, l = h(), u = i.length, m = Math.max(o, l.kGap + u * (l.kWidth + l.kGap));
-			e.style.width = `${m}px`, e.style.height = `${s}px`, e.width = Math.round(m * c), e.height = Math.round(s * c);
-			let g = n.scrollLeft;
-			r.setTransform(1, 0, 0, 1, 0, 0), r.scale(c, c), r.clearRect(0, 0, m, s), r.translate(-g, 0), kLineDraw(r, i, l, s, c), d.showMA.ma5 && drawMA5Line(r, i, l, s, c), d.showMA.ma10 && drawMA10Line(r, i, l, s, c), d.showMA.ma20 && drawMA20Line(r, i, l, s, c);
-		}
-		function _() {
-			m !== null && cancelAnimationFrame(m), m = requestAnimationFrame(() => {
-				m = null, g();
+		let N = ref(null);
+		function P(r) {
+			if (N.value = r, !r) return;
+			let s = r.getBoundingClientRect();
+			j.value?.interaction.setTooltipSize({
+				width: Math.max(180, Math.round(s.width)),
+				height: Math.max(80, Math.round(s.height))
 			});
 		}
-		function y() {
-			let e = p.value;
-			e && (e.scrollLeft = e.scrollWidth, _());
+		let F = ref(!1), I = ref(null), L = ref({
+			x: 0,
+			y: 0
+		}), R = computed(() => {
+			let r = I.value;
+			return typeof r == "number" ? x.data?.[r] ?? null : null;
+		}), z = computed(() => I.value), B = computed(() => L.value);
+		function V() {
+			let r = j.value?.interaction;
+			if (!r) {
+				I.value = null;
+				return;
+			}
+			I.value = r.hoveredIndex ?? null;
+			let s = r.tooltipPos;
+			s && (L.value = {
+				x: s.x,
+				y: s.y
+			});
+		}
+		function H(r) {
+			F.value = !0, j.value?.interaction.onMouseDown(r), V();
+		}
+		function U(r) {
+			F.value = !0, j.value?.interaction.onPointerDown(r), V();
+		}
+		function W(r) {
+			j.value?.interaction.onMouseMove(r), V();
+		}
+		function G(r) {
+			j.value?.interaction.onPointerMove(r), V();
+		}
+		function K() {
+			F.value = !1, j.value?.interaction.onMouseUp(), V();
+		}
+		function q(r) {
+			F.value = !1, j.value?.interaction.onPointerUp(r), V();
 		}
-		return u({
-			scheduleRender: _,
-			scrollToRight: y
+		function J() {
+			F.value = !1, j.value?.interaction.onMouseLeave(), I.value = null;
+		}
+		function Y(r) {
+			F.value = !1, j.value?.interaction.onPointerLeave(r), I.value = null;
+		}
+		function X() {
+			j.value?.interaction.onScroll(), V();
+		}
+		function Z(r) {
+			j.value?.interaction.onWheel(r), V();
+		}
+		let Q = computed(() => {
+			let r = x.data?.length ?? 0;
+			return A.value + r * (k.value + A.value) + x.rightAxisWidth;
+		});
+		function $() {
+			let r = O.value;
+			r && (r.scrollLeft = r.scrollWidth, M());
+		}
+		return b({
+			scheduleRender: M,
+			scrollToRight: $
 		}), onMounted(() => {
-			window.addEventListener("resize", _, { passive: !0 }), _();
+			let r = O.value, s = D.value, c = w.value, l = T.value, u = E.value;
+			if (!r || !s || !c || !l || !u) return;
+			let d = [{
+				id: "main",
+				ratio: x.paneRatios[0]
+			}, {
+				id: "sub",
+				ratio: x.paneRatios[1]
+			}], p = new Chart({
+				container: r,
+				canvasLayer: s,
+				plotCanvas: c,
+				yAxisCanvas: l,
+				xAxisCanvas: u
+			}, {
+				kWidth: k.value,
+				kGap: A.value,
+				yPaddingPx: x.yPaddingPx,
+				rightAxisWidth: x.rightAxisWidth,
+				bottomAxisHeight: x.bottomAxisHeight,
+				minKWidth: x.minKWidth,
+				maxKWidth: x.maxKWidth,
+				panes: d,
+				paneGap: 0
+			});
+			p.setOnZoomChange(async (r, s, c) => {
+				k.value = r, A.value = s, await nextTick(), await new Promise((r) => requestAnimationFrame(() => r()));
+				let l = O.value;
+				if (!l) return;
+				let u = Math.max(0, l.scrollWidth - l.clientWidth);
+				l.scrollLeft = Math.min(Math.max(0, c), u), M();
+			}), p.setPaneRenderers("main", [
+				GridLinesRenderer,
+				LastPriceLineRenderer,
+				CandleRenderer,
+				ExtremaMarkersRenderer,
+				createMARenderer(x.showMA)
+			]), p.setPaneRenderers("sub", [GridLinesRenderer]), j.value = p, p.updateData(x.data), p.resize();
+			let m = () => p.resize();
+			window.addEventListener("resize", m, { passive: !0 }), p.__onResize = m;
 		}), onUnmounted(() => {
-			window.removeEventListener("resize", _), m !== null && cancelAnimationFrame(m);
+			let r = j.value;
+			if (r) {
+				let s = r.__onResize;
+				s && window.removeEventListener("resize", s), r.destroy();
+			}
+			j.value = null;
+		}), watch(() => [x.kWidth, x.kGap], ([r, s]) => {
+			typeof r == "number" && (k.value = r), typeof s == "number" && (A.value = s), j.value?.updateOptions({
+				kWidth: k.value,
+				kGap: A.value
+			});
 		}), watch(() => [
-			d.data,
-			d.kWidth,
-			d.kGap,
-			d.yPaddingPx,
-			d.showMA
+			x.data,
+			x.yPaddingPx,
+			x.showMA
 		], async () => {
-			d.autoScrollToRight ? (await nextTick(), y()) : _();
-		}, { deep: !0 }), (r, i) => (openBlock(), createElementBlock("div", {
-			class: "chart-container",
+			j.value?.updateOptions({ yPaddingPx: x.yPaddingPx }), j.value?.updateData(x.data), x.autoScrollToRight ? (await nextTick(), $()) : M();
+		}, { deep: !0 }), (r, d) => (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+			class: normalizeClass(["chart-container", { "is-dragging": F.value }]),
 			ref_key: "containerRef",
-			ref: p,
-			onScrollPassive: _
-		}, [createElementVNode("canvas", {
-			ref_key: "canvasRef",
-			ref: f,
-			class: "chart-canvas"
-		}, null, 512)], 544));
+			ref: O,
+			onScrollPassive: X,
+			onMousedown: H,
+			onMousemove: W,
+			onMouseup: K,
+			onMouseleave: J,
+			onPointerdown: U,
+			onPointermove: G,
+			onPointerup: q,
+			onPointerleave: Y,
+			onWheel: withModifiers(Z, ["prevent"])
+		}, [createElementVNode("div", {
+			class: "scroll-content",
+			style: normalizeStyle({ width: Q.value + "px" })
+		}, [createElementVNode("div", {
+			class: "canvas-layer",
+			ref_key: "canvasLayerRef",
+			ref: D
+		}, [
+			createElementVNode("canvas", {
+				class: "plot-canvas",
+				ref_key: "plotCanvasRef",
+				ref: w
+			}, null, 512),
+			createElementVNode("canvas", {
+				class: "y-axis-canvas",
+				ref_key: "yAxisCanvasRef",
+				ref: T
+			}, null, 512),
+			createElementVNode("canvas", {
+				class: "x-axis-canvas",
+				ref_key: "xAxisCanvasRef",
+				ref: E
+			}, null, 512),
+			R.value ? (openBlock(), createBlock(KLineTooltip_default, {
+				key: 0,
+				k: R.value,
+				index: z.value,
+				data: x.data,
+				pos: B.value,
+				"set-el": P
+			}, null, 8, [
+				"k",
+				"index",
+				"data",
+				"pos"
+			])) : createCommentVNode("", !0)
+		], 512)], 4)], 34)]));
 	}
-}), [["__scopeId", "data-v-7f0057f3"]]), KMapPlugin = { install(e) {
-	e.component("KLineChart", KLineChart);
+}), [["__scopeId", "data-v-28c7f9b2"]]), KMapPlugin = { install(r) {
+	r.component("KLineChart", KLineChart);
 } };
 export { KLineChart, KMapPlugin };