@tradecanvas/chart 0.3.0 → 0.4.0

package/dist/index.js

@@ -237,8 +237,11 @@ var q = 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,
@@ -282,7 +285,7 @@ var q = 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 q = 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 q = 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 q = 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 q = 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 q = 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 q = 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 q = 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) {
@@ -941,7 +954,8 @@ var q = class {
 			timeAxisY: r,
 			viewport: this.viewport.getState(),
 			theme: this.themeManager.getTheme(),
-			data: this.getDisplayData()
+			data: this.getDisplayData(),
+			numberLocale: this.numberLocale
 		});
 	}
 	timeframeToMs(e) {