vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/model/tooltip.mjs

@@ -0,0 +1,383 @@
+import { getValueByDataKey } from "../core/data.mjs";
+import { createRegistry } from "./registry.mjs";
+import { warn } from "../utils/log.mjs";
+import { tooltipCoordinate, tooltipPayload } from "../core/tooltip.mjs";
+import { computed, inject, provide, shallowRef, toRaw, watch } from "vue";
+import { sortBy } from "es-toolkit/compat";
+//#region src/model/tooltip.ts
+var noInteraction = Object.freeze({
+	active: false,
+	index: null,
+	dataKey: void 0,
+	coordinate: void 0
+});
+var controllerKey = Symbol("vccs-tooltip-controller");
+function provideTooltipController(controller) {
+	provide(controllerKey, controller);
+	provideTooltipSource(controller.source);
+}
+function useTooltipController() {
+	const controller = inject(controllerKey);
+	if (!controller) throw new Error("vccs: selection requires a tooltip controller.");
+	return controller;
+}
+var sourceKey = Symbol("vccs-tooltip-source");
+var entryKey = Symbol("vccs-tooltip-entry");
+function provideTooltipSource(source) {
+	provide(sourceKey, source);
+}
+function useTooltipSource() {
+	const source = inject(sourceKey);
+	if (!source) throw new Error("vccs: Tooltip requires a tooltip source.");
+	return source;
+}
+function provideTooltipEntry(entry) {
+	provide(entryKey, entry);
+}
+function useTooltipEntry() {
+	return inject(entryKey, void 0);
+}
+function createTooltip(inputs) {
+	const entries = createRegistry();
+	const bindings = createRegistry();
+	const selection = shallowRef();
+	const announcement = shallowRef("");
+	watch(() => bindings.entries.value.length, (count) => {
+		if (count === 0) announcement.value = "";
+	});
+	const settings = computed(() => bindings.entries.value[0]?.settings ?? {
+		shared: void 0,
+		trigger: "hover",
+		axisId: 0,
+		active: void 0,
+		defaultIndex: void 0
+	});
+	const rootModels = computed(() => entries.entries.value.flatMap((entry) => entry.model?.root ? [entry.model] : []));
+	const controlledBindings = computed(() => bindings.entries.value.filter((binding) => binding.settings.activeIndex !== void 0));
+	let warnedOwners = false;
+	watch(() => controlledBindings.value.length, (count) => {
+		if (count > 1 && !warnedOwners) {
+			warnedOwners = true;
+			warn(false, "vccs: only one Tooltip per chart may control activeIndex; the first controlled Tooltip wins.");
+		}
+	});
+	const controlled = computed(() => {
+		const root = rootModels.value.find((model) => model.index() !== void 0);
+		return root ? root.index() : controlledBindings.value[0]?.settings.activeIndex;
+	});
+	const eventType = computed(() => {
+		const options = inputs.options();
+		const shared = settings.value.shared;
+		const requested = shared === void 0 ? options.defaultTooltipEventType : shared ? "axis" : "item";
+		return options.validateTooltipEventTypes?.includes(requested) ? requested : options.defaultTooltipEventType;
+	});
+	const axisType = computed(() => {
+		const layout = inputs.layout();
+		return layout === "horizontal" ? "xAxis" : layout === "vertical" ? "yAxis" : layout === "centric" ? "angleAxis" : "radiusAxis";
+	});
+	const axis = computed(() => inputs.axis?.(axisType.value, settings.value.axisId));
+	const ticks = computed(() => axis.value?.tooltipTicks.value);
+	const orderedTicks = computed(() => sortBy(ticks.value ?? [], (tick) => tick.coordinate));
+	const displayedData = computed(() => axis.value?.displayedData.value ?? []);
+	function rowIdentity(row, key) {
+		const source = Array.isArray(row) ? row[0]?.payload : row;
+		const raw = source && typeof source === "object" && "payload" in source ? source.payload : source;
+		return (key === void 0 ? void 0 : getValueByDataKey(source, key) ?? getValueByDataKey(raw, key)) ?? toRaw(raw);
+	}
+	function identities(rows, key) {
+		const values = rows.map((row) => rowIdentity(row, key));
+		const counts = /* @__PURE__ */ new Map();
+		for (const value of values) counts.set(value, (counts.get(value) ?? 0) + 1);
+		return values.map((value, index) => counts.get(value) === 1 ? value : toRaw(rows[index]));
+	}
+	function payloadAt(configuration, index, payloadKey) {
+		const data = configuration.dataDefinedOnItem;
+		return payloadKey === void 0 ? Array.isArray(data) ? data[index] : void 0 : inputs.options().tooltipPayloadSearcher?.(data, payloadKey);
+	}
+	const axisTargets = computed(() => {
+		if (!entries.entries.value.some((entry) => !entry.settings.hide)) return [];
+		const identity = identities(displayedData.value, axis.value?.settings.value.dataKey);
+		return (ticks.value ?? []).map((tick, index) => ({
+			index,
+			localIndex: index,
+			identity: identity[index]
+		}));
+	});
+	const itemTargets = computed(() => entries.registrations.value.flatMap((entry) => {
+		const configuration = entry.value;
+		if (!configuration || configuration.settings.hide) return [];
+		if (configuration.keyboardItems) {
+			const identity = identities(configuration.keyboardItems.map((item) => item.identity ?? payloadAt(configuration, item.index, item.payloadKey)), configuration.settings.nameKey);
+			return configuration.keyboardItems.map((item, localIndex) => ({
+				...item,
+				entry,
+				localIndex,
+				identity: identity[localIndex]
+			}));
+		}
+		const data = configuration.dataDefinedOnItem == null ? displayedData.value : inputs.dataRange.tooltipData(configuration.dataDefinedOnItem);
+		if (!Array.isArray(data)) return [];
+		const identity = identities(data, configuration.settings.nameKey ?? axis.value?.settings.value.dataKey);
+		return data.map((row, localIndex) => ({
+			entry,
+			localIndex,
+			index: localIndex,
+			identity: identity[localIndex],
+			coordinate: configuration.positions?.[localIndex]
+		}));
+	}));
+	const pointerTargets = computed(() => entries.registrations.value.flatMap((entry) => {
+		const configuration = entry.value;
+		if (!configuration || configuration.settings.hide) return [];
+		return (configuration.pointerItems ?? []).map((item, localIndex) => ({
+			...item,
+			entry,
+			localIndex,
+			identity: rowIdentity(item.identity ?? payloadAt(configuration, item.index, item.payloadKey), configuration.settings.nameKey)
+		}));
+	}));
+	const targets = computed(() => eventType.value === "axis" ? axisTargets.value : itemTargets.value);
+	const lookup = computed(() => {
+		const byIndex = /* @__PURE__ */ new Map();
+		const byIdentity = /* @__PURE__ */ new Map();
+		const anyByIdentity = /* @__PURE__ */ new Map();
+		for (const item of [...itemTargets.value, ...pointerTargets.value]) {
+			if (item.entry?.value) setFirst(inner(byIndex, item.entry.value), item.index, item);
+			setFirst(inner(byIdentity, item.entry), item.identity, item);
+			setFirst(anyByIdentity, item.identity, item);
+		}
+		const axisByIdentity = /* @__PURE__ */ new Map();
+		for (const item of axisTargets.value) setFirst(axisByIdentity, item.identity, item);
+		return {
+			byIndex,
+			byIdentity,
+			anyByIdentity,
+			axisByIdentity
+		};
+	});
+	const positionOf = computed(() => new Map(targets.value.map((target, position) => [target, position])));
+	function inner(map, key) {
+		let found = map.get(key);
+		if (!found) map.set(key, found = /* @__PURE__ */ new Map());
+		return found;
+	}
+	function setFirst(map, key, target) {
+		if (!map.has(key)) map.set(key, target);
+	}
+	/** The item or pointer target with this series and identity. */
+	function itemTarget(wanted) {
+		return lookup.value.byIdentity.get(wanted.entry)?.get(wanted.identity);
+	}
+	function positionIn(candidate) {
+		return (candidate ? positionOf.value.get(candidate) : void 0) ?? null;
+	}
+	function positional(index, candidates = targets.value) {
+		return index === void 0 || index === null || !Number.isSafeInteger(index) || index < 0 ? void 0 : candidates[index];
+	}
+	function sameTarget(a, b) {
+		return a.entry === b.entry && a.identity === b.identity;
+	}
+	const target = computed(() => {
+		if (controlled.value !== void 0) return positional(controlled.value);
+		const current = selection.value;
+		if (current) {
+			const { identity, entry } = current.target;
+			const candidate = eventType.value === "axis" ? lookup.value.axisByIdentity.get(identity) : entry ? itemTarget(current.target) : lookup.value.anyByIdentity.get(identity);
+			const modelIndex = candidate?.entry?.value?.model?.index();
+			if (modelIndex !== void 0) return positional(modelIndex, itemTargets.value.filter((item) => item.entry === candidate?.entry));
+			return candidate;
+		}
+		return current === null ? void 0 : positional(settings.value.defaultIndex);
+	});
+	const index = computed(() => positionIn(target.value));
+	const requestedIndex = computed(() => {
+		const intent = selection.value;
+		if (!intent) return null;
+		return positionIn(eventType.value === "axis" ? intent.target.entry === void 0 ? lookup.value.axisByIdentity.get(intent.target.identity) : void 0 : itemTarget(intent.target));
+	});
+	const active = computed(() => {
+		if (!target.value) return false;
+		if (controlled.value !== void 0) return true;
+		const channel = selection.value?.channel;
+		if ((channel === "hover" || channel === "click") && channel !== settings.value.trigger) return false;
+		return settings.value.active ?? selection.value?.active ?? settings.value.defaultIndex != null;
+	});
+	const label = computed(() => {
+		const value = eventType.value === "axis" && index.value !== null ? ticks.value?.[index.value]?.value : void 0;
+		return value == null ? void 0 : String(value);
+	});
+	function coordinateFor(candidate, fallback) {
+		if (!candidate) return void 0;
+		return tooltipCoordinate(eventType.value, inputs.layout(), ticks.value?.[candidate.localIndex], inputs.size(), inputs.offset(), candidate.coordinate, fallback);
+	}
+	const coordinate = computed(() => coordinateFor(target.value, controlled.value !== void 0 ? void 0 : selection.value?.coordinate));
+	const source = {
+		active,
+		index,
+		label,
+		payload: computed(() => {
+			const shown = eventType.value === "item" ? target.value?.entry?.value ? [target.value.entry.value] : [] : entries.entries.value;
+			return tooltipPayload(shown.map((entry) => ({
+				...entry,
+				dataDefinedOnItem: inputs.dataRange.tooltipData(entry.dataDefinedOnItem)
+			})), target.value?.index ?? null, axis.value?.settings.value, label.value, inputs.options().tooltipPayloadSearcher, eventType.value, target.value?.payloadKey) ?? [];
+		}),
+		coordinate
+	};
+	function notify(index) {
+		for (const binding of bindings.entries.value) binding.request(index);
+		for (const model of rootModels.value) model.request(index);
+	}
+	let lastRequest;
+	function request(next, target) {
+		const owner = controlled.value;
+		if (next === owner || lastRequest?.index === next && Object.is(lastRequest.owner, owner) && (next === null || target && lastRequest.target && sameTarget(target, lastRequest.target))) return;
+		lastRequest = {
+			index: next,
+			owner,
+			target
+		};
+		notify(next);
+	}
+	function findTarget(type, input) {
+		if (type === "axis") return positional(input.index, axisTargets.value);
+		if (input.index === null || !("configuration" in input)) return void 0;
+		return input.configuration && lookup.value.byIndex.get(input.configuration)?.get(input.index);
+	}
+	let lastSeriesRequest;
+	function requestSeries(candidate, isActive) {
+		const entry = candidate?.entry;
+		const model = entry?.value?.model;
+		if (!entry || !model || model.root) return;
+		const next = isActive ? candidate.localIndex : null;
+		const owner = model.index();
+		if (next === owner || lastSeriesRequest?.entry === entry && lastSeriesRequest.index === next && Object.is(lastSeriesRequest.owner, owner) && (next === null || sameTarget(candidate, lastSeriesRequest.target))) return;
+		lastSeriesRequest = {
+			entry,
+			index: next,
+			owner,
+			target: candidate
+		};
+		model.request(next);
+	}
+	function activate(channel, input) {
+		const type = input.type ?? eventType.value;
+		const isActive = input.active ?? true;
+		if ((channel === "hover" || channel === "click") && channel !== settings.value.trigger) return;
+		const next = findTarget(type, input);
+		if (type !== eventType.value) {
+			requestSeries(next, isActive);
+			return;
+		}
+		request(isActive ? positionIn(next) : null, next);
+		requestSeries(next, isActive);
+		if (!next) {
+			selection.value = null;
+			return;
+		}
+		selection.value = {
+			target: {
+				entry: next.entry,
+				identity: next.identity
+			},
+			requestedIndex: next.index,
+			channel,
+			active: isActive,
+			coordinate: input.coordinate
+		};
+	}
+	function clear(channel, scope) {
+		if (channel === "hover" && settings.value.trigger !== "hover") return;
+		if (scope === "item" && selection.value?.target.entry === void 0) return;
+		request(null);
+		if (channel === "keyboard") {
+			selection.value = null;
+			return;
+		}
+		const intent = selection.value;
+		requestSeries(intent ? itemTarget(intent.target) : void 0, false);
+		if (controlled.value === void 0 && selection.value) selection.value = {
+			...selection.value,
+			active: false
+		};
+	}
+	function activeIndexFor(entry) {
+		return computed(() => {
+			if (controlled.value === void 0 && entry.value?.model?.index() !== void 0) return positional(entry.value.model.index(), itemTargets.value.filter((item) => item.entry === entry))?.localIndex ?? null;
+			if (!active.value) return null;
+			return eventType.value === "axis" || target.value?.entry === entry ? target.value?.localIndex ?? null : null;
+		});
+	}
+	const invalid = /* @__PURE__ */ new WeakMap();
+	function validate(owner, input, candidates, emit) {
+		if (input === void 0 || input === null || positional(input, candidates)) {
+			invalid.delete(owner);
+			return;
+		}
+		const order = candidates;
+		const previous = invalid.get(owner);
+		if (previous && Object.is(previous.input, input) && order.length === previous.order.length && order.every((item, i) => sameTarget(item, previous.order[i]))) return;
+		invalid.set(owner, {
+			input,
+			order
+		});
+		emit(null);
+	}
+	watch(() => {
+		const owners = entries.registrations.value.map((entry) => ({
+			entry,
+			index: entry.value?.model?.index()
+		}));
+		return {
+			index: controlled.value,
+			targets: targets.value,
+			owners
+		};
+	}, ({ index, targets, owners }) => {
+		validate(bindings, index, targets, () => notify(null));
+		if (index !== void 0) return;
+		for (const owner of owners) validate(owner.entry, owner.index, itemTargets.value.filter((item) => item.entry === owner.entry), () => owner.entry.value?.model?.request(null));
+	}, { flush: "post" });
+	watch([targets, pointerTargets], () => {
+		if (controlled.value === void 0 && selection.value && !target.value) {
+			request(null);
+			selection.value = null;
+		}
+	}, { flush: "post" });
+	const interaction = computed(() => ({
+		active: active.value,
+		index: target.value?.index ?? null,
+		configuration: target.value?.entry?.value,
+		dataKey: target.value?.entry?.value?.settings.dataKey,
+		coordinate: coordinate.value
+	}));
+	return {
+		source,
+		bindings,
+		settings,
+		eventType,
+		axisType,
+		axis,
+		ticks,
+		orderedTicks,
+		displayedData,
+		targets,
+		target,
+		controlled,
+		requestedIndex,
+		entries,
+		announcement,
+		keyboardInteraction: computed(() => selection.value?.channel === "keyboard" ? {
+			...interaction.value,
+			index: selection.value.requestedIndex,
+			active: selection.value.active
+		} : noInteraction),
+		receivingSynchronisation: computed(() => selection.value?.channel === "sync"),
+		activeIndexFor,
+		coordinateFor,
+		activate,
+		clear
+	};
+}
+//#endregion
+export { createTooltip, provideTooltipController, provideTooltipEntry, useTooltipController, useTooltipEntry, useTooltipSource };

package/dist/es/nuxt.mjs

@@ -0,0 +1,28 @@
+import { componentNames, composableNames } from "./componentNames.mjs";
+import { addComponent, addImports, defineNuxtModule, extendViteConfig, getNuxtVersion, isNuxtMajorVersion } from "@nuxt/kit";
+//#region src/nuxt.ts
+var module = defineNuxtModule({
+	meta: {
+		name: "vccs",
+		configKey: "vccs"
+	},
+	defaults: { prefix: "" },
+	setup(options, nuxt) {
+		if (isNuxtMajorVersion(3, nuxt)) throw new Error(`vccs/nuxt needs Nuxt 4 or later, found ${getNuxtVersion(nuxt)}. On Nuxt 3, import components from 'vccs' or use 'vccs/resolver'.`);
+		for (const name of componentNames) addComponent({
+			name: options.prefix + name,
+			export: name,
+			filePath: "vccs"
+		});
+		addImports(composableNames.map((name) => ({
+			name,
+			from: "vccs"
+		})));
+		extendViteConfig((config) => {
+			config.optimizeDeps ??= {};
+			(config.optimizeDeps.include ??= []).push("vccs > decimal.js-light");
+		});
+	}
+});
+//#endregion
+export { module as default };