fix: reset charts series objects when chart is detached (#8115) (#8122)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

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,23 +356,23 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __titleObserver(title, series) {
-    if (title === undefined || series === undefined) {
+    if (title === undefined || series == null) {
       return;
     }
     series.update({ name: title });
   }
 
   /** @private */
   __stackObserver(stack, series) {
-    if (stack === undefined || series === undefined) {
+    if (stack === undefined || series == null) {
       return;
     }
     series.update({ stack });
   }
 
   /** @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;
     }
 

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) {

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');
+    });
+  });
 });