Merge pull request #186 from devexperts/fix-y-axis-labels-update-when…

…-chart-resizes

fix: y axis labels update when chart resizes

src/chart/bootstrap.ts

@@ -328,6 +328,7 @@ export default class ChartBootstrap {
 			mainCanvasModel,
 			yAxisLabelsCanvasModel,
 			this.hitTestCanvasModel,
+			this.chartResizeHandler,
 		);
 		this.paneManager = paneManager;
 

src/chart/canvas/canvas-bounds-container.ts

@@ -947,6 +947,39 @@ export class CanvasBoundsContainer {
 	setMainCandleSeries(candleSeries: CandleSeriesModel) {
 		this.mainCandleSeries = candleSeries;
 	}
+
+	/**
+	 * Returns the effective width of the Y axis.
+	 *
+	 * @function
+	 * @name getEffectiveYAxisWidth
+	 * @returns {number} The effective width of the Y axis.
+	 */
+	getEffectiveYAxisWidth() {
+		const yAxis = this.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
+		return yAxis.width;
+	}
+
+	/**
+	 * Returns the effective width of the chart.
+	 *
+	 * @function
+	 * @returns {number} The effective width of the chart.
+	 */
+	getEffectiveChartWidth() {
+		const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+		return chart.width;
+	}
+
+	/**
+	 * Returns the effective height of the chart.
+	 *
+	 * @returns {number} The effective height of the chart.
+	 */
+	getEffectiveChartHeight() {
+		const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+		return chart.height;
+	}
 }
 
 // paneCounter=chartHeightRatio: 0=1, 1=0.8, 2=0.6, 3=0.5, 4=0.4, 5=0.4

src/chart/components/chart/chart.model.ts

@@ -159,8 +159,8 @@ export class ChartModel extends ChartBaseElement {
 	 */
 	private handleChartResize(nextCB: PickedDOMRect) {
 		if (nextCB.width > MIN_SUPPORTED_CANVAS_SIZE.width && nextCB.height > MIN_SUPPORTED_CANVAS_SIZE.height) {
-			const nextChartWidth = this.getEffectiveChartWidth();
-			const nextYAxisWidth = this.getEffectiveYAxisWidth();
+			const nextChartWidth = this.canvasBoundsContainer.getEffectiveChartWidth();
+			const nextYAxisWidth = this.canvasBoundsContainer.getEffectiveYAxisWidth();
 
 			if (this.prevChartWidth === 0) {
 				this.scale.isViewportValid() ? this.scale.recalculateZoom() : this.doBasicScale();
@@ -526,39 +526,6 @@ export class ChartModel extends ChartBaseElement {
 		this.scale.autoScale(auto);
 	}
 
-	/**
-	 * Returns the effective width of the Y axis.
-	 *
-	 * @function
-	 * @name getEffectiveYAxisWidth
-	 * @returns {number} The effective width of the Y axis.
-	 */
-	getEffectiveYAxisWidth() {
-		const yAxis = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID));
-		return yAxis.width;
-	}
-
-	/**
-	 * Returns the effective width of the chart.
-	 *
-	 * @function
-	 * @returns {number} The effective width of the chart.
-	 */
-	getEffectiveChartWidth() {
-		const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
-		return chart.width;
-	}
-
-	/**
-	 * Returns the effective height of the chart.
-	 *
-	 * @returns {number} The effective height of the chart.
-	 */
-	getEffectiveChartHeight() {
-		const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
-		return chart.height;
-	}
-
 	/**
 	 * Updates the offsets of the chart components and redraws the chart.
 	 * @param {Partial<ChartConfigComponentsOffsets>} offsets - The new offsets to be applied to the chart components.
@@ -832,7 +799,7 @@ export class ChartModel extends ChartBaseElement {
 	 * @returns {number} - The maximum number of candles that can fit in the chart width
 	 */
 	getMaxCandlesFitLength() {
-		return floor(this.getEffectiveChartWidth() / this.config.components.chart.minWidth);
+		return floor(this.canvasBoundsContainer.getEffectiveChartWidth() / this.config.components.chart.minWidth);
 	}
 
 	/**

src/chart/components/pane/pane-manager.component.ts

@@ -32,6 +32,7 @@ import { Unsubscriber } from '../../utils/function.utils';
 import { DataSeriesModel } from '../../model/data-series.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 
 export class PaneManager extends ChartBaseElement {
 	public panes: Record<string, PaneComponent> = {};
@@ -63,6 +64,7 @@ export class PaneManager extends ChartBaseElement {
 		private mainCanvasModel: CanvasModel,
 		private yAxisLabelsCanvasModel: CanvasModel,
 		private hitTestCanvasModel: HitTestCanvasModel,
+		private chartResizeHandler: ChartResizeHandler,
 	) {
 		super();
 		this.hitTestController = new PaneHitTestController(this.panes, this.dynamicObjectsCanvasModel);
@@ -165,6 +167,7 @@ export class PaneManager extends ChartBaseElement {
 			this.dataSeriesAddedSubject,
 			this.dataSeriesRemovedSubject,
 			this.hitTestCanvasModel,
+			this.chartResizeHandler,
 			options,
 		);
 

src/chart/components/pane/pane.component.ts

@@ -41,6 +41,7 @@ import {
 } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 
 export class PaneComponent extends ChartBaseElement {
 	/**
@@ -87,6 +88,7 @@ export class PaneComponent extends ChartBaseElement {
 		public seriesAddedSubject: Subject<DataSeriesModel>,
 		public seriesRemovedSubject: Subject<DataSeriesModel>,
 		private hitTestCanvasModel: HitTestCanvasModel,
+		private chartResizeHandler: ChartResizeHandler,
 		options?: AtLeastOne<YExtentCreationOptions>,
 	) {
 		super();
@@ -208,6 +210,7 @@ export class PaneComponent extends ChartBaseElement {
 				this.uuid,
 				extentIdx,
 				this.hitTestCanvasModel,
+				this.chartResizeHandler,
 				initialYAxisState,
 			);
 

src/chart/components/y_axis/price_labels/y-axis-labels.model.ts

@@ -3,7 +3,8 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { merge, Observable, Subject } from 'rxjs';
+import { animationFrameScheduler, merge, Observable, Subject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 import { CanvasBoundsContainer, CanvasElement } from '../../../canvas/canvas-bounds-container';
 import { YAxisConfig, YAxisLabelMode } from '../../../chart.config';
 import EventBus from '../../../events/event-bus';
@@ -17,6 +18,7 @@ import { animationFrameThrottledPrior } from '../../../utils/performance/request
 import { uuid } from '../../../utils/uuid.utils';
 import { YAxisLabelDrawConfig } from '../y-axis-labels.drawer';
 import { calcLabelsYCoordinates } from './labels-positions-calculator';
+import { ChartResizeHandler } from '../../../inputhandlers/chart-resize.handler';
 
 export type YAxisVisualLabelType = 'badge' | 'rectangle' | 'plain';
 
@@ -79,6 +81,7 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
 		private canvasModel: CanvasModel,
 		private paneUUID: string,
 		private updateYAxisWidth: () => void,
+		private chartResizeHandler: ChartResizeHandler,
 	) {
 		super();
 		this.initModel();
@@ -97,9 +100,12 @@ export class FancyYAxisLabelsModel extends ChartBaseElement {
 		super.doActivate();
 		this.addRxSubscription(
 			merge(
-				this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)),
 				this.canvasBoundsContainer.barResizerChangedSubject,
 				this.scale.changed,
+				merge(
+					this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)),
+					this.chartResizeHandler.canvasResized,
+				).pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true })),
 			).subscribe(() => {
 				this.updateLabels();
 			}),

src/chart/components/y_axis/y-axis.component.ts

@@ -45,6 +45,7 @@ import { YAxisModel } from './y-axis.model';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 import { merge as mergeObj } from '../../utils/merge.utils';
 import { cloneUnsafe } from '../../utils/object.utils';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 
 export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
 
@@ -72,6 +73,7 @@ export class YAxisComponent extends ChartBaseElement {
 		public paneUUID: string,
 		public extentIdx: number,
 		hitTestCanvasModel: HitTestCanvasModel,
+		private chartResizeHandler: ChartResizeHandler,
 		initialState?: YAxisConfig,
 	) {
 		super();
@@ -105,6 +107,7 @@ export class YAxisComponent extends ChartBaseElement {
 			valueFormatter,
 			dataSeriesProvider,
 			extentIdx,
+			this.chartResizeHandler,
 		);
 		this.addChildEntity(this.model);
 		this.updateCursor();

src/chart/components/y_axis/y-axis.model.ts

@@ -7,6 +7,7 @@ import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { YAxisWidthContributor } from '../../canvas/y-axis-bounds.container';
 import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DataSeriesModel } from '../../model/data-series.model';
@@ -30,6 +31,7 @@ export class YAxisModel extends ChartBaseElement {
 		valueFormatter: (value: number) => string,
 		dataSeriesProvider: () => DataSeriesModel | undefined,
 		private extentIdx: number,
+		chartResizeHandler: ChartResizeHandler,
 	) {
 		super();
 		this.labelsGenerator = new NumericYAxisLabelsGenerator(
@@ -56,6 +58,7 @@ export class YAxisModel extends ChartBaseElement {
 			canvasModel,
 			paneUUID,
 			() => this.canvasBoundsContainer.updateYAxisWidths(),
+			chartResizeHandler,
 		);
 		this.addChildEntity(this.fancyLabelsModel);
 	}