@vaadin/charts 23.0.0-alpha5 → 23.0.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,9 +34,9 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha5",
+    "@vaadin/component-base": "23.0.0-beta4",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta4",
     "highcharts": "9.2.2"
   },
   "devDependencies": {
@@ -44,5 +44,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "d0b447f1c31ca4256a5e26f2dcd27784447ff79b"
 }

package/src/vaadin-chart.d.ts

@@ -5,6 +5,7 @@
  */
 import { Axis, Chart as HighchartsChart, ExtremesObject, Options, Point, Series } from 'highcharts';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export type ChartCategories = Array<string> | { [key: number]: string };
@@ -418,7 +419,7 @@ export type ChartEventMap = HTMLElementEventMap & ChartCustomEventMap;
  * @fires {CustomEvent} xaxes-extremes-set - Fired when when the minimum and maximum is set for the X axis.
  * @fires {CustomEvent} yaxes-extremes-set - Fired when when the minimum and maximum is set for the Y axis.
  */
-declare class Chart extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Chart extends ResizeMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   readonly options: Options;
 
   /**

package/src/vaadin-chart.js

@@ -26,6 +26,7 @@ import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ChartSeries } from './vaadin-chart-series.js';
 
@@ -234,10 +235,11 @@ export function deepMerge(target, source) {
  * @fires {CustomEvent} yaxes-extremes-set - Fired when when the minimum and maximum is set for the Y axis.
  *
  * @extends HTMLElement
+ * @mixes ResizeMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -512,8 +514,6 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
       beta: 15,
       depth: 50
     };
-
-    this.__mutationCallback = this.__mutationCallback.bind(this);
   }
 
   /** @protected */
@@ -532,9 +532,6 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
       this._jsonConfigurationBuffer = null;
       this.__initChart(options);
       this.__addChildObserver();
-      const config = { attributes: true, characterData: true };
-      this.__mutationObserver = new MutationObserver(this.__mutationCallback);
-      this.__mutationObserver.observe(this, config);
     });
   }
 
@@ -918,24 +915,33 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
     };
   }
 
-  /** @private */
-  __reflow() {
+  /**
+   * Implements resize callback from `ResizeMixin`
+   * to reflow when the chart element is resized.
+   * @protected
+   * @override
+   */
+  _onResize(contentRect) {
     if (!this.configuration) {
       return;
     }
-    this.configuration.reflow();
-  }
 
-  /** @private */
-  __mutationCallback() {
-    const { height: componentHeight } = this.getBoundingClientRect();
-    const { chartHeight } = this.configuration;
+    const { height, width } = contentRect;
+    const { chartHeight, chartWidth } = this.configuration;
 
-    if (componentHeight !== chartHeight) {
+    if (height !== chartHeight || width !== chartWidth) {
       this.__reflow();
     }
   }
 
+  /** @private */
+  __reflow() {
+    if (!this.configuration) {
+      return;
+    }
+    this.configuration.reflow();
+  }
+
   /** @private */
   __addChildObserver() {
     this._childObserver = new FlattenedNodesObserver(this.$.slot, (info) => {
@@ -1055,7 +1061,6 @@ class Chart extends ElementMixin(ThemableMixin(PolymerElement)) {
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.__mutationObserver && this.__mutationObserver.disconnect();
     this._childObserver && this._childObserver.disconnect();
   }
 

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

@@ -48,6 +48,19 @@ const chartColors = css`
     --vaadin-charts-color-positive: var(--vaadin-charts-color-3);
     --vaadin-charts-color-negative: var(--vaadin-charts-color-9);
   }
+
+  :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`

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

@@ -48,6 +48,19 @@ const chartColors = css`
     --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`

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

@@ -1017,7 +1017,7 @@ const chartBaseTheme = css`
   }
 
   /* https://github.com/highcharts/highcharts/issues/16282 */
-  /* without this __mutationCallback always calls __reflow */
+  /* without this the resize callback always calls __reflow */
   ul[aria-hidden='false'] {
     margin: 0px;
   }