@tradecanvas/chart 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,1010 +1,169 @@
-import { DARK_TERMINAL as e, DARK_THEME as t, DARK_THEME as n, DEFAULT_DRAWING_STYLE as r, DEFAULT_PANEL_HEIGHT as i, DEFAULT_RECONNECT as a, DEFAULT_STREAM_CONFIG as o, DEFAULT_TIMEFRAME_FAVORITES as s, DEFAULT_TRADING_CONFIG as c, LIGHT_THEME as l, LIGHT_THEME as u, LayerType as d, MARKET_CRYPTO as f, MARKET_HNX as ee, MARKET_HOSE as p, MARKET_NYSE as m, MARKET_UPCOM as h, MIN_PANEL_HEIGHT as g, PRICE_AXIS_WIDTH as _, TIMEFRAMES_CRYPTO as te, TIMEFRAMES_FOREX as ne, TIMEFRAMES_STOCK as re, TIME_AXIS_HEIGHT as v, VN_COLORS as ie, computePriceLimits as ae, computePriceLimits as y, createVNTheme as oe, formatNumber as se, formatVND as ce, formatVolumeLoc as le, getCurrentSession as ue, getLocale as de, mergeBar as fe, normalizeBar as pe, normalizeBarTime as me, registerLocale as b, setLocale as x, setLocale as S, t as C } from "@tradecanvas/commons";
-import { AlertManager as w, AlertManager as T, Animator as E, Animator as D, AreaRenderer as O, BarCountdown as k, BarCountdown as A, BarRenderer as j, BaseFinanceChart as M, BaselineRenderer as N, BinanceAdapter as P, CandlestickRenderer as F, ChartLegend as I, ChartLegend as L, ChartStateManager as R, ChartStateManager as z, CompareRenderer as he, CompareRenderer as ge, CrosshairHandler as _e, CrosshairTooltip as ve, CrosshairTooltip as ye, CurrentPriceLine as be, CurrentPriceLine as xe, DEFAULT_LEGEND_CONFIG as Se, DataExporter as Ce, DataExporter as B, DrawingBase as we, DrawingManager as Te, DrawingRenderer as Ee, Easing as De, EventBus as Oe, FinanceCrosshair as V, GridRenderer as ke, HollowCandleRenderer as Ae, IndicatorBase as je, IndicatorEngine as H, InteractionManager as Me, KagiRenderer as Ne, KeyboardHandler as Pe, KeyboardHandler as Fe, LineRenderer as Ie, MockAdapter as Le, PanHandler as Re, PointAndFigureRenderer as ze, PriceAxis as Be, RenderEngine as Ve, RenkoRenderer as He, ReplayManager as Ue, ReplayManager as U, Screenshot as We, Screenshot as W, SessionBreaks as Ge, SessionBreaks as Ke, StreamManager as qe, StreamManager as Je, TickAggregator as Ye, TimeAxis as Xe, TradingManager as Ze, TradingRenderer as Qe, UndoRedoManager as $e, UndoRedoManager as et, Viewport as tt, VolumeRenderer as nt, VolumeRenderer as rt, Watermark as it, Watermark as at, ZoomHandler as ot, layoutSquarifiedTreemap as st, layoutUniformGrid as ct, registerBuiltInDrawingTools as lt, registerBuiltInIndicators as G, renderDepthChart as ut, renderEquityCurve as dt, renderGauge as ft, renderHeatmap as pt, renderSparkline as mt, renderWaterfall as ht, toHeikinAshi as gt, toHeikinAshi as _t, toKagi as vt, toKagi as yt, toLineBreak as bt, toLineBreak as xt, toPointAndFigure as St, toPointAndFigure as Ct, toRenko as wt, toRenko as Tt } from "@tradecanvas/core";
-//#region src/DataManager.ts
-function K(e) {
-	if (!e || typeof e.time != "number") return !1;
-	let { open: t, high: n, low: r, close: i } = e;
-	return !(!isFinite(t) || !isFinite(n) || !isFinite(r) || !isFinite(i) || t < 0 || n < 0 || r < 0 || i < 0 || n < r || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0));
-}
-function q(e) {
-	return {
-		...e,
-		high: Math.max(e.open, e.high, e.low, e.close),
-		low: Math.min(e.open, e.high, e.low, e.close),
-		volume: e.volume === void 0 ? 0 : Math.max(0, e.volume)
-	};
-}
-var J = class {
-	data = [];
-	getData() {
-		return this.data;
-	}
-	setData(e) {
-		this.data = e.filter(K).map(q);
-	}
-	appendBar(e) {
-		K(e) && this.data.push(q(e));
-	}
-	updateLastBar(e) {
-		if (!K(e)) return;
-		let t = q(e);
-		if (this.data.length === 0) {
-			this.data.push(t);
-			return;
-		}
-		this.data[this.data.length - 1] = t;
-	}
-	updateLastBarFromTick(e) {
-		this.data.length !== 0 && (!isFinite(e.price) || e.price < 0 || e.volume !== void 0 && (!isFinite(e.volume) || e.volume < 0) || (this.data[this.data.length - 1] = fe(this.data[this.data.length - 1], e)));
-	}
-	getLength() {
-		return this.data.length;
-	}
-	clear() {
-		this.data = [];
-	}
-}, Y = class {
-	theme;
-	constructor(e) {
-		!e || e === "dark" ? this.theme = { ...n } : e === "light" ? this.theme = { ...u } : this.theme = { ...e };
-	}
-	getTheme() {
-		return this.theme;
-	}
-	setTheme(e) {
-		e === "dark" ? this.theme = { ...n } : e === "light" ? this.theme = { ...u } : this.theme = { ...e };
-	}
-}, X = 200, Z = 80, Q = class {
-	panels = [];
-	containerWidth = 0;
-	containerHeight = 0;
-	resize(e, t) {
-		this.containerWidth = e, this.containerHeight = t;
-	}
-	addPanel(e, t = "bottom", n) {
-		let r = t === "left" || t === "right";
-		this.panels.push({
-			id: e,
-			position: t,
-			size: n ?? (r ? X : i),
-			minSize: r ? Z : g,
-			content: {
-				type: "indicator",
-				indicatorInstanceId: e
-			}
-		});
-	}
-	removePanel(e) {
-		this.panels = this.panels.filter((t) => t.id !== e);
-	}
-	setPanelPosition(e, t) {
-		let n = this.panels.find((t) => t.id === e);
-		if (n) {
-			let e = n.position === "left" || n.position === "right", r = t === "left" || t === "right";
-			n.position = t, e !== r && (n.size = r ? X : i, n.minSize = r ? Z : g);
-		}
-	}
-	setPanelSize(e, t) {
-		let n = this.panels.find((t) => t.id === e);
-		n && (n.size = Math.max(n.minSize, t));
-	}
-	getPanels() {
-		return this.panels;
-	}
-	resolve() {
-		let e = this.panels.filter((e) => e.position === "left"), t = this.panels.filter((e) => e.position === "right"), n = this.panels.filter((e) => e.position === "top"), r = this.panels.filter((e) => e.position === "bottom"), i = e.reduce((e, t) => e + t.size, 0), a = t.reduce((e, t) => e + t.size, 0), o = n.reduce((e, t) => e + t.size, 0), s = r.reduce((e, t) => e + t.size, 0), c = {
-			x: i,
-			y: o,
-			width: Math.max(0, this.containerWidth - i - a - _),
-			height: Math.max(0, this.containerHeight - o - s - v)
-		}, l = [], u = [], d = 0;
-		for (let t of e) l.push({
-			config: t,
-			rect: {
-				x: d,
-				y: 0,
-				width: t.size,
-				height: this.containerHeight - v
-			}
-		}), u.push({
-			panelId: t.id,
-			rect: {
-				x: d + t.size - 2,
-				y: 0,
-				width: 4,
-				height: this.containerHeight
-			},
-			orientation: "vertical"
-		}), d += t.size;
-		let f = 0;
-		for (let e of n) l.push({
-			config: e,
-			rect: {
-				x: i,
-				y: f,
-				width: c.width,
-				height: e.size
-			}
-		}), u.push({
-			panelId: e.id,
-			rect: {
-				x: i,
-				y: f + e.size - 2,
-				width: c.width,
-				height: 4
-			},
-			orientation: "horizontal"
-		}), f += e.size;
-		f = c.y + c.height;
-		for (let e of r) l.push({
-			config: e,
-			rect: {
-				x: i,
-				y: f,
-				width: c.width,
-				height: e.size
-			}
-		}), u.push({
-			panelId: e.id,
-			rect: {
-				x: i,
-				y: f - 2,
-				width: c.width,
-				height: 4
-			},
-			orientation: "horizontal"
-		}), f += e.size;
-		d = i + c.width + _;
-		for (let e of t) l.push({
-			config: e,
-			rect: {
-				x: d,
-				y: 0,
-				width: e.size,
-				height: this.containerHeight - v
-			}
-		}), u.push({
-			panelId: e.id,
-			rect: {
-				x: d - 2,
-				y: 0,
-				width: 4,
-				height: this.containerHeight
-			},
-			orientation: "vertical"
-		}), d += e.size;
-		return {
-			mainChartRect: c,
-			panels: l,
-			dividers: u
-		};
-	}
-	getMainChartRect() {
-		return this.resolve().mainChartRect;
-	}
-}, $ = class {
-	constructor(e) {
-		this.indicatorEngine = e;
-	}
-	registerIndicator(e) {
-		this.indicatorEngine.register(e);
-	}
-}, Et = class {
-	static version = "0.3.0";
-	engine;
-	viewport;
-	dataManager;
-	themeManager;
-	layoutManager;
-	pluginManager;
-	indicatorEngine;
-	drawingManager;
-	drawingRenderer;
-	tradingManager;
-	tradingRenderer;
-	eventBus;
-	streamManager = null;
-	autoScrollOnNewBar = !0;
-	displayDataCache = null;
-	resolvedLayoutCache = null;
-	panelInfoCache = null;
-	renderScheduled = !1;
-	containerSizeCache = null;
-	containerSizeCacheTime = 0;
-	chartLegend;
-	watermark;
-	barCountdown;
-	sessionBreaks;
-	compareRenderer;
-	countdownInterval = null;
-	volumeRenderer;
-	alertManager;
-	replayManager;
-	undoRedoManager;
-	autoSaveTimer = null;
-	autoSaveDelay = 0;
-	autoSaveKey = null;
-	animator;
-	crosshairTooltip;
-	interactionManager;
-	crosshairHandler;
-	chartRenderer;
-	gridRenderer;
-	priceAxis;
-	timeAxis;
+import { a as e, i as t, n, r, t as i } from "./Chart-BodmeuC5.js";
+import { DARK_TERMINAL as a, DARK_THEME as o, DEFAULT_DRAWING_STYLE as ee, DEFAULT_RECONNECT as te, DEFAULT_SIGNAL_STYLE as ne, DEFAULT_STREAM_CONFIG as s, DEFAULT_TIMEFRAME_FAVORITES as c, DEFAULT_TRADE_ZONE_STYLE as l, DEFAULT_TRADING_CONFIG as u, LIGHT_THEME as d, MARKET_CRYPTO as f, MARKET_HNX as p, MARKET_HOSE as m, MARKET_NYSE as h, MARKET_UPCOM as g, TIMEFRAMES_CRYPTO as _, TIMEFRAMES_FOREX as v, TIMEFRAMES_STOCK as y, VN_COLORS as b, computePriceLimits as x, createVNTheme as S, formatNumber as C, formatVND as w, formatVolumeLoc as T, getCurrentSession as E, getLocale as D, normalizeBar as O, normalizeBarTime as k, registerLocale as A, setLocale as j, t as M } from "@tradecanvas/commons";
+import { AlertManager as N, Animator as P, BarCountdown as F, BaseFinanceChart as I, BinanceAdapter as L, ChartLegend as R, ChartStateManager as z, CompareRenderer as B, CrosshairTooltip as V, CurrentPriceLine as H, DEFAULT_LEGEND_CONFIG as U, DataExporter as W, DrawingBase as G, Easing as K, FinanceCrosshair as q, IndicatorBase as J, KeyboardHandler as Y, MockAdapter as X, ReplayManager as Z, Screenshot as re, SessionBreaks as ie, SignalMarkerManager as ae, StreamManager as oe, TickAggregator as se, TradeZoneManager as ce, UndoRedoManager as le, VolumeRenderer as ue, Watermark as de, layoutSquarifiedTreemap as fe, layoutUniformGrid as pe, renderDepthChart as me, renderEquityCurve as he, renderGauge as ge, renderHeatmap as _e, renderSparkline as ve, renderWaterfall as ye, toHeikinAshi as be, toKagi as xe, toLineBreak as Se, toPointAndFigure as Ce, toRangeBars as we, toRenko as Te } from "@tradecanvas/core";
+//#region src/grid/ChartGrid.ts
+var Q = {
+	"1x1": {
+		cols: 1,
+		rows: 1
+	},
+	"1x2": {
+		cols: 2,
+		rows: 1
+	},
+	"2x1": {
+		cols: 1,
+		rows: 2
+	},
+	"2x2": {
+		cols: 2,
+		rows: 2
+	},
+	"1x3": {
+		cols: 3,
+		rows: 1
+	},
+	"3x1": {
+		cols: 1,
+		rows: 3
+	},
+	"2x3": {
+		cols: 3,
+		rows: 2
+	},
+	"3x2": {
+		cols: 2,
+		rows: 3
+	}
+}, Ee = class {
+	root;
+	cells = [];
+	layout;
 	options;
-	features;
-	marketConfig = null;
-	container;
-	currentPriceLine;
-	numberLocale;
-	keyboardHandler = null;
-	onWindowKeyDown = null;
-	currentSymbol = "";
-	constructor(e, t) {
-		this.container = e, this.options = t, this.numberLocale = t.numberLocale ?? "en-US";
-		let n = t.features ?? {};
-		this.features = {
-			drawings: n.drawings ?? !0,
-			drawingTools: n.drawingTools ?? [],
-			drawingMagnet: n.drawingMagnet ?? !0,
-			drawingUndoRedo: n.drawingUndoRedo ?? !0,
-			trading: n.trading ?? !0,
-			tradingContextMenu: n.tradingContextMenu ?? !0,
-			indicators: n.indicators ?? !0,
-			indicatorIds: n.indicatorIds ?? [],
-			panning: n.panning ?? !0,
-			zooming: n.zooming ?? !0,
-			crosshair: n.crosshair ?? !0,
-			keyboard: n.keyboard ?? !0,
-			priceAxis: n.priceAxis ?? !0,
-			timeAxis: n.timeAxis ?? !0,
-			grid: n.grid ?? t.grid?.visible ?? !0,
-			legend: n.legend ?? !0,
-			volume: n.volume ?? !0,
-			watermark: n.watermark ?? !0,
-			saveLoad: n.saveLoad ?? !0,
-			screenshot: n.screenshot ?? !0,
-			alerts: n.alerts ?? !0,
-			replay: n.replay ?? !0,
-			sessionBreaks: n.sessionBreaks ?? !0,
-			barCountdown: n.barCountdown ?? !0,
-			compareSymbols: n.compareSymbols ?? !0,
-			dataExport: n.dataExport ?? !0,
-			logScale: n.logScale ?? !0,
-			timeframes: n.timeframes ?? [],
-			defaultTimeframeFavorites: n.defaultTimeframeFavorites ?? []
-		}, e.style.position = "relative", e.style.overflow = "hidden", e.tabIndex = 0, e.style.outline = "none", this.dataManager = new J(), this.themeManager = new Y(t.theme), this.layoutManager = new Q(), this.indicatorEngine = new H(), this.pluginManager = new $(this.indicatorEngine), this.eventBus = new Oe(), G(this.indicatorEngine), this.drawingManager = new Te(), lt(this.drawingManager), this.drawingRenderer = new Ee(this.drawingManager), this.drawingManager.setRequestRender(() => {
-			this.syncRenderContext(), this.engine.requestRender(d.Overlay), this.scheduleAutoSave();
-		}), this.drawingManager.setEventCallback((e, t) => {
-			this.eventBus.emit(e, t);
-		}), this.undoRedoManager = new et(), this.drawingManager.setUndoRedoManager(this.undoRedoManager), this.drawingManager.setDataGetter(() => this.dataManager.getData()), this.drawingManager.setDisplayDataGetter(() => this.getDisplayData()), t.crosshair?.mode === "magnet" && this.drawingManager.setMagnetMode("magnet"), this.tradingManager = new Ze(), this.tradingRenderer = new Qe(this.tradingManager), this.tradingManager.setContainer(e), this.tradingManager.setRequestRender(() => this.engine.requestRender(d.Overlay)), this.tradingManager.setEventCallback((e, t) => {
-			this.eventBus.emit(e, t);
-		}), this.engine = new Ve(e);
-		let r = this.engine.dprManager.getContainerSize();
-		this.viewport = new tt(r.width, r.height, t.minBarSpacing ?? 2, t.maxBarSpacing ?? 30, t.rightMargin ?? 5), this.layoutManager.resize(r.width, r.height), this.engine.onContainerResize = (e) => {
-			if (e.width <= 0 || e.height <= 0) return;
-			let t = this.viewport.isAtEnd();
-			this.viewport.resize(e.width, e.height), this.layoutManager.resize(e.width, e.height), this.updateViewportAndRender(t);
-		}, this.chartRenderer = this.createChartRenderer(t.chartType), this.gridRenderer = new ke(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new Be(), this.priceAxis.setLocale(this.numberLocale), this.timeAxis = new Xe(), this.crosshairHandler = new _e(), this.crosshairHandler.setLocale(this.numberLocale), t.crosshair?.mode && this.crosshairHandler.setMode(t.crosshair.mode), this.crosshairHandler.setCallback((e, t) => {
-			if (e !== null && t) {
-				let n = this.dataManager.getData(), r = e < n.length ? n[e] : void 0;
-				this.chartLegend.setHoverBar(r ?? null), r && this.crosshairTooltip.show(t, r, this.themeManager.getTheme(), this.cachedContainerSize()), this.eventBus.emit("crosshairMove", {
-					point: t,
-					bar: r,
-					barIndex: e
-				});
-			} else this.crosshairTooltip.hide(), this.chartLegend.setHoverBar(null);
-		}), this.chartLegend = new L(), this.chartLegend.setChartType(t.chartType), this.watermark = new at(), t.watermark && this.watermark.setConfig(t.watermark), this.volumeRenderer = new rt(), this.barCountdown = new A(), this.sessionBreaks = new Ke(), this.compareRenderer = new ge(), t.sessionBreaks ? this.sessionBreaks.setConfig({
-			visible: t.sessionBreaks.visible ?? !0,
-			color: t.sessionBreaks.color,
-			lineStyle: t.sessionBreaks.lineStyle,
-			lineWidth: t.sessionBreaks.lineWidth
-		}) : t.features?.sessionBreaks !== !1 && this.sessionBreaks.setVisible(!0), t.logScale && this.viewport.setLogScale(!0), this.animator = new D(), this.crosshairTooltip = new ye(), this.crosshairTooltip.create(e), this.keyboardHandler = new Fe({
-			scrollBars: (e) => {
-				let t = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
-				this.viewport.scrollBy(e * t), this.updateViewportAndRender();
-			},
-			zoom: (e) => {
-				let t = this.viewport.getState().chartRect.width;
-				this.viewport.zoom(e, t / 2), this.updateViewportAndRender();
-			},
-			goToStart: () => {
-				this.viewport.scrollBy(-Infinity), this.updateViewportAndRender();
-			},
-			goToEnd: () => {
-				this.viewport.scrollToEnd(), this.updateViewportAndRender();
-			},
-			fitContent: () => this.fitContent()
-		}), this.keyboardHandler.setEnabled(this.features.keyboard), this.onWindowKeyDown = (e) => {
-			if (!this.keyboardHandler) return;
-			let t = document.activeElement;
-			t && t !== this.container && !this.container.contains(t) || t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) || this.keyboardHandler.handleKey(e) && e.preventDefault();
-		}, window.addEventListener("keydown", this.onWindowKeyDown), this.currentPriceLine = new xe(), this.alertManager = new T(), this.alertManager.setRequestRender(() => this.engine.requestRender(d.Overlay)), this.alertManager.on("triggered", (e) => {
-			this.eventBus.emit("dataUpdate", {
-				alert: "triggered",
-				alertId: e.id,
-				price: e.price,
-				message: e.message
-			});
-		}), this.replayManager = new U(), this.interactionManager = new Me(e), this.features.panning && this.interactionManager.setPanHandler(new Re((e) => {
-			this.viewport.scrollBy(e), this.updateViewportAndRender();
-		})), this.features.zooming && this.interactionManager.setZoomHandler(new ot((e, t) => {
-			this.viewport.zoom(e, t), this.updateViewportAndRender();
-		})), this.features.crosshair && this.interactionManager.setCrosshairHandler(this.crosshairHandler), this.features.drawings && this.interactionManager.setDrawingManager(this.drawingManager, () => this.viewport.getState()), this.features.trading && this.interactionManager.setTradingManager(this.tradingManager, () => this.viewport.getState()), this.interactionManager.setOverlayDirtyCallback(() => {
-			this.engine.requestRender(d.Overlay), this.layoutManager.getPanels().length > 0 && this.engine.requestRender(d.UI);
-		}), this.interactionManager.attach(), this.syncRenderContext(), this.engine.start();
-	}
-	setData(e) {
-		this.dataManager.setData(e), this.crosshairHandler.setData(this.dataManager.getData()), this.displayDataCache = null, this.sessionBreaks.invalidateCache(), this.indicatorEngine.recalculateAll(this.dataManager.getData()), e.length > 0 && this.currentPriceLine.setPrice(e[e.length - 1].close), this.updateViewportAndRender(!0), this.eventBus.emit("dataUpdate", { length: e.length });
-	}
-	appendBar(e) {
-		this.dataManager.appendBar(e), this.crosshairHandler.setData(this.dataManager.getData()), this.displayDataCache = null, this.autoScrollOnNewBar && this.viewport.scrollToEnd(), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.updateViewportAndRender();
-	}
-	appendBars(e) {
-		if (e.length !== 0) {
-			for (let t of e) this.dataManager.appendBar(t);
-			this.displayDataCache = null, this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.crosshairHandler.setData(this.dataManager.getData()), this.updateViewportAndRender(this.viewport.isAtEnd());
-		}
-	}
-	updateLastBar(e) {
-		this.dataManager.updateLastBar(e), this.currentPriceLine.setPrice(e.close), this.options.chartType !== "candlestick" && this.options.chartType !== "line" && this.options.chartType !== "area" && this.options.chartType !== "bar" && this.options.chartType !== "hollowCandle" && (this.displayDataCache = null), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.scheduleRender();
-	}
-	updateLastBarFromTick(e) {
-		this.dataManager.updateLastBarFromTick(e), this.currentPriceLine.setPrice(e.price), this.options.chartType !== "candlestick" && this.options.chartType !== "line" && this.options.chartType !== "area" && this.options.chartType !== "bar" && this.options.chartType !== "hollowCandle" && (this.displayDataCache = null), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.scheduleRender();
-	}
-	setChartType(e) {
-		this.options.chartType = e, this.chartRenderer = this.createChartRenderer(e), this.chartLegend.setChartType(e), this.displayDataCache = null, this.updateViewportAndRender(!0);
-	}
-	addIndicator(e, t = {}, n = "bottom") {
-		if (!this.features.indicators || this.features.indicatorIds.length > 0 && !this.features.indicatorIds.includes(e)) return null;
-		let r = this.indicatorEngine.addIndicator(e, t, this.dataManager.getData());
-		return this.indicatorEngine.getAvailableIndicators().find((t) => t.id === e)?.placement === "panel" ? (this.layoutManager.addPanel(r, n), this.updateViewportAndRender()) : this.engine.requestRender(), this.eventBus.emit("indicatorAdd", {
-			instanceId: r,
-			id: e
-		}), r;
-	}
-	updateIndicator(e, t) {
-		this.indicatorEngine.updateIndicator(e, t, this.dataManager.getData()), this.engine.requestRender();
-	}
-	removeIndicator(e) {
-		let t = this.layoutManager.getPanels().some((t) => t.id === e);
-		this.indicatorEngine.removeIndicator(e), this.layoutManager.removePanel(e), this.eventBus.emit("indicatorRemove", { instanceId: e }), t ? this.updateViewportAndRender() : this.engine.requestRender();
-	}
-	getIndicatorOutput(e) {
-		return this.indicatorEngine.getOutput(e);
-	}
-	registerIndicator(e) {
-		this.pluginManager.registerIndicator(e);
-	}
-	static indicators() {
-		let e = new H();
-		return G(e), e.getAvailableIndicators();
-	}
-	setPanelPosition(e, t) {
-		this.layoutManager.setPanelPosition(e, t), this.engine.requestRender();
-	}
-	setPanelSize(e, t) {
-		this.layoutManager.setPanelSize(e, t), this.engine.requestRender();
-	}
-	setDrawingTool(e) {
-		this.features.drawings && (e && this.features.drawingTools.length > 0 && !this.features.drawingTools.includes(e) || this.drawingManager.setActiveTool(e));
-	}
-	getDrawingTool() {
-		return this.drawingManager.getActiveTool();
-	}
-	setDrawingStyle(e) {
-		this.drawingManager.setStyle(e);
-	}
-	getDrawings() {
-		return this.drawingManager.getDrawings();
-	}
-	setDrawings(e) {
-		this.drawingManager.setDrawings(e);
-	}
-	removeDrawing(e) {
-		this.drawingManager.removeDrawing(e);
-	}
-	clearDrawings() {
-		this.drawingManager.clearDrawings();
-	}
-	registerDrawingTool(e) {
-		this.drawingManager.register(e);
-	}
-	undo() {
-		return this.features.drawingUndoRedo ? this.drawingManager.undo() : !1;
-	}
-	redo() {
-		return this.features.drawingUndoRedo ? this.drawingManager.redo() : !1;
-	}
-	getUndoRedoState() {
-		return this.undoRedoManager.getState();
-	}
-	setDrawingMagnet(e) {
-		this.drawingManager.setMagnetMode(e ? "magnet" : "none");
-	}
-	getDrawingMagnet() {
-		return this.drawingManager.getMagnetMode() === "magnet";
-	}
-	lockAllDrawings() {
-		this.drawingManager.lockAllDrawings();
-	}
-	unlockAllDrawings() {
-		this.drawingManager.unlockAllDrawings();
-	}
-	hideAllDrawings() {
-		this.drawingManager.hideAllDrawings();
-	}
-	showAllDrawings() {
-		this.drawingManager.showAllDrawings();
-	}
-	duplicateDrawing(e) {
-		let t = e ?? this.drawingManager.getSelectedDrawingId();
-		return t ? this.drawingManager.duplicateDrawing(t) : null;
-	}
-	exportVisibleData(e = "csv", t) {
-		let n = this.viewport.getState(), r = this.dataManager.getData(), i = Math.max(0, n.visibleRange.from), a = Math.min(r.length - 1, n.visibleRange.to), o = r.slice(i, a + 1);
-		if (e === "json") {
-			let e = B.toJSON(o);
-			B.download(e, t ?? "chart-data.json", "application/json");
-		} else {
-			let e = B.toCSV(o);
-			B.download(e, t ?? "chart-data.csv", "text/csv");
-		}
-	}
-	exportAllData(e = "csv", t) {
-		let n = this.dataManager.getData();
-		if (e === "json") {
-			let e = B.toJSON(n);
-			B.download(e, t ?? "chart-data.json", "application/json");
-		} else {
-			let e = B.toCSV(n);
-			B.download(e, t ?? "chart-data.csv", "text/csv");
-		}
-	}
-	setAutoSave(e, t = 5e3) {
-		this.autoSaveKey = e, this.autoSaveDelay = t;
-	}
-	disableAutoSave() {
-		this.autoSaveDelay = 0, this.autoSaveKey = null, this.autoSaveTimer &&= (clearTimeout(this.autoSaveTimer), null);
-	}
-	scheduleAutoSave() {
-		this.autoSaveDelay <= 0 || !this.autoSaveKey || (this.autoSaveTimer && clearTimeout(this.autoSaveTimer), this.autoSaveTimer = setTimeout(() => {
-			this.autoSaveTimer = null, this.autoSaveKey && this.saveState(this.autoSaveKey);
-		}, this.autoSaveDelay));
-	}
-	getAvailableIndicators() {
-		return this.indicatorEngine.getAvailableIndicators();
-	}
-	getIndicatorInputs(e) {
-		let t = this.indicatorEngine.getAvailableIndicators().find((t) => t.id === e);
-		return t ? {
-			id: t.id,
-			params: t.defaultConfig
-		} : null;
-	}
-	getActiveIndicators() {
-		return this.indicatorEngine.getActiveIndicators();
-	}
-	getIndicatorConfig(e) {
-		let t = this.indicatorEngine.getIndicatorConfig(e);
-		return t ? {
-			id: t.id,
-			params: { ...t.params }
-		} : null;
-	}
-	updateIndicatorStyle(e, t) {
-		this.indicatorEngine.updateIndicatorStyle(e, t), this.engine.requestRender();
-	}
-	setOrders(e) {
-		this.features.trading && this.tradingManager.setOrders(e);
-	}
-	setPositions(e) {
-		this.features.trading && this.tradingManager.setPositions(e);
-	}
-	setDepthData(e) {
-		this.features.trading && this.tradingManager.setDepthData(e);
-	}
-	setCurrentPrice(e, t) {
-		this.tradingManager.setCurrentPrice(e), this.currentPriceLine.setPrice(e), this.scheduleRender(), this.features.alerts && this.alertManager.checkPrice(e);
-	}
-	setTradingConfig(e) {
-		this.features.trading && this.tradingManager.setConfig(e);
-	}
-	async connect(e) {
-		this.disconnectStream(), this.streamManager = new Je(), this.streamManager.on("snapshot", (e) => {
-			this.setData(e);
-		}), this.streamManager.on("barClose", (e) => {
-			this.dataManager.appendBar(e), this.crosshairHandler.setData(this.dataManager.getData()), this.autoScrollOnNewBar && this.viewport.scrollToEnd(), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.updateViewportAndRender();
-		}), this.streamManager.on("barUpdate", (e) => {
-			this.dataManager.updateLastBar(e), this.currentPriceLine.setPrice(e.close), this.indicatorEngine.recalculateAll(this.dataManager.getData()), this.scheduleRender();
-		}), this.streamManager.on("priceChange", ({ price: e }) => {
-			this.tradingManager.setCurrentPrice(e), this.currentPriceLine.setPrice(e), this.engine.requestRender(d.Overlay), this.engine.requestRender(d.UI);
-		}), this.streamManager.on("connectionChange", (e) => {
-			this.eventBus.emit("dataUpdate", { connection: e });
-		}), this.streamManager.on("error", (e) => {
-			this.eventBus.emit("dataUpdate", { error: e.message });
-		}), this.autoScrollOnNewBar = e.autoScroll !== !1, this.currentSymbol = e.symbol, await this.streamManager.connect(e);
-		let t = this.timeframeToMs(e.timeframe);
-		this.barCountdown.setTimeframeMs(t), this.countdownInterval && clearInterval(this.countdownInterval), this.countdownInterval = setInterval(() => {
-			this.barCountdown.isVisible() && this.engine.requestRender(d.UI);
-		}, 1e3);
-	}
-	async switchStream(e, t) {
-		this.streamManager && (this.currentSymbol = e, await this.streamManager.switchTo(e, t));
-	}
-	async setTimeframe(e) {
-		if (!this.streamManager) throw Error("No active stream. Call connect() first.");
-		await this.switchStream(this.currentSymbol, e);
-	}
-	disconnectStream() {
-		this.streamManager &&= (this.streamManager.dispose(), null);
-	}
-	setBarCountdownVisible(e) {
-		this.barCountdown.setVisible(e), this.engine.requestRender(d.UI);
-	}
-	setSessionBreaksVisible(e) {
-		this.sessionBreaks.setVisible(e), this.engine.requestRender(d.Background);
-	}
-	addCompareSymbol(e, t, n, r) {
-		this.compareRenderer.addSymbol({
-			id: e,
-			label: t,
-			data: n,
-			color: r,
-			visible: !0
-		}), this.engine.requestRender(d.Main);
-	}
-	removeCompareSymbol(e) {
-		this.compareRenderer.removeSymbol(e), this.engine.requestRender(d.Main);
-	}
-	updateCompareData(e, t) {
-		this.compareRenderer.setSymbolData(e, t), this.engine.requestRender(d.Main);
-	}
-	setCompareMode(e) {
-		this.compareRenderer.setMode(e), this.engine.requestRender(d.Main);
-	}
-	clearCompareSymbols() {
-		this.compareRenderer.clear(), this.engine.requestRender(d.Main);
-	}
-	setLogScale(e) {
-		this.viewport.setLogScale(e), this.updateViewportAndRender();
-	}
-	isLogScale() {
-		return this.viewport.isLogScale();
-	}
-	setSessionBreaksConfig(e) {
-		this.sessionBreaks.setConfig(e), this.engine.requestRender(d.Background);
-	}
-	getConnectionState() {
-		return this.streamManager?.getConnectionState() ?? "disconnected";
-	}
-	getConnectionInfo() {
-		return this.streamManager?.getConnectionInfo() ?? { state: "disconnected" };
-	}
-	setAutoScroll(e) {
-		this.autoScrollOnNewBar = e;
-	}
-	scrollTo(e) {
-		let t = this.dataManager.getData();
-		for (let n = 0; n < t.length; n++) if (t[n].time >= e) {
-			let e = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
-			this.viewport.scrollBy(n * e - this.viewport.getState().offset), this.updateViewportAndRender();
-			return;
+	destroyed = !1;
+	syncing = !1;
+	constructor(e, t = {}) {
+		this.options = t, this.layout = t.layout ?? "2x2", this.root = document.createElement("div"), this.root.style.cssText = "display:grid;width:100%;height:100%;overflow:hidden;", e.appendChild(this.root), this.applyLayout(), this.createCells();
+	}
+	applyLayout() {
+		let { cols: e, rows: t } = Q[this.layout], n = this.options.gap ?? 1;
+		this.root.style.gridTemplateColumns = `repeat(${e}, 1fr)`, this.root.style.gridTemplateRows = `repeat(${t}, 1fr)`, this.root.style.gap = `${n}px`;
+	}
+	createCells() {
+		let { cols: e, rows: t } = Q[this.layout], n = e * t;
+		for (let e = 0; e < n; e++) {
+			let t = this.options.cells?.[e] ?? {}, n = document.createElement("div");
+			n.style.cssText = "position:relative;overflow:hidden;min-width:0;min-height:0;", this.root.appendChild(n);
+			let r = new i(n, {
+				chartType: "candlestick",
+				autoScale: !0,
+				features: {
+					crosshair: !0,
+					keyboard: !0,
+					volume: !0,
+					legend: !0,
+					priceAxis: !0,
+					timeAxis: !0,
+					grid: !0
+				},
+				...this.options.chartOptions,
+				...t.chartOptions,
+				theme: this.options.theme
+			}), a = {
+				container: n,
+				chart: r,
+				symbol: t.symbol ?? `Chart ${e + 1}`,
+				timeframe: t.timeframe ?? "5m"
+			};
+			this.options.syncCrosshair !== !1 && r.on("crosshairMove", (e) => {
+				if (!this.syncing) {
+					this.syncing = !0;
+					for (let t of this.cells) t.chart !== r && t.chart.setCrosshairPosition(e.payload.point);
+					this.syncing = !1;
+				}
+			}), this.options.syncTimeAxis !== !1 && r.on("visibleRangeChange", (e) => {
+				if (this.syncing) return;
+				this.syncing = !0;
+				let { from: t, to: n } = e.payload, i = r.getData();
+				if (i.length > 0 && t >= 0 && n < i.length) {
+					let e = i[t]?.time, a = i[n]?.time;
+					if (e && a) for (let t of this.cells) t.chart !== r && t.chart.setVisibleRange(e, a);
+				}
+				this.syncing = !1;
+			}), this.cells.push(a);
 		}
 	}
-	scrollToEnd() {
-		this.viewport.scrollToEnd(), this.updateViewportAndRender();
-	}
-	setVisibleRange(e, t) {
-		let n = this.dataManager.getData(), r = 0, i = n.length - 1;
-		for (let t = 0; t < n.length; t++) if (n[t].time >= e) {
-			r = t;
-			break;
-		}
-		for (let e = n.length - 1; e >= 0; e--) if (n[e].time <= t) {
-			i = e;
-			break;
+	setLayout(e) {
+		if (e === this.layout) return;
+		let t = this.cells.length, { cols: n, rows: r } = Q[e], a = n * r;
+		if (a < t) for (let e = t - 1; e >= a; e--) {
+			let t = this.cells[e];
+			t.chart.destroy(), t.container.remove(), this.cells.pop();
 		}
-		let a = i - r + 1;
-		if (a > 0) {
-			let e = this.viewport.getState().chartRect.width, t = e / a, n = Math.max(2, t - this.viewport.getState().barSpacing);
-			this.viewport.zoom((n - this.viewport.getState().barWidth) / this.viewport.getState().barWidth, e / 2);
+		if (this.layout = e, this.applyLayout(), a > t) for (let e = t; e < a; e++) {
+			let t = this.options.cells?.[e] ?? {}, n = document.createElement("div");
+			n.style.cssText = "position:relative;overflow:hidden;min-width:0;min-height:0;", this.root.appendChild(n);
+			let r = new i(n, {
+				chartType: "candlestick",
+				autoScale: !0,
+				...this.options.chartOptions,
+				...t.chartOptions,
+				theme: this.options.theme
+			});
+			this.cells.push({
+				container: n,
+				chart: r,
+				symbol: t.symbol ?? `Chart ${e + 1}`,
+				timeframe: t.timeframe ?? "5m"
+			});
 		}
-		this.updateViewportAndRender();
 	}
-	zoomIn() {
-		let e = this.viewport.getState().chartRect.width;
-		this.viewport.zoom(.2, e / 2), this.updateViewportAndRender();
+	getChart(e) {
+		return this.cells[e]?.chart ?? null;
 	}
-	zoomOut() {
-		let e = this.viewport.getState().chartRect.width;
-		this.viewport.zoom(-.2, e / 2), this.updateViewportAndRender();
+	getCharts() {
+		return this.cells.map((e) => e.chart);
 	}
-	fitContent() {
-		let e = this.dataManager.getData();
-		e.length !== 0 && this.setVisibleRange(e[0].time, e[e.length - 1].time);
+	getCellCount() {
+		return this.cells.length;
 	}
-	on(e, t) {
-		this.eventBus.on(e, t);
+	setData(e, t) {
+		this.cells[e]?.chart.setData(t);
 	}
-	off(e, t) {
-		this.eventBus.off(e, t);
+	setAllData(e) {
+		for (let t of this.cells) t.chart.setData(e);
 	}
-	enableTauriBridge(e) {
-		this.eventBus.enableTauriBridge({
-			enabled: !0,
-			...e
-		});
+	async connectCell(e, t) {
+		let n = this.cells[e];
+		n && (n.symbol = t.symbol, n.timeframe = t.timeframe, await n.chart.connect(t));
 	}
-	disableTauriBridge() {
-		this.eventBus.disableTauriBridge();
+	async connectAll(e, t, n, r = 500) {
+		let i = [];
+		for (let a = 0; a < this.cells.length && a < t.length; a++) i.push(this.connectCell(a, {
+			adapter: e,
+			symbol: t[a],
+			timeframe: n,
+			historyLimit: r
+		}));
+		await Promise.all(i);
 	}
 	setTheme(e) {
-		this.themeManager.setTheme(e), this.syncRenderContext(), this.container.style.backgroundColor = this.themeManager.getTheme().background, this.engine.requestRender(), this.eventBus.emit("themeChange", { theme: e });
-	}
-	getTheme() {
-		return this.themeManager.getTheme();
-	}
-	setWatermark(e, t) {
-		this.watermark.setConfig({
-			text: e,
-			...t
-		}), this.engine.requestRender(d.Background);
-	}
-	setAutoScale(e) {
-		this.options.autoScale = e, this.updateViewportAndRender();
-	}
-	isAutoScale() {
-		return this.options.autoScale !== !1;
-	}
-	setCrosshairMode(e) {
-		this.crosshairHandler.setMode(e), this.engine.requestRender(d.Overlay);
-	}
-	getCrosshairMode() {
-		return this.crosshairHandler.getMode();
-	}
-	setGridVisible(e) {
-		this.gridRenderer.setVisible(e), this.engine.requestRender(d.Background);
-	}
-	isGridVisible() {
-		return this.gridRenderer.isVisible();
-	}
-	setVolumeVisible(e) {
-		this.volumeRenderer.setVisible(e), this.engine.requestRender(d.Main);
-	}
-	setTooltipVisible(e) {
-		e || this.crosshairTooltip.hide();
-	}
-	setLegend(e) {
-		this.chartLegend.setConfig(e), this.engine.requestRender(d.UI);
-	}
-	setSymbolName(e) {
-		this.chartLegend.setSymbol(e), this.engine.requestRender(d.UI);
-	}
-	setStatusText(e) {
-		this.chartLegend.setStatusText(e), this.engine.requestRender(d.UI);
-	}
-	screenshot(e) {
-		this.features.screenshot && W.download(this.container, e, this.themeManager.getTheme().background);
-	}
-	screenshotDataURL() {
-		return this.features.screenshot ? W.toDataURL(this.container, this.themeManager.getTheme().background) : null;
-	}
-	async screenshotBlob() {
-		return this.features.screenshot ? W.toBlob(this.container, this.themeManager.getTheme().background) : null;
-	}
-	addAlert(e, t = "crossing", n) {
-		if (!this.features.alerts) return null;
-		let r = this.alertManager.addAlert(e, t, n);
-		return this.scheduleAutoSave(), r;
-	}
-	removeAlert(e) {
-		this.alertManager.removeAlert(e), this.scheduleAutoSave();
-	}
-	getAlerts() {
-		return this.alertManager.getAlerts();
-	}
-	clearAlerts() {
-		this.alertManager.clearAlerts(), this.scheduleAutoSave();
-	}
-	saveAlerts(e) {
-		this.alertManager.saveToStorage(e);
-	}
-	loadAlerts(e) {
-		this.alertManager.loadFromStorage(e), this.engine.requestRender(d.Overlay);
-	}
-	replay(e) {
-		if (!this.features.replay) return;
-		let t = this.dataManager.getData();
-		this.replayManager.load(t), this.replayManager.on("bar", ({ bar: e, index: n }) => {
-			let r = t.slice(0, n + 1);
-			this.dataManager.setData(r), this.crosshairHandler.setData(r), this.indicatorEngine.recalculateAll(r), this.updateViewportAndRender();
-		}), this.replayManager.play(e);
-	}
-	replayPause() {
-		this.replayManager.pause();
-	}
-	replayResume() {
-		this.replayManager.resume();
-	}
-	replayStop() {
-		this.replayManager.stop();
-	}
-	replaySeek(e) {
-		this.replayManager.seekTo(e);
-	}
-	setReplaySpeed(e) {
-		this.replayManager.setSpeed(e);
-	}
-	getReplayState() {
-		return this.replayManager.getState();
-	}
-	getReplayProgress() {
-		return this.replayManager.getProgress();
-	}
-	saveState(e) {
-		if (!this.features.saveLoad) return null;
-		let t = z.capture({
-			getDrawings: () => this.getDrawings(),
-			getTheme: () => this.getTheme(),
-			getAlerts: () => this.getAlerts()
-		}, { chartType: this.options.chartType }), n = z.serialize(t);
-		return e && z.saveToStorage(e, t), n;
-	}
-	loadState(e) {
-		if (!this.features.saveLoad) return;
-		let t = z.deserialize(e);
-		if (t.chartType && this.setChartType(t.chartType), t.drawings && this.setDrawings(t.drawings), t.theme && this.setTheme(t.theme), t.alerts) {
-			this.clearAlerts();
-			for (let e of t.alerts) this.addAlert(e.price, e.condition, e.message);
-		}
-	}
-	loadStateFromStorage(e) {
-		if (!this.features.saveLoad) return !1;
-		let t = z.loadFromStorage(e);
-		return t ? (this.loadState(z.serialize(t)), !0) : !1;
-	}
-	downloadState(e) {
-		if (!this.features.saveLoad) return;
-		let t = z.capture({
-			getDrawings: () => this.getDrawings(),
-			getTheme: () => this.getTheme(),
-			getAlerts: () => this.getAlerts()
-		}, { chartType: this.options.chartType });
-		z.downloadFile(t, e);
-	}
-	async loadStateFromFile() {
-		if (!this.features.saveLoad) return;
-		let e = await z.loadFromFile();
-		this.loadState(z.serialize(e));
-	}
-	setLocale(e) {
-		S(e), this.engine.requestRender();
-	}
-	setNumberLocale(e) {
-		this.numberLocale = e, this.priceAxis.setLocale(e), this.crosshairHandler.setLocale(e), this.syncRenderContext(), this.engine.requestRender();
-	}
-	getNumberLocale() {
-		return this.numberLocale;
-	}
-	setMarket(e) {
-		if (this.marketConfig = e, e.colorScheme) {
-			let t = {
-				...this.themeManager.getTheme(),
-				candleUp: e.colorScheme.up,
-				candleDown: e.colorScheme.down,
-				candleUpWick: e.colorScheme.up,
-				candleDownWick: e.colorScheme.down,
-				volumeUp: e.colorScheme.up.replace(")", ", 0.3)").replace("rgb(", "rgba(") || `${e.colorScheme.up}4D`,
-				volumeDown: e.colorScheme.down.replace(")", ", 0.3)").replace("rgb(", "rgba(") || `${e.colorScheme.down}4D`
-			};
-			this.themeManager.setTheme(t);
-		}
-		e.pricePrecision !== void 0 && (this.tradingManager.setConfig({ pricePrecision: e.pricePrecision }), this.alertManager.setPricePrecision(e.pricePrecision), this.streamManager?.priceLine.setPricePrecision(e.pricePrecision), this.crosshairHandler.setPricePrecision(e.pricePrecision)), this.syncRenderContext(), this.engine.requestRender();
-	}
-	getMarket() {
-		return this.marketConfig;
-	}
-	setPriceLimits(e) {
-		this.marketConfig && (y(e, this.marketConfig) && (this.marketConfig.priceLimits = {
-			...this.marketConfig.priceLimits,
-			referencePrice: e
-		}), this.engine.requestRender());
-	}
-	getFeatures() {
-		return this.features;
-	}
-	setFeatures(e) {
-		Object.assign(this.features, e), e.crosshair === !1 && this.crosshairTooltip.hide(), e.grid !== void 0 && this.engine.requestRender(d.Background), e.volume !== void 0 && (this.volumeRenderer.setVisible(e.volume), this.engine.requestRender(d.Main)), e.drawings === !1 && this.drawingManager.setActiveTool(null), e.trading === !1 && (this.tradingManager.setOrders([]), this.tradingManager.setPositions([])), e.keyboard !== void 0 && this.keyboardHandler?.setEnabled(e.keyboard), this.engine.requestRender();
-	}
-	resize() {
-		let e = this.engine.dprManager.readContainerSize();
-		if (e.width <= 0 || e.height <= 0) return;
-		this.containerSizeCache = e, this.containerSizeCacheTime = Date.now();
-		let t = this.engine.dprManager.getDpr();
-		this.engine.layerManager.resize(e, t);
-		let n = this.viewport.isAtEnd();
-		this.viewport.resize(e.width, e.height), this.layoutManager.resize(e.width, e.height), this.updateViewportAndRender(n), this.eventBus.emit("resize", e);
+		for (let t of this.cells) t.chart.setTheme(e);
 	}
 	destroy() {
-		this.countdownInterval && clearInterval(this.countdownInterval), this.disableAutoSave(), this.disconnectStream(), this.onWindowKeyDown &&= (window.removeEventListener("keydown", this.onWindowKeyDown), null), this.keyboardHandler = null, this.interactionManager.detach(), this.tradingManager.destroy(), this.animator.dispose(), this.crosshairTooltip.destroy(), this.replayManager.dispose(), this.undoRedoManager.clear(), this.engine.destroy(), this.eventBus.destroy(), this.container.innerHTML = "";
-	}
-	createChartRenderer(e) {
-		switch (e) {
-			case "candlestick": return new F();
-			case "heikinAshi": return new F();
-			case "line": return new Ie();
-			case "area": return new O();
-			case "bar": return new j();
-			case "hollowCandle": return new Ae();
-			case "baseline": return new N();
-			case "renko": return new He();
-			case "lineBreak": return new F();
-			case "kagi": return new Ne();
-			case "pointAndFigure": return new ze();
-			default: return new F();
-		}
-	}
-	getDisplayData() {
-		if (this.displayDataCache) return this.displayDataCache;
-		let e = this.dataManager.getData();
-		if (e.length === 0) return e;
-		let t;
-		switch (this.options.chartType) {
-			case "heikinAshi":
-				t = _t(e);
-				break;
-			case "renko":
-				t = Tt(e, {
-					brickSize: 0,
-					useATR: !0,
-					atrPeriod: 14
-				});
-				break;
-			case "lineBreak":
-				t = xt(e, 3);
-				break;
-			case "kagi":
-				t = yt(e, 4);
-				break;
-			case "pointAndFigure":
-				t = Ct(e, e.reduce((e, t) => e + t.close, 0) / e.length * .01, 3);
-				break;
-			default: t = e;
-		}
-		return this.displayDataCache = t, t;
-	}
-	scheduleRender() {
-		this.renderScheduled || (this.renderScheduled = !0, requestAnimationFrame(() => {
-			this.renderScheduled = !1;
-			let e = this.getDisplayData();
-			this.viewport.updateData(e, this.options.autoScale !== !1), this.syncRenderContext(), this.engine.requestRender();
-		}));
-	}
-	updateViewportAndRender(e = !1) {
-		this.resolvedLayoutCache = null, this.panelInfoCache = null;
-		let t = this.getResolvedLayout();
-		this.viewport.setChartRect(t.mainChartRect);
-		let n = this.getDisplayData();
-		if (this.viewport.updateData(n, this.options.autoScale !== !1), this.options.autoScale !== !1) {
-			let e = this.viewport.getState(), t = this.indicatorEngine.getOverlayPriceRange(e.visibleRange.from, Math.min(e.visibleRange.to, n.length - 1));
-			if (t) {
-				let n = e.priceRange, r = Math.min(n.min, t.min), i = Math.max(n.max, t.max);
-				if (r < n.min || i > n.max) {
-					let e = i - r || 1;
-					this.viewport.setPriceRange(r - e * .02, i + e * .02);
-				}
-			}
-		}
-		e && this.viewport.scrollToEnd(), this.syncRenderContext(), this.engine.requestRender();
-	}
-	getResolvedLayout() {
-		return this.resolvedLayoutCache ||= this.layoutManager.resolve(), this.resolvedLayoutCache;
-	}
-	cachedContainerSize() {
-		let e = Date.now();
-		return (!this.containerSizeCache || e - this.containerSizeCacheTime > 500) && (this.containerSizeCache = this.engine.dprManager.getContainerSize(), this.containerSizeCacheTime = e), this.containerSizeCache;
-	}
-	buildPanelRenderInfos() {
-		if (this.panelInfoCache) return this.panelInfoCache;
-		let e = this.getResolvedLayout(), t = this.viewport.getState(), n = e.panels.map((e) => {
-			let n = this.indicatorEngine.getOutput(e.config.id), r = 0, i = 100;
-			if (n) {
-				let e = Infinity, a = -Infinity, { from: o, to: s } = t.visibleRange, c = 0;
-				for (let [, t] of n.values) {
-					if (c >= o && c <= s) for (let n in t) {
-						let r = t[n];
-						r !== void 0 && (r < e && (e = r), r > a && (a = r));
-					}
-					c++;
-				}
-				if (e !== Infinity) {
-					let t = a - e || 1;
-					r = e - t * .1, i = a + t * .1;
-				}
-			}
-			let a = {
-				x: e.rect.x,
-				y: e.rect.y + 20,
-				width: e.rect.width,
-				height: Math.max(0, e.rect.height - 20)
-			};
-			return {
-				instanceId: e.config.id,
-				rect: e.rect,
-				viewport: {
-					...t,
-					chartRect: a,
-					priceRange: {
-						min: r,
-						max: i
-					}
-				}
-			};
-		});
-		return this.panelInfoCache = n, n;
-	}
-	syncRenderContext() {
-		let e = this.getResolvedLayout(), t = this.features.indicators ? this.buildPanelRenderInfos() : [], n = e.panels.filter((e) => e.config.position === "bottom").reduce((e, t) => e + t.rect.height, 0), r = e.mainChartRect.y + e.mainChartRect.height + n;
-		this.engine.setRenderContext({
-			chartRenderer: this.chartRenderer,
-			gridRenderer: this.features.grid ? this.gridRenderer : null,
-			priceAxis: this.features.priceAxis ? this.priceAxis : null,
-			timeAxis: this.features.timeAxis ? this.timeAxis : null,
-			crosshairHandler: this.features.crosshair ? this.crosshairHandler : null,
-			indicatorEngine: this.features.indicators ? this.indicatorEngine : null,
-			drawingRenderer: this.features.drawings ? this.drawingRenderer : null,
-			tradingRenderer: this.features.trading ? this.tradingRenderer : null,
-			currentPriceLine: this.streamManager?.priceLine ?? this.currentPriceLine,
-			chartLegend: this.features.legend ? this.chartLegend : null,
-			volumeRenderer: this.features.volume ? this.volumeRenderer : null,
-			watermark: this.features.watermark ? this.watermark : null,
-			barCountdown: this.barCountdown,
-			sessionBreaks: this.sessionBreaks,
-			compareRenderer: this.compareRenderer,
-			panels: t,
-			priceLimits: this.buildPriceLimits(),
-			timeAxisY: r,
-			viewport: this.viewport.getState(),
-			theme: this.themeManager.getTheme(),
-			data: this.getDisplayData(),
-			numberLocale: this.numberLocale
-		});
-	}
-	timeframeToMs(e) {
-		let t = e.match(/^(\d+)([smhdwMy])$/);
-		if (!t) return 0;
-		let n = parseInt(t[1], 10);
-		switch (t[2]) {
-			case "s": return n * 1e3;
-			case "m": return n * 6e4;
-			case "h": return n * 36e5;
-			case "d": return n * 864e5;
-			case "w": return n * 6048e5;
-			case "M": return n * 2592e6;
-			default: return 0;
+		if (!this.destroyed) {
+			this.destroyed = !0;
+			for (let e of this.cells) e.chart.destroy(), e.container.remove();
+			this.cells = [], this.root.remove();
 		}
 	}
-	buildPriceLimits() {
-		if (!this.marketConfig?.priceLimits?.enabled || !this.marketConfig.priceLimits.referencePrice) return null;
-		let e = y(this.marketConfig.priceLimits.referencePrice, this.marketConfig);
-		return e ? {
-			...e,
-			colors: this.marketConfig.colorScheme ? {
-				ceiling: this.marketConfig.colorScheme.ceiling,
-				floor: this.marketConfig.colorScheme.floor,
-				reference: this.marketConfig.colorScheme.reference
-			} : void 0
-		} : null;
-	}
-}, Dt = class extends M {
+}, De = class extends I {
 	options;
 	constructor(e, t) {
 		super(e, t.theme), this.options = t, this.requestRender();
 	}
 	renderChart(e, t, n, r) {
-		mt(e, t, n, this.options, r);
+		ve(e, t, n, this.options, r);
 	}
 	update(e) {
 		this.options = {
@@ -1018,15 +177,15 @@ var J = class {
 			...e
 		}, this.requestRender();
 	}
-}, Ot = class extends M {
+}, $ = class extends I {
 	options;
 	crosshair = null;
 	constructor(e, t) {
-		super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), this.requestRender();
+		super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new q(this.canvas, () => this.requestRender())), this.requestRender();
 	}
 	renderChart(e, t, n, r) {
 		let i = this.crosshair?.getPosition() ?? null;
-		ut(e, t, n, this.options, r, i);
+		me(e, t, n, this.options, r, i);
 	}
 	update(e) {
 		this.options = {
@@ -1043,15 +202,15 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), super.destroy();
 	}
-}, kt = class extends M {
+}, Oe = class extends I {
 	options;
 	crosshair = null;
 	constructor(e, t) {
-		super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), this.requestRender();
+		super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new q(this.canvas, () => this.requestRender())), this.requestRender();
 	}
 	renderChart(e, t, n, r) {
 		let i = this.crosshair?.getPosition() ?? null;
-		dt(e, t, n, this.options, r, i);
+		he(e, t, n, this.options, r, i);
 	}
 	update(e, t) {
 		this.options = {
@@ -1071,7 +230,7 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), super.destroy();
 	}
-}, At = class extends M {
+}, ke = class extends I {
 	options;
 	crosshair = null;
 	cachedRects = [];
@@ -1080,7 +239,7 @@ var J = class {
 	lastLayoutHeight = 0;
 	handleClick = null;
 	constructor(e, t) {
-		super(e, t.theme), this.options = t, this.currentData = t.data ?? [], t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), t.onCellClick && (this.handleClick = (e) => {
+		super(e, t.theme), this.options = t, this.currentData = t.data ?? [], t.crosshair !== !1 && (this.crosshair = new q(this.canvas, () => this.requestRender())), t.onCellClick && (this.handleClick = (e) => {
 			let t = this.canvas.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top;
 			this.onCanvasClick(n, r);
 		}, this.canvas.addEventListener("click", this.handleClick)), this.recomputeLayout(), this.requestRender();
@@ -1092,10 +251,10 @@ var J = class {
 			width: this.width,
 			height: this.height
 		}, t = this.options.cellPadding ?? 2;
-		this.lastLayoutWidth = this.width, this.lastLayoutHeight = this.height, this.options.weighted ? this.cachedRects = st(this.currentData.map((e) => ({
+		this.lastLayoutWidth = this.width, this.lastLayoutHeight = this.height, this.options.weighted ? this.cachedRects = fe(this.currentData.map((e) => ({
 			id: e.id,
 			weight: e.weight ?? (Math.abs(e.value) || 1)
-		})), e, t) : this.cachedRects = ct(this.currentData.map((e) => ({ id: e.id })), e, t);
+		})), e, t) : this.cachedRects = pe(this.currentData.map((e) => ({ id: e.id })), e, t);
 	}
 	onCanvasClick(e, t) {
 		if (this.options.onCellClick) for (let n of this.cachedRects) {
@@ -1110,7 +269,7 @@ var J = class {
 	renderChart(e, t, n, r) {
 		(t !== this.lastLayoutWidth || n !== this.lastLayoutHeight) && this.recomputeLayout();
 		let i = this.crosshair?.getPosition() ?? null;
-		pt(e, t, n, this.currentData, this.cachedRects, this.options, r, i);
+		_e(e, t, n, this.currentData, this.cachedRects, this.options, r, i);
 	}
 	update(e) {
 		this.currentData = e, this.options = {
@@ -1127,15 +286,15 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), this.handleClick && this.canvas.removeEventListener("click", this.handleClick), super.destroy();
 	}
-}, jt = class extends M {
+}, Ae = class extends I {
 	options;
 	crosshair = null;
 	constructor(e, t) {
-		super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new V(this.canvas, () => this.requestRender())), this.requestRender();
+		super(e, t.theme), this.options = t, t.crosshair !== !1 && (this.crosshair = new q(this.canvas, () => this.requestRender())), this.requestRender();
 	}
 	renderChart(e, t, n, r) {
 		let i = this.crosshair?.getPosition() ?? null;
-		ht(e, t, n, this.options, r, i);
+		ye(e, t, n, this.options, r, i);
 	}
 	update(e) {
 		this.options = {
@@ -1152,12 +311,12 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), super.destroy();
 	}
-}, Mt = 500;
-function Nt(e) {
+}, je = 500;
+function Me(e) {
 	let t = 1 - e;
 	return 1 - t * t * t;
 }
-var Pt = class extends M {
+var Ne = class extends I {
 	options;
 	currentValue;
 	targetValue;
@@ -1168,7 +327,7 @@ var Pt = class extends M {
 		super(e, t.theme), this.options = t, this.currentValue = t.value, this.targetValue = t.value, this.requestRender();
 	}
 	renderChart(e, t, n, r) {
-		ft(e, t, n, this.options, r, this.currentValue);
+		ge(e, t, n, this.options, r, this.currentValue);
 	}
 	setValue(e) {
 		if (this.options.animate === !1) {
@@ -1198,7 +357,7 @@ var Pt = class extends M {
 		if (this.animationFrameId !== null) return;
 		let e = () => {
 			if (this.animationFrameId = null, this.animationStart === null) return;
-			let t = this.options.animationDuration ?? Mt, n = performance.now() - this.animationStart, r = Math.min(1, n / Math.max(1, t)), i = Nt(r);
+			let t = this.options.animationDuration ?? je, n = performance.now() - this.animationStart, r = Math.min(1, n / Math.max(1, t)), i = Me(r);
 			this.currentValue = this.animationFrom + (this.targetValue - this.animationFrom) * i, this.requestRender(), r < 1 ? this.animationFrameId = requestAnimationFrame(e) : (this.currentValue = this.targetValue, this.animationStart = null);
 		};
 		this.animationFrameId = requestAnimationFrame(e);
@@ -1211,6 +370,6 @@ var Pt = class extends M {
 	}
 };
 //#endregion
-export { w as AlertManager, E as Animator, k as BarCountdown, P as BinanceAdapter, Et as Chart, I as ChartLegend, R as ChartStateManager, he as CompareRenderer, ve as CrosshairTooltip, be as CurrentPriceLine, e as DARK_TERMINAL, t as DARK_THEME, r as DEFAULT_DRAWING_STYLE, Se as DEFAULT_LEGEND_CONFIG, a as DEFAULT_RECONNECT, o as DEFAULT_STREAM_CONFIG, s as DEFAULT_TIMEFRAME_FAVORITES, c as DEFAULT_TRADING_CONFIG, Ce as DataExporter, J as DataManager, Ot as DepthChart, we as DrawingBase, De as Easing, kt as EquityCurveChart, Pt as GaugeChart, At as HeatmapChart, je as IndicatorBase, Pe as KeyboardHandler, l as LIGHT_THEME, Q as LayoutManager, f as MARKET_CRYPTO, ee as MARKET_HNX, p as MARKET_HOSE, m as MARKET_NYSE, h as MARKET_UPCOM, Le as MockAdapter, $ as PluginManager, Ue as ReplayManager, We as Screenshot, Ge as SessionBreaks, Dt as SparklineChart, qe as StreamManager, te as TIMEFRAMES_CRYPTO, ne as TIMEFRAMES_FOREX, re as TIMEFRAMES_STOCK, Y as ThemeManager, Ye as TickAggregator, $e as UndoRedoManager, ie as VN_COLORS, nt as VolumeRenderer, jt as WaterfallChart, it as Watermark, ae as computePriceLimits, oe as createVNTheme, se as formatNumber, ce as formatVND, le as formatVolumeLoc, ue as getCurrentSession, de as getLocale, pe as normalizeBar, me as normalizeBarTime, b as registerLocale, x as setLocale, C as t, gt as toHeikinAshi, vt as toKagi, bt as toLineBreak, St as toPointAndFigure, wt as toRenko };
+export { N as AlertManager, P as Animator, F as BarCountdown, L as BinanceAdapter, i as Chart, Ee as ChartGrid, R as ChartLegend, z as ChartStateManager, B as CompareRenderer, V as CrosshairTooltip, H as CurrentPriceLine, a as DARK_TERMINAL, o as DARK_THEME, ee as DEFAULT_DRAWING_STYLE, U as DEFAULT_LEGEND_CONFIG, te as DEFAULT_RECONNECT, ne as DEFAULT_SIGNAL_STYLE, s as DEFAULT_STREAM_CONFIG, c as DEFAULT_TIMEFRAME_FAVORITES, l as DEFAULT_TRADE_ZONE_STYLE, u as DEFAULT_TRADING_CONFIG, W as DataExporter, e as DataManager, $ as DepthChart, G as DrawingBase, K as Easing, Oe as EquityCurveChart, Ne as GaugeChart, ke as HeatmapChart, J as IndicatorBase, Y as KeyboardHandler, d as LIGHT_THEME, r as LayoutManager, f as MARKET_CRYPTO, p as MARKET_HNX, m as MARKET_HOSE, h as MARKET_NYSE, g as MARKET_UPCOM, X as MockAdapter, n as PluginManager, Z as ReplayManager, re as Screenshot, ie as SessionBreaks, ae as SignalMarkerManager, De as SparklineChart, oe as StreamManager, _ as TIMEFRAMES_CRYPTO, v as TIMEFRAMES_FOREX, y as TIMEFRAMES_STOCK, t as ThemeManager, se as TickAggregator, ce as TradeZoneManager, le as UndoRedoManager, b as VN_COLORS, ue as VolumeRenderer, Ae as WaterfallChart, de as Watermark, x as computePriceLimits, S as createVNTheme, C as formatNumber, w as formatVND, T as formatVolumeLoc, E as getCurrentSession, D as getLocale, O as normalizeBar, k as normalizeBarTime, A as registerLocale, j as setLocale, M as t, be as toHeikinAshi, xe as toKagi, Se as toLineBreak, Ce as toPointAndFigure, we as toRangeBars, Te as toRenko };
 
 //# sourceMappingURL=index.js.map