chartgpu-angular 21.0.0 → 22.0.1

package/fesm2022/chartgpu-angular.mjs

@@ -1,260 +1,324 @@
-import { NgStyle } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, afterNextRender, effect, untracked, ChangeDetectionStrategy, Component, Directive, computed, Injectable, makeEnvironmentProviders } from '@angular/core';
-import { ChartGPU, connectCharts, createPipelineCache } from 'chartgpu';
-
-class ChartGpuAngularComponent {
-    destroyRef;
-    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    gpuContext = input(null, ...(ngDevMode ? [{ debugName: "gpuContext" }] : /* istanbul ignore next */ []));
-    theme = input(undefined, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
-    style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
-    ready = output();
-    chartReady = output();
-    chartDispose = output();
-    resize = output();
-    click = output();
-    chartClick = output();
-    mouseOver = output();
-    mouseOut = output();
-    crosshairMove = output();
-    dataAppend = output();
-    zoomChange = output();
-    zoomRangeChange = output();
-    deviceLost = output();
-    chartError = output();
-    host = viewChild('host', ...(ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []));
-    canvasHost = viewChild('canvasHost', ...(ngDevMode ? [{ debugName: "canvasHost" }] : /* istanbul ignore next */ []));
-    chartInstance = signal(null, ...(ngDevMode ? [{ debugName: "chartInstance" }] : /* istanbul ignore next */ []));
-    initializationError = signal(null, ...(ngDevMode ? [{ debugName: "initializationError" }] : /* istanbul ignore next */ []));
-    chartContainer;
-    createdWithOptions;
-    resizeTimeout;
-    resizeObserver;
-    removeChartListeners;
-    destroying = false;
-    constructor(destroyRef) {
-        this.destroyRef = destroyRef;
-        this.destroyRef.onDestroy(() => {
-            this.resizeObserver?.disconnect();
-            if (this.resizeTimeout !== undefined) {
-                clearTimeout(this.resizeTimeout);
-            }
-            this.disposeChart();
-        });
-        afterNextRender(() => {
-            const container = this.host()?.nativeElement;
-            if (container) {
-                this.observeResize(container);
-            }
-        });
-        effect(onCleanup => {
-            const container = this.canvasHost()?.nativeElement;
-            const options = this.options();
-            const gpuContext = this.gpuContext();
-            const theme = this.theme();
-            this.initializationError.set(null);
-            if (!container) {
-                this.disposeChart();
-                return;
-            }
-            if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
-                this.reportError(new Error('WebGPU not supported in this browser'));
-                return;
-            }
-            if (untracked(() => this.chartInstance()) && this.chartContainer === container) {
-                return;
-            }
-            let cancelled = false;
-            let createdInstance;
-            const initialOptions = this.getEffectiveOptions(options, theme);
-            void (gpuContext
-                ? ChartGPU.create(container, initialOptions, gpuContext)
-                : ChartGPU.create(container, initialOptions)).then(instance => {
-                createdInstance = instance;
-                if (cancelled) {
-                    instance.dispose();
-                    return;
-                }
-                try {
-                    const latest = untracked(() => ({
-                        options: this.options(),
-                        theme: this.theme(),
-                    }));
-                    if (latest.options !== options || latest.theme !== theme) {
-                        instance.setOption(this.getEffectiveOptions(latest.options, latest.theme));
-                    }
-                    this.createdWithOptions = latest;
-                    this.chartContainer = container;
-                    this.chartInstance.set(instance);
-                    this.removeChartListeners = this.listenToChart(instance);
-                    this.ready.emit({ container });
-                    this.chartReady.emit(instance);
-                    const range = instance.getZoomRange();
-                    if (range) {
-                        this.emitZoomRange(range);
-                    }
-                }
-                catch (cause) {
-                    instance.dispose();
-                    throw cause;
-                }
-            }).catch((cause) => {
-                if (cancelled) {
-                    return;
-                }
-                if (createdInstance && this.chartInstance() !== createdInstance && !createdInstance.disposed) {
-                    createdInstance.dispose();
-                }
-                this.reportError(cause);
-            });
-            onCleanup(() => {
-                cancelled = true;
-                if (this.chartContainer === container) {
-                    this.disposeChart();
-                }
-            });
-        }, { allowSignalWrites: true });
-        effect(() => {
-            const options = this.options();
-            const theme = this.theme();
-            const instance = this.chartInstance();
-            if (!instance || instance.disposed) {
-                return;
-            }
-            if (this.createdWithOptions?.options === options && this.createdWithOptions.theme === theme) {
-                this.createdWithOptions = undefined;
-                return;
-            }
-            try {
-                instance.setOption(this.getEffectiveOptions(options, theme));
-            }
-            catch (cause) {
-                this.reportError(cause);
-            }
-        }, { allowSignalWrites: true });
-    }
-    emitClick(event) {
-        this.click.emit({ x: event.offsetX, y: event.offsetY });
-    }
-    ngOnDestroy() {
-        this.destroying = true;
-    }
-    getChart() {
-        const instance = this.chartInstance();
-        return instance && !instance.disposed ? instance : null;
-    }
-    getContainer() {
-        return this.canvasHost()?.nativeElement ?? null;
-    }
-    appendData(seriesIndex, newPoints, options) {
-        this.getChart()?.appendData(seriesIndex, newPoints, options);
-    }
-    renderFrame() {
-        return this.getChart()?.renderFrame() ?? false;
-    }
-    needsRender() {
-        return this.getChart()?.needsRender() ?? false;
-    }
-    getRenderMode() {
-        return this.getChart()?.getRenderMode() ?? 'auto';
-    }
-    setRenderMode(mode) {
-        this.getChart()?.setRenderMode(mode);
-    }
-    setOption(options) {
-        this.getChart()?.setOption(options);
-    }
-    setZoomRange(start, end, source) {
-        this.getChart()?.setZoomRange(start, end, source);
-    }
-    setInteractionX(x, source) {
-        this.getChart()?.setInteractionX(x, source);
-    }
-    getInteractionX() {
-        return this.getChart()?.getInteractionX() ?? null;
-    }
-    hitTest(event) {
-        return this.getChart()?.hitTest(event) ?? null;
-    }
-    getEffectiveOptions(options, theme) {
-        return theme !== undefined ? { ...options, theme } : options;
-    }
-    listenToChart(instance) {
-        const click = (payload) => this.chartClick.emit(payload);
-        const mouseOver = (payload) => this.mouseOver.emit(payload);
-        const mouseOut = (payload) => this.mouseOut.emit(payload);
-        const crosshairMove = (payload) => this.crosshairMove.emit(payload);
-        const dataAppend = (payload) => this.dataAppend.emit(payload);
-        const zoomChange = (payload) => this.emitZoomRange(payload);
-        const deviceLost = (payload) => this.deviceLost.emit(payload);
-        instance.on('click', click);
-        instance.on('mouseover', mouseOver);
-        instance.on('mouseout', mouseOut);
-        instance.on('crosshairMove', crosshairMove);
-        instance.on('dataAppend', dataAppend);
-        instance.on('zoomRangeChange', zoomChange);
-        instance.on('deviceLost', deviceLost);
-        return () => {
-            if (instance.disposed) {
-                return;
-            }
-            instance.off('click', click);
-            instance.off('mouseover', mouseOver);
-            instance.off('mouseout', mouseOut);
-            instance.off('crosshairMove', crosshairMove);
-            instance.off('dataAppend', dataAppend);
-            instance.off('zoomRangeChange', zoomChange);
-            instance.off('deviceLost', deviceLost);
-        };
-    }
-    emitZoomRange(range) {
-        this.zoomChange.emit({ range: { start: range.start, end: range.end } });
-        this.zoomRangeChange.emit({ start: range.start, end: range.end });
-    }
-    observeResize(container) {
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(entries => {
-            const entry = entries[0];
-            if (!entry) {
-                return;
-            }
-            const { width, height } = entry.contentRect;
-            this.resize.emit({ width, height, container });
-            if (this.resizeTimeout !== undefined) {
-                clearTimeout(this.resizeTimeout);
-            }
-            this.resizeTimeout = setTimeout(() => {
-                this.chartInstance()?.resize();
-                this.resizeTimeout = undefined;
-            }, 100);
-        });
-        this.resizeObserver.observe(container);
-    }
-    reportError(cause) {
-        const error = cause instanceof Error ? cause : new Error(String(cause));
-        this.initializationError.set(error);
-        this.chartError.emit(error);
-    }
-    disposeChart() {
-        const instance = this.chartInstance();
-        this.removeChartListeners?.();
-        this.removeChartListeners = undefined;
-        if (instance && !instance.disposed) {
-            instance.dispose();
-            if (!this.destroying) {
-                this.chartDispose.emit();
-            }
-        }
-        this.chartInstance.set(null);
-        this.chartContainer = undefined;
-        this.createdWithOptions = undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartGpuAngularComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ChartGpuAngularComponent, isStandalone: true, selector: "lib-chartgpu-angular", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, gpuContext: { classPropertyName: "gpuContext", publicName: "gpuContext", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ready: "ready", chartReady: "chartReady", chartDispose: "chartDispose", resize: "resize", click: "click", chartClick: "chartClick", mouseOver: "mouseOver", mouseOut: "mouseOut", crosshairMove: "crosshairMove", dataAppend: "dataAppend", zoomChange: "zoomChange", zoomRangeChange: "zoomRangeChange", deviceLost: "deviceLost", chartError: "chartError" }, host: { classAttribute: "chartgpu-angular" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }, { propertyName: "canvasHost", first: true, predicate: ["canvasHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+import { NgStyle } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, Injectable, afterNextRender, computed, effect, input, makeEnvironmentProviders, output, signal, untracked, viewChild } from "@angular/core";
+import { ChartGPU, connectCharts, createPipelineCache } from "chartgpu";
+var ChartGpuAngularComponent = class ChartGpuAngularComponent {
+	destroyRef;
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	gpuContext = input(null, ...ngDevMode ? [{ debugName: "gpuContext" }] : /* istanbul ignore next */ []);
+	theme = input(void 0, ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	className = input(...ngDevMode ? [void 0, { debugName: "className" }] : /* istanbul ignore next */ []);
+	style = input(...ngDevMode ? [void 0, { debugName: "style" }] : /* istanbul ignore next */ []);
+	ready = output();
+	chartReady = output();
+	chartDispose = output();
+	resize = output();
+	click = output();
+	chartClick = output();
+	mouseOver = output();
+	mouseOut = output();
+	crosshairMove = output();
+	dataAppend = output();
+	zoomChange = output();
+	zoomRangeChange = output();
+	deviceLost = output();
+	chartError = output();
+	host = viewChild("host", ...ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []);
+	canvasHost = viewChild("canvasHost", ...ngDevMode ? [{ debugName: "canvasHost" }] : /* istanbul ignore next */ []);
+	chartInstance = signal(null, ...ngDevMode ? [{ debugName: "chartInstance" }] : /* istanbul ignore next */ []);
+	initializationError = signal(null, ...ngDevMode ? [{ debugName: "initializationError" }] : /* istanbul ignore next */ []);
+	chartContainer;
+	createdWithOptions;
+	resizeTimeout;
+	resizeObserver;
+	removeChartListeners;
+	destroying = false;
+	constructor(destroyRef) {
+		this.destroyRef = destroyRef;
+		this.destroyRef.onDestroy(() => {
+			this.resizeObserver?.disconnect();
+			if (this.resizeTimeout !== void 0) clearTimeout(this.resizeTimeout);
+			this.disposeChart();
+		});
+		afterNextRender(() => {
+			const container = this.host()?.nativeElement;
+			if (container) this.observeResize(container);
+		});
+		effect((onCleanup) => {
+			const container = this.canvasHost()?.nativeElement;
+			const options = this.options();
+			const gpuContext = this.gpuContext();
+			const theme = this.theme();
+			this.initializationError.set(null);
+			if (!container) {
+				this.disposeChart();
+				return;
+			}
+			if (typeof navigator === "undefined" || !("gpu" in navigator)) {
+				this.reportError(/* @__PURE__ */ new Error("WebGPU not supported in this browser"));
+				return;
+			}
+			if (untracked(() => this.chartInstance()) && this.chartContainer === container) return;
+			let cancelled = false;
+			let createdInstance;
+			const initialOptions = this.getEffectiveOptions(options, theme);
+			(gpuContext ? ChartGPU.create(container, initialOptions, gpuContext) : ChartGPU.create(container, initialOptions)).then((instance) => {
+				createdInstance = instance;
+				if (cancelled) {
+					instance.dispose();
+					return;
+				}
+				try {
+					const latest = untracked(() => ({
+						options: this.options(),
+						theme: this.theme()
+					}));
+					if (latest.options !== options || latest.theme !== theme) instance.setOption(this.getEffectiveOptions(latest.options, latest.theme));
+					this.createdWithOptions = latest;
+					this.chartContainer = container;
+					this.chartInstance.set(instance);
+					this.removeChartListeners = this.listenToChart(instance);
+					this.ready.emit({ container });
+					this.chartReady.emit(instance);
+					const range = instance.getZoomRange();
+					if (range) this.emitZoomRange(range);
+				} catch (cause) {
+					instance.dispose();
+					throw cause;
+				}
+			}).catch((cause) => {
+				if (cancelled) return;
+				if (createdInstance && this.chartInstance() !== createdInstance && !createdInstance.disposed) createdInstance.dispose();
+				this.reportError(cause);
+			});
+			onCleanup(() => {
+				cancelled = true;
+				if (this.chartContainer === container) this.disposeChart();
+			});
+		}, { allowSignalWrites: true });
+		effect(() => {
+			const options = this.options();
+			const theme = this.theme();
+			const instance = this.chartInstance();
+			if (!instance || instance.disposed) return;
+			if (this.createdWithOptions?.options === options && this.createdWithOptions.theme === theme) {
+				this.createdWithOptions = void 0;
+				return;
+			}
+			try {
+				instance.setOption(this.getEffectiveOptions(options, theme));
+			} catch (cause) {
+				this.reportError(cause);
+			}
+		}, { allowSignalWrites: true });
+	}
+	emitClick(event) {
+		this.click.emit({
+			x: event.offsetX,
+			y: event.offsetY
+		});
+	}
+	ngOnDestroy() {
+		this.destroying = true;
+	}
+	getChart() {
+		const instance = this.chartInstance();
+		return instance && !instance.disposed ? instance : null;
+	}
+	getContainer() {
+		return this.canvasHost()?.nativeElement ?? null;
+	}
+	appendData(seriesIndex, newPoints, options) {
+		this.getChart()?.appendData(seriesIndex, newPoints, options);
+	}
+	renderFrame() {
+		return this.getChart()?.renderFrame() ?? false;
+	}
+	needsRender() {
+		return this.getChart()?.needsRender() ?? false;
+	}
+	getRenderMode() {
+		return this.getChart()?.getRenderMode() ?? "auto";
+	}
+	setRenderMode(mode) {
+		this.getChart()?.setRenderMode(mode);
+	}
+	setOption(options) {
+		this.getChart()?.setOption(options);
+	}
+	setZoomRange(start, end, source) {
+		this.getChart()?.setZoomRange(start, end, source);
+	}
+	setInteractionX(x, source) {
+		this.getChart()?.setInteractionX(x, source);
+	}
+	getInteractionX() {
+		return this.getChart()?.getInteractionX() ?? null;
+	}
+	hitTest(event) {
+		return this.getChart()?.hitTest(event) ?? null;
+	}
+	getEffectiveOptions(options, theme) {
+		return theme !== void 0 ? {
+			...options,
+			theme
+		} : options;
+	}
+	listenToChart(instance) {
+		const click = (payload) => this.chartClick.emit(payload);
+		const mouseOver = (payload) => this.mouseOver.emit(payload);
+		const mouseOut = (payload) => this.mouseOut.emit(payload);
+		const crosshairMove = (payload) => this.crosshairMove.emit(payload);
+		const dataAppend = (payload) => this.dataAppend.emit(payload);
+		const zoomChange = (payload) => this.emitZoomRange(payload);
+		const deviceLost = (payload) => this.deviceLost.emit(payload);
+		instance.on("click", click);
+		instance.on("mouseover", mouseOver);
+		instance.on("mouseout", mouseOut);
+		instance.on("crosshairMove", crosshairMove);
+		instance.on("dataAppend", dataAppend);
+		instance.on("zoomRangeChange", zoomChange);
+		instance.on("deviceLost", deviceLost);
+		return () => {
+			if (instance.disposed) return;
+			instance.off("click", click);
+			instance.off("mouseover", mouseOver);
+			instance.off("mouseout", mouseOut);
+			instance.off("crosshairMove", crosshairMove);
+			instance.off("dataAppend", dataAppend);
+			instance.off("zoomRangeChange", zoomChange);
+			instance.off("deviceLost", deviceLost);
+		};
+	}
+	emitZoomRange(range) {
+		this.zoomChange.emit({ range: {
+			start: range.start,
+			end: range.end
+		} });
+		this.zoomRangeChange.emit({
+			start: range.start,
+			end: range.end
+		});
+	}
+	observeResize(container) {
+		if (typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			const { width, height } = entry.contentRect;
+			this.resize.emit({
+				width,
+				height,
+				container
+			});
+			if (this.resizeTimeout !== void 0) clearTimeout(this.resizeTimeout);
+			this.resizeTimeout = setTimeout(() => {
+				this.chartInstance()?.resize();
+				this.resizeTimeout = void 0;
+			}, 100);
+		});
+		this.resizeObserver.observe(container);
+	}
+	reportError(cause) {
+		const error = cause instanceof Error ? cause : new Error(String(cause));
+		this.initializationError.set(error);
+		this.chartError.emit(error);
+	}
+	disposeChart() {
+		const instance = this.chartInstance();
+		this.removeChartListeners?.();
+		this.removeChartListeners = void 0;
+		if (instance && !instance.disposed) {
+			instance.dispose();
+			if (!this.destroying) this.chartDispose.emit();
+		}
+		this.chartInstance.set(null);
+		this.chartContainer = void 0;
+		this.createdWithOptions = void 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartGpuAngularComponent,
+		deps: [{ token: i0.DestroyRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ChartGpuAngularComponent,
+		isStandalone: true,
+		selector: "lib-chartgpu-angular",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			gpuContext: {
+				classPropertyName: "gpuContext",
+				publicName: "gpuContext",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			theme: {
+				classPropertyName: "theme",
+				publicName: "theme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			className: {
+				classPropertyName: "className",
+				publicName: "className",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			style: {
+				classPropertyName: "style",
+				publicName: "style",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			ready: "ready",
+			chartReady: "chartReady",
+			chartDispose: "chartDispose",
+			resize: "resize",
+			click: "click",
+			chartClick: "chartClick",
+			mouseOver: "mouseOver",
+			mouseOut: "mouseOut",
+			crosshairMove: "crosshairMove",
+			dataAppend: "dataAppend",
+			zoomChange: "zoomChange",
+			zoomRangeChange: "zoomRangeChange",
+			deviceLost: "deviceLost",
+			chartError: "chartError"
+		},
+		host: { classAttribute: "chartgpu-angular" },
+		viewQueries: [{
+			propertyName: "host",
+			first: true,
+			predicate: ["host"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "canvasHost",
+			first: true,
+			predicate: ["canvasHost"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <div
       #host
       class="chartgpu-host"
@@ -267,11 +331,32 @@ class ChartGpuAngularComponent {
         <div class="chartgpu-error" role="alert">{{ error.message }}</div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.chartgpu-host{position:relative;width:100%;height:100%}.chartgpu-canvas-host{position:absolute;inset:0}.chartgpu-error{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartGpuAngularComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-chartgpu-angular', standalone: true, imports: [NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'chartgpu-angular' }, template: `
+  `,
+		isInline: true,
+		styles: [":host{display:block;width:100%;height:100%}.chartgpu-host{position:relative;width:100%;height:100%}.chartgpu-canvas-host{position:absolute;inset:0}.chartgpu-error{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgStyle,
+			selector: "[ngStyle]",
+			inputs: ["ngStyle"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ChartGpuAngularComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-chartgpu-angular",
+			standalone: true,
+			imports: [NgStyle],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "chartgpu-angular" },
+			template: `
     <div
       #host
       class="chartgpu-host"
@@ -284,150 +369,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
         <div class="chartgpu-error" role="alert">{{ error.message }}</div>
       }
     </div>
-  `, styles: [":host{display:block;width:100%;height:100%}.chartgpu-host{position:relative;width:100%;height:100%}.chartgpu-canvas-host{position:absolute;inset:0}.chartgpu-error{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], gpuContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "gpuContext", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], ready: [{ type: i0.Output, args: ["ready"] }], chartReady: [{ type: i0.Output, args: ["chartReady"] }], chartDispose: [{ type: i0.Output, args: ["chartDispose"] }], resize: [{ type: i0.Output, args: ["resize"] }], click: [{ type: i0.Output, args: ["click"] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], mouseOver: [{ type: i0.Output, args: ["mouseOver"] }], mouseOut: [{ type: i0.Output, args: ["mouseOut"] }], crosshairMove: [{ type: i0.Output, args: ["crosshairMove"] }], dataAppend: [{ type: i0.Output, args: ["dataAppend"] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], zoomRangeChange: [{ type: i0.Output, args: ["zoomRangeChange"] }], deviceLost: [{ type: i0.Output, args: ["deviceLost"] }], chartError: [{ type: i0.Output, args: ["chartError"] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }], canvasHost: [{ type: i0.ViewChild, args: ['canvasHost', { isSignal: true }] }] } });
-
-class ChartgpuConnectChartsDirective {
-    charts = input([], { ...(ngDevMode ? { debugName: "charts" } : /* istanbul ignore next */ {}), alias: 'libChartgpuConnectCharts' });
-    syncOptions = input(...(ngDevMode ? [undefined, { debugName: "syncOptions" }] : /* istanbul ignore next */ []));
-    connectionError = output();
-    ids = new WeakMap();
-    nextId = 1;
-    signature;
-    constructor() {
-        effect(onCleanup => {
-            const charts = this.charts();
-            const options = this.syncOptions();
-            const optionsSignature = options
-                ? `crosshair=${options.syncCrosshair ?? ''},zoom=${options.syncZoom ?? ''}`
-                : '';
-            const signature = `${charts.map(chart => {
-                if (!chart) {
-                    return 'null';
-                }
-                let id = this.ids.get(chart);
-                if (id === undefined) {
-                    id = this.nextId++;
-                    this.ids.set(chart, id);
-                }
-                return `${id}:${chart.disposed ? 1 : 0}`;
-            }).join('|')}|${optionsSignature}`;
-            if (signature === this.signature) {
-                return;
-            }
-            this.signature = signature;
-            if (charts.length === 0 || charts.some(chart => !chart || chart.disposed)) {
-                return;
-            }
-            const resolved = [];
-            for (const chart of charts) {
-                if (!chart || chart.disposed) {
-                    return;
-                }
-                resolved.push(chart);
-            }
-            try {
-                const disconnect = connectCharts(resolved, options);
-                onCleanup(disconnect);
-            }
-            catch (cause) {
-                this.connectionError.emit(cause instanceof Error ? cause : new Error(String(cause)));
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartgpuConnectChartsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: ChartgpuConnectChartsDirective, isStandalone: true, selector: "[libChartgpuConnectCharts]", inputs: { charts: { classPropertyName: "charts", publicName: "libChartgpuConnectCharts", isSignal: true, isRequired: false, transformFunction: null }, syncOptions: { classPropertyName: "syncOptions", publicName: "syncOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { connectionError: "connectionError" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartgpuConnectChartsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[libChartgpuConnectCharts]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "libChartgpuConnectCharts", required: false }] }], syncOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncOptions", required: false }] }], connectionError: [{ type: i0.Output, args: ["connectionError"] }] } });
-
+  `,
+			styles: [":host{display:block;width:100%;height:100%}.chartgpu-host{position:relative;width:100%;height:100%}.chartgpu-canvas-host{position:absolute;inset:0}.chartgpu-error{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.DestroyRef }],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		gpuContext: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gpuContext",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		style: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "style",
+				required: false
+			}]
+		}],
+		ready: [{
+			type: i0.Output,
+			args: ["ready"]
+		}],
+		chartReady: [{
+			type: i0.Output,
+			args: ["chartReady"]
+		}],
+		chartDispose: [{
+			type: i0.Output,
+			args: ["chartDispose"]
+		}],
+		resize: [{
+			type: i0.Output,
+			args: ["resize"]
+		}],
+		click: [{
+			type: i0.Output,
+			args: ["click"]
+		}],
+		chartClick: [{
+			type: i0.Output,
+			args: ["chartClick"]
+		}],
+		mouseOver: [{
+			type: i0.Output,
+			args: ["mouseOver"]
+		}],
+		mouseOut: [{
+			type: i0.Output,
+			args: ["mouseOut"]
+		}],
+		crosshairMove: [{
+			type: i0.Output,
+			args: ["crosshairMove"]
+		}],
+		dataAppend: [{
+			type: i0.Output,
+			args: ["dataAppend"]
+		}],
+		zoomChange: [{
+			type: i0.Output,
+			args: ["zoomChange"]
+		}],
+		zoomRangeChange: [{
+			type: i0.Output,
+			args: ["zoomRangeChange"]
+		}],
+		deviceLost: [{
+			type: i0.Output,
+			args: ["deviceLost"]
+		}],
+		chartError: [{
+			type: i0.Output,
+			args: ["chartError"]
+		}],
+		host: [{
+			type: i0.ViewChild,
+			args: ["host", { isSignal: true }]
+		}],
+		canvasHost: [{
+			type: i0.ViewChild,
+			args: ["canvasHost", { isSignal: true }]
+		}]
+	}
+});
+var ChartgpuConnectChartsDirective = class ChartgpuConnectChartsDirective {
+	charts = input([], {
+		...ngDevMode ? { debugName: "charts" } : /* istanbul ignore next */ {},
+		alias: "libChartgpuConnectCharts"
+	});
+	syncOptions = input(...ngDevMode ? [void 0, { debugName: "syncOptions" }] : /* istanbul ignore next */ []);
+	connectionError = output();
+	ids = /* @__PURE__ */ new WeakMap();
+	nextId = 1;
+	signature;
+	constructor() {
+		effect((onCleanup) => {
+			const charts = this.charts();
+			const options = this.syncOptions();
+			const optionsSignature = options ? `crosshair=${options.syncCrosshair ?? ""},zoom=${options.syncZoom ?? ""}` : "";
+			const signature = `${charts.map((chart) => {
+				if (!chart) return "null";
+				let id = this.ids.get(chart);
+				if (id === void 0) {
+					id = this.nextId++;
+					this.ids.set(chart, id);
+				}
+				return `${id}:${chart.disposed ? 1 : 0}`;
+			}).join("|")}|${optionsSignature}`;
+			if (signature === this.signature) return;
+			this.signature = signature;
+			if (charts.length === 0 || charts.some((chart) => !chart || chart.disposed)) return;
+			const resolved = [];
+			for (const chart of charts) {
+				if (!chart || chart.disposed) return;
+				resolved.push(chart);
+			}
+			try {
+				onCleanup(connectCharts(resolved, options));
+			} catch (cause) {
+				this.connectionError.emit(cause instanceof Error ? cause : new Error(String(cause)));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartgpuConnectChartsDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: ChartgpuConnectChartsDirective,
+		isStandalone: true,
+		selector: "[libChartgpuConnectCharts]",
+		inputs: {
+			charts: {
+				classPropertyName: "charts",
+				publicName: "libChartgpuConnectCharts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			syncOptions: {
+				classPropertyName: "syncOptions",
+				publicName: "syncOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { connectionError: "connectionError" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ChartgpuConnectChartsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[libChartgpuConnectCharts]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		charts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "libChartgpuConnectCharts",
+				required: false
+			}]
+		}],
+		syncOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "syncOptions",
+				required: false
+			}]
+		}],
+		connectionError: [{
+			type: i0.Output,
+			args: ["connectionError"]
+		}]
+	}
+});
 const INITIAL_STATE = {
-    adapter: null,
-    device: null,
-    pipelineCache: null,
-    error: null,
-    isReady: false,
+	adapter: null,
+	device: null,
+	pipelineCache: null,
+	error: null,
+	isReady: false
 };
-/**
- * Creates one shared WebGPU context and pipeline cache for charts in a dashboard.
- * The device is intentionally not destroyed with the service so charts can share it
- * for the lifetime of the application.
- */
-class ChartgpuGPUContextService {
-    state = signal(INITIAL_STATE, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    context = computed(() => {
-        const state = this.state();
-        if (!state.adapter || !state.device || !state.pipelineCache) {
-            return null;
-        }
-        return {
-            adapter: state.adapter,
-            device: state.device,
-            pipelineCache: state.pipelineCache,
-        };
-    }, ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
-    initialization;
-    initialize() {
-        if (!this.initialization) {
-            this.initialization = this.createContext();
-        }
-        return this.initialization;
-    }
-    async createContext() {
-        try {
-            if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
-                throw new Error('WebGPU not supported in this browser');
-            }
-            const gpu = navigator.gpu;
-            if (!gpu) {
-                throw new Error('WebGPU not supported in this browser');
-            }
-            const adapter = await gpu.requestAdapter({ powerPreference: 'high-performance' });
-            if (!adapter) {
-                const error = new Error('WebGPU is not available. No compatible GPUAdapter was found.');
-                const state = { ...INITIAL_STATE, error };
-                this.state.set(state);
-                return state;
-            }
-            const device = await adapter.requestDevice();
-            const pipelineCache = createPipelineCache(device);
-            const state = {
-                adapter,
-                device,
-                pipelineCache,
-                error: null,
-                isReady: true,
-            };
-            this.state.set(state);
-            return state;
-        }
-        catch (cause) {
-            const error = cause instanceof Error ? cause : new Error(String(cause));
-            const state = { ...INITIAL_STATE, error };
-            this.state.set(state);
-            return state;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartgpuGPUContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartgpuGPUContextService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ChartgpuGPUContextService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
+var ChartgpuGPUContextService = class ChartgpuGPUContextService {
+	state = signal(INITIAL_STATE, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	context = computed(() => {
+		const state = this.state();
+		if (!state.adapter || !state.device || !state.pipelineCache) return null;
+		return {
+			adapter: state.adapter,
+			device: state.device,
+			pipelineCache: state.pipelineCache
+		};
+	}, ...ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []);
+	initialization;
+	initialize() {
+		if (!this.initialization) this.initialization = this.createContext();
+		return this.initialization;
+	}
+	async createContext() {
+		try {
+			if (typeof navigator === "undefined" || !("gpu" in navigator)) throw new Error("WebGPU not supported in this browser");
+			const gpu = navigator.gpu;
+			if (!gpu) throw new Error("WebGPU not supported in this browser");
+			const adapter = await gpu.requestAdapter({ powerPreference: "high-performance" });
+			if (!adapter) {
+				const error = /* @__PURE__ */ new Error("WebGPU is not available. No compatible GPUAdapter was found.");
+				const state = {
+					...INITIAL_STATE,
+					error
+				};
+				this.state.set(state);
+				return state;
+			}
+			const device = await adapter.requestDevice();
+			const state = {
+				adapter,
+				device,
+				pipelineCache: createPipelineCache(device),
+				error: null,
+				isReady: true
+			};
+			this.state.set(state);
+			return state;
+		} catch (cause) {
+			const error = cause instanceof Error ? cause : new Error(String(cause));
+			const state = {
+				...INITIAL_STATE,
+				error
+			};
+			this.state.set(state);
+			return state;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartgpuGPUContextService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartgpuGPUContextService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ChartgpuGPUContextService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
 function provideChartGpuContext() {
-    return makeEnvironmentProviders([ChartgpuGPUContextService]);
+	return makeEnvironmentProviders([ChartgpuGPUContextService]);
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { ChartGpuAngularComponent, ChartgpuConnectChartsDirective, ChartgpuGPUContextService, provideChartGpuContext };
-//# sourceMappingURL=chartgpu-angular.mjs.map
+
+//# sourceMappingURL=chartgpu-angular.mjs.map