Merge pull request tradingview#1957 from tradingview/add-rightoffsetpixels-option

Add rightOffsetPixels option to time scale

Author: SlicedSilver

src/model/time-scale.ts

@@ -67,6 +67,14 @@ export interface HorzScaleOptions {
 	 */
 	rightOffset: number;
 
+	/**
+	 * The margin space in pixels from the right side of the chart.
+	 * This option has priority over `rightOffset`.
+	 *
+	 * @defaultValue `undefined`
+	 */
+	rightOffsetPixels?: number;
+
 	/**
 	 * The space between bars in pixels.
 	 *
@@ -284,6 +292,7 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		this._rightOffset = options.rightOffset;
 		this._barSpacing = options.barSpacing;
 		this._model = model;
+		this._checkRightOffsetPixels(options);
 
 		this._horzScaleBehavior = horzScaleBehavior;
 
@@ -324,6 +333,7 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		if (options.rightOffset !== undefined) {
 			this._model.setRightOffset(options.rightOffset);
 		}
+		this._checkRightOffsetPixels(options);
 
 		if (options.minBarSpacing !== undefined || options.maxBarSpacing !== undefined) {
 			// yes, if we apply bar spacing constrains then we need to correct bar spacing
@@ -518,7 +528,14 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 	}
 
 	public setBarSpacing(newBarSpacing: number): void {
+		const oldBarSpacing = this._barSpacing;
 		this._setBarSpacing(newBarSpacing);
+		if (this._options.rightOffsetPixels !== undefined && oldBarSpacing !== 0) {
+			// when in pixel mode, zooming should keep the pixel offset, so we need to
+			// recalculate the bar offset.
+			const newRightOffset = this._rightOffset * oldBarSpacing / this._barSpacing;
+			this._rightOffset = newRightOffset;
+		}
 
 		// do not allow scroll out of visible bars
 		this._correctOffset();
@@ -617,7 +634,14 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		this._visibleRangeInvalidated = true;
 
 		this.setBarSpacing(this._options.barSpacing);
-		this.setRightOffset(this._options.rightOffset);
+
+		let newOffset: number;
+		if (this._options.rightOffsetPixels !== undefined) {
+			newOffset = this._options.rightOffsetPixels / this.barSpacing();
+		} else {
+			newOffset = this._options.rightOffset;
+		}
+		this.setRightOffset(newOffset);
 	}
 
 	public setBaseIndex(baseIndex: TimePointIndex | null): void {
@@ -782,10 +806,16 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		return this._baseIndexOrNull || 0 as TimePointIndex;
 	}
 
-	public setVisibleRange(range: RangeImpl<TimePointIndex>): void {
+	public setVisibleRange(range: RangeImpl<TimePointIndex>, applyDefaultOffset?: boolean): void {
 		const length = range.count();
-		this._setBarSpacing(this._width / length);
+		const pixelOffset = (applyDefaultOffset && this._options.rightOffsetPixels) || 0;
+		this._setBarSpacing((this._width - pixelOffset) / length);
 		this._rightOffset = range.right() - this.baseIndex();
+		if (applyDefaultOffset) {
+			this._rightOffset = pixelOffset
+				? pixelOffset / this.barSpacing()
+				: this._options.rightOffset;
+		}
 		this._correctOffset();
 		this._visibleRangeInvalidated = true;
 		this._model.recalculateAllPanes();
@@ -799,7 +829,7 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 			return;
 		}
 
-		this.setVisibleRange(new RangeImpl(first, last + this._options.rightOffset as TimePointIndex));
+		this.setVisibleRange(new RangeImpl(first, last), true);
 	}
 
 	public setLogicalRange(range: LogicalRange): void {
@@ -1074,6 +1104,13 @@ export class TimeScale<HorzScaleItem> implements ITimeScale {
 		}
 		return x; // fallback to original index
 	}
+
+	private _checkRightOffsetPixels(options: DeepPartial<HorzScaleOptions>): void {
+		if (options.rightOffsetPixels !== undefined) {
+			const newOffset = options.rightOffsetPixels / (options.barSpacing || this._barSpacing);
+			this._model.setRightOffset(newOffset);
+		}
+	}
 }
 
 function* testNearestIntegers(num: number): Generator<number, number, unknown> {

tests/e2e/graphics/test-cases/initial-options/right-offset-pixels.js

@@ -0,0 +1,38 @@
+function generateBar(i, target) {
+	const step = (i % 20) / 1000;
+	const base = i / 5;
+	target.open = base * (1 - step);
+	target.high = base * (1 + 2 * step);
+	target.low = base * (1 - 2 * step);
+	target.close = base * (1 + step);
+}
+
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		const item = {
+			time: time.getTime() / 1000,
+		};
+		time.setUTCDate(time.getUTCDate() + 1);
+
+		generateBar(i, item);
+		res.push(item);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, {
+		timeScale: {
+			rightOffset: 10,
+			rightOffsetPixels: 60, // should override rightOffset (which would have been 120 pixels when calculated)
+			barSpacing: 12,
+		},
+		layout: { attributionLogo: false },
+	});
+
+	const mainSeries = chart.addSeries(LightweightCharts.CandlestickSeries);
+
+	mainSeries.setData(generateData());
+}

tests/e2e/graphics/test-cases/time-scale/right-offset-pixels-fit-content.js

@@ -0,0 +1,38 @@
+function generateBar(i, target) {
+	const step = (i % 20) / 1000;
+	const base = i / 5;
+	target.open = base * (1 - step);
+	target.high = base * (1 + 2 * step);
+	target.low = base * (1 - 2 * step);
+	target.close = base * (1 + step);
+}
+
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 50; ++i) {
+		const item = {
+			time: time.getTime() / 1000,
+		};
+		time.setUTCDate(time.getUTCDate() + 1);
+
+		generateBar(i, item);
+		res.push(item);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, {
+		timeScale: {
+			rightOffsetPixels: 100,
+		},
+		layout: { attributionLogo: false },
+	});
+
+	const mainSeries = chart.addSeries(LightweightCharts.CandlestickSeries);
+
+	mainSeries.setData(generateData());
+
+	chart.timeScale().fitContent();
+}