Merge pull request #1412 from tradingview/minimum-scale-dimensions

Add option to set minimum dimension for scales

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '47.62 KB',
+		limit: '47.66 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '47.56 KB',
+		limit: '47.60 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.29 KB',
+		limit: '49.32 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.33 KB',
+		limit: '49.37 KB',
 	},
 ];

src/api/options/price-scale-options-defaults.ts

@@ -14,4 +14,5 @@ export const priceScaleOptionsDefaults: PriceScaleOptions = {
 		bottom: 0.1,
 		top: 0.2,
 	},
+	minimumWidth: 0,
 };

src/api/options/time-scale-options-defaults.ts

@@ -16,4 +16,5 @@ export const timeScaleOptionsDefaults: HorzScaleOptions = {
 	shiftVisibleRangeOnNewBar: true,
 	ticksVisible: false,
 	uniformDistribution: false,
+	minimumHeight: 0,
 };

src/gui/chart-widget.ts

@@ -444,10 +444,18 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 
 		for (const paneWidget of this._paneWidgets) {
 			if (this._isLeftAxisVisible()) {
-				leftPriceAxisWidth = Math.max(leftPriceAxisWidth, ensureNotNull(paneWidget.leftPriceAxisWidget()).optimalWidth());
+				leftPriceAxisWidth = Math.max(
+					leftPriceAxisWidth,
+					ensureNotNull(paneWidget.leftPriceAxisWidget()).optimalWidth(),
+					this._options.leftPriceScale.minimumWidth
+				);
 			}
 			if (this._isRightAxisVisible()) {
-				rightPriceAxisWidth = Math.max(rightPriceAxisWidth, ensureNotNull(paneWidget.rightPriceAxisWidget()).optimalWidth());
+				rightPriceAxisWidth = Math.max(
+					rightPriceAxisWidth,
+					ensureNotNull(paneWidget.rightPriceAxisWidget()).optimalWidth(),
+					this._options.rightPriceScale.minimumWidth
+				);
 			}
 			totalStretch += paneWidget.stretchFactor();
 		}
@@ -464,7 +472,7 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 		// const separatorHeight = SEPARATOR_HEIGHT;
 		const separatorsHeight = 0; // separatorHeight * separatorCount;
 		const timeAxisVisible = this._options.timeScale.visible;
-		let timeAxisHeight = timeAxisVisible ? this._timeAxisWidget.optimalHeight() : 0;
+		let timeAxisHeight = timeAxisVisible ? Math.max(this._timeAxisWidget.optimalHeight(), this._options.timeScale.minimumHeight) : 0;
 		timeAxisHeight = suggestTimeScaleHeight(timeAxisHeight);
 
 		const otherWidgetHeight = separatorsHeight + timeAxisHeight;

src/model/price-scale.ts

@@ -176,6 +176,20 @@ export interface PriceScaleOptions {
 	 * @defaultValue `false`
 	 */
 	ticksVisible: boolean;
+
+	/**
+	 * Define a minimum width for the price scale.
+	 * Note: This value will be exceeded if the
+	 * price scale needs more space to display it's contents.
+	 *
+	 * Setting a minimum width could be useful for ensuring that
+	 * multiple charts positioned in a vertical stack each have
+	 * an identical price scale width, or for plugins which
+	 * require a bit more space within the price scale pane.
+	 *
+	 * @defaultValue 0
+	 */
+	minimumWidth: number;
 }
 
 interface RangeCache {

src/model/time-scale.ts

@@ -172,6 +172,20 @@ export interface HorzScaleOptions {
 	 * With this flag equal to `true`, marks of the same weight are either all drawn or none are drawn at all.
 	 */
 	uniformDistribution: boolean;
+
+	/**
+	 * Define a minimum height for the time scale.
+	 * Note: This value will be exceeded if the
+	 * time scale needs more space to display it's contents.
+	 *
+	 * Setting a minimum height could be useful for ensuring that
+	 * multiple charts positioned in a horizontal stack each have
+	 * an identical time scale height, or for plugins which
+	 * require a bit more space within the time scale pane.
+	 *
+	 * @defaultValue 0
+	 */
+	minimumHeight: number;
 }
 
 export interface ITimeScale {

tests/e2e/graphics/test-cases/price-scale/minimum-scale-dimensions.js

@@ -0,0 +1,46 @@
+function generateData(startAmount) {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = startAmount; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+
+	return res;
+}
+
+function runTestCase(container) {
+	const chartOptions = {
+		height: 500,
+		width: 600,
+		leftPriceScale: {
+			visible: true,
+			minimumWidth: 100,
+		},
+		rightPriceScale: {
+			visible: true,
+			minimumWidth: 150,
+		},
+		timeScale: {
+			minimumHeight: 50,
+		},
+	};
+
+	const chart = (window.chart = LightweightCharts.createChart(
+		container,
+		chartOptions
+	));
+
+	const mainSeries = chart.addLineSeries({});
+	mainSeries.setData(generateData(0));
+
+	const mainSeries2 = chart.addLineSeries({
+		color: '#000000',
+		priceScaleId: 'left',
+	});
+	mainSeries2.setData(generateData(30));
+}