Merge branch 'master' into pane-size-getter

.size-limit.js

@@ -19,6 +19,6 @@ module.exports = [
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.36 KB',
+		limit: '49.38 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

@@ -449,10 +449,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();
 		}
@@ -469,7 +477,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));
+}

website/src/components/landing-page/CTAButton/ctabutton.module.css

@@ -36,6 +36,7 @@
 
 .SquareButton[data-primary]:hover {
 	background-color: var(--cta-button-primary-background-hover);
+	color: #ffffff;
 }
 
 .SquareButton[data-primary]:active {

website/src/pages/index.module.css

@@ -223,9 +223,8 @@
 		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	display: flex;
 	flex-direction: column;
-	margin: 0;
+	margin: 0px;
 	max-width: 1920px;
-	margin-inline: auto;
 
 	/* Don't use this because we want to have the chart reach the viewport edge for certain breakpoints */
 	/* padding-inline: var(--container-padding); */
@@ -234,3 +233,10 @@
 	/* ! Fix for older versions of Safari which had a bug with css variables being used for -inline / -block */
 	padding: var(--vertical-container-padding) 0px;
 }
+
+@media (min-width: 1920px) {
+	.RootContainer {
+		margin-left: auto;
+		margin-right: auto;
+	}
+}