@tradecanvas/chart 0.1.2 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { DARK_THEME as e, DARK_THEME as t, DEFAULT_DRAWING_STYLE as n, DEFAULT_PANEL_HEIGHT as r, DEFAULT_RECONNECT as i, DEFAULT_STREAM_CONFIG as a, DEFAULT_TIMEFRAME_FAVORITES as o, DEFAULT_TRADING_CONFIG as s, LIGHT_THEME as c, LIGHT_THEME as l, LayerType as u, MARKET_CRYPTO as d, MARKET_HNX as f, MARKET_HOSE as ee, MARKET_NYSE as p, MARKET_UPCOM as te, MIN_PANEL_HEIGHT as m, PRICE_AXIS_WIDTH as h, TIMEFRAMES_CRYPTO as g, TIMEFRAMES_FOREX as ne, TIMEFRAMES_STOCK as re, TIME_AXIS_HEIGHT as _, VN_COLORS as ie, computePriceLimits as ae, computePriceLimits as v, createVNTheme as oe, formatNumber as se, formatVND as ce, formatVolumeLoc as le, getCurrentSession as ue, getLocale as de, mergeBar as fe, registerLocale as pe, setLocale as y, setLocale as b, t as x } from "@tradecanvas/commons";
-import { AlertManager as S, AlertManager as C, Animator as w, Animator as T, AreaRenderer as E, BarCountdown as D, BarCountdown as O, BarRenderer as k, BaselineRenderer as A, BinanceAdapter as j, CandlestickRenderer as M, ChartLegend as N, ChartLegend as P, ChartStateManager as F, ChartStateManager as I, CompareRenderer as L, CompareRenderer as R, CrosshairHandler as z, CrosshairTooltip as B, CrosshairTooltip as me, CurrentPriceLine as he, CurrentPriceLine as ge, DEFAULT_LEGEND_CONFIG as _e, DataExporter as ve, DataExporter as V, DrawingBase as ye, DrawingManager as be, DrawingRenderer as xe, Easing as Se, EventBus as Ce, GridRenderer as we, HollowCandleRenderer as Te, IndicatorBase as Ee, IndicatorEngine as H, InteractionManager as De, KagiRenderer as Oe, KeyboardHandler as ke, KeyboardHandler as Ae, LineRenderer as je, MockAdapter as Me, PanHandler as Ne, PointAndFigureRenderer as Pe, PriceAxis as Fe, RenderEngine as Ie, RenkoRenderer as Le, ReplayManager as Re, ReplayManager as ze, Screenshot as Be, Screenshot as U, SessionBreaks as Ve, SessionBreaks as He, StreamManager as Ue, StreamManager as We, TickAggregator as Ge, TimeAxis as Ke, TradingManager as qe, TradingRenderer as Je, UndoRedoManager as Ye, UndoRedoManager as Xe, Viewport as Ze, VolumeRenderer as Qe, VolumeRenderer as $e, Watermark as et, Watermark as tt, ZoomHandler as nt, registerBuiltInDrawingTools as rt, registerBuiltInIndicators as W, toHeikinAshi as it, toHeikinAshi as at, toKagi as ot, toKagi as st, toLineBreak as ct, toLineBreak as lt, toPointAndFigure as G, toPointAndFigure as ut, toRenko as dt, toRenko as ft } from "@tradecanvas/core";
+import { DARK_THEME as e, DARK_THEME as t, DEFAULT_DRAWING_STYLE as n, DEFAULT_PANEL_HEIGHT as r, DEFAULT_RECONNECT as i, DEFAULT_STREAM_CONFIG as a, DEFAULT_TIMEFRAME_FAVORITES as o, DEFAULT_TRADING_CONFIG as s, LIGHT_THEME as c, LIGHT_THEME as l, LayerType as u, MARKET_CRYPTO as d, MARKET_HNX as f, MARKET_HOSE as ee, MARKET_NYSE as p, MARKET_UPCOM as te, MIN_PANEL_HEIGHT as m, PRICE_AXIS_WIDTH as h, TIMEFRAMES_CRYPTO as g, TIMEFRAMES_FOREX as _, TIMEFRAMES_STOCK as ne, TIME_AXIS_HEIGHT as v, VN_COLORS as re, computePriceLimits as ie, computePriceLimits as y, createVNTheme as ae, formatNumber as oe, formatVND as se, formatVolumeLoc as ce, getCurrentSession as le, getLocale as ue, mergeBar as de, registerLocale as fe, setLocale as pe, setLocale as me, t as b } from "@tradecanvas/commons";
+import { AlertManager as x, AlertManager as S, Animator as C, Animator as w, AreaRenderer as T, BarCountdown as E, BarCountdown as D, BarRenderer as O, BaseFinanceChart as k, BaselineRenderer as A, BinanceAdapter as j, CandlestickRenderer as M, ChartLegend as N, ChartLegend as P, ChartStateManager as F, ChartStateManager as I, CompareRenderer as L, CompareRenderer as R, CrosshairHandler as z, CrosshairTooltip as he, CrosshairTooltip as ge, CurrentPriceLine as _e, CurrentPriceLine as ve, DEFAULT_LEGEND_CONFIG as ye, DataExporter as be, DataExporter as B, DrawingBase as xe, DrawingManager as Se, DrawingRenderer as Ce, Easing as we, EventBus as Te, FinanceCrosshair as V, GridRenderer as Ee, HollowCandleRenderer as De, IndicatorBase as Oe, IndicatorEngine as H, InteractionManager as ke, KagiRenderer as Ae, KeyboardHandler as je, KeyboardHandler as Me, LineRenderer as Ne, MockAdapter as Pe, PanHandler as Fe, PointAndFigureRenderer as Ie, PriceAxis as Le, RenderEngine as Re, RenkoRenderer as ze, ReplayManager as Be, ReplayManager as Ve, Screenshot as He, Screenshot as U, SessionBreaks as Ue, SessionBreaks as We, StreamManager as Ge, StreamManager as Ke, TickAggregator as qe, TimeAxis as Je, TradingManager as Ye, TradingRenderer as Xe, UndoRedoManager as Ze, UndoRedoManager as Qe, Viewport as $e, VolumeRenderer as et, VolumeRenderer as tt, Watermark as nt, Watermark as rt, ZoomHandler as it, layoutSquarifiedTreemap as at, layoutUniformGrid as ot, registerBuiltInDrawingTools as st, registerBuiltInIndicators as W, renderDepthChart as ct, renderEquityCurve as lt, renderHeatmap as ut, renderSparkline as dt, toHeikinAshi as ft, toHeikinAshi as pt, toKagi as mt, toKagi as ht, toLineBreak as gt, toLineBreak as _t, toPointAndFigure as vt, toPointAndFigure as yt, toRenko as bt, toRenko as G } from "@tradecanvas/core";
 //#region src/DataManager.ts
 function K(e) {
 	if (!e || typeof e.time != "number") return !1;
@@ -35,7 +35,7 @@ var J = class {
 		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)));
+		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] = de(this.data[this.data.length - 1], e)));
 	}
 	getLength() {
 		return this.data.length;
@@ -96,7 +96,7 @@ var J = class {
 			x: i,
 			y: o,
 			width: Math.max(0, this.containerWidth - i - a - h),
-			height: Math.max(0, this.containerHeight - o - s - _)
+			height: Math.max(0, this.containerHeight - o - s - v)
 		}, l = [], u = [], d = 0;
 		for (let t of e) l.push({
 			config: t,
@@ -104,7 +104,7 @@ var J = class {
 				x: d,
 				y: 0,
 				width: t.size,
-				height: this.containerHeight - _
+				height: this.containerHeight - v
 			}
 		}), u.push({
 			panelId: t.id,
@@ -161,7 +161,7 @@ var J = class {
 				x: d,
 				y: 0,
 				width: e.size,
-				height: this.containerHeight - _
+				height: this.containerHeight - v
 			}
 		}), u.push({
 			panelId: e.id,
@@ -189,7 +189,7 @@ var J = class {
 	registerIndicator(e) {
 		this.indicatorEngine.register(e);
 	}
-}, pt = class {
+}, xt = class {
 	static version = "0.3.0";
 	engine;
 	viewport;
@@ -270,19 +270,19 @@ var J = class {
 			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 Ce(), W(this.indicatorEngine), this.drawingManager = new be(), rt(this.drawingManager), this.drawingRenderer = new xe(this.drawingManager), this.drawingManager.setRequestRender(() => {
+		}, 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 Te(), W(this.indicatorEngine), this.drawingManager = new Se(), st(this.drawingManager), this.drawingRenderer = new Ce(this.drawingManager), this.drawingManager.setRequestRender(() => {
 			this.syncRenderContext(), this.engine.requestRender(u.Overlay), this.scheduleAutoSave();
 		}), this.drawingManager.setEventCallback((e, t) => {
 			this.eventBus.emit(e, t);
-		}), this.undoRedoManager = new Xe(), 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 qe(), this.tradingRenderer = new Je(this.tradingManager), this.tradingManager.setContainer(e), this.tradingManager.setRequestRender(() => this.engine.requestRender(u.Overlay)), this.tradingManager.setEventCallback((e, t) => {
+		}), this.undoRedoManager = new Qe(), 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 Ye(), this.tradingRenderer = new Xe(this.tradingManager), this.tradingManager.setContainer(e), this.tradingManager.setRequestRender(() => this.engine.requestRender(u.Overlay)), this.tradingManager.setEventCallback((e, t) => {
 			this.eventBus.emit(e, t);
-		}), this.engine = new Ie(e);
+		}), this.engine = new Re(e);
 		let r = this.engine.dprManager.getContainerSize();
-		this.viewport = new Ze(r.width, r.height, t.minBarSpacing ?? 2, t.maxBarSpacing ?? 30, t.rightMargin ?? 5), this.layoutManager.resize(r.width, r.height), this.engine.onContainerResize = (e) => {
+		this.viewport = new $e(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 we(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new Fe(), this.timeAxis = new Ke(), this.crosshairHandler = new z(), t.crosshair?.mode && this.crosshairHandler.setMode(t.crosshair.mode), this.crosshairHandler.setCallback((e, t) => {
+		}, this.chartRenderer = this.createChartRenderer(t.chartType), this.gridRenderer = new Ee(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new Le(), this.timeAxis = new Je(), this.crosshairHandler = new z(), 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", {
@@ -291,12 +291,12 @@ var J = class {
 					barIndex: e
 				});
 			} else this.crosshairTooltip.hide(), this.chartLegend.setHoverBar(null);
-		}), this.chartLegend = new P(), this.chartLegend.setChartType(t.chartType), this.watermark = new tt(), t.watermark && this.watermark.setConfig(t.watermark), this.volumeRenderer = new $e(), this.barCountdown = new O(), this.sessionBreaks = new He(), this.compareRenderer = new R(), t.sessionBreaks ? this.sessionBreaks.setConfig({
+		}), this.chartLegend = new P(), this.chartLegend.setChartType(t.chartType), this.watermark = new rt(), t.watermark && this.watermark.setConfig(t.watermark), this.volumeRenderer = new tt(), this.barCountdown = new D(), this.sessionBreaks = new We(), this.compareRenderer = new R(), 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 T(), this.crosshairTooltip = new me(), this.crosshairTooltip.create(e), new Ae({
+		}) : t.features?.sessionBreaks !== !1 && this.sessionBreaks.setVisible(!0), t.logScale && this.viewport.setLogScale(!0), this.animator = new w(), this.crosshairTooltip = new ge(), this.crosshairTooltip.create(e), new Me({
 			scrollBars: (e) => {
 				let t = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
 				this.viewport.scrollBy(e * t), this.updateViewportAndRender();
@@ -312,16 +312,16 @@ var J = class {
 				this.viewport.scrollToEnd(), this.updateViewportAndRender();
 			},
 			fitContent: () => this.fitContent()
-		}), this.currentPriceLine = new ge(), this.alertManager = new C(), this.alertManager.setRequestRender(() => this.engine.requestRender(u.Overlay)), this.alertManager.on("triggered", (e) => {
+		}), this.currentPriceLine = new ve(), this.alertManager = new S(), this.alertManager.setRequestRender(() => this.engine.requestRender(u.Overlay)), this.alertManager.on("triggered", (e) => {
 			this.eventBus.emit("dataUpdate", {
 				alert: "triggered",
 				alertId: e.id,
 				price: e.price,
 				message: e.message
 			});
-		}), this.replayManager = new ze(), this.interactionManager = new De(e), this.features.panning && this.interactionManager.setPanHandler(new Ne((e) => {
+		}), this.replayManager = new Ve(), this.interactionManager = new ke(e), this.features.panning && this.interactionManager.setPanHandler(new Fe((e) => {
 			this.viewport.scrollBy(e), this.updateViewportAndRender();
-		})), this.features.zooming && this.interactionManager.setZoomHandler(new nt((e, t) => {
+		})), this.features.zooming && this.interactionManager.setZoomHandler(new it((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(u.Overlay), this.layoutManager.getPanels().length > 0 && this.engine.requestRender(u.UI);
@@ -431,21 +431,21 @@ var J = class {
 	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 = V.toJSON(o);
-			V.download(e, t ?? "chart-data.json", "application/json");
+			let e = B.toJSON(o);
+			B.download(e, t ?? "chart-data.json", "application/json");
 		} else {
-			let e = V.toCSV(o);
-			V.download(e, t ?? "chart-data.csv", "text/csv");
+			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 = V.toJSON(n);
-			V.download(e, t ?? "chart-data.json", "application/json");
+			let e = B.toJSON(n);
+			B.download(e, t ?? "chart-data.json", "application/json");
 		} else {
-			let e = V.toCSV(n);
-			V.download(e, t ?? "chart-data.csv", "text/csv");
+			let e = B.toCSV(n);
+			B.download(e, t ?? "chart-data.csv", "text/csv");
 		}
 	}
 	setAutoSave(e, t = 5e3) {
@@ -498,7 +498,7 @@ var J = class {
 		this.features.trading && this.tradingManager.setConfig(e);
 	}
 	async connect(e) {
-		this.disconnectStream(), this.streamManager = new We(), this.streamManager.on("snapshot", (e) => {
+		this.disconnectStream(), this.streamManager = new Ke(), 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();
@@ -759,7 +759,7 @@ var J = class {
 		this.loadState(I.serialize(e));
 	}
 	setLocale(e) {
-		b(e), this.engine.requestRender();
+		me(e), this.engine.requestRender();
 	}
 	setMarket(e) {
 		if (this.marketConfig = e, e.colorScheme) {
@@ -780,7 +780,7 @@ var J = class {
 		return this.marketConfig;
 	}
 	setPriceLimits(e) {
-		this.marketConfig && (v(e, this.marketConfig) && (this.marketConfig.priceLimits = {
+		this.marketConfig && (y(e, this.marketConfig) && (this.marketConfig.priceLimits = {
 			...this.marketConfig.priceLimits,
 			referencePrice: e
 		}), this.engine.requestRender());
@@ -807,15 +807,15 @@ var J = class {
 		switch (e) {
 			case "candlestick": return new M();
 			case "heikinAshi": return new M();
-			case "line": return new je();
-			case "area": return new E();
-			case "bar": return new k();
-			case "hollowCandle": return new Te();
+			case "line": return new Ne();
+			case "area": return new T();
+			case "bar": return new O();
+			case "hollowCandle": return new De();
 			case "baseline": return new A();
-			case "renko": return new Le();
+			case "renko": return new ze();
 			case "lineBreak": return new M();
-			case "kagi": return new Oe();
-			case "pointAndFigure": return new Pe();
+			case "kagi": return new Ae();
+			case "pointAndFigure": return new Ie();
 			default: return new M();
 		}
 	}
@@ -826,23 +826,23 @@ var J = class {
 		let t;
 		switch (this.options.chartType) {
 			case "heikinAshi":
-				t = at(e);
+				t = pt(e);
 				break;
 			case "renko":
-				t = ft(e, {
+				t = G(e, {
 					brickSize: 0,
 					useATR: !0,
 					atrPeriod: 14
 				});
 				break;
 			case "lineBreak":
-				t = lt(e, 3);
+				t = _t(e, 3);
 				break;
 			case "kagi":
-				t = st(e, 4);
+				t = ht(e, 4);
 				break;
 			case "pointAndFigure":
-				t = ut(e, e.reduce((e, t) => e + t.close, 0) / e.length * .01, 3);
+				t = yt(e, e.reduce((e, t) => e + t.close, 0) / e.length * .01, 3);
 				break;
 			default: t = e;
 		}
@@ -960,7 +960,7 @@ var J = class {
 	}
 	buildPriceLimits() {
 		if (!this.marketConfig?.priceLimits?.enabled || !this.marketConfig.priceLimits.referencePrice) return null;
-		let e = v(this.marketConfig.priceLimits.referencePrice, this.marketConfig);
+		let e = y(this.marketConfig.priceLimits.referencePrice, this.marketConfig);
 		return e ? {
 			...e,
 			colors: this.marketConfig.colorScheme ? {
@@ -970,8 +970,137 @@ var J = class {
 			} : void 0
 		} : null;
 	}
+}, St = class extends k {
+	options;
+	constructor(e, t) {
+		super(e, t.theme), this.options = t, this.requestRender();
+	}
+	renderChart(e, t, n, r) {
+		dt(e, t, n, this.options, r);
+	}
+	update(e) {
+		this.options = {
+			...this.options,
+			data: e
+		}, this.requestRender();
+	}
+	setOptions(e) {
+		this.options = {
+			...this.options,
+			...e
+		}, this.requestRender();
+	}
+}, Ct = class extends k {
+	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();
+	}
+	renderChart(e, t, n, r) {
+		let i = this.crosshair?.getPosition() ?? null;
+		ct(e, t, n, this.options, r, i);
+	}
+	update(e) {
+		this.options = {
+			...this.options,
+			data: e
+		}, this.requestRender();
+	}
+	setOptions(e) {
+		this.options = {
+			...this.options,
+			...e
+		}, this.requestRender();
+	}
+	destroy() {
+		this.crosshair?.destroy(), super.destroy();
+	}
+}, wt = class extends k {
+	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();
+	}
+	renderChart(e, t, n, r) {
+		let i = this.crosshair?.getPosition() ?? null;
+		lt(e, t, n, this.options, r, i);
+	}
+	update(e, t) {
+		this.options = {
+			...this.options,
+			data: e
+		}, t !== void 0 && (this.options = {
+			...this.options,
+			benchmark: t
+		}), this.requestRender();
+	}
+	setOptions(e) {
+		this.options = {
+			...this.options,
+			...e
+		}, this.requestRender();
+	}
+	destroy() {
+		this.crosshair?.destroy(), super.destroy();
+	}
+}, Tt = class extends k {
+	options;
+	crosshair = null;
+	cachedRects = [];
+	currentData = [];
+	lastLayoutWidth = 0;
+	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) => {
+			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();
+	}
+	recomputeLayout() {
+		let e = {
+			x: 0,
+			y: 0,
+			width: this.width,
+			height: this.height
+		}, t = this.options.cellPadding ?? 2;
+		this.lastLayoutWidth = this.width, this.lastLayoutHeight = this.height, this.options.weighted ? this.cachedRects = at(this.currentData.map((e) => ({
+			id: e.id,
+			weight: e.weight ?? (Math.abs(e.value) || 1)
+		})), e, t) : this.cachedRects = ot(this.currentData.map((e) => ({ id: e.id })), e, t);
+	}
+	onCanvasClick(e, t) {
+		if (this.options.onCellClick) for (let n of this.cachedRects) {
+			let r = n.rect;
+			if (e >= r.x && e <= r.x + r.width && t >= r.y && t <= r.y + r.height) {
+				let e = this.currentData.find((e) => e.id === n.id);
+				e && this.options.onCellClick(e);
+				return;
+			}
+		}
+	}
+	renderChart(e, t, n, r) {
+		(t !== this.lastLayoutWidth || n !== this.lastLayoutHeight) && this.recomputeLayout();
+		let i = this.crosshair?.getPosition() ?? null;
+		ut(e, t, n, this.currentData, this.cachedRects, this.options, r, i);
+	}
+	update(e) {
+		this.currentData = e, this.options = {
+			...this.options,
+			data: e
+		}, this.recomputeLayout(), this.requestRender();
+	}
+	setOptions(e) {
+		this.options = {
+			...this.options,
+			...e
+		}, e.data && (this.currentData = e.data), this.recomputeLayout(), this.requestRender();
+	}
+	destroy() {
+		this.crosshair?.destroy(), this.handleClick && this.canvas.removeEventListener("click", this.handleClick), super.destroy();
+	}
 };
 //#endregion
-export { S as AlertManager, w as Animator, D as BarCountdown, j as BinanceAdapter, pt as Chart, N as ChartLegend, F as ChartStateManager, L as CompareRenderer, B as CrosshairTooltip, he as CurrentPriceLine, e as DARK_THEME, n as DEFAULT_DRAWING_STYLE, _e as DEFAULT_LEGEND_CONFIG, i as DEFAULT_RECONNECT, a as DEFAULT_STREAM_CONFIG, o as DEFAULT_TIMEFRAME_FAVORITES, s as DEFAULT_TRADING_CONFIG, ve as DataExporter, J as DataManager, ye as DrawingBase, Se as Easing, Ee as IndicatorBase, ke as KeyboardHandler, c as LIGHT_THEME, Q as LayoutManager, d as MARKET_CRYPTO, f as MARKET_HNX, ee as MARKET_HOSE, p as MARKET_NYSE, te as MARKET_UPCOM, Me as MockAdapter, $ as PluginManager, Re as ReplayManager, Be as Screenshot, Ve as SessionBreaks, Ue as StreamManager, g as TIMEFRAMES_CRYPTO, ne as TIMEFRAMES_FOREX, re as TIMEFRAMES_STOCK, Y as ThemeManager, Ge as TickAggregator, Ye as UndoRedoManager, ie as VN_COLORS, Qe as VolumeRenderer, et 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 registerLocale, y as setLocale, x as t, it as toHeikinAshi, ot as toKagi, ct as toLineBreak, G as toPointAndFigure, dt as toRenko };
+export { x as AlertManager, C as Animator, E as BarCountdown, j as BinanceAdapter, xt as Chart, N as ChartLegend, F as ChartStateManager, L as CompareRenderer, he as CrosshairTooltip, _e as CurrentPriceLine, e as DARK_THEME, n as DEFAULT_DRAWING_STYLE, ye as DEFAULT_LEGEND_CONFIG, i as DEFAULT_RECONNECT, a as DEFAULT_STREAM_CONFIG, o as DEFAULT_TIMEFRAME_FAVORITES, s as DEFAULT_TRADING_CONFIG, be as DataExporter, J as DataManager, Ct as DepthChart, xe as DrawingBase, we as Easing, wt as EquityCurveChart, Tt as HeatmapChart, Oe as IndicatorBase, je as KeyboardHandler, c as LIGHT_THEME, Q as LayoutManager, d as MARKET_CRYPTO, f as MARKET_HNX, ee as MARKET_HOSE, p as MARKET_NYSE, te as MARKET_UPCOM, Pe as MockAdapter, $ as PluginManager, Be as ReplayManager, He as Screenshot, Ue as SessionBreaks, St as SparklineChart, Ge as StreamManager, g as TIMEFRAMES_CRYPTO, _ as TIMEFRAMES_FOREX, ne as TIMEFRAMES_STOCK, Y as ThemeManager, qe as TickAggregator, Ze as UndoRedoManager, re as VN_COLORS, et as VolumeRenderer, nt as Watermark, ie as computePriceLimits, ae as createVNTheme, oe as formatNumber, se as formatVND, ce as formatVolumeLoc, le as getCurrentSession, ue as getLocale, fe as registerLocale, pe as setLocale, b as t, ft as toHeikinAshi, mt as toKagi, gt as toLineBreak, vt as toPointAndFigure, bt as toRenko };
 
 //# sourceMappingURL=index.js.map