@vaadin/charts 24.9.6 → 24.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/charts",
-  "version": "24.9.6",
+  "version": "24.9.8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.9.6",
-    "@vaadin/vaadin-lumo-styles": "~24.9.6",
-    "@vaadin/vaadin-material-styles": "~24.9.6",
-    "@vaadin/vaadin-themable-mixin": "~24.9.6",
+    "@vaadin/component-base": "~24.9.8",
+    "@vaadin/vaadin-lumo-styles": "~24.9.8",
+    "@vaadin/vaadin-material-styles": "~24.9.8",
+    "@vaadin/vaadin-themable-mixin": "~24.9.8",
     "highcharts": "9.2.2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.9.6",
-    "@vaadin/test-runner-commands": "~24.9.6",
+    "@vaadin/chai-plugins": "~24.9.8",
+    "@vaadin/test-runner-commands": "~24.9.8",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "04dec563d48efd4e5ca0c0b96687302666ee5ab1"
+  "gitHead": "deee84906a0b74bac20b2f3ca0aa7fe02e700e23"
 }

package/src/helpers.js

@@ -46,3 +46,54 @@ export function deepMerge(target, source) {
 
   return target;
 }
+
+export function prepareExport(chart) {
+  // Guard against another print 'before print' event coming before
+  // the 'after print' event.
+  if (!chart.tempBodyStyle) {
+    let effectiveCss = '';
+
+    // PolymerElement uses `<style>` tags for adding styles
+    [...chart.shadowRoot.querySelectorAll('style')].forEach((style) => {
+      effectiveCss += style.textContent;
+    });
+
+    // LitElement uses `adoptedStyleSheets` for adding styles
+    if (chart.shadowRoot.adoptedStyleSheets) {
+      chart.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);
+      return chart.matches(selector) ? '' : match;
+    });
+
+    // Zoom out a bit to avoid clipping the chart's edge on paper
+    effectiveCss =
+      `${effectiveCss}body {` +
+      `    -moz-transform: scale(0.9, 0.9);` + // Mozilla
+      `    zoom: 0.9;` + // Others
+      `    zoom: 90%;` + // Webkit
+      `}`;
+
+    chart.tempBodyStyle = document.createElement('style');
+    chart.tempBodyStyle.textContent = effectiveCss;
+    document.body.appendChild(chart.tempBodyStyle);
+    if (chart.__styledMode) {
+      document.body.toggleAttribute('styled-mode', true);
+    }
+  }
+}
+
+export function cleanupExport(chart) {
+  if (chart.tempBodyStyle) {
+    document.body.removeChild(chart.tempBodyStyle);
+    delete chart.tempBodyStyle;
+    if (chart.__styledMode) {
+      document.body.removeAttribute('styled-mode');
+    }
+  }
+}

package/src/vaadin-chart-mixin.js

@@ -33,7 +33,7 @@ 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';
+import { cleanupExport, deepMerge, inflateFunctions, prepareExport } from './helpers.js';
 
 ['exportChart', 'exportChartLocal', 'getSVG'].forEach((methodName) => {
   /* eslint-disable @typescript-eslint/no-invalid-this, prefer-arrow-callback */
@@ -272,6 +272,11 @@ export const ChartMixin = (superClass) =>
           reflectToAttribute: true,
           sync: true,
         },
+
+        /** @private */
+        __styledMode: {
+          type: Boolean,
+        },
       };
     }
 
@@ -902,7 +907,7 @@ export const ChartMixin = (superClass) =>
     /** @private */
     __initChart(options) {
       this.__initEventsListeners(options);
-      this.__updateStyledMode(options);
+      this.__styledMode = options.chart.styledMode;
       if (options.chart.type === 'gantt') {
         this.configuration = Highcharts.ganttChart(this.$.chart, options);
       } else if (this.timeline) {
@@ -912,12 +917,6 @@ export const ChartMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateStyledMode(options) {
-      const styledMode = options.chart.styledMode;
-      this.$.chart.toggleAttribute('styled-mode', !!styledMode);
-    }
-
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
@@ -1205,55 +1204,12 @@ export const ChartMixin = (superClass) =>
             // Workaround for https://github.com/vaadin/vaadin-charts/issues/389
             // Hook into beforePrint and beforeExport to ensure correct styling
             if (['beforePrint', 'beforeExport'].indexOf(event.type) >= 0) {
-              // Guard against another print 'before print' event coming before
-              // the 'after print' event.
-              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);
-                  return self.matches(selector) ? '' : match;
-                });
-
-                // Zoom out a bit to avoid clipping the chart's edge on paper
-                effectiveCss =
-                  `${effectiveCss}body {` +
-                  `    -moz-transform: scale(0.9, 0.9);` + // Mozilla
-                  `    zoom: 0.9;` + // Others
-                  `    zoom: 90%;` + // Webkit
-                  `}`;
-
-                self.tempBodyStyle = document.createElement('style');
-                self.tempBodyStyle.textContent = effectiveCss;
-                document.body.appendChild(self.tempBodyStyle);
-                if (self.options.chart.styledMode) {
-                  document.body.setAttribute('styled-mode', '');
-                }
-              }
+              prepareExport(self);
             }
 
             // Hook into afterPrint and afterExport to revert changes made before
             if (['afterPrint', 'afterExport'].indexOf(event.type) >= 0) {
-              if (self.tempBodyStyle) {
-                document.body.removeChild(self.tempBodyStyle);
-                delete self.tempBodyStyle;
-                if (self.options.chart.styledMode) {
-                  document.body.removeAttribute('styled-mode');
-                }
-              }
+              cleanupExport(self);
             }
 
             self.dispatchEvent(new CustomEvent(eventList[key], customEvent));

package/src/vaadin-chart.js

@@ -193,7 +193,7 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolymerElement))) {
           display: none !important;
         }
       </style>
-      <div id="chart"></div>
+      <div id="chart" styled-mode$="[[__styledMode]]"></div>
       <slot id="slot"></slot>
     `;
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.9.6",
+  "version": "24.9.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/charts",
-  "version": "24.9.6",
+  "version": "24.9.8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {