fix: filter out undefined instances when redrawing all charts (#7779)

Author: web-padawan

packages/charts/src/vaadin-chart.js

@@ -297,18 +297,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     return 'vaadin-chart';
   }
 
-  /** @private */
-  static __callHighchartsFunction(functionName, redrawCharts, ...args) {
-    const functionToCall = Highcharts[functionName];
-    if (functionToCall && typeof functionToCall === 'function') {
-      args.forEach((arg) => inflateFunctions(arg));
-      functionToCall.apply(this.configuration, args);
-      if (redrawCharts) {
-        Highcharts.charts.forEach((c) => c.redraw());
-      }
-    }
-  }
-
   static get properties() {
     return {
       /**
@@ -506,6 +494,25 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     ];
   }
 
+  /** @private */
+  static __callHighchartsFunction(functionName, redrawCharts, ...args) {
+    const functionToCall = Highcharts[functionName];
+    if (functionToCall && typeof functionToCall === 'function') {
+      args.forEach((arg) => inflateFunctions(arg));
+      functionToCall.apply(this.configuration, args);
+      if (redrawCharts) {
+        Highcharts.charts.forEach((c) => {
+          // Ignore `undefined` values that are preserved in the array
+          // after their corresponding chart instances are destroyed.
+          // See https://github.com/vaadin/flow-components/issues/6607
+          if (c !== undefined) {
+            c.redraw();
+          }
+        });
+      }
+    }
+  }
+
   constructor() {
     super();
 

packages/charts/test/private-api.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import '../vaadin-chart.js';
 import { inflateFunctions } from '../src/helpers.js';
 
@@ -193,5 +193,18 @@ describe('vaadin-chart private API', () => {
       const legend = chart.$.chart.querySelector('.highcharts-legend-item > text').textContent;
       expect(legend).to.be.equal('value');
     });
+
+    it('should not throw when calling after a chart is destroyed', async () => {
+      chart.updateConfiguration({}, true);
+      await nextFrame();
+
+      expect(() => {
+        chart.constructor.__callHighchartsFunction('setOptions', true, {
+          lang: {
+            shortWeekdays: ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'],
+          },
+        });
+      }).to.not.throw(Error);
+    });
   });
 });