@vaadin/charts 23.5.6 → 23.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.5.6",
+  "version": "23.5.8",
   "publishConfig": {
     "access": "public"
   },
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.5.6",
-    "@vaadin/vaadin-lumo-styles": "~23.5.6",
-    "@vaadin/vaadin-material-styles": "~23.5.6",
-    "@vaadin/vaadin-themable-mixin": "~23.5.6",
+    "@vaadin/component-base": "~23.5.8",
+    "@vaadin/vaadin-lumo-styles": "~23.5.8",
+    "@vaadin/vaadin-material-styles": "~23.5.8",
+    "@vaadin/vaadin-themable-mixin": "~23.5.8",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8017ec1c49880fcea0819ef306c4fa3c711b0087"
+  "gitHead": "084fe61b2028ef2989c82623bff0255b2d62be55"
 }

package/src/vaadin-chart.js

@@ -57,6 +57,16 @@ export function deepMerge(target, source) {
   return target;
 }
 
+/**
+ * Convenience method for reading a value from a path.
+ *
+ * @param {string} path
+ * @param {object} object
+ */
+function get(path, object) {
+  return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), object);
+}
+
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
   /* eslint-disable no-invalid-this, prefer-arrow-callback */
   Highcharts.wrap(Highcharts.Chart.prototype, methodName, function (proceed, ...args) {
@@ -297,18 +307,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 +504,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();
 
@@ -537,33 +554,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     };
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this.__updateStyles();
-    beforeNextRender(this, () => {
-      // Detect if the chart had already been initialized. This might happen in
-      // environments where the chart is lazily attached (e.g Grid).
-      if (this.configuration) {
-        this.__reflow();
-        return;
-      }
-
-      const options = { ...this.options, ...this._jsonConfigurationBuffer };
-      this._jsonConfigurationBuffer = null;
-      this.__initChart(options);
-      this.__addChildObserver();
-      this.__checkTurboMode();
-    });
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addEventListener('chart-redraw', this.__onRedraw.bind(this));
-  }
-
   /**
    * @return {!Options}
    */
@@ -946,6 +936,31 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     };
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    this.__updateStyles();
+    beforeNextRender(this, () => {
+      // Detect if the chart had already been initialized. This might happen in
+      // environments where the chart is lazily attached (e.g Grid).
+      if (this.configuration) {
+        this.__reflow();
+        return;
+      }
+
+      this.__resetChart();
+      this.__addChildObserver();
+      this.__checkTurboMode();
+    });
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addEventListener('chart-redraw', this.__onRedraw.bind(this));
+  }
+
   /**
    * Implements resize callback from `ResizeMixin`
    * to reflow when the chart element is resized.
@@ -1086,11 +1101,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`.
    *
@@ -1187,11 +1215,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;
       }
 
@@ -1400,6 +1424,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) {
@@ -1448,7 +1477,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;
     }
 
@@ -1457,7 +1486,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;
     }
 
@@ -1471,7 +1500,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;
     }
 
@@ -1506,7 +1535,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;
     }
 
@@ -1532,7 +1561,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __hideLegend(noLegend, config) {
-    if (noLegend === undefined || !config) {
+    if (noLegend === undefined || !config || this.__hasConfigurationBuffer('legend')) {
       return;
     }
 
@@ -1545,7 +1574,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateTitle(title, config) {
-    if (title === undefined || !config) {
+    if (title === undefined || !config || this.__hasConfigurationBuffer('title')) {
       return;
     }
 
@@ -1556,7 +1585,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __tooltipObserver(tooltip, config) {
-    if (tooltip === undefined || !config) {
+    if (tooltip === undefined || !config || this.__hasConfigurationBuffer('tooltip')) {
       return;
     }
 
@@ -1565,7 +1594,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;
     }
 
@@ -1578,7 +1607,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __updateSubtitle(subtitle, config) {
-    if (subtitle === undefined || !config) {
+    if (subtitle === undefined || !config || this.__hasConfigurationBuffer('subtitle')) {
       return;
     }
 
@@ -1609,7 +1638,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;
     }
 
@@ -1627,7 +1656,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;
     }
 
@@ -1654,7 +1683,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;
     }
 
@@ -1665,7 +1694,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": "23.5.6",
+  "version": "23.5.8",
   "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": "23.5.6",
+  "version": "23.5.8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {