Merge pull request #1621 from tradingview/1620-improve-price-scale-la…

…bels-alignment

1620: Improve price scale labals alignment

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '48.24 KB',
+		limit: '48.27 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '48.16 KB',
+		limit: '48.18 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.87 KB',
+		limit: '49.92 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.91 KB',
+		limit: '49.96 KB',
 	},
 ];

src/gui/price-axis-widget.ts

@@ -66,6 +66,52 @@ function buildPriceAxisViewsGetter(
 	};
 }
 
+function recalculateOverlapping(views: IPriceAxisView[], direction: 1 | -1, scaleHeight: number, rendererOptions: Readonly<PriceAxisViewRendererOptions>): void {
+	if (!views.length) {
+		return;
+	}
+	let currentGroupStart = 0;
+
+	const initLabelHeight = views[0].height(rendererOptions, true);
+	let spaceBeforeCurrentGroup = direction === 1
+		? scaleHeight / 2 - (views[0].getFixedCoordinate() - initLabelHeight / 2)
+		: views[0].getFixedCoordinate() - initLabelHeight / 2 - scaleHeight / 2;
+	spaceBeforeCurrentGroup = Math.max(0, spaceBeforeCurrentGroup);
+
+	for (let i = 1; i < views.length; i++) {
+		const view = views[i];
+		const prev = views[i - 1];
+		const height = prev.height(rendererOptions, false);
+		const coordinate = view.getFixedCoordinate();
+		const prevFixedCoordinate = prev.getFixedCoordinate();
+
+		const overlap = direction === 1
+			? coordinate > prevFixedCoordinate - height
+			: coordinate < prevFixedCoordinate + height;
+
+		if (overlap) {
+			const fixedCoordinate = prevFixedCoordinate - height * direction;
+			view.setFixedCoordinate(fixedCoordinate);
+			const edgePoint = fixedCoordinate - direction * height / 2;
+			const outOfViewport = direction === 1 ? edgePoint < 0 : edgePoint > scaleHeight;
+			if (outOfViewport && spaceBeforeCurrentGroup > 0) {
+				// shift the whole group up or down
+				const desiredGroupShift = direction === 1 ? -1 - edgePoint : edgePoint - scaleHeight;
+				const possibleShift = Math.min(desiredGroupShift, spaceBeforeCurrentGroup);
+				for (let k = currentGroupStart; k < views.length; k++) {
+					views[k].setFixedCoordinate(views[k].getFixedCoordinate() + direction * possibleShift);
+				}
+				spaceBeforeCurrentGroup -= possibleShift;
+			}
+		} else {
+			currentGroupStart = i;
+			spaceBeforeCurrentGroup = direction === 1
+				? prevFixedCoordinate - height - coordinate
+				: coordinate - (prevFixedCoordinate + height);
+		}
+	}
+}
+
 export class PriceAxisWidget implements IDestroyable {
 	private readonly _pane: PaneWidget;
 	private readonly _options: Readonly<ChartOptionsInternalBase>;
@@ -597,29 +643,8 @@ export class PriceAxisWidget implements IDestroyable {
 			}
 		}
 
-		for (let i = 1; i < top.length; i++) {
-			const view = top[i];
-			const prev = top[i - 1];
-			const height = prev.height(rendererOptions, false);
-			const coordinate = view.coordinate();
-			const prevFixedCoordinate = prev.getFixedCoordinate();
-
-			if (coordinate > prevFixedCoordinate - height) {
-				view.setFixedCoordinate(prevFixedCoordinate - height);
-			}
-		}
-
-		for (let j = 1; j < bottom.length; j++) {
-			const view = bottom[j];
-			const prev = bottom[j - 1];
-			const height = prev.height(rendererOptions, true);
-			const coordinate = view.coordinate();
-			const prevFixedCoordinate = prev.getFixedCoordinate();
-
-			if (coordinate < prevFixedCoordinate + height) {
-				view.setFixedCoordinate(prevFixedCoordinate + height);
-			}
-		}
+		recalculateOverlapping(top, 1, this._size.height, rendererOptions);
+		recalculateOverlapping(bottom, -1, this._size.height, rendererOptions);
 	}
 
 	private _drawBackLabels(target: CanvasRenderingTarget2D): void {

tests/e2e/graphics/test-cases/price-scale/improve-alignment.js

@@ -0,0 +1,44 @@
+function runTestCase(container) {
+	const chartOptions = {
+		height: 500,
+		width: 600,
+		rightPriceScale: {
+			scaleMargins: {
+				top: 0,
+				bottom: 0,
+			},
+			entireTextOnly: true,
+			alignLabels: true,
+		},
+	};
+
+	const chart = (window.chart = LightweightCharts.createChart(
+		container,
+		chartOptions
+	));
+
+	const data1 = Array.from({ length: 10 }).map((_, index) => ({ time: index * 10000, value: 100 - index }));
+	const data2 = Array.from({ length: 10 }).map((_, index) => ({ time: index * 10000, value: 108.3 - index * 2 }));
+	const data3 = Array.from({ length: 10 }).map((_, index) => ({ time: index * 10000, value: 99 + index }));
+	const data4 = Array.from({ length: 10 }).map((_, index) => ({ time: index * 10000, value: 92.8 + (index - 1) * 2 }));
+
+	const series1 = chart.addLineSeries();
+	series1.setData(data1);
+
+	const series2 = chart.addLineSeries({
+		color: 'green',
+	});
+	series2.setData(data2);
+
+	const series3 = chart.addLineSeries({
+		color: 'purple',
+	});
+	series3.setData(data3);
+
+	const series4 = chart.addLineSeries({
+		color: 'orange',
+	});
+	series4.setData(data4);
+
+	chart.timeScale().fitContent();
+}