From ee898d61df1d7c2118bb45c3b6d7769003fab74d Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Thu, 3 Aug 2023 12:50:10 +0100 Subject: [PATCH 1/9] Use label length in tick-marks.ts --- src/model/tick-marks.ts | 47 ++- src/model/time-scale.ts | 4 +- .../do-not-render-overlapping-marks.js | 313 ++++++++++++++++++ 3 files changed, 358 insertions(+), 6 deletions(-) create mode 100644 tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js diff --git a/src/model/tick-marks.ts b/src/model/tick-marks.ts index 2549d849b0..a742a5817a 100644 --- a/src/model/tick-marks.ts +++ b/src/model/tick-marks.ts @@ -12,12 +12,18 @@ export interface TickMark { interface MarksCache { maxIndexesPerMark: number; + maxCharactersPerIndex: number; marks: readonly TickMark[]; } export class TickMarks { private _marksByWeight: Map = new Map(); private _cache: MarksCache | null = null; + private _formatLabel: (mark: TickMark) => string; + + public constructor(formatLabel: (mark: TickMark) => string) { + this._formatLabel = formatLabel; + } public setTimeScalePoints(newPoints: readonly TimeScalePoint[], firstChangedPointIndex: number): void { this._removeMarksSinceIndex(firstChangedPointIndex); @@ -41,12 +47,14 @@ export class TickMarks { } } - public build(spacing: number, maxWidth: number): readonly TickMark[] { + public build(spacing: number, maxWidth: number, fontSize: number): readonly TickMark[] { const maxIndexesPerMark = Math.ceil(maxWidth / spacing); - if (this._cache === null || this._cache.maxIndexesPerMark !== maxIndexesPerMark) { + const maxCharactersPerIndex = Math.max(1, Math.ceil(spacing / fontSize) - 1); + if (this._cache === null || this._cache.maxIndexesPerMark !== maxIndexesPerMark || this._cache.maxCharactersPerIndex !== maxCharactersPerIndex) { this._cache = { - marks: this._buildMarksImpl(maxIndexesPerMark), + marks: this._buildMarksImpl(maxIndexesPerMark, maxCharactersPerIndex), maxIndexesPerMark, + maxCharactersPerIndex, }; } @@ -77,9 +85,11 @@ export class TickMarks { } } - private _buildMarksImpl(maxIndexesPerMark: number): readonly TickMark[] { + private _buildMarksImpl(maxIndexesPerMark: number, maxCharactersPerIndex: number): readonly TickMark[] { let marks: TickMark[] = []; + const indexesToSkip = new Set(); + for (const weight of Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a)) { if (!this._marksByWeight.get(weight)) { continue; @@ -100,6 +110,27 @@ export class TickMarks { const mark = currentWeight[i]; const currentIndex = mark.index; + if (indexesToSkip.has(currentIndex)) { + continue; + } + + const label = this._formatLabel(mark); + + /* eslint-disable jsdoc/check-indentation */ + /** + * 0 1 2 3 4 5 6 7 8 9 10 + * | | | | | | | | | | | + * ^ + * "a really long label" + * + * In the picture above the maximum characters per index is 3. + * The label length is 19. + * 19 / 3 = 6.333333333333333 is the number of marks covered by that label. + * floor(6.333333333333333 / 2) is is the number of marks either side of index 5 that will be covered. + */ + /* eslint-enable jsdoc/check-indentation */ + const labelIndexOverflow = Math.floor(label.length / maxCharactersPerIndex / 2); + // Determine indexes with which current index will be compared // All marks to the right is moved to new array while (prevMarksPointer < prevMarksLength) { @@ -120,6 +151,14 @@ export class TickMarks { // TickMark fits. Place it into new array marks.push(mark); leftIndex = currentIndex; + indexesToSkip.add(currentIndex); + + if (labelIndexOverflow > 0) { + for (let j = 1; j <= labelIndexOverflow; j++) { + indexesToSkip.add(currentIndex + j); + indexesToSkip.add(currentIndex - j); + } + } } } diff --git a/src/model/time-scale.ts b/src/model/time-scale.ts index d40e7f9a5f..de28551dc6 100644 --- a/src/model/time-scale.ts +++ b/src/model/time-scale.ts @@ -220,7 +220,7 @@ export class TimeScale { private _barSpacing: number; private _scrollStartPoint: Coordinate | null = null; private _scaleStartPoint: Coordinate | null = null; - private readonly _tickMarks: TickMarks = new TickMarks(); + private readonly _tickMarks: TickMarks = new TickMarks((mark: TickMark) => this._formatLabel(mark)); private _formattedByWeight: Map = new Map(); private _visibleRange: TimeScaleVisibleRange = TimeScaleVisibleRange.invalid(); @@ -493,7 +493,7 @@ export class TimeScale { const firstBar = Math.max(visibleBars.left(), visibleBars.left() - indexPerLabel); const lastBar = Math.max(visibleBars.right(), visibleBars.right() - indexPerLabel); - const items = this._tickMarks.build(spacing, maxLabelWidth); + const items = this._tickMarks.build(spacing, maxLabelWidth, fontSize); // according to indexPerLabel value this value means "earliest index which _might be_ used as the second label on time scale" const earliestIndexOfSecondLabel = (this._firstIndex() as number) + indexPerLabel; diff --git a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js new file mode 100644 index 0000000000..3c60093a9f --- /dev/null +++ b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js @@ -0,0 +1,313 @@ +function runTestCase(container) { + const chart = window.chart = LightweightCharts.createChart(container, { + handleScroll: false, + handleScale: false, + tickMarkFormatter: time => `long prefix ${time}`, + }); + + const mainSeries = chart.addLineSeries(); + + const data = [ + { time: '2018-03-28', value: 154 }, + { time: '2018-03-29', value: 154.2 }, + { time: '2018-03-30', value: 155.60001 }, + { time: '2018-04-02', value: 156.25 }, + { time: '2018-04-03', value: 156.25 }, + { time: '2018-04-04', value: 156.05 }, + { time: '2018-04-05', value: 158.05 }, + { time: '2018-04-06', value: 157.3 }, + { time: '2018-04-09', value: 144 }, + { time: '2018-04-10', value: 144.8 }, + { time: '2018-04-11', value: 143.5 }, + { time: '2018-04-12', value: 147.05 }, + { time: '2018-04-13', value: 144.85001 }, + { time: '2018-04-16', value: 145.39999 }, + { time: '2018-04-17', value: 147.3 }, + { time: '2018-04-18', value: 153.55 }, + { time: '2018-04-19', value: 150.95 }, + { time: '2018-04-20', value: 149.39999 }, + { time: '2018-04-23', value: 148.5 }, + { time: '2018-04-24', value: 146.60001 }, + { time: '2018-04-25', value: 144.45 }, + { time: '2018-04-26', value: 145.60001 }, + { time: '2018-04-27', value: 144.3 }, + { time: '2018-04-30', value: 144 }, + { time: '2018-05-02', value: 147.3 }, + { time: '2018-05-03', value: 144.2 }, + { time: '2018-05-04', value: 141.64999 }, + { time: '2018-05-07', value: 141.89999 }, + { time: '2018-05-08', value: 140.39999 }, + { time: '2018-05-10', value: 139.8 }, + { time: '2018-05-11', value: 137.5 }, + { time: '2018-05-14', value: 136.14999 }, + { time: '2018-05-15', value: 138 }, + { time: '2018-05-16', value: 137.95 }, + { time: '2018-05-17', value: 137.95 }, + { time: '2018-05-18', value: 136.75 }, + { time: '2018-05-21', value: 136.2 }, + { time: '2018-05-22', value: 135 }, + { time: '2018-05-23', value: 132.55 }, + { time: '2018-05-24', value: 132.7 }, + { time: '2018-05-25', value: 132.2 }, + { time: '2018-05-28', value: 131.55 }, + { time: '2018-05-29', value: 131.85001 }, + { time: '2018-05-30', value: 139.85001 }, + { time: '2018-05-31', value: 140.8 }, + { time: '2018-06-01', value: 139.64999 }, + { time: '2018-06-04', value: 137.10001 }, + { time: '2018-06-05', value: 139.25 }, + { time: '2018-06-06', value: 141.3 }, + { time: '2018-06-07', value: 145 }, + { time: '2018-06-08', value: 143.89999 }, + { time: '2018-06-11', value: 142.7 }, + { time: '2018-06-13', value: 144.05 }, + { time: '2018-06-14', value: 143.55 }, + { time: '2018-06-15', value: 140.5 }, + { time: '2018-06-18', value: 139.64999 }, + { time: '2018-06-19', value: 138 }, + { time: '2018-06-20', value: 141 }, + { time: '2018-06-21', value: 140.55 }, + { time: '2018-06-22', value: 140.55 }, + { time: '2018-06-25', value: 140.75 }, + { time: '2018-06-26', value: 140.64999 }, + { time: '2018-06-27', value: 141.14999 }, + { time: '2018-06-28', value: 139.8 }, + { time: '2018-06-29', value: 139.8 }, + { time: '2018-07-02', value: 140.14999 }, + { time: '2018-07-03', value: 143.05 }, + { time: '2018-07-04', value: 140 }, + { time: '2018-07-05', value: 129.2 }, + { time: '2018-07-06', value: 129.55 }, + { time: '2018-07-09', value: 128.3 }, + { time: '2018-07-10', value: 126.55 }, + { time: '2018-07-11', value: 124.3 }, + { time: '2018-07-12', value: 124.8 }, + { time: '2018-07-13', value: 123.25 }, + { time: '2018-07-16', value: 123 }, + { time: '2018-07-17', value: 124.25 }, + { time: '2018-07-18', value: 123 }, + { time: '2018-07-19', value: 121 }, + { time: '2018-07-20', value: 121.45 }, + { time: '2018-07-23', value: 123.8 }, + { time: '2018-07-24', value: 122.15 }, + { time: '2018-07-25', value: 121.3 }, + { time: '2018-07-26', value: 122.7 }, + { time: '2018-07-27', value: 122.2 }, + { time: '2018-07-30', value: 121.7 }, + { time: '2018-07-31', value: 122.95 }, + { time: '2018-08-01', value: 121 }, + { time: '2018-08-02', value: 116 }, + { time: '2018-08-03', value: 118.1 }, + { time: '2018-08-06', value: 114.3 }, + { time: '2018-08-07', value: 114.25 }, + { time: '2018-08-08', value: 111.85 }, + { time: '2018-08-09', value: 109.7 }, + { time: '2018-08-10', value: 105 }, + { time: '2018-08-13', value: 105.75 }, + { time: '2018-08-14', value: 107.25 }, + { time: '2018-08-15', value: 107.4 }, + { time: '2018-08-16', value: 110.5 }, + { time: '2018-08-17', value: 109 }, + { time: '2018-08-20', value: 108.95 }, + { time: '2018-08-21', value: 108.35 }, + { time: '2018-08-22', value: 108.6 }, + { time: '2018-08-23', value: 105.65 }, + { time: '2018-08-24', value: 104.45 }, + { time: '2018-08-27', value: 106.2 }, + { time: '2018-08-28', value: 106.55 }, + { time: '2018-08-29', value: 111.8 }, + { time: '2018-08-30', value: 115.5 }, + { time: '2018-08-31', value: 115.5 }, + { time: '2018-09-03', value: 114.55 }, + { time: '2018-09-04', value: 112.75 }, + { time: '2018-09-05', value: 111.5 }, + { time: '2018-09-06', value: 108.1 }, + { time: '2018-09-07', value: 108.55 }, + { time: '2018-09-10', value: 106.5 }, + { time: '2018-09-11', value: 105.1 }, + { time: '2018-09-12', value: 107.2 }, + { time: '2018-09-13', value: 107.1 }, + { time: '2018-09-14', value: 105.75 }, + { time: '2018-09-17', value: 106.05 }, + { time: '2018-09-18', value: 109.15 }, + { time: '2018-09-19', value: 111.4 }, + { time: '2018-09-20', value: 111 }, + { time: '2018-09-21', value: 111 }, + { time: '2018-09-24', value: 108.95 }, + { time: '2018-09-25', value: 106.65 }, + { time: '2018-09-26', value: 106.7 }, + { time: '2018-09-27', value: 107.05 }, + { time: '2018-09-28', value: 106.55 }, + { time: '2018-10-01', value: 106.2 }, + { time: '2018-10-02', value: 106.4 }, + { time: '2018-10-03', value: 107.1 }, + { time: '2018-10-04', value: 106.4 }, + { time: '2018-10-05', value: 104.65 }, + { time: '2018-10-08', value: 102.65 }, + { time: '2018-10-09', value: 102.1 }, + { time: '2018-10-10', value: 102.15 }, + { time: '2018-10-11', value: 100.9 }, + { time: '2018-10-12', value: 102 }, + { time: '2018-10-15', value: 100.15 }, + { time: '2018-10-16', value: 99 }, + { time: '2018-10-17', value: 98 }, + { time: '2018-10-18', value: 96 }, + { time: '2018-10-19', value: 95.5 }, + { time: '2018-10-22', value: 92.400002 }, + { time: '2018-10-23', value: 92.300003 }, + { time: '2018-10-24', value: 92.900002 }, + { time: '2018-10-25', value: 91.849998 }, + { time: '2018-10-26', value: 91.599998 }, + { time: '2018-10-29', value: 94.050003 }, + { time: '2018-10-30', value: 98.25 }, + { time: '2018-10-31', value: 97.25 }, + { time: '2018-11-01', value: 96.879997 }, + { time: '2018-11-02', value: 101.78 }, + { time: '2018-11-06', value: 102.4 }, + { time: '2018-11-07', value: 100.6 }, + { time: '2018-11-08', value: 98.5 }, + { time: '2018-11-09', value: 95.139999 }, + { time: '2018-11-12', value: 96.900002 }, + { time: '2018-11-13', value: 97.400002 }, + { time: '2018-11-14', value: 103.3 }, + { time: '2018-11-15', value: 102.74 }, + { time: '2018-11-16', value: 101.2 }, + { time: '2018-11-19', value: 98.720001 }, + { time: '2018-11-20', value: 102.2 }, + { time: '2018-11-21', value: 108.8 }, + { time: '2018-11-22', value: 109.9 }, + { time: '2018-11-23', value: 113.74 }, + { time: '2018-11-26', value: 110.9 }, + { time: '2018-11-27', value: 113.28 }, + { time: '2018-11-28', value: 113.6 }, + { time: '2018-11-29', value: 113.14 }, + { time: '2018-11-30', value: 114.4 }, + { time: '2018-12-03', value: 111.84 }, + { time: '2018-12-04', value: 106.7 }, + { time: '2018-12-05', value: 107.8 }, + { time: '2018-12-06', value: 106.44 }, + { time: '2018-12-07', value: 103.7 }, + { time: '2018-12-10', value: 101.02 }, + { time: '2018-12-11', value: 102.72 }, + { time: '2018-12-12', value: 101.8 }, + { time: '2018-12-13', value: 102 }, + { time: '2018-12-14', value: 102.1 }, + { time: '2018-12-17', value: 101.04 }, + { time: '2018-12-18', value: 101.6 }, + { time: '2018-12-19', value: 102 }, + { time: '2018-12-20', value: 102.02 }, + { time: '2018-12-21', value: 102.2 }, + { time: '2018-12-24', value: 102.1 }, + { time: '2018-12-25', value: 100.8 }, + { time: '2018-12-26', value: 101.02 }, + { time: '2018-12-27', value: 100.5 }, + { time: '2018-12-28', value: 101 }, + { time: '2019-01-03', value: 101.5 }, + { time: '2019-01-04', value: 101.1 }, + { time: '2019-01-08', value: 101.1 }, + { time: '2019-01-09', value: 102.06 }, + { time: '2019-01-10', value: 105.14 }, + { time: '2019-01-11', value: 104.66 }, + { time: '2019-01-14', value: 106.22 }, + { time: '2019-01-15', value: 106.98 }, + { time: '2019-01-16', value: 108.4 }, + { time: '2019-01-17', value: 109.06 }, + { time: '2019-01-18', value: 107 }, + { time: '2019-01-21', value: 105.8 }, + { time: '2019-01-22', value: 105.24 }, + { time: '2019-01-23', value: 105.4 }, + { time: '2019-01-24', value: 105.38 }, + { time: '2019-01-25', value: 105.7 }, + { time: '2019-01-28', value: 105.8 }, + { time: '2019-01-29', value: 106.1 }, + { time: '2019-01-30', value: 108.6 }, + { time: '2019-01-31', value: 107.92 }, + { time: '2019-02-01', value: 105.22 }, + { time: '2019-02-04', value: 102.44 }, + { time: '2019-02-05', value: 102.26 }, + { time: '2019-02-06', value: 102 }, + { time: '2019-02-07', value: 101.62 }, + { time: '2019-02-08', value: 101.9 }, + { time: '2019-02-11', value: 101.78 }, + { time: '2019-02-12', value: 102.7 }, + { time: '2019-02-13', value: 100.14 }, + { time: '2019-02-14', value: 101.36 }, + { time: '2019-02-15', value: 101.62 }, + { time: '2019-02-18', value: 100.74 }, + { time: '2019-02-19', value: 100 }, + { time: '2019-02-20', value: 100.04 }, + { time: '2019-02-21', value: 100 }, + { time: '2019-02-22', value: 100.12 }, + { time: '2019-02-25', value: 100.04 }, + { time: '2019-02-26', value: 98.980003 }, + { time: '2019-02-27', value: 97.699997 }, + { time: '2019-02-28', value: 97.099998 }, + { time: '2019-03-01', value: 96.760002 }, + { time: '2019-03-04', value: 98.360001 }, + { time: '2019-03-05', value: 96.260002 }, + { time: '2019-03-06', value: 98.120003 }, + { time: '2019-03-07', value: 99.68 }, + { time: '2019-03-11', value: 102.1 }, + { time: '2019-03-12', value: 100.22 }, + { time: '2019-03-13', value: 100.5 }, + { time: '2019-03-14', value: 99.660004 }, + { time: '2019-03-15', value: 100.08 }, + { time: '2019-03-18', value: 99.919998 }, + { time: '2019-03-19', value: 99.459999 }, + { time: '2019-03-20', value: 98.220001 }, + { time: '2019-03-21', value: 97.300003 }, + { time: '2019-03-22', value: 97.660004 }, + { time: '2019-03-25', value: 97 }, + { time: '2019-03-26', value: 97.019997 }, + { time: '2019-03-27', value: 96.099998 }, + { time: '2019-03-28', value: 96.699997 }, + { time: '2019-03-29', value: 96.300003 }, + { time: '2019-04-01', value: 97.779999 }, + { time: '2019-04-02', value: 98.360001 }, + { time: '2019-04-03', value: 98.5 }, + { time: '2019-04-04', value: 98.360001 }, + { time: '2019-04-05', value: 99.540001 }, + { time: '2019-04-08', value: 98.580002 }, + { time: '2019-04-09', value: 97.239998 }, + { time: '2019-04-10', value: 97.32 }, + { time: '2019-04-11', value: 98.400002 }, + { time: '2019-04-12', value: 98.220001 }, + { time: '2019-04-15', value: 98.720001 }, + { time: '2019-04-16', value: 99.120003 }, + { time: '2019-04-17', value: 98.620003 }, + { time: '2019-04-18', value: 98 }, + { time: '2019-04-19', value: 97.599998 }, + { time: '2019-04-22', value: 97.599998 }, + { time: '2019-04-23', value: 96.800003 }, + { time: '2019-04-24', value: 96.32 }, + { time: '2019-04-25', value: 96.339996 }, + { time: '2019-04-26', value: 97.120003 }, + { time: '2019-04-29', value: 96.980003 }, + { time: '2019-04-30', value: 96.32 }, + { time: '2019-05-02', value: 96.860001 }, + { time: '2019-05-03', value: 96.699997 }, + { time: '2019-05-06', value: 94.940002 }, + { time: '2019-05-07', value: 94.5 }, + { time: '2019-05-08', value: 94.239998 }, + { time: '2019-05-10', value: 92.900002 }, + { time: '2019-05-13', value: 91.279999 }, + { time: '2019-05-14', value: 91.599998 }, + { time: '2019-05-15', value: 90.080002 }, + { time: '2019-05-16', value: 91.68 }, + { time: '2019-05-17', value: 91.959999 }, + { time: '2019-05-20', value: 91.080002 }, + { time: '2019-05-21', value: 90.760002 }, + { time: '2019-05-22', value: 91 }, + { time: '2019-05-23', value: 90.739998 }, + { time: '2019-05-24', value: 91 }, + { time: '2019-05-27', value: 91.199997 }, + { time: '2019-05-28', value: 90.68 }, + { time: '2019-05-29', value: 91.120003 }, + { time: '2019-05-30', value: 90.419998 }, + { time: '2019-05-31', value: 93.800003 }, + { time: '2019-06-03', value: 96.800003 }, + { time: '2019-06-04', value: 96.34 }, + { time: '2019-06-05', value: 95.94 }]; + + mainSeries.setData(data); +} From 45dc904e147b05453902c618b2f2563e55def937 Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Thu, 3 Aug 2023 13:25:33 +0100 Subject: [PATCH 2/9] Increase size limit --- .size-limit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index b9e58ab0d0..bec1c3c736 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.07 KB', + limit: '47.13 KB', }, { name: 'ESM', path: 'dist/lightweight-charts.production.mjs', - limit: '47.01 KB', + limit: '47.07 KB', }, { name: 'Standalone-ESM', path: 'dist/lightweight-charts.standalone.production.mjs', - limit: '48.70 KB', + limit: '48.76 KB', }, { name: 'Standalone', path: 'dist/lightweight-charts.standalone.production.js', - limit: '48.74 KB', + limit: '48.81 KB', }, ]; From bc021a369620cff5ade503f3b83fe491d1cdf74d Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Thu, 3 Aug 2023 13:45:28 +0100 Subject: [PATCH 3/9] Fix tests options --- .../test-cases/time-scale/do-not-render-overlapping-marks.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js index 3c60093a9f..fe58c65757 100644 --- a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js +++ b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js @@ -2,7 +2,9 @@ function runTestCase(container) { const chart = window.chart = LightweightCharts.createChart(container, { handleScroll: false, handleScale: false, - tickMarkFormatter: time => `long prefix ${time}`, + timeScale: { + tickMarkFormatter: time => `long prefix ${time}`, + }, }); const mainSeries = chart.addLineSeries(); From 2d4d0d80041820b21909d883780c8942d340fec7 Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Fri, 4 Aug 2023 11:51:12 +0100 Subject: [PATCH 4/9] Impove tick marks algorithm --- src/model/tick-marks.ts | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/model/tick-marks.ts b/src/model/tick-marks.ts index a742a5817a..5ac91a5314 100644 --- a/src/model/tick-marks.ts +++ b/src/model/tick-marks.ts @@ -49,7 +49,7 @@ export class TickMarks { public build(spacing: number, maxWidth: number, fontSize: number): readonly TickMark[] { const maxIndexesPerMark = Math.ceil(maxWidth / spacing); - const maxCharactersPerIndex = Math.max(1, Math.ceil(spacing / fontSize) - 1); + const maxCharactersPerIndex = Math.round(((spacing / fontSize) + Number.EPSILON) * 100) / 100; if (this._cache === null || this._cache.maxIndexesPerMark !== maxIndexesPerMark || this._cache.maxCharactersPerIndex !== maxCharactersPerIndex) { this._cache = { marks: this._buildMarksImpl(maxIndexesPerMark, maxCharactersPerIndex), @@ -90,7 +90,9 @@ export class TickMarks { const indexesToSkip = new Set(); - for (const weight of Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a)) { + const weights = Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a); + + for (const weight of weights) { if (!this._marksByWeight.get(weight)) { continue; } @@ -115,6 +117,7 @@ export class TickMarks { } const label = this._formatLabel(mark); + const labelLength = label.length + (mark.weight === weights[0] ? 4 : 2); /* eslint-disable jsdoc/check-indentation */ /** @@ -129,7 +132,7 @@ export class TickMarks { * floor(6.333333333333333 / 2) is is the number of marks either side of index 5 that will be covered. */ /* eslint-enable jsdoc/check-indentation */ - const labelIndexOverflow = Math.floor(label.length / maxCharactersPerIndex / 2); + const labelIndexOverflow = Math.floor(labelLength / maxCharactersPerIndex / 2); // Determine indexes with which current index will be compared // All marks to the right is moved to new array @@ -171,3 +174,22 @@ export class TickMarks { return marks; } } + +// // eslint-disable-next-line complexity +// function markWeightCoefficient(mark: TickMark, maxWeight: TickMarkWeight): number { +// return mark.weight === maxWeight ? 1.5 : 1; +// // switch (mark.weight) { +// // case TickMarkWeight.LessThanSecond: return 1; +// // case TickMarkWeight.Second: return 1.1; +// // case TickMarkWeight.Minute1: return 1.2; +// // case TickMarkWeight.Minute5: +// // case TickMarkWeight.Minute30: return 1.3; +// // case TickMarkWeight.Hour1: +// // case TickMarkWeight.Hour3: +// // case TickMarkWeight.Hour6: +// // case TickMarkWeight.Hour12: return 1.4; +// // case TickMarkWeight.Day: return 1.5; +// // case TickMarkWeight.Month: return 1.6; +// // case TickMarkWeight.Year: return 1.7; +// // } +// } From 44933b37b5407452894cf50dbc97b7eac70d8a0c Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Mon, 7 Aug 2023 13:56:23 +0100 Subject: [PATCH 5/9] Use estimated label length for tick marks --- .gitignore | 1 + .size-limit.js | 8 +-- src/model/layout-options.ts | 2 +- src/model/tick-marks.ts | 67 ++----------------- src/model/time-scale.ts | 28 +++++++- .../initial-options/tick-marks-formatter-2.js | 2 +- 6 files changed, 36 insertions(+), 72 deletions(-) diff --git a/.gitignore b/.gitignore index 2e0382c58b..1b3a15696b 100644 --- a/.gitignore +++ b/.gitignore @@ -28,6 +28,7 @@ debug.html /website/.cache-loader /website/.previous-typings-cache/*.d.ts /website/versions.d.ts +/merge-base-dist !/src/typings/**/*.d.ts diff --git a/.size-limit.js b/.size-limit.js index bec1c3c736..2a436b49fb 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.13 KB', + limit: '47.11 KB', }, { name: 'ESM', path: 'dist/lightweight-charts.production.mjs', - limit: '47.07 KB', + limit: '47.1 KB', }, { name: 'Standalone-ESM', path: 'dist/lightweight-charts.standalone.production.mjs', - limit: '48.76 KB', + limit: '48.73 KB', }, { name: 'Standalone', path: 'dist/lightweight-charts.standalone.production.js', - limit: '48.81 KB', + limit: '48.78 KB', }, ]; diff --git a/src/model/layout-options.ts b/src/model/layout-options.ts index 49a6156b8b..c67e6da484 100644 --- a/src/model/layout-options.ts +++ b/src/model/layout-options.ts @@ -67,7 +67,7 @@ export interface LayoutOptions { /** * Font size of text on scales in pixels. * - * @defaultValue `11` + * @defaultValue `12` */ fontSize: number; diff --git a/src/model/tick-marks.ts b/src/model/tick-marks.ts index 5ac91a5314..a0db79be00 100644 --- a/src/model/tick-marks.ts +++ b/src/model/tick-marks.ts @@ -12,18 +12,12 @@ export interface TickMark { interface MarksCache { maxIndexesPerMark: number; - maxCharactersPerIndex: number; marks: readonly TickMark[]; } export class TickMarks { private _marksByWeight: Map = new Map(); private _cache: MarksCache | null = null; - private _formatLabel: (mark: TickMark) => string; - - public constructor(formatLabel: (mark: TickMark) => string) { - this._formatLabel = formatLabel; - } public setTimeScalePoints(newPoints: readonly TimeScalePoint[], firstChangedPointIndex: number): void { this._removeMarksSinceIndex(firstChangedPointIndex); @@ -47,14 +41,12 @@ export class TickMarks { } } - public build(spacing: number, maxWidth: number, fontSize: number): readonly TickMark[] { + public build(spacing: number, maxWidth: number): readonly TickMark[] { const maxIndexesPerMark = Math.ceil(maxWidth / spacing); - const maxCharactersPerIndex = Math.round(((spacing / fontSize) + Number.EPSILON) * 100) / 100; - if (this._cache === null || this._cache.maxIndexesPerMark !== maxIndexesPerMark || this._cache.maxCharactersPerIndex !== maxCharactersPerIndex) { + if (this._cache === null || this._cache.maxIndexesPerMark !== maxIndexesPerMark) { this._cache = { - marks: this._buildMarksImpl(maxIndexesPerMark, maxCharactersPerIndex), + marks: this._buildMarksImpl(maxIndexesPerMark), maxIndexesPerMark, - maxCharactersPerIndex, }; } @@ -85,11 +77,9 @@ export class TickMarks { } } - private _buildMarksImpl(maxIndexesPerMark: number, maxCharactersPerIndex: number): readonly TickMark[] { + private _buildMarksImpl(maxIndexesPerMark: number): readonly TickMark[] { let marks: TickMark[] = []; - const indexesToSkip = new Set(); - const weights = Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a); for (const weight of weights) { @@ -112,28 +102,6 @@ export class TickMarks { const mark = currentWeight[i]; const currentIndex = mark.index; - if (indexesToSkip.has(currentIndex)) { - continue; - } - - const label = this._formatLabel(mark); - const labelLength = label.length + (mark.weight === weights[0] ? 4 : 2); - - /* eslint-disable jsdoc/check-indentation */ - /** - * 0 1 2 3 4 5 6 7 8 9 10 - * | | | | | | | | | | | - * ^ - * "a really long label" - * - * In the picture above the maximum characters per index is 3. - * The label length is 19. - * 19 / 3 = 6.333333333333333 is the number of marks covered by that label. - * floor(6.333333333333333 / 2) is is the number of marks either side of index 5 that will be covered. - */ - /* eslint-enable jsdoc/check-indentation */ - const labelIndexOverflow = Math.floor(labelLength / maxCharactersPerIndex / 2); - // Determine indexes with which current index will be compared // All marks to the right is moved to new array while (prevMarksPointer < prevMarksLength) { @@ -154,14 +122,6 @@ export class TickMarks { // TickMark fits. Place it into new array marks.push(mark); leftIndex = currentIndex; - indexesToSkip.add(currentIndex); - - if (labelIndexOverflow > 0) { - for (let j = 1; j <= labelIndexOverflow; j++) { - indexesToSkip.add(currentIndex + j); - indexesToSkip.add(currentIndex - j); - } - } } } @@ -174,22 +134,3 @@ export class TickMarks { return marks; } } - -// // eslint-disable-next-line complexity -// function markWeightCoefficient(mark: TickMark, maxWeight: TickMarkWeight): number { -// return mark.weight === maxWeight ? 1.5 : 1; -// // switch (mark.weight) { -// // case TickMarkWeight.LessThanSecond: return 1; -// // case TickMarkWeight.Second: return 1.1; -// // case TickMarkWeight.Minute1: return 1.2; -// // case TickMarkWeight.Minute5: -// // case TickMarkWeight.Minute30: return 1.3; -// // case TickMarkWeight.Hour1: -// // case TickMarkWeight.Hour3: -// // case TickMarkWeight.Hour6: -// // case TickMarkWeight.Hour12: return 1.4; -// // case TickMarkWeight.Day: return 1.5; -// // case TickMarkWeight.Month: return 1.6; -// // case TickMarkWeight.Year: return 1.7; -// // } -// } diff --git a/src/model/time-scale.ts b/src/model/time-scale.ts index de28551dc6..3abfcce1f6 100644 --- a/src/model/time-scale.ts +++ b/src/model/time-scale.ts @@ -220,7 +220,7 @@ export class TimeScale { private _barSpacing: number; private _scrollStartPoint: Coordinate | null = null; private _scaleStartPoint: Coordinate | null = null; - private readonly _tickMarks: TickMarks = new TickMarks((mark: TickMark) => this._formatLabel(mark)); + private readonly _tickMarks: TickMarks = new TickMarks(); private _formattedByWeight: Map = new Map(); private _visibleRange: TimeScaleVisibleRange = TimeScaleVisibleRange.invalid(); @@ -234,6 +234,7 @@ export class TimeScale { private _timeMarksCache: TimeMark[] | null = null; private _labels: TimeMark[] = []; + private _labelLengthEstimate: number = 0; public constructor(model: ChartModel, options: TimeScaleOptions, localizationOptions: LocalizationOptions) { this._options = options; @@ -243,6 +244,7 @@ export class TimeScale { this._model = model; this._updateDateTimeFormatter(); + this._updateLabelLengthEstimate(); } public options(): Readonly { @@ -254,6 +256,7 @@ export class TimeScale { this._invalidateTickMarks(); this._updateDateTimeFormatter(); + this._updateLabelLengthEstimate(); } public applyOptions(options: DeepPartial, localizationOptions?: DeepPartial): void { @@ -285,6 +288,7 @@ export class TimeScale { this._invalidateTickMarks(); this._updateDateTimeFormatter(); + this._updateLabelLengthEstimate(); this._optionsApplied.fire(); } @@ -485,7 +489,7 @@ export class TimeScale { const spacing = this._barSpacing; const fontSize = this._model.options().layout.fontSize; - const maxLabelWidth = (fontSize + 4) * 5; + const maxLabelWidth = Math.max((fontSize + 4) * 5, this._labelLengthEstimate * fontSize); const indexPerLabel = Math.round(maxLabelWidth / spacing); const visibleBars = ensureNotNull(this.visibleStrictRange()); @@ -493,7 +497,7 @@ export class TimeScale { const firstBar = Math.max(visibleBars.left(), visibleBars.left() - indexPerLabel); const lastBar = Math.max(visibleBars.right(), visibleBars.right() - indexPerLabel); - const items = this._tickMarks.build(spacing, maxLabelWidth, fontSize); + const items = this._tickMarks.build(spacing, maxLabelWidth); // according to indexPerLabel value this value means "earliest index which _might be_ used as the second label on time scale" const earliestIndexOfSecondLabel = (this._firstIndex() as number) + indexPerLabel; @@ -993,6 +997,24 @@ export class TimeScale { this._correctBarSpacing(); } + + private _updateLabelLengthEstimate(): void { + const formatter = this._options.tickMarkFormatter; + + if (formatter === undefined) { + this._labelLengthEstimate = 0; + return; + } + + const formattedLabel = formatter(0 as UTCTimestamp, TickMarkType.TimeWithSeconds, this._localizationOptions.locale); + + if (typeof formattedLabel !== 'string') { + this._labelLengthEstimate = 0; + return; + } + + this._labelLengthEstimate = formattedLabel.length; + } } // eslint-disable-next-line complexity diff --git a/tests/e2e/graphics/test-cases/initial-options/tick-marks-formatter-2.js b/tests/e2e/graphics/test-cases/initial-options/tick-marks-formatter-2.js index d600db6d00..30c1712635 100644 --- a/tests/e2e/graphics/test-cases/initial-options/tick-marks-formatter-2.js +++ b/tests/e2e/graphics/test-cases/initial-options/tick-marks-formatter-2.js @@ -21,7 +21,7 @@ function getData() { function runTestCase(container) { const chart = window.chart = LightweightCharts.createChart(container, { timeScale: { - tickMarkFormatter: (time, tickMarkType, locale) => time, // return time as is + tickMarkFormatter: (time, tickMarkType, locale) => time.toString(), // return time as is }, }); From babfa82cf290559eb68f02b6ec9e6e8831020d78 Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Mon, 7 Aug 2023 16:44:09 +0100 Subject: [PATCH 6/9] Undo extra changes --- .gitignore | 1 - src/model/tick-marks.ts | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index 1b3a15696b..2e0382c58b 100644 --- a/.gitignore +++ b/.gitignore @@ -28,7 +28,6 @@ debug.html /website/.cache-loader /website/.previous-typings-cache/*.d.ts /website/versions.d.ts -/merge-base-dist !/src/typings/**/*.d.ts diff --git a/src/model/tick-marks.ts b/src/model/tick-marks.ts index a0db79be00..2549d849b0 100644 --- a/src/model/tick-marks.ts +++ b/src/model/tick-marks.ts @@ -80,9 +80,7 @@ export class TickMarks { private _buildMarksImpl(maxIndexesPerMark: number): readonly TickMark[] { let marks: TickMark[] = []; - const weights = Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a); - - for (const weight of weights) { + for (const weight of Array.from(this._marksByWeight.keys()).sort((a: number, b: number) => b - a)) { if (!this._marksByWeight.get(weight)) { continue; } From 9f55db388d5a91870e7fcb12d6b2b561cd543952 Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Tue, 8 Aug 2023 10:47:31 +0100 Subject: [PATCH 7/9] Allow default 8 character max to be overridden --- src/model/time-scale.ts | 36 +- ...t-render-overlapping-marks-font-size-24.js | 319 ++++++++++++++++++ .../do-not-render-overlapping-marks.js | 1 + 3 files changed, 332 insertions(+), 24 deletions(-) create mode 100644 tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js diff --git a/src/model/time-scale.ts b/src/model/time-scale.ts index 3abfcce1f6..45d4529344 100644 --- a/src/model/time-scale.ts +++ b/src/model/time-scale.ts @@ -30,6 +30,8 @@ import { } from './time-data'; import { TimeScaleVisibleRange } from './time-scale-visible-range'; +const defaultTickMarkMaxCharacterLength = 8; + const enum Constants { DefaultAnimationDuration = 400, // make sure that this (1 / MinVisibleBarsCount) >= coeff in max bar spacing @@ -204,6 +206,13 @@ export interface TimeScaleOptions { * @defaultValue `false` */ ticksVisible: boolean; + + /** + * Maximum tick mark label length. Used to override the default 8 character maximum length. + * + * @defaultValue `undefined` + */ + tickMarkMaxCharacterLength?: number; } export class TimeScale { @@ -234,7 +243,6 @@ export class TimeScale { private _timeMarksCache: TimeMark[] | null = null; private _labels: TimeMark[] = []; - private _labelLengthEstimate: number = 0; public constructor(model: ChartModel, options: TimeScaleOptions, localizationOptions: LocalizationOptions) { this._options = options; @@ -244,7 +252,6 @@ export class TimeScale { this._model = model; this._updateDateTimeFormatter(); - this._updateLabelLengthEstimate(); } public options(): Readonly { @@ -256,7 +263,6 @@ export class TimeScale { this._invalidateTickMarks(); this._updateDateTimeFormatter(); - this._updateLabelLengthEstimate(); } public applyOptions(options: DeepPartial, localizationOptions?: DeepPartial): void { @@ -288,8 +294,6 @@ export class TimeScale { this._invalidateTickMarks(); this._updateDateTimeFormatter(); - this._updateLabelLengthEstimate(); - this._optionsApplied.fire(); } @@ -489,7 +493,9 @@ export class TimeScale { const spacing = this._barSpacing; const fontSize = this._model.options().layout.fontSize; - const maxLabelWidth = Math.max((fontSize + 4) * 5, this._labelLengthEstimate * fontSize); + const pixelsPer8Characters = (fontSize + 4) * 5; + const pixelsPerCharacter = pixelsPer8Characters / defaultTickMarkMaxCharacterLength; + const maxLabelWidth = pixelsPerCharacter * (this._options.tickMarkMaxCharacterLength || defaultTickMarkMaxCharacterLength); const indexPerLabel = Math.round(maxLabelWidth / spacing); const visibleBars = ensureNotNull(this.visibleStrictRange()); @@ -997,24 +1003,6 @@ export class TimeScale { this._correctBarSpacing(); } - - private _updateLabelLengthEstimate(): void { - const formatter = this._options.tickMarkFormatter; - - if (formatter === undefined) { - this._labelLengthEstimate = 0; - return; - } - - const formattedLabel = formatter(0 as UTCTimestamp, TickMarkType.TimeWithSeconds, this._localizationOptions.locale); - - if (typeof formattedLabel !== 'string') { - this._labelLengthEstimate = 0; - return; - } - - this._labelLengthEstimate = formattedLabel.length; - } } // eslint-disable-next-line complexity diff --git a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js new file mode 100644 index 0000000000..273dc69c1b --- /dev/null +++ b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js @@ -0,0 +1,319 @@ +function runTestCase(container) { + const chart = window.chart = LightweightCharts.createChart(container, { + handleScroll: false, + handleScale: false, + layout: { + fontSize: 24, + }, + timeScale: { + tickMarkMaxCharacterLength: 'long prefix 0000-00-00'.length, + tickMarkFormatter: time => `long prefix ${time}`, + }, + }); + + const mainSeries = chart.addLineSeries(); + + const data = [ + { time: '2018-03-28', value: 154 }, + { time: '2018-03-29', value: 154.2 }, + { time: '2018-03-30', value: 155.60001 }, + { time: '2018-04-02', value: 156.25 }, + { time: '2018-04-03', value: 156.25 }, + { time: '2018-04-04', value: 156.05 }, + { time: '2018-04-05', value: 158.05 }, + { time: '2018-04-06', value: 157.3 }, + { time: '2018-04-09', value: 144 }, + { time: '2018-04-10', value: 144.8 }, + { time: '2018-04-11', value: 143.5 }, + { time: '2018-04-12', value: 147.05 }, + { time: '2018-04-13', value: 144.85001 }, + { time: '2018-04-16', value: 145.39999 }, + { time: '2018-04-17', value: 147.3 }, + { time: '2018-04-18', value: 153.55 }, + { time: '2018-04-19', value: 150.95 }, + { time: '2018-04-20', value: 149.39999 }, + { time: '2018-04-23', value: 148.5 }, + { time: '2018-04-24', value: 146.60001 }, + { time: '2018-04-25', value: 144.45 }, + { time: '2018-04-26', value: 145.60001 }, + { time: '2018-04-27', value: 144.3 }, + { time: '2018-04-30', value: 144 }, + { time: '2018-05-02', value: 147.3 }, + { time: '2018-05-03', value: 144.2 }, + { time: '2018-05-04', value: 141.64999 }, + { time: '2018-05-07', value: 141.89999 }, + { time: '2018-05-08', value: 140.39999 }, + { time: '2018-05-10', value: 139.8 }, + { time: '2018-05-11', value: 137.5 }, + { time: '2018-05-14', value: 136.14999 }, + { time: '2018-05-15', value: 138 }, + { time: '2018-05-16', value: 137.95 }, + { time: '2018-05-17', value: 137.95 }, + { time: '2018-05-18', value: 136.75 }, + { time: '2018-05-21', value: 136.2 }, + { time: '2018-05-22', value: 135 }, + { time: '2018-05-23', value: 132.55 }, + { time: '2018-05-24', value: 132.7 }, + { time: '2018-05-25', value: 132.2 }, + { time: '2018-05-28', value: 131.55 }, + { time: '2018-05-29', value: 131.85001 }, + { time: '2018-05-30', value: 139.85001 }, + { time: '2018-05-31', value: 140.8 }, + { time: '2018-06-01', value: 139.64999 }, + { time: '2018-06-04', value: 137.10001 }, + { time: '2018-06-05', value: 139.25 }, + { time: '2018-06-06', value: 141.3 }, + { time: '2018-06-07', value: 145 }, + { time: '2018-06-08', value: 143.89999 }, + { time: '2018-06-11', value: 142.7 }, + { time: '2018-06-13', value: 144.05 }, + { time: '2018-06-14', value: 143.55 }, + { time: '2018-06-15', value: 140.5 }, + { time: '2018-06-18', value: 139.64999 }, + { time: '2018-06-19', value: 138 }, + { time: '2018-06-20', value: 141 }, + { time: '2018-06-21', value: 140.55 }, + { time: '2018-06-22', value: 140.55 }, + { time: '2018-06-25', value: 140.75 }, + { time: '2018-06-26', value: 140.64999 }, + { time: '2018-06-27', value: 141.14999 }, + { time: '2018-06-28', value: 139.8 }, + { time: '2018-06-29', value: 139.8 }, + { time: '2018-07-02', value: 140.14999 }, + { time: '2018-07-03', value: 143.05 }, + { time: '2018-07-04', value: 140 }, + { time: '2018-07-05', value: 129.2 }, + { time: '2018-07-06', value: 129.55 }, + { time: '2018-07-09', value: 128.3 }, + { time: '2018-07-10', value: 126.55 }, + { time: '2018-07-11', value: 124.3 }, + { time: '2018-07-12', value: 124.8 }, + { time: '2018-07-13', value: 123.25 }, + { time: '2018-07-16', value: 123 }, + { time: '2018-07-17', value: 124.25 }, + { time: '2018-07-18', value: 123 }, + { time: '2018-07-19', value: 121 }, + { time: '2018-07-20', value: 121.45 }, + { time: '2018-07-23', value: 123.8 }, + { time: '2018-07-24', value: 122.15 }, + { time: '2018-07-25', value: 121.3 }, + { time: '2018-07-26', value: 122.7 }, + { time: '2018-07-27', value: 122.2 }, + { time: '2018-07-30', value: 121.7 }, + { time: '2018-07-31', value: 122.95 }, + { time: '2018-08-01', value: 121 }, + { time: '2018-08-02', value: 116 }, + { time: '2018-08-03', value: 118.1 }, + { time: '2018-08-06', value: 114.3 }, + { time: '2018-08-07', value: 114.25 }, + { time: '2018-08-08', value: 111.85 }, + { time: '2018-08-09', value: 109.7 }, + { time: '2018-08-10', value: 105 }, + { time: '2018-08-13', value: 105.75 }, + { time: '2018-08-14', value: 107.25 }, + { time: '2018-08-15', value: 107.4 }, + { time: '2018-08-16', value: 110.5 }, + { time: '2018-08-17', value: 109 }, + { time: '2018-08-20', value: 108.95 }, + { time: '2018-08-21', value: 108.35 }, + { time: '2018-08-22', value: 108.6 }, + { time: '2018-08-23', value: 105.65 }, + { time: '2018-08-24', value: 104.45 }, + { time: '2018-08-27', value: 106.2 }, + { time: '2018-08-28', value: 106.55 }, + { time: '2018-08-29', value: 111.8 }, + { time: '2018-08-30', value: 115.5 }, + { time: '2018-08-31', value: 115.5 }, + { time: '2018-09-03', value: 114.55 }, + { time: '2018-09-04', value: 112.75 }, + { time: '2018-09-05', value: 111.5 }, + { time: '2018-09-06', value: 108.1 }, + { time: '2018-09-07', value: 108.55 }, + { time: '2018-09-10', value: 106.5 }, + { time: '2018-09-11', value: 105.1 }, + { time: '2018-09-12', value: 107.2 }, + { time: '2018-09-13', value: 107.1 }, + { time: '2018-09-14', value: 105.75 }, + { time: '2018-09-17', value: 106.05 }, + { time: '2018-09-18', value: 109.15 }, + { time: '2018-09-19', value: 111.4 }, + { time: '2018-09-20', value: 111 }, + { time: '2018-09-21', value: 111 }, + { time: '2018-09-24', value: 108.95 }, + { time: '2018-09-25', value: 106.65 }, + { time: '2018-09-26', value: 106.7 }, + { time: '2018-09-27', value: 107.05 }, + { time: '2018-09-28', value: 106.55 }, + { time: '2018-10-01', value: 106.2 }, + { time: '2018-10-02', value: 106.4 }, + { time: '2018-10-03', value: 107.1 }, + { time: '2018-10-04', value: 106.4 }, + { time: '2018-10-05', value: 104.65 }, + { time: '2018-10-08', value: 102.65 }, + { time: '2018-10-09', value: 102.1 }, + { time: '2018-10-10', value: 102.15 }, + { time: '2018-10-11', value: 100.9 }, + { time: '2018-10-12', value: 102 }, + { time: '2018-10-15', value: 100.15 }, + { time: '2018-10-16', value: 99 }, + { time: '2018-10-17', value: 98 }, + { time: '2018-10-18', value: 96 }, + { time: '2018-10-19', value: 95.5 }, + { time: '2018-10-22', value: 92.400002 }, + { time: '2018-10-23', value: 92.300003 }, + { time: '2018-10-24', value: 92.900002 }, + { time: '2018-10-25', value: 91.849998 }, + { time: '2018-10-26', value: 91.599998 }, + { time: '2018-10-29', value: 94.050003 }, + { time: '2018-10-30', value: 98.25 }, + { time: '2018-10-31', value: 97.25 }, + { time: '2018-11-01', value: 96.879997 }, + { time: '2018-11-02', value: 101.78 }, + { time: '2018-11-06', value: 102.4 }, + { time: '2018-11-07', value: 100.6 }, + { time: '2018-11-08', value: 98.5 }, + { time: '2018-11-09', value: 95.139999 }, + { time: '2018-11-12', value: 96.900002 }, + { time: '2018-11-13', value: 97.400002 }, + { time: '2018-11-14', value: 103.3 }, + { time: '2018-11-15', value: 102.74 }, + { time: '2018-11-16', value: 101.2 }, + { time: '2018-11-19', value: 98.720001 }, + { time: '2018-11-20', value: 102.2 }, + { time: '2018-11-21', value: 108.8 }, + { time: '2018-11-22', value: 109.9 }, + { time: '2018-11-23', value: 113.74 }, + { time: '2018-11-26', value: 110.9 }, + { time: '2018-11-27', value: 113.28 }, + { time: '2018-11-28', value: 113.6 }, + { time: '2018-11-29', value: 113.14 }, + { time: '2018-11-30', value: 114.4 }, + { time: '2018-12-03', value: 111.84 }, + { time: '2018-12-04', value: 106.7 }, + { time: '2018-12-05', value: 107.8 }, + { time: '2018-12-06', value: 106.44 }, + { time: '2018-12-07', value: 103.7 }, + { time: '2018-12-10', value: 101.02 }, + { time: '2018-12-11', value: 102.72 }, + { time: '2018-12-12', value: 101.8 }, + { time: '2018-12-13', value: 102 }, + { time: '2018-12-14', value: 102.1 }, + { time: '2018-12-17', value: 101.04 }, + { time: '2018-12-18', value: 101.6 }, + { time: '2018-12-19', value: 102 }, + { time: '2018-12-20', value: 102.02 }, + { time: '2018-12-21', value: 102.2 }, + { time: '2018-12-24', value: 102.1 }, + { time: '2018-12-25', value: 100.8 }, + { time: '2018-12-26', value: 101.02 }, + { time: '2018-12-27', value: 100.5 }, + { time: '2018-12-28', value: 101 }, + { time: '2019-01-03', value: 101.5 }, + { time: '2019-01-04', value: 101.1 }, + { time: '2019-01-08', value: 101.1 }, + { time: '2019-01-09', value: 102.06 }, + { time: '2019-01-10', value: 105.14 }, + { time: '2019-01-11', value: 104.66 }, + { time: '2019-01-14', value: 106.22 }, + { time: '2019-01-15', value: 106.98 }, + { time: '2019-01-16', value: 108.4 }, + { time: '2019-01-17', value: 109.06 }, + { time: '2019-01-18', value: 107 }, + { time: '2019-01-21', value: 105.8 }, + { time: '2019-01-22', value: 105.24 }, + { time: '2019-01-23', value: 105.4 }, + { time: '2019-01-24', value: 105.38 }, + { time: '2019-01-25', value: 105.7 }, + { time: '2019-01-28', value: 105.8 }, + { time: '2019-01-29', value: 106.1 }, + { time: '2019-01-30', value: 108.6 }, + { time: '2019-01-31', value: 107.92 }, + { time: '2019-02-01', value: 105.22 }, + { time: '2019-02-04', value: 102.44 }, + { time: '2019-02-05', value: 102.26 }, + { time: '2019-02-06', value: 102 }, + { time: '2019-02-07', value: 101.62 }, + { time: '2019-02-08', value: 101.9 }, + { time: '2019-02-11', value: 101.78 }, + { time: '2019-02-12', value: 102.7 }, + { time: '2019-02-13', value: 100.14 }, + { time: '2019-02-14', value: 101.36 }, + { time: '2019-02-15', value: 101.62 }, + { time: '2019-02-18', value: 100.74 }, + { time: '2019-02-19', value: 100 }, + { time: '2019-02-20', value: 100.04 }, + { time: '2019-02-21', value: 100 }, + { time: '2019-02-22', value: 100.12 }, + { time: '2019-02-25', value: 100.04 }, + { time: '2019-02-26', value: 98.980003 }, + { time: '2019-02-27', value: 97.699997 }, + { time: '2019-02-28', value: 97.099998 }, + { time: '2019-03-01', value: 96.760002 }, + { time: '2019-03-04', value: 98.360001 }, + { time: '2019-03-05', value: 96.260002 }, + { time: '2019-03-06', value: 98.120003 }, + { time: '2019-03-07', value: 99.68 }, + { time: '2019-03-11', value: 102.1 }, + { time: '2019-03-12', value: 100.22 }, + { time: '2019-03-13', value: 100.5 }, + { time: '2019-03-14', value: 99.660004 }, + { time: '2019-03-15', value: 100.08 }, + { time: '2019-03-18', value: 99.919998 }, + { time: '2019-03-19', value: 99.459999 }, + { time: '2019-03-20', value: 98.220001 }, + { time: '2019-03-21', value: 97.300003 }, + { time: '2019-03-22', value: 97.660004 }, + { time: '2019-03-25', value: 97 }, + { time: '2019-03-26', value: 97.019997 }, + { time: '2019-03-27', value: 96.099998 }, + { time: '2019-03-28', value: 96.699997 }, + { time: '2019-03-29', value: 96.300003 }, + { time: '2019-04-01', value: 97.779999 }, + { time: '2019-04-02', value: 98.360001 }, + { time: '2019-04-03', value: 98.5 }, + { time: '2019-04-04', value: 98.360001 }, + { time: '2019-04-05', value: 99.540001 }, + { time: '2019-04-08', value: 98.580002 }, + { time: '2019-04-09', value: 97.239998 }, + { time: '2019-04-10', value: 97.32 }, + { time: '2019-04-11', value: 98.400002 }, + { time: '2019-04-12', value: 98.220001 }, + { time: '2019-04-15', value: 98.720001 }, + { time: '2019-04-16', value: 99.120003 }, + { time: '2019-04-17', value: 98.620003 }, + { time: '2019-04-18', value: 98 }, + { time: '2019-04-19', value: 97.599998 }, + { time: '2019-04-22', value: 97.599998 }, + { time: '2019-04-23', value: 96.800003 }, + { time: '2019-04-24', value: 96.32 }, + { time: '2019-04-25', value: 96.339996 }, + { time: '2019-04-26', value: 97.120003 }, + { time: '2019-04-29', value: 96.980003 }, + { time: '2019-04-30', value: 96.32 }, + { time: '2019-05-02', value: 96.860001 }, + { time: '2019-05-03', value: 96.699997 }, + { time: '2019-05-06', value: 94.940002 }, + { time: '2019-05-07', value: 94.5 }, + { time: '2019-05-08', value: 94.239998 }, + { time: '2019-05-10', value: 92.900002 }, + { time: '2019-05-13', value: 91.279999 }, + { time: '2019-05-14', value: 91.599998 }, + { time: '2019-05-15', value: 90.080002 }, + { time: '2019-05-16', value: 91.68 }, + { time: '2019-05-17', value: 91.959999 }, + { time: '2019-05-20', value: 91.080002 }, + { time: '2019-05-21', value: 90.760002 }, + { time: '2019-05-22', value: 91 }, + { time: '2019-05-23', value: 90.739998 }, + { time: '2019-05-24', value: 91 }, + { time: '2019-05-27', value: 91.199997 }, + { time: '2019-05-28', value: 90.68 }, + { time: '2019-05-29', value: 91.120003 }, + { time: '2019-05-30', value: 90.419998 }, + { time: '2019-05-31', value: 93.800003 }, + { time: '2019-06-03', value: 96.800003 }, + { time: '2019-06-04', value: 96.34 }, + { time: '2019-06-05', value: 95.94 }]; + + mainSeries.setData(data); +} diff --git a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js index fe58c65757..00a3bebf96 100644 --- a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js +++ b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js @@ -3,6 +3,7 @@ function runTestCase(container) { handleScroll: false, handleScale: false, timeScale: { + tickMarkMaxCharacterLength: 'long prefix 0000-00-00'.length, tickMarkFormatter: time => `long prefix ${time}`, }, }); From 53f37ae70d2e2dd2eb0a0b0a7e15c0f1f1d1b05e Mon Sep 17 00:00:00 2001 From: Ed Dewhurst Date: Wed, 16 Aug 2023 16:20:30 +0100 Subject: [PATCH 8/9] Disable crosshair label in tests --- .../time-scale/do-not-render-overlapping-marks-font-size-24.js | 1 + .../test-cases/time-scale/do-not-render-overlapping-marks.js | 1 + 2 files changed, 2 insertions(+) diff --git a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js index 273dc69c1b..510408e168 100644 --- a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js +++ b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks-font-size-24.js @@ -5,6 +5,7 @@ function runTestCase(container) { layout: { fontSize: 24, }, + crosshair: { vertLine: { labelVisible: false } }, timeScale: { tickMarkMaxCharacterLength: 'long prefix 0000-00-00'.length, tickMarkFormatter: time => `long prefix ${time}`, diff --git a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js index 00a3bebf96..18ac5afd47 100644 --- a/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js +++ b/tests/e2e/graphics/test-cases/time-scale/do-not-render-overlapping-marks.js @@ -2,6 +2,7 @@ function runTestCase(container) { const chart = window.chart = LightweightCharts.createChart(container, { handleScroll: false, handleScale: false, + crosshair: { vertLine: { labelVisible: false } }, timeScale: { tickMarkMaxCharacterLength: 'long prefix 0000-00-00'.length, tickMarkFormatter: time => `long prefix ${time}`, From d00e394518ce9509a462ed45396743c4316d7255 Mon Sep 17 00:00:00 2001 From: Mark Silverwood Date: Wed, 16 Aug 2023 20:58:47 +0100 Subject: [PATCH 9/9] update size-limit after master merge --- .size-limit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 5b8e3fa6a4..c608c074cf 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.59 KB', + limit: '47.62 KB', }, { name: 'ESM', path: 'dist/lightweight-charts.production.mjs', - limit: '47.54 KB', + limit: '47.56 KB', }, { name: 'Standalone-ESM', path: 'dist/lightweight-charts.standalone.production.mjs', - limit: '49.26 KB', + limit: '49.29 KB', }, { name: 'Standalone', path: 'dist/lightweight-charts.standalone.production.js', - limit: '49.31 KB', + limit: '49.33 KB', }, ];