@vaadin/charts 23.2.15 → 23.2.16

package/README.md

@@ -24,7 +24,7 @@ A feature-rich interactive charting library providing multiple different chart t
 </vaadin-chart>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/charts/screenshot.png" width="530" alt="Screenshot of vaadin-chart">](https://vaadin.com/docs/latest/components/charts)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/charts/screenshot.png" width="530" alt="Screenshot of vaadin-chart">](https://vaadin.com/docs/latest/components/charts)
 
 ## Installation
 
@@ -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,12 +1,11 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.2.15",
+  "version": "23.2.16",
   "publishConfig": {
     "access": "public"
   },
   "description": "vaadin-charts",
   "license": "SEE LICENSE IN LICENSE",
-  "cvdlName": "vaadin-chart",
   "repository": {
     "type": "git",
     "url": "https://github.com/vaadin/web-components.git",
@@ -37,20 +36,21 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.2.15",
-    "@vaadin/vaadin-lumo-styles": "~23.2.15",
-    "@vaadin/vaadin-material-styles": "~23.2.15",
-    "@vaadin/vaadin-themable-mixin": "~23.2.15",
+    "@vaadin/component-base": "~23.2.16",
+    "@vaadin/vaadin-lumo-styles": "~23.2.16",
+    "@vaadin/vaadin-material-styles": "~23.2.16",
+    "@vaadin/vaadin-themable-mixin": "~23.2.16",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
+  "cvdlName": "vaadin-chart",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4e15a8705bf33c928a9cb6e9d79d47a00b30814c"
+  "gitHead": "57010013e59a3ecdc70ceef4377dbc3b1ac03fb3"
 }

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';
 
@@ -126,7 +131,7 @@ declare class ChartSeries extends HTMLElement {
   markers: ChartSeriesMarkers | null | undefined;
 
   /**
-   * Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.
+   * Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.
    * Displayed as a title for the axis.
    * If no unit is defined, then series will be connected to the first axis.
    */

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 {
       /**
@@ -181,7 +137,7 @@ class ChartSeries extends PolymerElement {
       },
 
       /**
-       * Used to connect the series to an axis; if multiple series have the same “unit”, they will share axis.
+       * Used to connect the series to an axis; if multiple series have the same `unit`, they will share axis.
        * Displayed as a title for the axis.
        * If no unit is defined, then series will be connected to the first axis.
        */
@@ -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';
@@ -359,22 +364,6 @@ export type ChartEventMap = ChartCustomEventMap & HTMLElementEventMap;
  *  2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).
  *  3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).
  *
- * Using as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:
- *
- * ```html
- *  <vaadin-chart title="۱- عنوان نمودار" subtitle="۲- عنوان فرعی نمودار"
- *    additional-options='{"title": {"useHTML": true}, "tooltip": {"useHTML": true}, "subtitle": {"useHTML": true},
- *    "legend": {"rtl": true}, "yAxis": [{"id": "۴- مقادیر", "title": {"text": "۴- مقادیر", "useHTML": true}}],
- *    "xAxis": {"reversed": true}}'>
- *    <vaadin-chart-series
- *          type= "column"
- *          title="۳- عنوان ردیف"
- *          unit="۴- مقادیر"
- *          values="[10,20,30]">
- *    </vaadin-chart-series>
- *  </vaadin-chart>
- * ```
- *
  * ### Setting colors
  *
  * Although charts can be styled as described above, there is a simpler way for setting colors.
@@ -550,12 +539,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';
@@ -52,7 +58,7 @@ export function deepMerge(target, source) {
 }
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
-  /* eslint-disable no-invalid-this, prefer-arrow-callback */
+  /* eslint-disable @typescript-eslint/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);
@@ -178,22 +184,6 @@ Highcharts.setOptions({ lang: { noData: '' } });
  *  2. Set `useHTML` to true for text elements, i.e. `tooltip` (https://api.highcharts.com/highcharts/tooltip.useHTML).
  *  3. Set `rtl` to true for `legend` (https://api.highcharts.com/highcharts/legend.rtl).
  *
- * Using as a base the project created with in Quick Start and an `additionalOptions` in order to make RTL adjustments:
- *
- * ```html
- *  <vaadin-chart title="۱- عنوان نمودار" subtitle="۲- عنوان فرعی نمودار"
- *    additional-options='{"title": {"useHTML": true}, "tooltip": {"useHTML": true}, "subtitle": {"useHTML": true},
- *    "legend": {"rtl": true}, "yAxis": [{"id": "۴- مقادیر", "title": {"text": "۴- مقادیر", "useHTML": true}}],
- *    "xAxis": {"reversed": true}}'>
- *    <vaadin-chart-series
- *          type= "column"
- *          title="۳- عنوان ردیف"
- *          unit="۴- مقادیر"
- *          values="[10,20,30]">
- *    </vaadin-chart-series>
- *  </vaadin-chart>
- * ```
- *
  * ### Setting colors
  *
  * Although charts can be styled as described above, there is a simpler way for setting colors.
@@ -269,18 +259,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') {
-      args.forEach((arg) => inflateFunctions(arg));
-      functionToCall.apply(this.configuration, args);
-      if (redrawCharts) {
-        Highcharts.charts.forEach((c) => c.redraw());
-      }
-    }
-  }
-
   static get properties() {
     return {
       /**
@@ -478,10 +456,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,
       },
@@ -509,33 +500,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}
    */
@@ -544,12 +508,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;
     }
 
@@ -574,7 +536,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;
@@ -584,7 +545,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;
@@ -594,7 +554,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;
@@ -610,13 +569,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)) {
@@ -629,14 +588,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 };
     }
 
@@ -918,6 +879,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.
@@ -1118,12 +1106,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.
@@ -1310,13 +1298,12 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
             if (!this.tempBodyStyle) {
               let effectiveCss = '';
 
-              const shadowStyles = this.shadowRoot.querySelectorAll('style');
-              for (let i = 0; i < shadowStyles.length; i++) {
-                effectiveCss += shadowStyles[i].textContent;
-              }
+              [...this.shadowRoot.querySelectorAll('style')].forEach((style) => {
+                effectiveCss += style.textContent;
+              });
 
               // 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;
               });
@@ -1367,7 +1354,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);
   }

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';