From f4fe2bc3196503860c1c9b9eddee36950c52b287 Mon Sep 17 00:00:00 2001 From: Mark Silverwood Date: Wed, 23 Aug 2023 10:34:01 +0100 Subject: [PATCH 1/3] add option to set minimum dimension for scales --- .../options/price-scale-options-defaults.ts | 1 + .../options/time-scale-options-defaults.ts | 1 + src/gui/chart-widget.ts | 14 ++++-- src/model/price-scale.ts | 14 ++++++ src/model/time-scale.ts | 14 ++++++ .../price-scale/minimum-scale-dimensions.js | 46 +++++++++++++++++++ 6 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 tests/e2e/graphics/test-cases/price-scale/minimum-scale-dimensions.js 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 dd75b820fd..123ae5bc47 100644 --- a/src/gui/chart-widget.ts +++ b/src/gui/chart-widget.ts @@ -444,10 +444,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(); } @@ -464,7 +472,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)); +} From 1210430b2440781c73c13a76a39c571175b3fde8 Mon Sep 17 00:00:00 2001 From: Mark Silverwood Date: Wed, 23 Aug 2023 10:44:26 +0100 Subject: [PATCH 2/3] update size-limit --- .size-limit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index c608c074cf..80936e1eb0 100644 --- a/.size-limit.js +++ b/.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', }, ]; From af0303640026c2ff98dff3bc511f0b4b03d9baf6 Mon Sep 17 00:00:00 2001 From: Mark Silverwood Date: Mon, 11 Sep 2023 23:10:21 +0100 Subject: [PATCH 3/3] DOCS: landing page css fixes --- .../landing-page/CTAButton/ctabutton.module.css | 1 + website/src/pages/index.module.css | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) 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; + } +}