@vaadin/charts 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,15 +34,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha1",
+    "@vaadin/component-base": "23.1.0-alpha4",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4",
     "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": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/vaadin-chart-series.js

@@ -123,7 +123,7 @@ class ChartSeries extends PolymerElement {
        */
       values: {
         type: Array,
-        value: () => []
+        value: () => [],
       },
 
       /**
@@ -135,7 +135,7 @@ class ChartSeries extends PolymerElement {
        */
       valueMin: {
         type: Number,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -145,7 +145,7 @@ class ChartSeries extends PolymerElement {
        */
       valueMax: {
         type: Number,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -155,7 +155,7 @@ class ChartSeries extends PolymerElement {
        */
       type: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -164,7 +164,7 @@ class ChartSeries extends PolymerElement {
        */
       title: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -177,7 +177,7 @@ class ChartSeries extends PolymerElement {
        */
       markers: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -187,7 +187,7 @@ class ChartSeries extends PolymerElement {
        */
       unit: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -198,7 +198,7 @@ class ChartSeries extends PolymerElement {
        */
       stack: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -210,7 +210,7 @@ class ChartSeries extends PolymerElement {
        */
       neckPosition: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -222,7 +222,7 @@ class ChartSeries extends PolymerElement {
        */
       neckWidth: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -231,7 +231,7 @@ class ChartSeries extends PolymerElement {
        * @readonly
        */
       options: {
-        type: Object
+        type: Object,
       },
 
       /**
@@ -240,7 +240,7 @@ class ChartSeries extends PolymerElement {
        */
       additionalOptions: {
         type: Object,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -248,8 +248,8 @@ class ChartSeries extends PolymerElement {
        * @protected
        */
       _series: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -265,7 +265,7 @@ class ChartSeries extends PolymerElement {
       '__unitObserver(unit, valueMin, valueMax, _series)',
       '__valueMinObserver(valueMin, _series)',
       '__valueMaxObserver(valueMax, _series)',
-      '__valuesObserver(values.splices, _series)'
+      '__valuesObserver(values.splices, _series)',
     ];
   }
 
@@ -409,7 +409,7 @@ class ChartSeries extends PolymerElement {
     }
 
     series.update({
-      marker: this.__markersConfiguration
+      marker: this.__markersConfiguration,
     });
   }
 
@@ -434,7 +434,7 @@ class ChartSeries extends PolymerElement {
 
   /** @private */
   __showWarn(propertyName, acceptedValues) {
-    console.warn('<vaadin-chart-series> Acceptable values for "' + propertyName + '" are ' + acceptedValues);
+    console.warn(`<vaadin-chart-series> Acceptable values for "${propertyName}" are ${acceptedValues}`);
   }
 }
 

package/src/vaadin-chart.d.ts

@@ -582,13 +582,13 @@ declare class Chart extends ResizeMixin(ThemableMixin(ElementMixin(HTMLElement))
   addEventListener<K extends keyof ChartEventMap>(
     type: K,
     listener: (this: Chart, ev: ChartEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof ChartEventMap>(
     type: K,
     listener: (this: Chart, ev: ChartEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-chart.js

@@ -52,7 +52,7 @@ export function deepMerge(target, source) {
 }
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
-  /* eslint-disable no-invalid-this */
+  /* eslint-disable no-invalid-this, prefer-arrow-callback */
   Highcharts.wrap(Highcharts.Chart.prototype, methodName, function (proceed, ...args) {
     Highcharts.fireEvent(this, 'beforeExport');
     const result = proceed.apply(this, args);
@@ -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.
  *
@@ -305,7 +309,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categories: {
         type: Object,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -314,7 +318,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categoryMax: {
         type: Number,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -323,7 +327,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categoryMin: {
         type: Number,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -339,7 +343,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categoryPosition: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -349,7 +353,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       noLegend: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -362,7 +366,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       stacking: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -370,7 +374,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       timeline: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -379,7 +383,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       title: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -387,7 +391,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       tooltip: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -396,7 +400,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       type: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -405,7 +409,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       subtitle: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -418,7 +422,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       chart3d: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -428,8 +432,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       emptyText: {
         type: String,
-        value: ' ',
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -438,7 +441,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       additionalOptions: {
         type: Object,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -447,8 +450,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       polar: {
         type: Boolean,
-        reflectToAttribute: true
-      }
+        reflectToAttribute: true,
+      },
     };
   }
 
@@ -467,7 +470,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       '__updateSubtitle(subtitle, configuration)',
       '__updateTitle(title, configuration)',
       '__updateType(type, configuration)',
-      '__updateAdditionalOptions(additionalOptions.*)'
+      '__updateAdditionalOptions(additionalOptions.*)',
     ];
   }
 
@@ -490,29 +493,29 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     this._baseConfig = {
       chart: {
-        styledMode: true
+        styledMode: true,
       },
       credits: {
-        enabled: false
+        enabled: false,
       },
       exporting: {
-        enabled: false
+        enabled: false,
       },
       title: {
-        text: null
+        text: null,
       },
       series: [],
       xAxis: {},
       yAxis: {
-        axisGenerated: true
-      }
+        axisGenerated: true,
+      },
     };
 
     this._baseChart3d = {
       enabled: true,
       alpha: 15,
       beta: 15,
-      depth: 50
+      depth: 50,
     };
   }
 
@@ -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}
    */
@@ -554,7 +565,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (this.title) {
       options.title = {
-        text: this.title
+        text: this.title,
       };
     }
 
@@ -568,7 +579,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (this.subtitle) {
       options.subtitle = {
-        text: this.subtitle
+        text: this.subtitle,
       };
     }
 
@@ -604,7 +615,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (this.noLegend) {
       options.legend = {
-        enabled: false
+        enabled: false,
       };
     }
 
@@ -741,7 +752,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * @param {Object} detail.originalEvent object with details about the event sent
        * @param {Object} chart Chart object where the event was sent from
        */
-      selection: 'chart-selection'
+      selection: 'chart-selection',
     };
   }
 
@@ -813,7 +824,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * @param {Object} detail.originalEvent object with details about the event sent
        * @param {Object} series Series object where the event was sent from
        */
-      show: 'series-show'
+      show: 'series-show',
     };
   }
 
@@ -885,7 +896,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * @param {Object} detail.originalEvent object with details about the event sent
        * @param {Object} point Point object where the event was sent from
        */
-      update: 'point-update'
+      update: 'point-update',
     };
   }
 
@@ -898,7 +909,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * @param {Object} detail.originalEvent object with details about the event sent
        * @param {Object} axis Point object where the event was sent from
        */
-      afterSetExtremes: 'xaxes-extremes-set'
+      afterSetExtremes: 'xaxes-extremes-set',
     };
   }
 
@@ -911,7 +922,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * @param {Object} detail.originalEvent object with details about the event sent
        * @param {Object} axis Point object where the event was sent from
        */
-      afterSetExtremes: 'yaxes-extremes-set'
+      afterSetExtremes: 'yaxes-extremes-set',
     };
   }
 
@@ -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 */
@@ -1061,7 +1066,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._childObserver && this._childObserver.disconnect();
+    if (this._childObserver) {
+      this._childObserver.disconnect();
+    }
   }
 
   /**
@@ -1226,10 +1233,10 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         if (attr.indexOf('_fn_') === 0 && (typeof targetProperty === 'string' || targetProperty instanceof String)) {
           try {
             // eslint-disable-next-line no-eval
-            jsonConfiguration[attr.substr(4)] = eval('(' + targetProperty + ')');
+            jsonConfiguration[attr.substr(4)] = eval(`(${targetProperty})`);
           } catch (e) {
             // eslint-disable-next-line no-eval
-            jsonConfiguration[attr.substr(4)] = eval('(function(){' + targetProperty + '})');
+            jsonConfiguration[attr.substr(4)] = eval(`(function(){${targetProperty}})`);
           }
           delete jsonConfiguration[attr];
         } else if (targetProperty instanceof Object) {
@@ -1295,8 +1302,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
             composed: true,
             detail: {
               originalEvent: event,
-              [eventType]: event.target
-            }
+              [eventType]: event.target,
+            },
           };
 
           if (event.type === 'afterSetExtremes') {
@@ -1346,12 +1353,11 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
               // Zoom out a bit to avoid clipping the chart's edge on paper
               effectiveCss =
-                effectiveCss +
-                'body {' +
-                '    -moz-transform: scale(0.9, 0.9);' + // Mozilla
-                '    zoom: 0.9;' + // Others
-                '    zoom: 90%;' + // Webkit
-                '}';
+                `${effectiveCss}body {` +
+                `    -moz-transform: scale(0.9, 0.9);` + // Mozilla
+                `    zoom: 0.9;` + // Others
+                `    zoom: 90%;` + // Webkit
+                `}`;
 
               this.tempBodyStyle = document.createElement('style');
               this.tempBodyStyle.textContent = effectiveCss;
@@ -1509,14 +1515,14 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     config.update({
       chart: {
-        inverted: this.__shouldInvert()
-      }
+        inverted: this.__shouldInvert(),
+      },
     });
 
     config.xAxis.forEach((e) =>
       e.update({
-        opposite: this.__shouldFlipOpposite()
-      })
+        opposite: this.__shouldFlipOpposite(),
+      }),
     );
   }
 
@@ -1561,7 +1567,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (type && type.length > 0) {
       config.update({
-        chart: { type }
+        chart: { type },
       });
     }
   }
@@ -1610,8 +1616,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     config.update({
       plotOptions: {
-        series: { stacking }
-      }
+        series: { stacking },
+      },
     });
   }
 
@@ -1627,17 +1633,17 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
           options3d: {
             ...this._baseChart3d,
             ...(this.additionalOptions && this.additionalOptions.chart && this.additionalOptions.chart.options3d),
-            enabled: true
-          }
-        }
+            enabled: true,
+          },
+        },
       });
     } else {
       config.update({
         chart: {
           options3d: {
-            enabled: false
-          }
-        }
+            enabled: false,
+          },
+        },
       });
     }
   }
@@ -1649,7 +1655,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     config.update({
-      chart: { polar }
+      chart: { polar },
     });
   }
 
@@ -1661,11 +1667,24 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     config.update({
       lang: {
-        noData: emptyText
-      }
+        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 */
@@ -1748,7 +1767,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   __updateStyles() {
     // Chrome returns default value if property is not set
     // check if flex is defined for chart, and different than default value
-    const isFlex = getComputedStyle(this).flex != '0 1 auto';
+    const isFlex = getComputedStyle(this).flex !== '0 1 auto';
 
     // If chart element is a flexible item the chartContainer should be flex too
     if (isFlex) {
@@ -1769,7 +1788,35 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __showWarn(propertyName, acceptedValues) {
-    console.warn('<vaadin-chart> Acceptable values for "' + propertyName + '" are ' + 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.',
+      );
+    }
   }
 }