@tradecanvas/chart 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,12 +1,12 @@
 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";
+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, renderGauge as ut, renderHeatmap as dt, renderSparkline as ft, renderWaterfall as pt, toHeikinAshi as mt, toHeikinAshi as ht, toKagi as gt, toKagi as _t, toLineBreak as vt, toLineBreak as yt, toPointAndFigure as bt, toPointAndFigure as xt, toRenko as St, toRenko as Ct } from "@tradecanvas/core";
 //#region src/DataManager.ts
-function K(e) {
+function G(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) {
+function K(e) {
 	return {
 		...e,
 		high: Math.max(e.open, e.high, e.low, e.close),
@@ -14,20 +14,20 @@ function q(e) {
 		volume: e.volume === void 0 ? 0 : Math.max(0, e.volume)
 	};
 }
-var J = class {
+var q = class {
 	data = [];
 	getData() {
 		return this.data;
 	}
 	setData(e) {
-		this.data = e.filter(K).map(q);
+		this.data = e.filter(G).map(K);
 	}
 	appendBar(e) {
-		K(e) && this.data.push(q(e));
+		G(e) && this.data.push(K(e));
 	}
 	updateLastBar(e) {
-		if (!K(e)) return;
-		let t = q(e);
+		if (!G(e)) return;
+		let t = K(e);
 		if (this.data.length === 0) {
 			this.data.push(t);
 			return;
@@ -43,7 +43,7 @@ var J = class {
 	clear() {
 		this.data = [];
 	}
-}, Y = class {
+}, J = class {
 	theme;
 	constructor(e) {
 		!e || e === "dark" ? this.theme = { ...t } : e === "light" ? this.theme = { ...l } : this.theme = { ...e };
@@ -54,7 +54,7 @@ var J = class {
 	setTheme(e) {
 		e === "dark" ? this.theme = { ...t } : e === "light" ? this.theme = { ...l } : this.theme = { ...e };
 	}
-}, X = 200, Z = 80, Q = class {
+}, Y = 200, X = 80, Z = class {
 	panels = [];
 	containerWidth = 0;
 	containerHeight = 0;
@@ -66,8 +66,8 @@ var J = class {
 		this.panels.push({
 			id: e,
 			position: t,
-			size: n ?? (i ? X : r),
-			minSize: i ? Z : m,
+			size: n ?? (i ? Y : r),
+			minSize: i ? X : m,
 			content: {
 				type: "indicator",
 				indicatorInstanceId: e
@@ -81,7 +81,7 @@ var J = class {
 		let n = this.panels.find((t) => t.id === e);
 		if (n) {
 			let e = n.position === "left" || n.position === "right", i = t === "left" || t === "right";
-			n.position = t, e !== i && (n.size = i ? X : r, n.minSize = i ? Z : m);
+			n.position = t, e !== i && (n.size = i ? Y : r, n.minSize = i ? X : m);
 		}
 	}
 	setPanelSize(e, t) {
@@ -182,14 +182,14 @@ var J = class {
 	getMainChartRect() {
 		return this.resolve().mainChartRect;
 	}
-}, $ = class {
+}, Q = class {
 	constructor(e) {
 		this.indicatorEngine = e;
 	}
 	registerIndicator(e) {
 		this.indicatorEngine.register(e);
 	}
-}, xt = class {
+}, wt = class {
 	static version = "0.3.0";
 	engine;
 	viewport;
@@ -237,8 +237,11 @@ var J = class {
 	marketConfig = null;
 	container;
 	currentPriceLine;
+	numberLocale;
+	keyboardHandler = null;
+	onWindowKeyDown = null;
 	constructor(e, t) {
-		this.container = e, this.options = t;
+		this.container = e, this.options = t, this.numberLocale = t.numberLocale ?? "en-US";
 		let n = t.features ?? {};
 		this.features = {
 			drawings: n.drawings ?? !0,
@@ -270,7 +273,7 @@ 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 Te(), W(this.indicatorEngine), this.drawingManager = new Se(), st(this.drawingManager), this.drawingRenderer = new Ce(this.drawingManager), this.drawingManager.setRequestRender(() => {
+		}, e.style.position = "relative", e.style.overflow = "hidden", e.tabIndex = 0, e.style.outline = "none", this.dataManager = new q(), this.themeManager = new J(t.theme), this.layoutManager = new Z(), this.indicatorEngine = new H(), this.pluginManager = new Q(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);
@@ -282,7 +285,7 @@ var J = class {
 			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 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) => {
+		}, this.chartRenderer = this.createChartRenderer(t.chartType), this.gridRenderer = new Ee(), t.grid?.visible === !1 && this.gridRenderer.setVisible(!1), this.priceAxis = new Le(), this.priceAxis.setLocale(this.numberLocale), this.timeAxis = new Je(), this.crosshairHandler = new z(), 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", {
@@ -296,7 +299,7 @@ var J = class {
 			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 w(), this.crosshairTooltip = new ge(), this.crosshairTooltip.create(e), new Me({
+		}) : 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), this.keyboardHandler = new Me({
 			scrollBars: (e) => {
 				let t = this.viewport.getState().barWidth + this.viewport.getState().barSpacing;
 				this.viewport.scrollBy(e * t), this.updateViewportAndRender();
@@ -312,7 +315,11 @@ var J = class {
 				this.viewport.scrollToEnd(), this.updateViewportAndRender();
 			},
 			fitContent: () => this.fitContent()
-		}), this.currentPriceLine = new ve(), this.alertManager = new S(), this.alertManager.setRequestRender(() => this.engine.requestRender(u.Overlay)), this.alertManager.on("triggered", (e) => {
+		}), 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 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,
@@ -334,10 +341,10 @@ var J = class {
 		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();
 	}
 	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.scheduleRender();
+		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.scheduleRender();
+		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);
@@ -503,7 +510,7 @@ var J = class {
 		}), 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.scheduleRender();
+			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(u.Overlay), this.engine.requestRender(u.UI);
 		}), this.streamManager.on("connectionChange", (e) => {
@@ -761,6 +768,12 @@ var J = class {
 	setLocale(e) {
 		me(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 = {
@@ -789,7 +802,7 @@ var J = class {
 		return this.features;
 	}
 	setFeatures(e) {
-		Object.assign(this.features, e), e.crosshair === !1 && this.crosshairTooltip.hide(), e.grid !== void 0 && this.engine.requestRender(u.Background), e.volume !== void 0 && (this.volumeRenderer.setVisible(e.volume), this.engine.requestRender(u.Main)), e.drawings === !1 && this.drawingManager.setActiveTool(null), e.trading === !1 && (this.tradingManager.setOrders([]), this.tradingManager.setPositions([])), this.engine.requestRender();
+		Object.assign(this.features, e), e.crosshair === !1 && this.crosshairTooltip.hide(), e.grid !== void 0 && this.engine.requestRender(u.Background), e.volume !== void 0 && (this.volumeRenderer.setVisible(e.volume), this.engine.requestRender(u.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();
@@ -801,7 +814,7 @@ var J = class {
 		this.viewport.resize(e.width, e.height), this.layoutManager.resize(e.width, e.height), this.updateViewportAndRender(n), this.eventBus.emit("resize", e);
 	}
 	destroy() {
-		this.countdownInterval && clearInterval(this.countdownInterval), this.disableAutoSave(), this.disconnectStream(), 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 = "";
+		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) {
@@ -826,23 +839,23 @@ var J = class {
 		let t;
 		switch (this.options.chartType) {
 			case "heikinAshi":
-				t = pt(e);
+				t = ht(e);
 				break;
 			case "renko":
-				t = G(e, {
+				t = Ct(e, {
 					brickSize: 0,
 					useATR: !0,
 					atrPeriod: 14
 				});
 				break;
 			case "lineBreak":
-				t = _t(e, 3);
+				t = yt(e, 3);
 				break;
 			case "kagi":
-				t = ht(e, 4);
+				t = _t(e, 4);
 				break;
 			case "pointAndFigure":
-				t = yt(e, e.reduce((e, t) => e + t.close, 0) / e.length * .01, 3);
+				t = xt(e, e.reduce((e, t) => e + t.close, 0) / e.length * .01, 3);
 				break;
 			default: t = e;
 		}
@@ -941,7 +954,8 @@ var J = class {
 			timeAxisY: r,
 			viewport: this.viewport.getState(),
 			theme: this.themeManager.getTheme(),
-			data: this.getDisplayData()
+			data: this.getDisplayData(),
+			numberLocale: this.numberLocale
 		});
 	}
 	timeframeToMs(e) {
@@ -970,13 +984,13 @@ var J = class {
 			} : void 0
 		} : null;
 	}
-}, St = class extends k {
+}, Tt = 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);
+		ft(e, t, n, this.options, r);
 	}
 	update(e) {
 		this.options = {
@@ -990,7 +1004,7 @@ var J = class {
 			...e
 		}, this.requestRender();
 	}
-}, Ct = class extends k {
+}, $ = class extends k {
 	options;
 	crosshair = null;
 	constructor(e, t) {
@@ -1015,7 +1029,7 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), super.destroy();
 	}
-}, wt = class extends k {
+}, Et = class extends k {
 	options;
 	crosshair = null;
 	constructor(e, t) {
@@ -1043,7 +1057,7 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), super.destroy();
 	}
-}, Tt = class extends k {
+}, Dt = class extends k {
 	options;
 	crosshair = null;
 	cachedRects = [];
@@ -1082,7 +1096,7 @@ var J = class {
 	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);
+		dt(e, t, n, this.currentData, this.cachedRects, this.options, r, i);
 	}
 	update(e) {
 		this.currentData = e, this.options = {
@@ -1099,8 +1113,90 @@ var J = class {
 	destroy() {
 		this.crosshair?.destroy(), this.handleClick && this.canvas.removeEventListener("click", this.handleClick), super.destroy();
 	}
+}, Ot = 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;
+		pt(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();
+	}
+}, kt = 500;
+function At(e) {
+	let t = 1 - e;
+	return 1 - t * t * t;
+}
+var jt = class extends k {
+	options;
+	currentValue;
+	targetValue;
+	animationStart = null;
+	animationFrom = 0;
+	animationFrameId = null;
+	constructor(e, t) {
+		super(e, t.theme), this.options = t, this.currentValue = t.value, this.targetValue = t.value, this.requestRender();
+	}
+	renderChart(e, t, n, r) {
+		ut(e, t, n, this.options, r, this.currentValue);
+	}
+	setValue(e) {
+		if (this.options.animate === !1) {
+			this.cancelAnimation(), this.currentValue = e, this.targetValue = e, this.options = {
+				...this.options,
+				value: e
+			}, this.requestRender();
+			return;
+		}
+		this.targetValue = e, this.animationFrom = this.currentValue, this.animationStart = performance.now(), this.options = {
+			...this.options,
+			value: e
+		}, this.startAnimationLoop();
+	}
+	setOptions(e) {
+		let t = {
+			...this.options,
+			...e
+		};
+		if (e.value !== void 0 && e.value !== this.targetValue) {
+			this.options = t, this.setValue(e.value);
+			return;
+		}
+		this.options = t, this.requestRender();
+	}
+	startAnimationLoop() {
+		if (this.animationFrameId !== null) return;
+		let e = () => {
+			if (this.animationFrameId = null, this.animationStart === null) return;
+			let t = this.options.animationDuration ?? kt, n = performance.now() - this.animationStart, r = Math.min(1, n / Math.max(1, t)), i = At(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);
+	}
+	cancelAnimation() {
+		this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null), this.animationStart = null;
+	}
+	destroy() {
+		this.cancelAnimation(), super.destroy();
+	}
 };
 //#endregion
-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 };
+export { x as AlertManager, C as Animator, E as BarCountdown, j as BinanceAdapter, wt 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, q as DataManager, $ as DepthChart, xe as DrawingBase, we as Easing, Et as EquityCurveChart, jt as GaugeChart, Dt as HeatmapChart, Oe as IndicatorBase, je as KeyboardHandler, c as LIGHT_THEME, Z 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, Q as PluginManager, Be as ReplayManager, He as Screenshot, Ue as SessionBreaks, Tt as SparklineChart, Ge as StreamManager, g as TIMEFRAMES_CRYPTO, _ as TIMEFRAMES_FOREX, ne as TIMEFRAMES_STOCK, J as ThemeManager, qe as TickAggregator, Ze as UndoRedoManager, re as VN_COLORS, et as VolumeRenderer, Ot as WaterfallChart, 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, mt as toHeikinAshi, gt as toKagi, vt as toLineBreak, bt as toPointAndFigure, St as toRenko };
 
 //# sourceMappingURL=index.js.map