@vaadin/charts 23.5.7 → 23.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.5.7",
+  "version": "23.5.9",
   "publishConfig": {
     "access": "public"
   },
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.5.7",
-    "@vaadin/vaadin-lumo-styles": "~23.5.7",
-    "@vaadin/vaadin-material-styles": "~23.5.7",
-    "@vaadin/vaadin-themable-mixin": "~23.5.7",
+    "@vaadin/component-base": "~23.5.9",
+    "@vaadin/vaadin-lumo-styles": "~23.5.9",
+    "@vaadin/vaadin-material-styles": "~23.5.9",
+    "@vaadin/vaadin-themable-mixin": "~23.5.9",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "19efa292d13bc1052f0d2c15b19ebc2ebd3dc156"
+  "gitHead": "42b9cb7f53bf56753c61d7373c76081ba46bff38"
 }

package/src/vaadin-chart-series.js

@@ -310,7 +310,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __valueMinObserver(valueMin, series) {
-    if (valueMin === undefined || series === undefined) {
+    if (valueMin === undefined || series == null) {
       return;
     }
 
@@ -319,7 +319,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __valueMaxObserver(valueMax, series) {
-    if (valueMax === undefined || series === undefined) {
+    if (valueMax === undefined || series == null) {
       return;
     }
 
@@ -335,7 +335,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __titleObserver(title, series) {
-    if (title === undefined || series === undefined) {
+    if (title === undefined || series == null) {
       return;
     }
     series.update({ name: title });
@@ -343,7 +343,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __stackObserver(stack, series) {
-    if (stack === undefined || series === undefined) {
+    if (stack === undefined || series == null) {
       return;
     }
     series.update({ stack });
@@ -351,7 +351,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __neckPositionObserver(neckPosition, series) {
-    if (neckPosition === undefined || series === undefined) {
+    if (neckPosition === undefined || series == null) {
       return;
     }
 
@@ -360,7 +360,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __neckWidthObserver(neckWidth, series) {
-    if (neckWidth === undefined || series === undefined) {
+    if (neckWidth === undefined || series == null) {
       return;
     }
 
@@ -404,7 +404,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __markersObserver(markers, series) {
-    if (markers === undefined || series === undefined) {
+    if (markers === undefined || series == null) {
       return;
     }
 

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,9 +1101,34 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this._childObserver) {
-      this._childObserver.disconnect();
-    }
+
+    queueMicrotask(() => {
+      if (this.isConnected) {
+        return;
+      }
+
+      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) {
+        this._childObserver.disconnect();
+      }
+    });
+  }
+
+  /** @private */
+  __resetChart() {
+    const initialOptions = { ...this.options, ...this._jsonConfigurationBuffer };
+    this.__initChart(initialOptions);
+    this._jsonConfigurationBuffer = null;
   }
 
   /**
@@ -1187,11 +1227,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 +1436,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 +1489,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 +1498,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 +1512,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 +1547,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 +1573,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 +1586,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 +1597,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 +1606,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 +1619,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 +1650,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 +1668,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 +1695,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 +1706,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.7",
+  "version": "23.5.9",
   "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.7",
+  "version": "23.5.9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {