@vaadin/charts 23.2.0-dev.48e5e3967 → 23.2.0-rc1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.2.0-dev.48e5e3967",
+  "version": "23.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
   "description": "vaadin-charts",
-  "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/charts/LICENSE",
+  "license": "SEE LICENSE IN LICENSE",
   "cvdlName": "vaadin-chart",
   "repository": {
     "type": "git",
@@ -24,7 +24,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -35,8 +37,8 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.48e5e3967",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.48e5e3967",
+    "@vaadin/component-base": "23.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-rc1",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -44,5 +46,9 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "961bc4ae5b707c3c02f12b99819b3c12c9b478aa"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

package/src/vaadin-chart-series.d.ts

@@ -3,9 +3,9 @@
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { PointOptionsObject, Series, SeriesOptionsType } from 'highcharts';
+import type { PointOptionsObject, Series, SeriesOptionsType } from 'highcharts';
 
-export type ChartSeriesMarkers = 'shown' | 'hidden' | 'auto';
+export type ChartSeriesMarkers = 'auto' | 'hidden' | 'shown';
 
 export interface ChartSeriesConfig {
   data?: ChartSeriesValues;
@@ -22,7 +22,7 @@ export interface ChartSeriesConfig {
 
 export type ChartSeriesOptions = ChartSeriesConfig & SeriesOptionsType;
 
-export type ChartSeriesValues = Array<number | number[] | PointOptionsObject>;
+export type ChartSeriesValues = Array<number[] | PointOptionsObject | number>;
 
 /**
  * `<vaadin-chart-series>` is a custom element for creating series for Vaadin Charts.

package/src/vaadin-chart.d.ts

@@ -3,14 +3,14 @@
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { Axis, Chart as HighchartsChart, ExtremesObject, Options, Point, Series } from 'highcharts';
+import type { Axis, Chart as HighchartsChart, ExtremesObject, Options, Point, Series } from 'highcharts';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export type ChartCategories = string[] | { [key: number]: string };
 
-export type ChartCategoryPosition = 'left' | 'right' | 'top' | 'bottom';
+export type ChartCategoryPosition = 'bottom' | 'left' | 'right' | 'top';
 
 export type ChartStacking = 'normal' | 'percent' | null;
 
@@ -245,7 +245,7 @@ export interface ChartCustomEventMap {
   'yaxes-extremes-set': ChartYaxesExtremesSetEvent;
 }
 
-export type ChartEventMap = HTMLElementEventMap & ChartCustomEventMap;
+export type ChartEventMap = ChartCustomEventMap & HTMLElementEventMap;
 
 /**
  * `<vaadin-chart>` is a Web Component for creating high quality charts.
@@ -346,8 +346,7 @@ export type ChartEventMap = HTMLElementEventMap & ChartCustomEventMap;
  * A comprehensive list of the supported style classes can be found at
  * https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  *
- * See also the documentation for styling Vaadin components at
- * https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html
+ * See also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.
  *
  * ### RTL support
  *
@@ -582,13 +581,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?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof ChartEventMap>(
     type: K,
     listener: (this: Chart, ev: ChartEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-chart.js

@@ -34,7 +34,7 @@ export function deepMerge(target, source) {
   const isObject = (item) => item && typeof item === 'object' && !Array.isArray(item);
 
   if (isObject(source) && isObject(target)) {
-    for (const key in source) {
+    Object.keys(source).forEach((key) => {
       if (isObject(source[key])) {
         if (!target[key]) {
           Object.assign(target, { [key]: {} });
@@ -44,7 +44,7 @@ export function deepMerge(target, source) {
       } else {
         Object.assign(target, { [key]: source[key] });
       }
-    }
+    });
   }
 
   return target;
@@ -164,8 +164,7 @@ Highcharts.setOptions({ lang: { noData: '' } });
  * A comprehensive list of the supported style classes can be found at
  * https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  *
- * See also the documentation for styling Vaadin components at
- * https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html
+ * See also the [Chart Styling](https://vaadin.com/docs/latest/components/charts/css-styling) documentation.
  *
  * ### RTL support
  *
@@ -619,7 +618,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       options.chart.inverted = this.__shouldInvert();
 
       if (Array.isArray(options.xAxis)) {
-        options.xAxis.forEach((e) => (e.opposite = this.__shouldFlipOpposite()));
+        options.xAxis.forEach((e) => {
+          e.opposite = this.__shouldFlipOpposite();
+        });
       } else if (options.xAxis) {
         options.xAxis.opposite = this.__shouldFlipOpposite();
       }
@@ -1215,24 +1216,20 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
   /** @private */
   __inflateFunctions(jsonConfiguration) {
-    for (const attr in jsonConfiguration) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (jsonConfiguration.hasOwnProperty(attr)) {
-        const targetProperty = jsonConfiguration[attr];
-        if (attr.indexOf('_fn_') === 0 && (typeof targetProperty === 'string' || targetProperty instanceof String)) {
-          try {
-            // eslint-disable-next-line no-eval
-            jsonConfiguration[attr.substr(4)] = eval(`(${targetProperty})`);
-          } catch (e) {
-            // eslint-disable-next-line no-eval
-            jsonConfiguration[attr.substr(4)] = eval(`(function(){${targetProperty}})`);
-          }
-          delete jsonConfiguration[attr];
-        } else if (targetProperty instanceof Object) {
-          this.__inflateFunctions(targetProperty);
+    Object.entries(jsonConfiguration).forEach(([attr, targetProperty]) => {
+      if (attr.startsWith('_fn_') && (typeof targetProperty === 'string' || targetProperty instanceof String)) {
+        try {
+          // eslint-disable-next-line no-eval
+          jsonConfiguration[attr.substr(4)] = eval(`(${targetProperty})`);
+        } catch (e) {
+          // eslint-disable-next-line no-eval
+          jsonConfiguration[attr.substr(4)] = eval(`(function(){${targetProperty}})`);
         }
+        delete jsonConfiguration[attr];
+      } else if (targetProperty instanceof Object) {
+        this.__inflateFunctions(targetProperty);
       }
-    }
+    });
   }
 
   /** @private */
@@ -1351,6 +1348,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
               this.tempBodyStyle = document.createElement('style');
               this.tempBodyStyle.textContent = effectiveCss;
               document.body.appendChild(this.tempBodyStyle);
+              if (this.options.chart.styledMode) {
+                document.body.setAttribute('styled-mode', '');
+              }
             }
           }
 
@@ -1359,6 +1359,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
             if (this.tempBodyStyle) {
               document.body.removeChild(this.tempBodyStyle);
               delete this.tempBodyStyle;
+              if (this.options.chart.styledMode) {
+                document.body.removeAttribute('styled-mode');
+              }
             }
           }
 
@@ -1764,7 +1767,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       let style = '';
       if (this.hasAttribute('style')) {
         style = this.getAttribute('style');
-        if (style.charAt(style.length - 1) !== ';') {
+        if (!style.endsWith(';')) {
           style += ';';
         }
       }