@vaadin/charts 24.5.0-alpha9 → 24.5.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "24.5.0-alpha9",
+  "version": "24.5.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.5.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha9",
+    "@vaadin/component-base": "24.5.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.5.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-beta1",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.5.0-alpha9",
+    "@vaadin/chai-plugins": "24.5.0-beta1",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0"
+  "gitHead": "da4b57724d7089e3766d59d01068159322adb2b8"
 }

package/src/vaadin-chart.js

@@ -33,6 +33,7 @@ import Pointer from 'highcharts/es-modules/Core/Pointer.js';
 import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { inflateFunctions } from './helpers.js';
@@ -488,7 +489,14 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       args.forEach((arg) => inflateFunctions(arg));
       functionToCall.apply(this.configuration, args);
       if (redrawCharts) {
-        Highcharts.charts.forEach((c) => c.redraw());
+        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();
+          }
+        });
       }
     }
   }
@@ -916,9 +924,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         return;
       }
 
-      const options = { ...this.options, ...this._jsonConfigurationBuffer };
-      this._jsonConfigurationBuffer = null;
-      this.__initChart(options);
+      this.__resetChart();
       this.__addChildObserver();
       this.__checkTurboMode();
     });
@@ -1071,11 +1077,24 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
+
+    if (this.configuration) {
+      this.configuration.destroy();
+      this.configuration = undefined;
+    }
+
     if (this._childObserver) {
       this._childObserver.disconnect();
     }
   }
 
+  /** @private */
+  __resetChart() {
+    const initialOptions = { ...this.options, ...this._jsonConfigurationBuffer };
+    this.__initChart(initialOptions);
+    this._jsonConfigurationBuffer = null;
+  }
+
   /**
    * Search for axis with given `id`.
    *
@@ -1172,11 +1191,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       }
 
       if (resetConfiguration) {
-        const initialOptions = { ...this.options, ...this._jsonConfigurationBuffer };
-
-        this.__initChart(initialOptions);
-
-        this._jsonConfigurationBuffer = null;
+        this.__resetChart();
         return;
       }
 
@@ -1386,6 +1401,11 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }, object);
   }
 
+  /** @private */
+  __hasConfigurationBuffer(path) {
+    return get(path, this._jsonConfigurationBuffer) !== undefined;
+  }
+
   /** @private */
   __updateOrAddCredits(credits) {
     if (this.configuration.credits) {
@@ -1434,7 +1454,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateCategories(categories, config) {
-    if (categories === undefined || !config) {
+    if (categories === undefined || !config || this.__hasConfigurationBuffer('xAxis.categories')) {
       return;
     }
 
@@ -1443,7 +1463,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateCategoryMax(max, config) {
-    if (max === undefined || !config) {
+    if (max === undefined || !config || this.__hasConfigurationBuffer('xAxis.max')) {
       return;
     }
 
@@ -1457,7 +1477,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateCategoryMin(min, config) {
-    if (min === undefined || !config) {
+    if (min === undefined || !config || this.__hasConfigurationBuffer('xAxis.min')) {
       return;
     }
 
@@ -1492,7 +1512,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateCategoryPosition(categoryPosition, config) {
-    if (categoryPosition === undefined || !config) {
+    if (categoryPosition === undefined || !config || this.__hasConfigurationBuffer('chart.inverted')) {
       return;
     }
 
@@ -1518,7 +1538,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __hideLegend(noLegend, config) {
-    if (noLegend === undefined || !config) {
+    if (noLegend === undefined || !config || this.__hasConfigurationBuffer('legend')) {
       return;
     }
 
@@ -1531,7 +1551,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateTitle(title, config) {
-    if (title === undefined || !config) {
+    if (title === undefined || !config || this.__hasConfigurationBuffer('title')) {
       return;
     }
 
@@ -1542,7 +1562,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __tooltipObserver(tooltip, config) {
-    if (tooltip === undefined || !config) {
+    if (tooltip === undefined || !config || this.__hasConfigurationBuffer('tooltip')) {
       return;
     }
 
@@ -1551,7 +1571,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateType(type, config) {
-    if (type === undefined || !config) {
+    if (type === undefined || !config || this.__hasConfigurationBuffer('chart.type')) {
       return;
     }
 
@@ -1564,7 +1584,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateSubtitle(subtitle, config) {
-    if (subtitle === undefined || !config) {
+    if (subtitle === undefined || !config || this.__hasConfigurationBuffer('subtitle')) {
       return;
     }
 
@@ -1595,7 +1615,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __stackingObserver(stacking, config) {
-    if (stacking === undefined || !config) {
+    if (stacking === undefined || !config || this.__hasConfigurationBuffer('plotOptions.series.stacking')) {
       return;
     }
 
@@ -1613,7 +1633,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __chart3dObserver(chart3d, config) {
-    if (chart3d === undefined || !config) {
+    if (chart3d === undefined || !config || this.__hasConfigurationBuffer('chart.options3d')) {
       return;
     }
 
@@ -1640,7 +1660,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __polarObserver(polar, config) {
-    if (polar === undefined || !config) {
+    if (polar === undefined || !config || this.__hasConfigurationBuffer('chart.polar')) {
       return;
     }
 
@@ -1651,7 +1671,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __emptyTextObserver(emptyText, config) {
-    if (emptyText === undefined || !config) {
+    if (emptyText === undefined || !config || this.__hasConfigurationBuffer('lang.noData')) {
       return;
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.5.0-alpha9",
+  "version": "24.5.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.5.0-alpha9",
+  "version": "24.5.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {