@vaadin/charts 22.0.1 → 23.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "22.0.1",
+  "version": "23.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,9 +33,9 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/component-base": "23.0.0-alpha3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-themable-mixin": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha3",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -43,5 +43,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2021 Vaadin Ltd
+ * 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';

package/src/vaadin-chart-series.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2021 Vaadin Ltd
+ * 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';
@@ -371,7 +371,7 @@ class ChartSeries extends PolymerElement {
       if (parent && parent instanceof Chart) {
         if (unit && !parent.__getAxis(unit)) {
           const title = { title: { text: unit } };
-          parent.__addAxis(Object.assign({ id: unit, axisGenerated: true }, title));
+          parent.__addAxis({ id: unit, axisGenerated: true, ...title });
         }
         series.update({ yAxis: unit || 0 });
 

package/src/vaadin-chart.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2021 Vaadin Ltd
+ * 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';

package/src/vaadin-chart.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2015 - 2021 Vaadin Ltd
+ * 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 '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
@@ -30,7 +30,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { ChartSeries } from './vaadin-chart-series.js';
 
 /** @private */
-export const deepMerge = function deepMerge(target, source) {
+export function deepMerge(target, source) {
   const isObject = (item) => item && typeof item === 'object' && !Array.isArray(item);
 
   if (isObject(source) && isObject(target)) {
@@ -48,15 +48,17 @@ export const deepMerge = function deepMerge(target, source) {
   }
 
   return target;
-};
+}
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
-  Highcharts.wrap(Highcharts.Chart.prototype, methodName, function (proceed) {
+  /* eslint-disable no-invalid-this */
+  Highcharts.wrap(Highcharts.Chart.prototype, methodName, function (proceed, ...args) {
     Highcharts.fireEvent(this, 'beforeExport');
-    const result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
+    const result = proceed.apply(this, args);
     Highcharts.fireEvent(this, 'afterExport');
     return result;
   });
+  /* eslint-enable no-invalid-this */
 });
 
 /**
@@ -259,11 +261,10 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  static __callHighchartsFunction(functionName, redrawCharts) {
+  static __callHighchartsFunction(functionName, redrawCharts, ...args) {
     const functionToCall = Highcharts[functionName];
-    const argumentsForCall = Array.prototype.splice.call(arguments, 2);
     if (functionToCall && typeof functionToCall === 'function') {
-      functionToCall.apply(this.configuration, argumentsForCall);
+      functionToCall.apply(this.configuration, args);
       if (redrawCharts) {
         Highcharts.charts.forEach((c) => c.redraw());
       }
@@ -527,7 +528,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
         return;
       }
 
-      const options = Object.assign({}, this.options, this._jsonConfigurationBuffer);
+      const options = { ...this.options, ...this._jsonConfigurationBuffer };
       this._jsonConfigurationBuffer = null;
       this.__initChart(options);
       this.__addChildObserver();
@@ -541,7 +542,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
    * @return {!Options}
    */
   get options() {
-    const options = Object.assign({}, this._baseConfig);
+    const options = { ...this._baseConfig };
     deepMerge(options, this.additionalOptions);
 
     if (this.type) {
@@ -636,7 +637,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
     if (this.chart3d) {
       options.chart = options.chart || {};
 
-      options.chart.options3d = Object.assign({}, this._baseChart3d, options.chart.options3d);
+      options.chart.options3d = { ...this._baseChart3d, ...options.chart.options3d };
     }
 
     return options;
@@ -1037,6 +1038,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
   /** @private */
   __initChart(options) {
     this.__initEventsListeners(options);
+    this.__updateStyledMode(options);
     if (this.timeline) {
       this.configuration = Highcharts.stockChart(this.$.chart, options);
     } else {
@@ -1044,6 +1046,12 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
+  /** @private */
+  __updateStyledMode(options) {
+    const styledMode = options.chart.styledMode;
+    this.$.chart.toggleAttribute('styled-mode', !!styledMode);
+  }
+
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -1147,7 +1155,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
       }
 
       if (resetConfiguration) {
-        const initialOptions = Object.assign({}, this.options, this._jsonConfigurationBuffer);
+        const initialOptions = { ...this.options, ...this._jsonConfigurationBuffer };
 
         this.__initChart(initialOptions);
 
@@ -1212,8 +1220,10 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
         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];
@@ -1320,7 +1330,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
 
               const shadowStyles = this.shadowRoot.querySelectorAll('style');
               for (let i = 0; i < shadowStyles.length; i++) {
-                effectiveCss = effectiveCss + shadowStyles[i].textContent;
+                effectiveCss += shadowStyles[i].textContent;
               }
 
               // Strip off host selectors that target individual instances
@@ -1332,7 +1342,7 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
               // Zoom out a bit to avoid clipping the chart's edge on paper
               effectiveCss =
                 effectiveCss +
-                +'body {' +
+                'body {' +
                 '    -moz-transform: scale(0.9, 0.9);' + // Mozilla
                 '    zoom: 0.9;' + // Others
                 '    zoom: 90%;' + // Webkit
@@ -1609,12 +1619,11 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
     if (chart3d) {
       config.update({
         chart: {
-          options3d: Object.assign(
-            {},
-            this._baseChart3d,
-            this.additionalOptions && this.additionalOptions.chart && this.additionalOptions.chart.options3d,
-            { enabled: true }
-          )
+          options3d: {
+            ...this._baseChart3d,
+            ...(this.additionalOptions && this.additionalOptions.chart && this.additionalOptions.chart.options3d),
+            enabled: true
+          }
         }
       });
     } else {
@@ -1655,30 +1664,28 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  __callChartFunction(functionName) {
+  __callChartFunction(functionName, ...args) {
     if (this.configuration) {
       const functionToCall = this.configuration[functionName];
-      const argumentsForCall = Array.prototype.splice.call(arguments, 1);
       if (functionToCall && typeof functionToCall === 'function') {
-        functionToCall.apply(this.configuration, argumentsForCall);
+        functionToCall.apply(this.configuration, args);
       }
     }
   }
 
   /** @private */
-  __callSeriesFunction(functionName, seriesIndex) {
+  __callSeriesFunction(functionName, seriesIndex, ...args) {
     if (this.configuration && this.configuration.series[seriesIndex]) {
       const series = this.configuration.series[seriesIndex];
       const functionToCall = series[functionName];
-      const argumentsForCall = Array.prototype.splice.call(arguments, 2);
       if (functionToCall && typeof functionToCall === 'function') {
-        functionToCall.apply(series, argumentsForCall);
+        functionToCall.apply(series, args);
       }
     }
   }
 
   /** @private */
-  __callAxisFunction(functionName, axisCategory, axisIndex) {
+  __callAxisFunction(functionName, axisCategory, axisIndex, ...args) {
     /*
      * axisCategory:
      * 0 - xAxis
@@ -1701,20 +1708,21 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
         case 3:
           axes = this.configuration.colorAxis;
           break;
+        default:
+          break;
       }
       if (axes && axes[axisIndex]) {
         const axis = axes[axisIndex];
         const functionToCall = axis[functionName];
-        const argumentsForCall = Array.prototype.splice.call(arguments, 3);
         if (functionToCall && typeof functionToCall === 'function') {
-          functionToCall.apply(axis, argumentsForCall);
+          functionToCall.apply(axis, args);
         }
       }
     }
   }
 
   /** @private */
-  __callPointFunction(functionName, seriesIndex, pointIndex) {
+  __callPointFunction(functionName, seriesIndex, pointIndex, ...args) {
     if (
       this.configuration &&
       this.configuration.series[seriesIndex] &&
@@ -1722,9 +1730,8 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
     ) {
       const point = this.configuration.series[seriesIndex].data[pointIndex];
       const functionToCall = point[functionName];
-      const argumentsForCall = Array.prototype.splice.call(arguments, 3);
       if (functionToCall && typeof functionToCall === 'function') {
-        functionToCall.apply(point, argumentsForCall);
+        functionToCall.apply(point, args);
       }
     }
   }

package/theme/lumo/vaadin-chart-styles.js

@@ -0,0 +1,84 @@
+import '../vaadin-chart-base-theme.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+const chartColors = css`
+  :host {
+    --vaadin-charts-color-0: #5ac2f7;
+    --vaadin-charts-color-1: #1676f3;
+    --vaadin-charts-color-2: #ff7d94;
+    --vaadin-charts-color-3: #c5164e;
+    --vaadin-charts-color-4: #15c15d;
+    --vaadin-charts-color-5: #0e8151;
+    --vaadin-charts-color-6: #c18ed2;
+    --vaadin-charts-color-7: #9233b3;
+    --vaadin-charts-color-8: #fda253;
+    --vaadin-charts-color-9: #e24932;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-4, #15c15d);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-9, #e24932);
+  }
+
+  :host([theme~='gradient']) {
+    --vaadin-charts-color-0: #1676f3;
+    --vaadin-charts-color-1: #13bbf0;
+    --vaadin-charts-color-2: #1ee;
+    --vaadin-charts-color-3: #0cd9bf;
+    --vaadin-charts-color-4: #06be81;
+    --vaadin-charts-color-5: #00a344;
+    --vaadin-charts-color-6: #41c639;
+    --vaadin-charts-color-7: #8aed2c;
+    --vaadin-charts-color-8: #c0e632;
+    --vaadin-charts-color-9: #f6db3a;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-6);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-1);
+  }
+
+  :host([theme~='monotone']) {
+    --vaadin-charts-color-0: #1676f3;
+    --vaadin-charts-color-1: #4795f5;
+    --vaadin-charts-color-2: #71b0f7;
+    --vaadin-charts-color-3: #a0cef9;
+    --vaadin-charts-color-4: #bce0fa;
+    --vaadin-charts-color-5: #a8d8ed;
+    --vaadin-charts-color-6: #7fc3dd;
+    --vaadin-charts-color-7: #54adcc;
+    --vaadin-charts-color-8: #2b99bc;
+    --vaadin-charts-color-9: #0284ac;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-3);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-9);
+  }
+`;
+
+const chartTheme = css`
+  :host {
+    --vaadin-charts-background: var(--lumo-base-color);
+    --vaadin-charts-title-label: var(--lumo-header-text-color);
+    --vaadin-charts-axis-title: var(--lumo-secondary-text-color);
+    --vaadin-charts-axis-label: var(--lumo-secondary-text-color);
+    --vaadin-charts-data-label: var(--lumo-body-text-color);
+    --vaadin-charts-secondary-label: var(--lumo-secondary-text-color);
+    --vaadin-charts-axis-line: var(--lumo-contrast-5pct);
+    --vaadin-charts-grid-line: var(--lumo-contrast-20pct);
+    --vaadin-charts-disabled-label: var(--lumo-disabled-text-color);
+    --vaadin-charts-contrast: var(--lumo-contrast);
+    --vaadin-charts-contrast-5pct: var(--lumo-contrast-5pct);
+    --vaadin-charts-contrast-10pct: var(--lumo-contrast-10pct);
+    --vaadin-charts-contrast-20pct: var(--lumo-contrast-20pct);
+    --vaadin-charts-contrast-60pct: var(--lumo-contrast-60pct);
+    --vaadin-charts-tooltip-background: var(--lumo-base-color);
+    --vaadin-charts-tooltip-border-color: inherit;
+    --vaadin-charts-button-label: var(--lumo-primary-text-color);
+    --vaadin-charts-button-background: var(--lumo-contrast-5pct);
+    --vaadin-charts-button-hover-background: var(--lumo-primary-color-10pct);
+    --vaadin-charts-button-active-label: var(--lumo-primary-contrast-color);
+    --vaadin-charts-button-active-background: var(--lumo-primary-color);
+    --vaadin-charts-xaxis-line-width: 0;
+    --vaadin-charts-tooltip-background-opacity: 1;
+    font-family: var(--lumo-font-family);
+  }
+`;
+
+registerStyles('vaadin-chart', [chartColors, chartTheme], { moduleId: 'lumo-chart' });
+
+export { chartColors, chartTheme };

package/theme/lumo/vaadin-chart.js

@@ -0,0 +1,2 @@
+import './vaadin-chart-styles.js';
+import '../../src/vaadin-chart.js';

package/theme/material/vaadin-chart-styles.js

@@ -0,0 +1,84 @@
+import '../vaadin-chart-base-theme.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+const chartColors = css`
+  :host {
+    --vaadin-charts-color-0: #6200ee;
+    --vaadin-charts-color-1: #2fa69a;
+    --vaadin-charts-color-2: #ec611f;
+    --vaadin-charts-color-3: #fec02f;
+    --vaadin-charts-color-4: #ff4193;
+    --vaadin-charts-color-5: #007dee;
+    --vaadin-charts-color-6: #b064fc;
+    --vaadin-charts-color-7: #0c5d56;
+    --vaadin-charts-color-8: #42c6ff;
+    --vaadin-charts-color-9: #b00020;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-1, #2fa69a);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-9, #b00020);
+  }
+
+  :host([theme~='gradient']) {
+    --vaadin-charts-color-0: #6200ee;
+    --vaadin-charts-color-1: #6962e8;
+    --vaadin-charts-color-2: #619fe1;
+    --vaadin-charts-color-3: #2fbfd3;
+    --vaadin-charts-color-4: #03dac6;
+    --vaadin-charts-color-5: #5bd091;
+    --vaadin-charts-color-6: #acc65e;
+    --vaadin-charts-color-7: #ffbc2b;
+    --vaadin-charts-color-8: #fe9940;
+    --vaadin-charts-color-9: #fd695e;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-6);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-9);
+  }
+
+  :host([theme~='monotone']) {
+    --vaadin-charts-color-0: #6200ee;
+    --vaadin-charts-color-1: #7f39fb;
+    --vaadin-charts-color-2: #985eff;
+    --vaadin-charts-color-3: #bb86fc;
+    --vaadin-charts-color-4: #dbb2ff;
+    --vaadin-charts-color-5: #ecddfd;
+    --vaadin-charts-color-6: #9fe3eb;
+    --vaadin-charts-color-7: #03dac6;
+    --vaadin-charts-color-8: #00c4b4;
+    --vaadin-charts-color-9: #01a299;
+    --vaadin-charts-color-positive: var(--vaadin-charts-color-8);
+    --vaadin-charts-color-negative: var(--vaadin-charts-color-0);
+  }
+`;
+
+const chartTheme = css`
+  :host {
+    --vaadin-charts-background: var(--material-background-color);
+    --vaadin-charts-title-label: var(--material-body-text-color);
+    --vaadin-charts-axis-title: var(--material-secondary-text-color);
+    --vaadin-charts-axis-label: var(--material-secondary-text-color);
+    --vaadin-charts-data-label: var(--material-body-text-color);
+    --vaadin-charts-secondary-label: var(--material-secondary-text-color);
+    --vaadin-charts-axis-line: var(--vaadin-charts-contrast-5pct);
+    --vaadin-charts-grid-line: var(--vaadin-charts-contrast-10pct);
+    --vaadin-charts-disabled-label: var(--material-disabled-text-color);
+    --vaadin-charts-contrast: var(--material-body-text-color);
+    --vaadin-charts-contrast-5pct: var(--material-secondary-background-color);
+    --vaadin-charts-contrast-10pct: var(--material-divider-color);
+    --vaadin-charts-contrast-20pct: var(--material-disabled-color);
+    --vaadin-charts-contrast-60pct: var(--material-secondary-text-color);
+    --vaadin-charts-tooltip-background: var(--material-background-color);
+    --vaadin-charts-tooltip-border-color: var(--material-background-color);
+    --vaadin-charts-button-label: var(--material-primary-color);
+    --vaadin-charts-button-background: var(--material-background-color);
+    --vaadin-charts-button-hover-background: var(--material-secondary-background-color);
+    --vaadin-charts-button-active-label: var(--material-primary-contrast-color);
+    --vaadin-charts-button-active-background: var(--material-primary-color);
+    --vaadin-charts-xaxis-line-width: 0;
+    --vaadin-charts-tooltip-background-opacity: 1;
+    font-family: var(--material-font-family);
+  }
+`;
+
+registerStyles('vaadin-chart', [chartColors, chartTheme], { moduleId: 'material-chart' });
+
+export { chartColors, chartTheme };

package/theme/material/vaadin-chart.js

@@ -0,0 +1,2 @@
+import './vaadin-chart-styles.js';
+import '../../src/vaadin-chart.js';