From 3f66b76a35f7a336ccf9abc4b27e0c07d11c1d06 Mon Sep 17 00:00:00 2001 From: Andrii Ovcharenko Date: Mon, 11 Mar 2024 13:28:17 +0100 Subject: [PATCH] fix: marker positioning (#1538) * fix: marker positioning --- .size-limit.js | 8 ++--- src/model/price-scale.ts | 2 +- src/views/pane/series-markers-pane-view.ts | 16 ++++++++-- .../series-markers-all-above.js | 30 +++++++++++++++++++ .../series-markers-all-below.js | 29 ++++++++++++++++++ .../series-markers-all-inbar.js | 29 ++++++++++++++++++ 6 files changed, 106 insertions(+), 8 deletions(-) create mode 100644 tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js create mode 100644 tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js create mode 100644 tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js diff --git a/.size-limit.js b/.size-limit.js index bac32267f4..6586aa5f9e 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.98 KB', + limit: '48.13 KB', }, { name: 'ESM', path: 'dist/lightweight-charts.production.mjs', - limit: '47.91 KB', + limit: '48.07 KB', }, { name: 'Standalone-ESM', path: 'dist/lightweight-charts.standalone.production.mjs', - limit: '49.63 KB', + limit: '49.77 KB', }, { name: 'Standalone', path: 'dist/lightweight-charts.standalone.production.js', - limit: '49.67 KB', + limit: '49.82 KB', }, ]; diff --git a/src/model/price-scale.ts b/src/model/price-scale.ts index 3231df41cc..a65380d1c0 100644 --- a/src/model/price-scale.ts +++ b/src/model/price-scale.ts @@ -946,7 +946,7 @@ export class PriceScale { const margins = autoScaleInfo.margins(); if (margins !== null) { marginAbove = Math.max(marginAbove, margins.above); - marginBelow = Math.max(marginAbove, margins.below); + marginBelow = Math.max(marginBelow, margins.below); } } } diff --git a/src/views/pane/series-markers-pane-view.ts b/src/views/pane/series-markers-pane-view.ts index 0a03bd820b..af00547127 100644 --- a/src/views/pane/series-markers-pane-view.ts +++ b/src/views/pane/series-markers-pane-view.ts @@ -131,14 +131,16 @@ export class SeriesMarkersPaneView implements IUpdatablePaneView { } public autoScaleMargins(): AutoScaleMargins | null { - if (this._autoScaleMarginsInvalidated) { + if (this._autoScaleMarginsInvalidated && this._dataInvalidated) { if (this._series.indexedMarkers().length > 0) { const barSpacing = this._model.timeScale().barSpacing(); const shapeMargin = calculateShapeMargin(barSpacing); const marginsAboveAndBelow = calculateShapeHeight(barSpacing) * 1.5 + shapeMargin * 2; + const position = this._hasAllMarkerSamePosition(); + this._autoScaleMargins = { - above: marginsAboveAndBelow as Coordinate, - below: marginsAboveAndBelow as Coordinate, + above: position === 'belowBar' ? 0 : marginsAboveAndBelow, + below: position === 'aboveBar' ? 0 : marginsAboveAndBelow, }; } else { this._autoScaleMargins = null; @@ -149,6 +151,14 @@ export class SeriesMarkersPaneView implements IUpdatablePaneView { return this._autoScaleMargins; } + protected _hasAllMarkerSamePosition(): string|null { + const markers = this._series.indexedMarkers(); + const markersPositions = markers.every((i: InternalSeriesMarker) => i.position === markers[0].position); + if (markersPositions) { + return markers[0].position; + } + return null; + } protected _makeValid(): void { const priceScale = this._series.priceScale(); diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js new file mode 100644 index 0000000000..7acc5c0784 --- /dev/null +++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js @@ -0,0 +1,30 @@ +function generateData() { + const res = []; + const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0)); + for (let i = 0; i < 30; ++i) { + res.push({ + time: time.getTime() / 1000, + value: i, + }); + + time.setUTCDate(time.getUTCDate() + 1); + } + return res; +} + +function runTestCase(container) { + const chart = window.chart = LightweightCharts.createChart(container); + + const mainSeries = chart.addHistogramSeries(); + + const data = generateData(); + mainSeries.setData(data); + + const markers = [ + { time: data[0].time, position: 'aboveBar', color: 'red', shape: 'arrowUp' }, + { time: data[1].time, position: 'aboveBar', color: 'red', shape: 'arrowUp' }, + + ]; + + mainSeries.setMarkers(markers); +} diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js new file mode 100644 index 0000000000..a54c90cdbf --- /dev/null +++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js @@ -0,0 +1,29 @@ +function generateData() { + const res = []; + const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0)); + for (let i = 0; i < 30; ++i) { + res.push({ + time: time.getTime() / 1000, + value: i, + }); + + time.setUTCDate(time.getUTCDate() + 1); + } + return res; +} + +function runTestCase(container) { + const chart = window.chart = LightweightCharts.createChart(container); + + const mainSeries = chart.addHistogramSeries(); + + const data = generateData(); + mainSeries.setData(data); + + const markers = [ + { time: data[data.length - 3].time, position: 'belowBar', color: 'red', shape: 'arrowUp' }, + { time: data[data.length - 2].time, position: 'belowBar', color: 'red', shape: 'arrowUp' }, + ]; + + mainSeries.setMarkers(markers); +} diff --git a/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js new file mode 100644 index 0000000000..9e6b34571e --- /dev/null +++ b/tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js @@ -0,0 +1,29 @@ +function generateData() { + const res = []; + const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0)); + for (let i = 0; i < 30; ++i) { + res.push({ + time: time.getTime() / 1000, + value: i, + }); + + time.setUTCDate(time.getUTCDate() + 1); + } + return res; +} + +function runTestCase(container) { + const chart = window.chart = LightweightCharts.createChart(container); + + const mainSeries = chart.addHistogramSeries(); + + const data = generateData(); + mainSeries.setData(data); + + const markers = [ + { time: data[data.length - 3].time, position: 'inBar', color: 'red', shape: 'arrowUp' }, + { time: data[data.length - 2].time, position: 'inBar', color: 'red', shape: 'arrowUp' }, + ]; + + mainSeries.setMarkers(markers); +}