experiment: add LitElement based version of vaadin-chart

packages/charts/package.json

@@ -41,7 +41,8 @@
     "@vaadin/vaadin-lumo-styles": "24.7.0-alpha7",
     "@vaadin/vaadin-material-styles": "24.7.0-alpha7",
     "@vaadin/vaadin-themable-mixin": "24.7.0-alpha7",
-    "highcharts": "9.2.2"
+    "highcharts": "9.2.2",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha7",

packages/charts/src/vaadin-chart-mixin.js

@@ -101,7 +101,10 @@ export const ChartMixin = (superClass) =>
          * For detailed documentation of available API check the [API site](http://api.highcharts.com/class-reference/classes.list)
          * @type {!Highcharts.Chart | undefined}
          */
-        configuration: Object,
+        configuration: {
+          type: Object,
+          sync: true,
+        },
 
         /**
          * If categories are present names are used instead of numbers for the category axis.
@@ -112,6 +115,7 @@ export const ChartMixin = (superClass) =>
         categories: {
           type: Object,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -121,6 +125,7 @@ export const ChartMixin = (superClass) =>
         categoryMax: {
           type: Number,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -130,6 +135,7 @@ export const ChartMixin = (superClass) =>
         categoryMin: {
           type: Number,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -146,6 +152,7 @@ export const ChartMixin = (superClass) =>
         categoryPosition: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -156,6 +163,7 @@ export const ChartMixin = (superClass) =>
         noLegend: {
           type: Boolean,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -169,6 +177,7 @@ export const ChartMixin = (superClass) =>
         stacking: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -178,6 +187,7 @@ export const ChartMixin = (superClass) =>
         timeline: {
           type: Boolean,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -187,6 +197,7 @@ export const ChartMixin = (superClass) =>
         title: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -195,6 +206,7 @@ export const ChartMixin = (superClass) =>
         tooltip: {
           type: Boolean,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -204,6 +216,7 @@ export const ChartMixin = (superClass) =>
         type: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -213,6 +226,7 @@ export const ChartMixin = (superClass) =>
         subtitle: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -226,6 +240,7 @@ export const ChartMixin = (superClass) =>
         chart3d: {
           type: Boolean,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -236,6 +251,7 @@ export const ChartMixin = (superClass) =>
         emptyText: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -245,6 +261,7 @@ export const ChartMixin = (superClass) =>
         additionalOptions: {
           type: Object,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -254,6 +271,7 @@ export const ChartMixin = (superClass) =>
         polar: {
           type: Boolean,
           reflectToAttribute: true,
+          sync: true,
         },
       };
     }
@@ -273,7 +291,7 @@ export const ChartMixin = (superClass) =>
         '__updateSubtitle(subtitle, configuration)',
         '__updateTitle(title, configuration)',
         '__updateType(type, configuration)',
-        '__updateAdditionalOptions(additionalOptions.*)',
+        '__updateAdditionalOptions(additionalOptions)',
       ];
     }
 
@@ -1445,8 +1463,8 @@ export const ChartMixin = (superClass) =>
 
     /** @private */
     __updateAdditionalOptions(options) {
-      if (this.configuration && options.base) {
-        this.updateConfiguration(options.base);
+      if (this.configuration && options) {
+        this.updateConfiguration(options);
       }
     }
 

packages/charts/src/vaadin-chart-series-mixin.js

@@ -34,6 +34,7 @@ export const ChartSeriesMixin = (superClass) =>
         values: {
           type: Array,
           value: () => [],
+          sync: true,
         },
 
         /**
@@ -46,6 +47,7 @@ export const ChartSeriesMixin = (superClass) =>
         valueMin: {
           type: Number,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -56,6 +58,7 @@ export const ChartSeriesMixin = (superClass) =>
         valueMax: {
           type: Number,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -66,6 +69,7 @@ export const ChartSeriesMixin = (superClass) =>
         type: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -75,6 +79,7 @@ export const ChartSeriesMixin = (superClass) =>
         title: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -88,6 +93,7 @@ export const ChartSeriesMixin = (superClass) =>
         markers: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -98,6 +104,7 @@ export const ChartSeriesMixin = (superClass) =>
         unit: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -109,6 +116,7 @@ export const ChartSeriesMixin = (superClass) =>
         stack: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -121,6 +129,7 @@ export const ChartSeriesMixin = (superClass) =>
         neckPosition: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -133,6 +142,7 @@ export const ChartSeriesMixin = (superClass) =>
         neckWidth: {
           type: String,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -142,6 +152,7 @@ export const ChartSeriesMixin = (superClass) =>
          */
         options: {
           type: Object,
+          sync: true,
         },
 
         /**
@@ -151,6 +162,7 @@ export const ChartSeriesMixin = (superClass) =>
         additionalOptions: {
           type: Object,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -159,13 +171,14 @@ export const ChartSeriesMixin = (superClass) =>
          */
         _series: {
           type: Object,
+          sync: true,
         },
       };
     }
 
     static get observers() {
       return [
-        '__additionalOptionsObserver(additionalOptions.*, _series)',
+        '__additionalOptionsObserver(additionalOptions, _series)',
         '__markersObserver(markers, _series)',
         '__neckPositionObserver(neckPosition, _series)',
         '__neckWidthObserver(neckWidth, _series)',
@@ -175,7 +188,7 @@ export const ChartSeriesMixin = (superClass) =>
         '__unitObserver(unit, valueMin, valueMax, _series)',
         '__valueMinObserver(valueMin, _series)',
         '__valueMaxObserver(valueMax, _series)',
-        '__valuesObserver(values.splices, _series)',
+        '__valuesObserver(values, _series)',
       ];
     }
 
@@ -256,16 +269,16 @@ export const ChartSeriesMixin = (superClass) =>
     }
 
     /** @private */
-    __valuesObserver(_splices, series) {
+    __valuesObserver(values, series) {
       if (series) {
-        series.setData(this.values);
+        series.setData(values);
       }
     }
 
     /** @private */
     __additionalOptionsObserver(additionalOptions, series) {
-      if (series && additionalOptions.base) {
-        series.update(additionalOptions.base);
+      if (series && additionalOptions) {
+        series.update(additionalOptions);
       }
     }
 

packages/charts/src/vaadin-lit-chart-series.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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';

packages/charts/src/vaadin-lit-chart-series.js

@@ -0,0 +1,33 @@
+/**
+ * @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 };

packages/charts/src/vaadin-lit-chart.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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';