@vaadin/charts 23.1.0-alpha3 → 23.1.0-beta2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
   "description": "vaadin-charts",
   "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/charts/LICENSE",
+  "cvdlName": "vaadin-chart",
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/web-components.git",
@@ -34,9 +35,9 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-beta2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -44,5 +45,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

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);
@@ -266,6 +266,10 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     return 'vaadin-chart';
   }
 
+  static get cvdlName() {
+    return 'vaadin-chart';
+  }
+
   /** @private */
   static __callHighchartsFunction(functionName, redrawCharts, ...args) {
     const functionToCall = Highcharts[functionName];
@@ -309,7 +313,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categories: {
         type: Object,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -318,7 +322,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categoryMax: {
         type: Number,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -327,7 +331,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categoryMin: {
         type: Number,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -343,7 +347,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       categoryPosition: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -353,7 +357,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       noLegend: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -366,7 +370,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       stacking: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -374,7 +378,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       timeline: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -383,7 +387,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       title: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -391,7 +395,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       tooltip: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -400,7 +404,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       type: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -409,7 +413,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       subtitle: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -422,7 +426,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       chart3d: {
         type: Boolean,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -432,7 +436,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       emptyText: {
         type: String,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -441,7 +445,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       additionalOptions: {
         type: Object,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -450,8 +454,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        */
       polar: {
         type: Boolean,
-        reflectToAttribute: true
-      }
+        reflectToAttribute: true,
+      },
     };
   }
 
@@ -470,7 +474,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       '__updateSubtitle(subtitle, configuration)',
       '__updateTitle(title, configuration)',
       '__updateType(type, configuration)',
-      '__updateAdditionalOptions(additionalOptions.*)'
+      '__updateAdditionalOptions(additionalOptions.*)',
     ];
   }
 
@@ -493,29 +497,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,
     };
   }
 
@@ -565,7 +569,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (this.title) {
       options.title = {
-        text: this.title
+        text: this.title,
       };
     }
 
@@ -579,7 +583,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (this.subtitle) {
       options.subtitle = {
-        text: this.subtitle
+        text: this.subtitle,
       };
     }
 
@@ -615,7 +619,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (this.noLegend) {
       options.legend = {
-        enabled: false
+        enabled: false,
       };
     }
 
@@ -752,7 +756,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',
     };
   }
 
@@ -824,7 +828,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',
     };
   }
 
@@ -896,7 +900,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',
     };
   }
 
@@ -909,7 +913,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',
     };
   }
 
@@ -922,7 +926,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',
     };
   }
 
@@ -1066,7 +1070,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._childObserver && this._childObserver.disconnect();
+    if (this._childObserver) {
+      this._childObserver.disconnect();
+    }
   }
 
   /**
@@ -1231,10 +1237,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) {
@@ -1300,8 +1306,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
             composed: true,
             detail: {
               originalEvent: event,
-              [eventType]: event.target
-            }
+              [eventType]: event.target,
+            },
           };
 
           if (event.type === 'afterSetExtremes') {
@@ -1351,12 +1357,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;
@@ -1514,14 +1519,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(),
+      }),
     );
   }
 
@@ -1566,7 +1571,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     if (type && type.length > 0) {
       config.update({
-        chart: { type }
+        chart: { type },
       });
     }
   }
@@ -1615,8 +1620,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     config.update({
       plotOptions: {
-        series: { stacking }
-      }
+        series: { stacking },
+      },
     });
   }
 
@@ -1632,17 +1637,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,
+          },
+        },
       });
     }
   }
@@ -1654,7 +1659,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     config.update({
-      chart: { polar }
+      chart: { polar },
     });
   }
 
@@ -1666,8 +1671,8 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     config.update({
       lang: {
-        noData: emptyText
-      }
+        noData: emptyText,
+      },
     });
     this.__updateNoDataElement(config);
   }
@@ -1710,7 +1715,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   /** @private */
   __callAxisFunction(functionName, axisCategory, axisIndex, ...args) {
     /*
-     * axisCategory:
+     * AxisCategory:
      * 0 - xAxis
      * 1 - yAxis
      * 2 - zAxis
@@ -1766,7 +1771,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) {
@@ -1787,7 +1792,7 @@ 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 */
@@ -1813,7 +1818,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     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.'
+        '<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.',
       );
     }
   }