Merge pull request #1388 from tradingview/fix-percentage-mode-and-zer…

…o-first-value

Fix percentage mode and zero first value

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '46.94 KB',
+		limit: '46.97 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '46.86 KB',
+		limit: '46.90 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '48.56 KB',
+		limit: '48.59 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '48.61 KB',
+		limit: '48.64 KB',
 	},
 ];

src/model/price-range-impl.ts

@@ -2,6 +2,22 @@ import { isNumber } from '../helpers/strict-type-checks';
 
 import { PriceRange } from './series-options';
 
+function computeFiniteResult(
+	method: (...values: number[]) => number,
+	valueOne: number,
+	valueTwo: number,
+	fallback: number
+): number {
+	const firstFinite = Number.isFinite(valueOne);
+	const secondFinite = Number.isFinite(valueTwo);
+
+	if (firstFinite && secondFinite) {
+		return method(valueOne, valueTwo);
+	}
+
+	return !firstFinite && !secondFinite ? fallback : (firstFinite ? valueOne : valueTwo);
+}
+
 export class PriceRangeImpl {
 	private _minValue: number;
 	private _maxValue!: number;
@@ -43,8 +59,8 @@ export class PriceRangeImpl {
 			return this;
 		}
 		return new PriceRangeImpl(
-			Math.min(this.minValue(), anotherRange.minValue()),
-			Math.max(this.maxValue(), anotherRange.maxValue())
+			computeFiniteResult(Math.min, this.minValue(), anotherRange.minValue(), -Infinity),
+			computeFiniteResult(Math.max, this.maxValue(), anotherRange.maxValue(), Infinity)
 		);
 	}
 

tests/e2e/graphics/test-cases/price-scale/percentage-first-value-invisible-series.js

@@ -0,0 +1,39 @@
+function runTestCase(container) {
+	const chartOptions = {
+		rightPriceScale: {
+			borderVisible: false,
+			mode: 2,
+		},
+		layout: {
+			textColor: 'black',
+			background: { type: 'solid', color: 'white' },
+		},
+	};
+	const chart = (window.chart = LightweightCharts.createChart(
+		container,
+		chartOptions
+	));
+
+	/*
+	 * We expect the blue series to NOT be visible
+	 * and the red series to BE visible
+	 */
+
+	const series1 = chart.addLineSeries({
+		color: '#2962FF',
+	});
+	series1.setData([
+		{ time: 1522033200, value: 0 },
+		{ time: 1529895600, value: -3 },
+		{ time: 1537758000, value: 3 },
+	]);
+	const series2 = chart.addLineSeries({
+		color: '#FF2962',
+	});
+	series2.setData([
+		{ time: 1522033200, value: 1 },
+		{ time: 1529895600, value: -1 },
+		{ time: 1537758000, value: 2 },
+	]);
+	chart.timeScale().fitContent();
+}