@vaadin/charts 24.8.0-alpha9 → 25.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,23 +31,20 @@
     "Vaadin",
     "vaadin-charts",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "highcharts": "9.2.2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-chart",
@@ -55,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

package/src/vaadin-chart-mixin.js

@@ -28,12 +28,11 @@ import 'highcharts/es-modules/masters/modules/xrange.src.js';
 import 'highcharts/es-modules/masters/modules/bullet.src.js';
 import 'highcharts/es-modules/masters/modules/gantt.src.js';
 import 'highcharts/es-modules/masters/modules/draggable-points.src.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import Pointer from 'highcharts/es-modules/Core/Pointer.js';
 import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { deepMerge, inflateFunctions } from './helpers.js';
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
@@ -753,7 +752,7 @@ export const ChartMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
       this.__updateStyles();
-      beforeNextRender(this, () => {
+      queueMicrotask(() => {
         // 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) {
@@ -803,7 +802,7 @@ export const ChartMixin = (superClass) =>
 
     /** @private */
     __addChildObserver() {
-      this._childObserver = new FlattenedNodesObserver(this.$.slot, (info) => {
+      this._childObserver = new SlotObserver(this.$.slot, (info) => {
         this.__addSeries(info.addedNodes.filter(this.__filterSeriesNodes));
         this.__removeSeries(info.removedNodes.filter(this.__filterSeriesNodes));
         this.__cleanupAfterSeriesRemoved(info.removedNodes.filter(this.__filterSeriesNodes));
@@ -1048,7 +1047,7 @@ export const ChartMixin = (superClass) =>
       inflateFunctions(configCopy);
       this._jsonConfigurationBuffer = this.__makeConfigurationBuffer(this._jsonConfigurationBuffer, configCopy);
 
-      beforeNextRender(this, () => {
+      queueMicrotask(() => {
         if (!this.configuration || !this._jsonConfigurationBuffer) {
           return;
         }
@@ -1208,10 +1207,18 @@ export const ChartMixin = (superClass) =>
               if (!self.tempBodyStyle) {
                 let effectiveCss = '';
 
+                // PolymerElement uses `<style>` tags for adding styles
                 [...self.shadowRoot.querySelectorAll('style')].forEach((style) => {
                   effectiveCss += style.textContent;
                 });
 
+                // LitElement uses `adoptedStyleSheets` for adding styles
+                if (self.shadowRoot.adoptedStyleSheets) {
+                  self.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
+                    effectiveCss += [...sheet.cssRules].map((rule) => rule.cssText).join('\n');
+                  });
+                }
+
                 // Strip off host selectors that target individual instances
                 effectiveCss = effectiveCss.replace(/:host\(.+?\)/gu, (match) => {
                   const selector = match.substr(6, match.length - 7);

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

@@ -48,10 +48,6 @@ export declare class ChartSeriesMixinClass {
    *   - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`
    *
    *  See more in [API Site](https://api.highcharts.com/highcharts/series)
-   *
-   * Note that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)
-   * to mutate the values array in order to make the component aware of the
-   * change and be able to synchronize it.
    */
   values: ChartSeriesValues | null;
 

package/src/vaadin-chart-series-mixin.js

@@ -26,9 +26,6 @@ export const ChartSeriesMixin = (superClass) =>
          *
          *  See more in [API Site](https://api.highcharts.com/highcharts/series)
          *
-         * Note that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)
-         * to mutate the values array in order to make the component aware of the
-         * change and be able to synchronize it.
          * @type {ChartSeriesValues}
          */
         values: {

package/src/vaadin-chart-series.js

@@ -8,8 +8,9 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
 
 /**
@@ -59,7 +60,7 @@ import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
  * @extends HTMLElement
  * @mixes ChartSeriesMixin
  */
-class ChartSeries extends ChartSeriesMixin(PolymerElement) {
+class ChartSeries extends ChartSeriesMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-chart-series';
   }

package/src/vaadin-chart.js

@@ -9,9 +9,10 @@
  * license.
  */
 import './vaadin-chart-series.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ChartMixin } from './vaadin-chart-mixin.js';
 
@@ -179,25 +180,7 @@ import { ChartMixin } from './vaadin-chart-mixin.js';
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          width: 100%;
-          overflow: hidden;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <div id="chart"></div>
-      <slot id="slot"></slot>
-    `;
-  }
-
+class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-chart';
   }
@@ -205,6 +188,28 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get cvdlName() {
     return 'vaadin-chart';
   }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="chart"></div>
+      <slot id="slot"></slot>
+    `;
+  }
 }
 
 defineCustomElement(Chart);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -119,7 +119,7 @@
             "properties": [
               {
                 "name": "values",
-                "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)\n\nNote that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)\nto mutate the values array in order to make the component aware of the\nchange and be able to synchronize it.",
+                "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
                 "value": {
                   "type": [
                     "ChartSeriesValues"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -21,7 +21,7 @@
           "attributes": [
             {
               "name": ".values",
-              "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)\n\nNote that you should always use [Polymer API](https://www.polymer-project.org/2.0/docs/devguide/model-data#array-mutation)\nto mutate the values array in order to make the component aware of the\nchange and be able to synchronize it.",
+              "description": "An array of data used by the series.\nFormat depends on the chart type and can be:\n  - An array of numerical values `[y0, y1, y2, y3,...]`\n  - An array of arrays with 2 values (`x`, `y`) `[ [x0, y0], [x1, y1], [x2, y2], ... ]`\n  - An array of objects, each one describing one point `[ {x: x0, y: y0, name: 'Point0', color: '#FF0000'}, {...}, ...]`\n\n See more in [API Site](https://api.highcharts.com/highcharts/series)",
               "value": {
                 "kind": "expression"
               }

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

@@ -1,11 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 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.
- */
-export * from './vaadin-chart-series.js';

package/src/vaadin-lit-chart-series.js

@@ -1,33 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 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 './vaadin-lit-chart.js';
-import { LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ChartSeriesMixin } from './vaadin-chart-series-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-chart-series>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- */
-class ChartSeries extends ChartSeriesMixin(PolylitMixin(LitElement)) {
-  static get is() {
-    return 'vaadin-chart-series';
-  }
-}
-
-defineCustomElement(ChartSeries);
-
-export { ChartSeries };

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

@@ -1,11 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 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.
- */
-export * from './vaadin-chart.js';

package/src/vaadin-lit-chart.js

@@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 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 './vaadin-lit-chart-series.js';
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ChartMixin } from './vaadin-chart-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-chart>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- */
-class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="chart"></div>
-      <slot id="slot"></slot>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-chart';
-  }
-
-  static get cvdlName() {
-    return 'vaadin-chart';
-  }
-}
-
-defineCustomElement(Chart);
-
-export { Chart };

package/theme/lumo/vaadin-lit-chart.d.ts

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

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

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

package/theme/material/vaadin-chart-styles.d.ts

@@ -1,6 +0,0 @@
-import '../vaadin-chart-base-theme.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const chartColors: import("lit").CSSResult;
-declare const chartTheme: import("lit").CSSResult;
-export { chartColors, chartTheme };

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

@@ -1,97 +0,0 @@
-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);
-  }
-
-  :host([theme~='classic']) {
-    --vaadin-charts-color-0: #7cb5ec;
-    --vaadin-charts-color-1: #434348;
-    --vaadin-charts-color-2: #90ed7d;
-    --vaadin-charts-color-3: #f7a35c;
-    --vaadin-charts-color-4: #8085e9;
-    --vaadin-charts-color-5: #f15c80;
-    --vaadin-charts-color-6: #e4d354;
-    --vaadin-charts-color-7: #2b908f;
-    --vaadin-charts-color-8: #f45b5b;
-    --vaadin-charts-color-9: #91e8e1;
-  }
-`;
-
-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.d.ts

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

package/theme/material/vaadin-chart.js

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

package/theme/material/vaadin-lit-chart.d.ts

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

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

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

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

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

package/vaadin-lit-chart-series.js

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

package/vaadin-lit-chart.d.ts

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

package/vaadin-lit-chart.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-chart.js';
-export * from './src/vaadin-lit-chart.js';