@vaadin/charts 24.0.0-alpha1 → 24.0.0-alpha11

package/README.md

@@ -46,7 +46,7 @@ Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overvi
 
 ## License
 
-Commercial Vaadin Developer License 4.0 (CVDLv4). For license terms, see LICENSE.txt.
+This program is available under Vaadin Commercial License and Service Terms. For license terms, see LICENSE.
 
 Vaadin collects usage statistics at development time to improve this product.
 For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1",
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

package/src/helpers.js

@@ -0,0 +1,24 @@
+export function inflateFunctions(config) {
+  if (
+    // Check if param is a primitive/null/undefined value
+    !(config instanceof Object) ||
+    // Check if param is a plain object (not an array or HC object)
+    config.constructor !== Object
+  ) {
+    return;
+  }
+  Object.entries(config).forEach(([attr, targetProperty]) => {
+    if (attr.startsWith('_fn_') && (typeof targetProperty === 'string' || targetProperty instanceof String)) {
+      try {
+        // eslint-disable-next-line no-eval
+        config[attr.substr(4)] = eval(`(${targetProperty})`);
+      } catch (e) {
+        // eslint-disable-next-line no-eval
+        config[attr.substr(4)] = eval(`(function(){${targetProperty}})`);
+      }
+      delete config[attr];
+    } else if (targetProperty instanceof Object) {
+      inflateFunctions(targetProperty);
+    }
+  });
+}

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

@@ -1,7 +1,12 @@
 /**
  * @license
- * 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.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
  */
 import type { PointOptionsObject, Series, SeriesOptionsType } from 'highcharts';
 

package/src/vaadin-chart-series.js

@@ -1,7 +1,12 @@
 /**
  * @license
- * 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.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
  */
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { Chart, deepMerge } from './vaadin-chart.js';
@@ -56,55 +61,6 @@ class ChartSeries extends PolymerElement {
     return 'vaadin-chart-series';
   }
 
-  get options() {
-    const options = deepMerge({}, this.additionalOptions);
-
-    if (this.type) {
-      options.type = this.type;
-    }
-
-    if (this.title) {
-      options.name = this.title;
-    }
-
-    if (this.values) {
-      options.data = this.values;
-    }
-
-    if (this.markers) {
-      if (!this.__isMarkersValid()) {
-        this.markers = 'auto';
-      }
-      options.marker = this.__markersConfiguration;
-    }
-
-    if (this.unit) {
-      options.yAxis = this.unit;
-    }
-
-    if (this.stack) {
-      options.stack = this.stack;
-    }
-
-    if (isFinite(this.valueMin)) {
-      options.yAxisValueMin = this.valueMin;
-    }
-
-    if (isFinite(this.valueMax)) {
-      options.yAxisValueMax = this.valueMax;
-    }
-
-    if (this.neckWidth) {
-      options.neckWidth = this.neckWidth;
-    }
-
-    if (this.neckPosition) {
-      options.neckHeight = this.neckPosition;
-    }
-
-    return options;
-  }
-
   static get properties() {
     return {
       /**
@@ -269,6 +225,74 @@ class ChartSeries extends PolymerElement {
     ];
   }
 
+  get options() {
+    const options = deepMerge({}, this.additionalOptions);
+
+    if (this.type) {
+      options.type = this.type;
+    }
+
+    if (this.title) {
+      options.name = this.title;
+    }
+
+    if (this.values) {
+      options.data = this.values;
+    }
+
+    if (this.markers) {
+      if (!this.__isMarkersValid()) {
+        this.markers = 'auto';
+      }
+      options.marker = this.__markersConfiguration;
+    }
+
+    if (this.unit) {
+      options.yAxis = this.unit;
+    }
+
+    if (this.stack) {
+      options.stack = this.stack;
+    }
+
+    if (isFinite(this.valueMin)) {
+      options.yAxisValueMin = this.valueMin;
+    }
+
+    if (isFinite(this.valueMax)) {
+      options.yAxisValueMax = this.valueMax;
+    }
+
+    if (this.neckWidth) {
+      options.neckWidth = this.neckWidth;
+    }
+
+    if (this.neckPosition) {
+      options.neckHeight = this.neckPosition;
+    }
+
+    return options;
+  }
+
+  /** @private */
+  get __markersConfiguration() {
+    const config = {};
+    switch (this.markers) {
+      case 'shown':
+        config.enabled = true;
+        break;
+      case 'hidden':
+        config.enabled = false;
+        break;
+      case 'auto':
+      default:
+        config.enabled = null;
+        break;
+    }
+
+    return config;
+  }
+
   /**
    * Method to attach a series object of type `Highcharts.Series`.
    * @param {!Series} series Object of type `Highcharts.Series`
@@ -413,25 +437,6 @@ class ChartSeries extends PolymerElement {
     });
   }
 
-  /** @private */
-  get __markersConfiguration() {
-    const config = {};
-    switch (this.markers) {
-      case 'shown':
-        config.enabled = true;
-        break;
-      case 'hidden':
-        config.enabled = false;
-        break;
-      case 'auto':
-      default:
-        config.enabled = null;
-        break;
-    }
-
-    return config;
-  }
-
   /** @private */
   __showWarn(propertyName, acceptedValues) {
     console.warn(`<vaadin-chart-series> Acceptable values for "${propertyName}" are ${acceptedValues}`);

package/src/vaadin-chart.d.ts

@@ -1,7 +1,12 @@
 /**
  * @license
- * 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.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
  */
 import type { Axis, Chart as HighchartsChart, ExtremesObject, Options, Point, Series } from 'highcharts';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -550,12 +555,12 @@ declare class Chart extends ResizeMixin(ThemableMixin(ElementMixin(HTMLElement))
    *
    * @param {!Options} jsonConfiguration Object chart configuration. Most important properties are:
    *
+   * - annotations `Object[]` custom labels or shapes that can be tied to points, axis coordinates or chart pixel coordinates.
+   *    Detailed API for annotations object is available in [API Site](http://api.highcharts.com/highcharts/annotations)
    * - chart `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for chart object is available in [API Site](http://api.highcharts.com/highcharts/chart)
    * - credits `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for credits object is available in [API Site](http://api.highcharts.com/highcharts/credits)
-   * - labels `Object[]` with HTML labels that can be positioned anywhere in the chart area
-   *    Detailed API for labels object is available in [API Site](http://api.highcharts.com/highcharts/labels)
    * - plotOptions `Object` wrapper for config objects for each series type.
    *    Detailed API for plotOptions object is available in [API Site](http://api.highcharts.com/highcharts/plotOptions)
    * - series `Object[]` the actual series to append to the chart.

package/src/vaadin-chart.js

@@ -1,10 +1,16 @@
 /**
  * @license
- * 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.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
  */
 import 'highcharts/es-modules/masters/highstock.src.js';
 import 'highcharts/es-modules/masters/modules/accessibility.src.js';
+import 'highcharts/es-modules/masters/modules/annotations.src.js';
 import 'highcharts/es-modules/masters/highcharts-more.src.js';
 import 'highcharts/es-modules/masters/highcharts-3d.src.js';
 import 'highcharts/es-modules/masters/modules/data.src.js';
@@ -27,6 +33,7 @@ import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
 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';
+import { inflateFunctions } from './helpers.js';
 import { ChartSeries } from './vaadin-chart-series.js';
 
 /** @private */
@@ -268,17 +275,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') {
-      functionToCall.apply(this.configuration, args);
-      if (redrawCharts) {
-        Highcharts.charts.forEach((c) => c.redraw());
-      }
-    }
-  }
-
   static get properties() {
     return {
       /**
@@ -476,10 +472,23 @@ 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) => c.redraw());
+      }
+    }
+  }
+
   constructor() {
     super();
 
     this._baseConfig = {
+      annotations: [],
       chart: {
         styledMode: true,
       },
@@ -507,33 +516,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}
    */
@@ -542,12 +524,10 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     deepMerge(options, this.additionalOptions);
 
     if (this.type) {
-      options.chart = options.chart || {};
       options.chart.type = this.type;
     }
 
     if (this.polar) {
-      options.chart = options.chart || {};
       options.chart.polar = true;
     }
 
@@ -572,7 +552,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (this.categories) {
-      options.xAxis = options.xAxis || {};
       if (Array.isArray(options.xAxis)) {
         // Set categories on first X axis
         options.xAxis[0].categories = this.categories;
@@ -582,7 +561,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (isFinite(this.categoryMin)) {
-      options.xAxis = options.xAxis || {};
       if (Array.isArray(options.xAxis)) {
         // Set category-min on first X axis
         options.xAxis[0].min = this.categoryMin;
@@ -592,7 +570,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (isFinite(this.categoryMax)) {
-      options.xAxis = options.xAxis || {};
       if (Array.isArray(options.xAxis)) {
         // Set category-max on first x axis
         options.xAxis[0].max = this.categoryMax;
@@ -608,13 +585,13 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (this.emptyText) {
-      options.lang = options.lang || {};
+      if (!options.lang) {
+        options.lang = {};
+      }
       options.lang.noData = this.emptyText;
     }
 
     if (this.categoryPosition) {
-      options.chart = options.chart || {};
-
       options.chart.inverted = this.__shouldInvert();
 
       if (Array.isArray(options.xAxis)) {
@@ -627,14 +604,16 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (this.stacking) {
-      options.plotOptions = options.plotOptions || {};
-      options.plotOptions.series = options.plotOptions.series || {};
+      if (!options.plotOptions) {
+        options.plotOptions = {};
+      }
+      if (!options.plotOptions.series) {
+        options.plotOptions.series = {};
+      }
       options.plotOptions.series.stacking = this.stacking;
     }
 
     if (this.chart3d) {
-      options.chart = options.chart || {};
-
       options.chart.options3d = { ...this._baseChart3d, ...options.chart.options3d };
     }
 
@@ -916,6 +895,33 @@ 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));
+  }
+
   /**
    * Implements resize callback from `ResizeMixin`
    * to reflow when the chart element is resized.
@@ -1116,12 +1122,12 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
    *
    * @param {!Options} jsonConfiguration Object chart configuration. Most important properties are:
    *
+   * - annotations `Object[]` custom labels or shapes that can be tied to points, axis coordinates or chart pixel coordinates.
+   *    Detailed API for annotations object is available in [API Site](http://api.highcharts.com/highcharts/annotations)
    * - chart `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for chart object is available in [API Site](http://api.highcharts.com/highcharts/chart)
    * - credits `Object` with options regarding the chart area and plot area as well as general chart options.
    *    Detailed API for credits object is available in [API Site](http://api.highcharts.com/highcharts/credits)
-   * - labels `Object[]` with HTML labels that can be positioned anywhere in the chart area
-   *    Detailed API for labels object is available in [API Site](http://api.highcharts.com/highcharts/labels)
    * - plotOptions `Object` wrapper for config objects for each series type.
    *    Detailed API for plotOptions object is available in [API Site](http://api.highcharts.com/highcharts/plotOptions)
    * - series `Object[]` the actual series to append to the chart.
@@ -1148,7 +1154,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     const configCopy = deepMerge({}, jsonConfiguration);
-    this.__inflateFunctions(configCopy);
+    inflateFunctions(configCopy);
     this._jsonConfigurationBuffer = this.__makeConfigurationBuffer(this._jsonConfigurationBuffer, configCopy);
 
     beforeNextRender(this, () => {
@@ -1214,24 +1220,6 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     delete configuration[entry];
   }
 
-  /** @private */
-  __inflateFunctions(jsonConfiguration) {
-    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 */
   __initEventsListeners(configuration) {
     this.__initChartEventsListeners(configuration);
@@ -1332,7 +1320,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
               }
 
               // Strip off host selectors that target individual instances
-              effectiveCss = effectiveCss.replace(/:host\(.+?\)/g, (match) => {
+              effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {
                 const selector = match.substr(6, match.length - 7);
                 return this.matches(selector) ? '' : match;
               });
@@ -1383,7 +1371,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     path = path.split('.');
     return path.reduce((obj, key) => {
-      obj[key] = obj[key] || {};
+      if (!obj[key]) {
+        obj[key] = {};
+      }
       return obj[key];
     }, object);
   }
@@ -1684,6 +1674,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     if (this.configuration) {
       const functionToCall = this.configuration[functionName];
       if (functionToCall && typeof functionToCall === 'function') {
+        args.forEach((arg) => inflateFunctions(arg));
         functionToCall.apply(this.configuration, args);
       }
     }
@@ -1695,6 +1686,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       const series = this.configuration.series[seriesIndex];
       const functionToCall = series[functionName];
       if (functionToCall && typeof functionToCall === 'function') {
+        args.forEach((arg) => inflateFunctions(arg));
         functionToCall.apply(series, args);
       }
     }
@@ -1731,6 +1723,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         const axis = axes[axisIndex];
         const functionToCall = axis[functionName];
         if (functionToCall && typeof functionToCall === 'function') {
+          args.forEach((arg) => inflateFunctions(arg));
           functionToCall.apply(axis, args);
         }
       }

package/theme/vaadin-chart-base-theme.js

@@ -1,7 +1,12 @@
 /**
  * @license
- * 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.
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
  */
 
 /**

package/vaadin-chart-series.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-chart-series.js';

package/vaadin-chart-series.js

@@ -0,0 +1 @@
+export * from './src/vaadin-chart-series.js';