@vaadin/charts 23.2.16 → 23.2.17

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/main/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/master/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
 
-This program is available under Vaadin Commercial License and Service Terms. For license terms, see LICENSE.
+Commercial Vaadin Developer License 4.0 (CVDLv4). For license terms, see LICENSE.txt.
 
 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,11 +1,12 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.2.16",
+  "version": "23.2.17",
   "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",
@@ -36,21 +37,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@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",
+    "@vaadin/component-base": "~23.2.17",
+    "@vaadin/vaadin-lumo-styles": "~23.2.17",
+    "@vaadin/vaadin-material-styles": "~23.2.17",
+    "@vaadin/vaadin-themable-mixin": "~23.2.17",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "cvdlName": "vaadin-chart",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "57010013e59a3ecdc70ceef4377dbc3b1ac03fb3"
+  "gitHead": "60bf51d55e8b93a30536ebb4966248ba256c9b5d"
 }

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

@@ -1,12 +1,7 @@
 /**
  * @license
- * 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.
+ * 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 type { PointOptionsObject, Series, SeriesOptionsType } from 'highcharts';
 
@@ -131,7 +126,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,12 +1,7 @@
 /**
  * @license
- * 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.
+ * 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 { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { Chart, deepMerge } from './vaadin-chart.js';
@@ -61,6 +56,55 @@ 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 {
       /**
@@ -137,7 +181,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.
        */
@@ -225,74 +269,6 @@ 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`
@@ -437,6 +413,25 @@ 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,12 +1,7 @@
 /**
  * @license
- * 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.
+ * 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 type { Axis, Chart as HighchartsChart, ExtremesObject, Options, Point, Series } from 'highcharts';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -364,6 +359,22 @@ 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.
@@ -539,12 +550,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,16 +1,10 @@
 /**
  * @license
- * 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.
+ * 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 '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';
@@ -58,7 +52,7 @@ export function deepMerge(target, source) {
 }
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
-  /* eslint-disable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
+  /* 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);
@@ -184,6 +178,22 @@ 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.
@@ -259,6 +269,18 @@ 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 {
       /**
@@ -456,23 +478,10 @@ 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,
       },
@@ -500,6 +509,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));
+  }
+
   /**
    * @return {!Options}
    */
@@ -508,10 +544,12 @@ 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;
     }
 
@@ -536,6 +574,7 @@ 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;
@@ -545,6 +584,7 @@ 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;
@@ -554,6 +594,7 @@ 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;
@@ -569,13 +610,13 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (this.emptyText) {
-      if (!options.lang) {
-        options.lang = {};
-      }
+      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)) {
@@ -588,16 +629,14 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     }
 
     if (this.stacking) {
-      if (!options.plotOptions) {
-        options.plotOptions = {};
-      }
-      if (!options.plotOptions.series) {
-        options.plotOptions.series = {};
-      }
+      options.plotOptions = options.plotOptions || {};
+      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 };
     }
 
@@ -879,33 +918,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));
-  }
-
   /**
    * Implements resize callback from `ResizeMixin`
    * to reflow when the chart element is resized.
@@ -1106,12 +1118,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.
@@ -1298,12 +1310,13 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
             if (!this.tempBodyStyle) {
               let effectiveCss = '';
 
-              [...this.shadowRoot.querySelectorAll('style')].forEach((style) => {
-                effectiveCss += style.textContent;
-              });
+              const shadowStyles = this.shadowRoot.querySelectorAll('style');
+              for (let i = 0; i < shadowStyles.length; i++) {
+                effectiveCss += shadowStyles[i].textContent;
+              }
 
               // Strip off host selectors that target individual instances
-              effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {
+              effectiveCss = effectiveCss.replace(/:host\(.+?\)/g, (match) => {
                 const selector = match.substr(6, match.length - 7);
                 return this.matches(selector) ? '' : match;
               });
@@ -1354,9 +1367,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     path = path.split('.');
     return path.reduce((obj, key) => {
-      if (!obj[key]) {
-        obj[key] = {};
-      }
+      obj[key] = obj[key] || {};
       return obj[key];
     }, object);
   }

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

@@ -1,12 +1,7 @@
 /**
  * @license
- * 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.
+ * 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.
  */
 
 /**