diff --git a/.size-limit.js b/.size-limit.js index fd14842238..a37b8a59c0 100644 --- a/.size-limit.js +++ b/.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', }, ]; diff --git a/src/api/options/price-scale-options-defaults.ts b/src/api/options/price-scale-options-defaults.ts index c7fc83fee9..1d27e685d4 100644 --- a/src/api/options/price-scale-options-defaults.ts +++ b/src/api/options/price-scale-options-defaults.ts @@ -14,4 +14,5 @@ export const priceScaleOptionsDefaults: PriceScaleOptions = { bottom: 0.1, top: 0.2, }, + minimumWidth: 0, }; diff --git a/src/api/options/time-scale-options-defaults.ts b/src/api/options/time-scale-options-defaults.ts index 3e512903a7..8cc05717ad 100644 --- a/src/api/options/time-scale-options-defaults.ts +++ b/src/api/options/time-scale-options-defaults.ts @@ -16,4 +16,5 @@ export const timeScaleOptionsDefaults: HorzScaleOptions = { shiftVisibleRangeOnNewBar: true, ticksVisible: false, uniformDistribution: false, + minimumHeight: 0, }; diff --git a/src/gui/chart-widget.ts b/src/gui/chart-widget.ts index dfe98a2ead..49a496788b 100644 --- a/src/gui/chart-widget.ts +++ b/src/gui/chart-widget.ts @@ -449,10 +449,18 @@ export class ChartWidget 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 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; diff --git a/src/model/price-scale.ts b/src/model/price-scale.ts index 66817ca5a4..83fe4afbea 100644 --- a/src/model/price-scale.ts +++ b/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 { diff --git a/src/model/time-scale.ts b/src/model/time-scale.ts index 82563068eb..2ace53d23e 100644 --- a/src/model/time-scale.ts +++ b/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 { diff --git a/tests/e2e/graphics/test-cases/price-scale/minimum-scale-dimensions.js b/tests/e2e/graphics/test-cases/price-scale/minimum-scale-dimensions.js new file mode 100644 index 0000000000..d2805583bf --- /dev/null +++ b/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)); +} diff --git a/website/src/components/landing-page/CTAButton/ctabutton.module.css b/website/src/components/landing-page/CTAButton/ctabutton.module.css index f763c0a277..5d048d106c 100644 --- a/website/src/components/landing-page/CTAButton/ctabutton.module.css +++ b/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 { diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 4bf1fa840f..01e1d9acd0 100644 --- a/website/src/pages/index.module.css +++ b/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; + } +}