@vaadin/charts 23.1.0-alpha2 → 23.1.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -34,15 +34,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha2",
+    "@vaadin/component-base": "23.1.0-alpha3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.4"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

package/src/vaadin-chart.js

@@ -62,6 +62,10 @@ export function deepMerge(target, source) {
   /* eslint-enable no-invalid-this */
 });
 
+// Init Highcharts global language defaults
+// No data message should be empty by default
+Highcharts.setOptions({ lang: { noData: '' } });
+
 /**
  * `<vaadin-chart>` is a Web Component for creating high quality charts.
  *
@@ -428,7 +432,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       emptyText: {
         type: String,
-        value: ' ',
         reflectToAttribute: true
       },
 
@@ -532,9 +535,17 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       this._jsonConfigurationBuffer = null;
       this.__initChart(options);
       this.__addChildObserver();
+      this.__checkTurboMode();
     });
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addEventListener('chart-redraw', this.__onRedraw.bind(this));
+  }
+
   /**
    * @return {!Options}
    */
@@ -1032,13 +1043,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     // Best effort to make chart display custom empty-text messages when series are removed.
     // This is needed because Highcharts currently doesn't react. A condition not catered for is
     // when all points are removed from all series without removing any series.
-    const isEmpty =
-      this.configuration.series.length === 0 ||
-      this.configuration.series.map((e) => e.data.length === 0).reduce((e1, e2) => e1 && e2, true);
-    if (isEmpty) {
-      this.configuration.hideNoData();
-      this.configuration.showNoData(this.emptyText);
-    }
+    this.__updateNoDataElement(this.configuration);
   }
 
   /** @private */
@@ -1664,8 +1669,21 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         noData: emptyText
       }
     });
-    config.hideNoData();
-    config.showNoData(emptyText);
+    this.__updateNoDataElement(config);
+  }
+
+  /**
+   * Force the no data text element to become visible if the chart has no data.
+   * This is necessary in cases where Highcharts does not update the element
+   * automatically, for example when setting the language config
+   * @private
+   */
+  __updateNoDataElement(config) {
+    const isEmpty = config.series.every((e) => e.data.length === 0);
+    if (isEmpty) {
+      config.hideNoData();
+      config.showNoData(this.emptyText);
+    }
   }
 
   /** @private */
@@ -1771,6 +1789,34 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   __showWarn(propertyName, acceptedValues) {
     console.warn('<vaadin-chart> Acceptable values for "' + propertyName + '" are ' + acceptedValues);
   }
+
+  /** @private */
+  __onRedraw() {
+    this.__checkTurboMode();
+  }
+
+  /** @private */
+  __checkTurboMode() {
+    const isDevelopmentMode = !!window.Vaadin.developmentMode;
+
+    if (!this.configuration || !isDevelopmentMode || this.__turboModeWarningAlreadyLogged) {
+      return;
+    }
+
+    const exceedsTurboThreshold = this.configuration.series.some((series) => {
+      const threshold = (series.options && series.options.turboThreshold) || 0;
+      const dataLength = series.data.length;
+
+      return threshold > 0 && dataLength > threshold;
+    });
+
+    if (exceedsTurboThreshold) {
+      this.__turboModeWarningAlreadyLogged = true;
+      console.warn(
+        '<vaadin-chart> Turbo mode has been enabled for one or more series, because the number of data items exceeds the configured threshold. Turbo mode improves the performance of charts with lots of data, but is not compatible with every type of series. Please consult the documentation on compatibility, or how to disable turbo mode.'
+      );
+    }
+  }
 }
 
 customElements.define(Chart.is, Chart);