@arcfusionz/arc-analytic-ui 0.0.0

package/dist/lib/vega/useArcVega.js

@@ -0,0 +1,121 @@
+import { registerArcFormatters } from "./formatters.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { expressionFunction } from "vega";
+import { useVegaEmbed } from "react-vega";
+//#region src/lib/vega/useArcVega.ts
+registerArcFormatters(expressionFunction);
+/**
+* react-vega 8's `useVegaEmbed` plus the View API discipline the analytics
+* package needs: one embed per mount (a re-embed only when the structural spec
+* or the options change), and one `runAsync` per batch of data / size /
+* description / signal changes. Listeners and callbacks go through
+* latest-value refs, so they never go stale while the view lives; react-vega
+* finalizes the view on unmount and before every re-embed.
+*/
+function useArcVega(params) {
+	const { ref, spec, options, datasets, description, width, height, signals } = params;
+	const latest = useRef(params);
+	latest.current = params;
+	const applied = useRef({});
+	const baked = useRef({});
+	const bakeIntoSpec = useCallback((vgSpec) => {
+		const { datasets, description, width, height, signals } = latest.current;
+		const next = { ...vgSpec };
+		if (datasets && vgSpec.data) next.data = vgSpec.data.map((source) => source.name in datasets && !("source" in source) && !("url" in source) ? {
+			...source,
+			values: datasets[source.name]
+		} : source);
+		if (signals && vgSpec.signals) next.signals = vgSpec.signals.map((signal) => signal.name in signals ? {
+			...signal,
+			value: signals[signal.name]
+		} : signal);
+		if (description != null) next.description = description;
+		if (width != null) next.width = width;
+		if (height != null) next.height = height;
+		baked.current = {
+			datasets,
+			description,
+			width,
+			height,
+			signals
+		};
+		return next;
+	}, []);
+	const embedOptions = useMemo(() => {
+		const consumerPatch = options.patch;
+		const patch = (vgSpec) => bakeIntoSpec(typeof consumerPatch === "function" ? consumerPatch(vgSpec) : vgSpec);
+		return {
+			...options,
+			patch
+		};
+	}, [options, bakeIntoSpec]);
+	const handleEmbed = useCallback((result) => {
+		applied.current = baked.current;
+		baked.current = {};
+		const { onSignal, onEmbed } = latest.current;
+		if (onSignal) for (const name of Object.keys(onSignal)) result.view.addSignalListener(name, (_signalName, value) => {
+			latest.current.onSignal?.[name]?.(value);
+		});
+		onEmbed?.(result);
+	}, []);
+	const handleError = useCallback((error) => {
+		latest.current.onError?.(error);
+	}, []);
+	const result = useVegaEmbed({
+		ref,
+		spec,
+		options: embedOptions,
+		onEmbed: handleEmbed,
+		onError: handleError
+	});
+	useEffect(() => {
+		const view = result?.view;
+		if (!view) return;
+		const previous = applied.current;
+		let dirty = false;
+		if (datasets && datasets !== previous.datasets) {
+			const declared = new Set((result.vgSpec.data ?? []).map((source) => source.name));
+			for (const [name, rows] of Object.entries(datasets)) if (declared.has(name) && previous.datasets?.[name] !== rows) {
+				view.data(name, rows);
+				dirty = true;
+			}
+		}
+		if (description != null && description !== previous.description) {
+			view.description(description);
+			dirty = true;
+		}
+		if (width != null && width !== previous.width) {
+			view.width(width);
+			dirty = true;
+		}
+		if (height != null && height !== previous.height) {
+			view.height(height);
+			dirty = true;
+		}
+		if (signals && signals !== previous.signals) {
+			const declared = new Set((result.vgSpec.signals ?? []).map((signal) => signal.name));
+			for (const [name, value] of Object.entries(signals)) if (declared.has(name) && (!previous.signals || previous.signals[name] !== value)) {
+				view.signal(name, value);
+				dirty = true;
+			}
+		}
+		applied.current = {
+			datasets,
+			description,
+			width,
+			height,
+			signals
+		};
+		if (dirty) view.runAsync();
+	}, [
+		result,
+		datasets,
+		description,
+		width,
+		height,
+		signals
+	]);
+	return result;
+}
+//#endregion
+export { useArcVega };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@arcfusionz/arc-analytic-ui",
+  "version": "0.0.0",
+  "description": "ArcFusion analytics UI components — Vega-Lite charts framed by Arc primitives",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arcfusion-ai/arc-components.git",
+    "directory": "packages/analytic-ui"
+  },
+  "homepage": "https://github.com/arcfusion-ai/arc-components#readme",
+  "bugs": "https://github.com/arcfusion-ai/arc-components/issues",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsdown",
+    "test": "tsx --test src/lib/vega/formatters.test.ts src/lib/vega/time.test.ts src/components/AnomalyCard/AnomalyCard.test.ts src/components/ChartCard/ChartCard.test.ts src/components/ComparisonCard/ComparisonCard.test.ts src/components/ForecastCard/ForecastCard.test.ts src/components/HighlightCard/HighlightCard.test.ts src/components/InsightCard/InsightCard.test.ts src/components/MetricCard/MetricCard.test.ts src/components/ProfileCard/ProfileCard.test.ts src/components/ProgressCard/ProgressCard.test.ts src/components/ReportCard/ReportCard.test.ts src/components/SankeyCard/SankeyCard.test.ts src/components/StatusCard/StatusCard.test.ts src/components/TableCard/TableCard.test.ts src/components/TargetCard/TargetCard.test.ts src/components/TreeCard/TreeCard.test.ts src/components/TrendCard/TrendCard.test.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@arcfusionz/arc-primitive-ui": "workspace:^",
+    "react-vega": "catalog:",
+    "vega": "catalog:",
+    "vega-embed": "catalog:",
+    "vega-lite": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tsdown": "^0.22.12",
+    "tsx": "^4.21.0",
+    "typescript": "^5.7.0"
+  }
+}