From 4f4ef88c10cde8b1ea9b9a021976f45d2e3dcb91 Mon Sep 17 00:00:00 2001 From: Vaadin Bot Date: Fri, 8 Nov 2024 15:21:41 +0100 Subject: [PATCH] fix: reset charts series objects when chart is detached (#8115) (#8122) Co-authored-by: Serhii Kulykov --- packages/charts/src/vaadin-chart-series.js | 14 +-- packages/charts/src/vaadin-chart.js | 6 ++ packages/charts/test/reattach.test.js | 115 +++++++++++++++++++++ 3 files changed, 128 insertions(+), 7 deletions(-) diff --git a/packages/charts/src/vaadin-chart-series.js b/packages/charts/src/vaadin-chart-series.js index dd571226183..4177c8d3401 100644 --- a/packages/charts/src/vaadin-chart-series.js +++ b/packages/charts/src/vaadin-chart-series.js @@ -331,7 +331,7 @@ class ChartSeries extends PolymerElement { /** @private */ __valueMinObserver(valueMin, series) { - if (valueMin === undefined || series === undefined) { + if (valueMin === undefined || series == null) { return; } @@ -340,7 +340,7 @@ class ChartSeries extends PolymerElement { /** @private */ __valueMaxObserver(valueMax, series) { - if (valueMax === undefined || series === undefined) { + if (valueMax === undefined || series == null) { return; } @@ -356,7 +356,7 @@ class ChartSeries extends PolymerElement { /** @private */ __titleObserver(title, series) { - if (title === undefined || series === undefined) { + if (title === undefined || series == null) { return; } series.update({ name: title }); @@ -364,7 +364,7 @@ class ChartSeries extends PolymerElement { /** @private */ __stackObserver(stack, series) { - if (stack === undefined || series === undefined) { + if (stack === undefined || series == null) { return; } series.update({ stack }); @@ -372,7 +372,7 @@ class ChartSeries extends PolymerElement { /** @private */ __neckPositionObserver(neckPosition, series) { - if (neckPosition === undefined || series === undefined) { + if (neckPosition === undefined || series == null) { return; } @@ -381,7 +381,7 @@ class ChartSeries extends PolymerElement { /** @private */ __neckWidthObserver(neckWidth, series) { - if (neckWidth === undefined || series === undefined) { + if (neckWidth === undefined || series == null) { return; } @@ -425,7 +425,7 @@ class ChartSeries extends PolymerElement { /** @private */ __markersObserver(markers, series) { - if (markers === undefined || series === undefined) { + if (markers === undefined || series == null) { return; } diff --git a/packages/charts/src/vaadin-chart.js b/packages/charts/src/vaadin-chart.js index 9004545fb3c..4b43f6d7304 100644 --- a/packages/charts/src/vaadin-chart.js +++ b/packages/charts/src/vaadin-chart.js @@ -1086,6 +1086,12 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) { if (this.configuration) { this.configuration.destroy(); this.configuration = undefined; + + // Reset series objects to avoid errors while detached + const seriesNodes = Array.from(this.childNodes).filter(this.__filterSeriesNodes); + seriesNodes.forEach((series) => { + series.setSeries(null); + }); } if (this._childObserver) { diff --git a/packages/charts/test/reattach.test.js b/packages/charts/test/reattach.test.js index 607d4c33973..dd068fdb432 100644 --- a/packages/charts/test/reattach.test.js +++ b/packages/charts/test/reattach.test.js @@ -244,4 +244,119 @@ describe('reattach', () => { await oneEvent(chart, 'chart-load'); expect(chart.configuration.inverted).to.be.undefined; }); + + describe('series', () => { + let series; + + beforeEach(async () => { + await oneEvent(chart, 'chart-load'); + series = chart.querySelector('vaadin-chart-series'); + }); + + it('should apply the series title updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.title = 'Title'; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.series[0].name).to.be.equal('Title'); + }); + + it('should apply the series type updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.type = 'area'; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.series[0].type).to.be.equal('area'); + }); + + it('should apply the series unit updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.unit = 'unit'; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.yAxis[0].options.id).to.be.equal('unit'); + }); + + it('should apply the series neck-width updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.neckWidth = 20; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + expect(chart.configuration.series[0].options.neckWidth).to.be.equal(20); + }); + + it('should apply the series neck-position updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.neckPosition = 50; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + expect(chart.configuration.series[0].options.neckHeight).to.be.equal(50); + }); + + it('should apply the series valueMin updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.valueMin = 5; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.yAxis[0].options.min).to.be.equal(5); + }); + + it('should apply the series valueMax updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.valueMax = 10; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.yAxis[0].options.max).to.be.equal(10); + }); + + it('should apply the series markers updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.markers = 'auto'; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.series[0].options.marker.enabled).to.be.equal(null); + }); + + it('should apply the series stack updated while detached after reattach', async () => { + wrapper.removeChild(chart); + await nextFrame(); + + series.stack = '1'; + + wrapper.appendChild(chart); + await oneEvent(chart, 'chart-load'); + + expect(chart.configuration.series[0].options.stack).to.be.equal('1'); + }); + }); });