@area8975/ui 0.2.2-dev.37 → 0.2.2-dev.38

package/fesm2022/area8975-ui.mjs

@@ -670,7 +670,6 @@ function baseChartOptions(ink) {
 			fontFamily: "inherit",
 			foreColor: ink.muted,
 			parentHeightOffset: 0,
-			redrawOnParentResize: true,
 			toolbar: { show: false },
 			zoom: { enabled: false },
 			animations: {
@@ -1060,18 +1059,27 @@ var UiChartComponent = class UiChartComponent {
 	chart = signal(null, ...ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []);
 	destroyed = false;
 	drawnNames = [];
+	host = inject(ElementRef);
+	drawnSize = {
+		width: 0,
+		height: 0
+	};
+	resizeObserver = null;
 	constructor() {
 		afterNextRender(async () => {
 			const { default: Apex } = await import("apexcharts");
 			if (this.destroyed) return;
-			const chart = new Apex(this.canvas().nativeElement, untracked(this.options));
+			const chart = new Apex(this.canvas().nativeElement, this.withOwnParentResizing(untracked(this.options)));
 			chart.addEventListener("updated", () => {
+				this.drawnSize = this.hostSize();
 				this.applyHidden(chart);
 				this.applyEmphasis();
 			});
 			this.drawnNames = this.seriesNames();
 			await chart.render();
+			this.drawnSize = this.hostSize();
 			this.chart.set(chart);
+			this.redrawWhenResized(chart);
 			this.applyHidden(chart);
 			this.applyEmphasis();
 		});
@@ -1082,7 +1090,7 @@ var UiChartComponent = class UiChartComponent {
 			const names = this.seriesNames();
 			const reordered = names.length === this.drawnNames.length && names.some((name, index) => name !== this.drawnNames[index]) && names.every((name) => this.drawnNames.includes(name));
 			this.drawnNames = names;
-			chart.updateOptions(options, false, !reordered);
+			chart.updateOptions(this.withOwnParentResizing(options), false, !reordered);
 		});
 		effect(() => {
 			this.emphasis();
@@ -1097,9 +1105,33 @@ var UiChartComponent = class UiChartComponent {
 		});
 		inject(DestroyRef).onDestroy(() => {
 			this.destroyed = true;
+			this.resizeObserver?.disconnect();
 			this.chart()?.destroy();
 		});
 	}
+	withOwnParentResizing(options) {
+		return {
+			...options,
+			chart: {
+				...options.chart,
+				redrawOnParentResize: false
+			}
+		};
+	}
+	redrawWhenResized(chart) {
+		this.resizeObserver = new ResizeObserver(() => {
+			const size = this.hostSize();
+			if (size.width !== this.drawnSize.width || size.height !== this.drawnSize.height) chart.updateSeries(untracked(this.options).series ?? [], false);
+		});
+		this.resizeObserver.observe(this.host.nativeElement);
+	}
+	hostSize() {
+		const { offsetWidth, offsetHeight } = this.host.nativeElement;
+		return {
+			width: offsetWidth,
+			height: offsetHeight
+		};
+	}
 	applyHidden(chart) {
 		const hidden = this.hiddenSeries();
 		if (!this.canvas().nativeElement.querySelector(".apexcharts-inner .apexcharts-series")) return;