vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/components/tooltip/Cursor.mjs

@@ -0,0 +1,118 @@
+import { useChartPresentation } from "../../model/presentation.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { Curve } from "../../shape/Curve.mjs";
+import { Rectangle } from "../../shape/Rectangle.mjs";
+import { Sector } from "../../shape/Sector.mjs";
+import { Cross } from "../../shape/Cross.mjs";
+import { isPolarCoordinate } from "../../types/base.mjs";
+import { getCursorPoints } from "../utils.mjs";
+import { Teleport, computed, createVNode, defineComponent, isVNode } from "vue";
+//#region src/components/tooltip/Cursor.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Cursor = /* @__PURE__ */ defineComponent({
+	name: "Cursor",
+	props: {
+		cursor: [Boolean, Object],
+		cursorSlot: Function,
+		tooltipEventType: String,
+		coordinate: Object,
+		payload: Array,
+		index: Number
+	},
+	setup(props) {
+		const presentation = useChartPresentation();
+		const offset = presentation.offset;
+		const layout = presentation.layout;
+		const capabilities = presentation.capabilities;
+		const tooltipAxisBandSize = presentation.bandSize;
+		const cursorLayerRef = useChartLayer("cursor");
+		const points = computed(() => getCursorPoints(layout.value, props.coordinate, offset.value));
+		return () => {
+			if (!props.cursor || !props.coordinate) return null;
+			const crossCursor = capabilities.value.cursor === "cross";
+			if (!crossCursor && props.tooltipEventType !== "axis") return null;
+			const cursor = props.cursor;
+			const payloadIndex = props.index === void 0 ? void 0 : String(props.index);
+			const cursorSvgProps = typeof cursor === "object" ? cursor : {};
+			let cursorElement;
+			if (crossCursor) {
+				const at = props.coordinate;
+				const { offset: _offset, ...coord } = isPolarCoordinate(at) ? {
+					x: at.x,
+					y: at.y,
+					offset: void 0
+				} : at;
+				const crossProps = {
+					stroke: "var(--v-charts-cursor, #ccc)",
+					fill: "none",
+					...offset.value,
+					...coord,
+					class: "v-charts-tooltip-cursor",
+					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex,
+					...cursorSvgProps
+				};
+				cursorElement = props.cursorSlot ? props.cursorSlot(crossProps) : createVNode(Cross, crossProps, null);
+			} else if (capabilities.value.cursor === "rect") {
+				const bandSize = tooltipAxisBandSize.value ?? 0;
+				const halfSize = bandSize / 2;
+				const coord = props.coordinate;
+				const off = offset.value;
+				const rectProps = {
+					...off,
+					stroke: "none",
+					fill: "var(--v-charts-cursor, #ccc)",
+					x: layout.value === "horizontal" ? coord.x - halfSize : off.left + .5,
+					y: layout.value === "horizontal" ? off.top + .5 : coord.y - halfSize,
+					width: layout.value === "horizontal" ? bandSize : off.width - 1,
+					height: layout.value === "horizontal" ? off.height - 1 : bandSize,
+					class: "v-charts-tooltip-cursor",
+					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex,
+					...cursorSvgProps
+				};
+				cursorElement = props.cursorSlot ? props.cursorSlot(rectProps) : createVNode(Rectangle, rectProps, null);
+			} else if (layout.value === "radial" && props.coordinate && isPolarCoordinate(props.coordinate)) {
+				const radialPoints = points.value;
+				const sectorProps = {
+					stroke: "var(--v-charts-cursor, #ccc)",
+					...offset.value,
+					cx: radialPoints.cx,
+					cy: radialPoints.cy,
+					startAngle: radialPoints.startAngle,
+					endAngle: radialPoints.endAngle,
+					innerRadius: radialPoints.radius,
+					outerRadius: radialPoints.radius,
+					fill: "none",
+					class: "v-charts-tooltip-cursor",
+					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex,
+					...cursorSvgProps
+				};
+				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
+			} else {
+				const cursorProps = {
+					stroke: "var(--v-charts-cursor, #ccc)",
+					...offset.value,
+					layout: layout.value,
+					points: points.value,
+					class: ["v-charts-tooltip-cursor"],
+					style: { pointerEvents: "none" },
+					payload: props.payload ?? [],
+					payloadIndex,
+					...cursorSvgProps
+				};
+				cursorElement = props.cursorSlot ? props.cursorSlot(cursorProps) : createVNode(Curve, cursorProps, null);
+			}
+			if (cursorLayerRef?.value) return createVNode(Teleport, { "to": cursorLayerRef.value }, _isSlot(cursorElement) ? cursorElement : { default: () => [cursorElement] });
+			return cursorElement;
+		};
+	}
+});
+//#endregion
+export { Cursor };

package/dist/es/components/tooltip/DefaultTooltipContent.mjs

@@ -0,0 +1,107 @@
+import { isNumOrStr } from "../../utils/validate.mjs";
+import { createVNode, defineComponent, isVNode } from "vue";
+import { sortBy } from "es-toolkit/compat";
+//#region src/components/tooltip/DefaultTooltipContent.tsx
+function defaultFormatter(value) {
+	return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(" ~ ") : value;
+}
+/**
+* What the default content can print: text, numbers, booleans and nodes. Other values (objects
+* in messy data) print nothing instead of "[object Object]" or, for objects without a
+* prototype, a crash.
+*/
+function printable(value) {
+	if (value == null || typeof value !== "object" || isVNode(value)) return value;
+	return Array.isArray(value) ? value.map(printable) : void 0;
+}
+var DefaultTooltipContent = /* @__PURE__ */ defineComponent({
+	name: "DefaultTooltipContent",
+	inheritAttrs: false,
+	props: {
+		label: [String, Number],
+		payload: Array,
+		active: Boolean,
+		separator: {
+			type: String,
+			default: " : "
+		},
+		contentStyle: Object,
+		labelStyle: Object,
+		itemStyle: Object,
+		itemSorter: [Function, String],
+		formatter: Function,
+		labelFormatter: Function
+	},
+	setup(props) {
+		return () => {
+			if (!props.active || !props.payload?.length) return null;
+			const { contentStyle, labelStyle, itemStyle } = props;
+			const finalStyle = {
+				margin: 0,
+				padding: "10px",
+				backgroundColor: "var(--v-charts-tooltip-background, #fff)",
+				color: "var(--v-charts-tooltip-foreground, #000)",
+				border: "1px solid var(--v-charts-tooltip-border, #ccc)",
+				whiteSpace: "nowrap",
+				...contentStyle
+			};
+			const finalLabelStyle = {
+				margin: 0,
+				...labelStyle
+			};
+			const { itemSorter, payload, formatter } = props;
+			const sortedPayload = itemSorter ? sortBy(payload, itemSorter) : payload;
+			const label = props.labelFormatter ? props.labelFormatter(props.label, payload) : props.label;
+			const hasLabel = props.labelFormatter ? label != null : !!props.label;
+			return createVNode("div", {
+				"class": "v-charts-tooltip-content",
+				"style": finalStyle
+			}, [hasLabel && createVNode("div", {
+				"class": "v-charts-tooltip-label",
+				"style": finalLabelStyle
+			}, [printable(label)]), createVNode("div", { "class": "v-charts-tooltip-list" }, [sortedPayload.map((entry, index) => {
+				const finalItemStyle = {
+					display: "block",
+					paddingTop: 4,
+					paddingBottom: 4,
+					color: "var(--v-charts-tooltip-foreground, #000)",
+					...itemStyle
+				};
+				const finalFormatter = formatter || entry.formatter || defaultFormatter;
+				const { value, name } = entry;
+				let finalValue = value;
+				let finalName = name;
+				if (finalFormatter) {
+					const formatted = finalFormatter(value, name, entry, index, payload);
+					if (Array.isArray(formatted)) [finalValue, finalName] = formatted;
+					else if (formatted != null) finalValue = formatted;
+					else return null;
+				}
+				return createVNode("div", {
+					"key": index,
+					"class": "v-charts-tooltip-item",
+					"style": finalItemStyle
+				}, [
+					createVNode("span", {
+						"class": "v-charts-tooltip-swatch",
+						"aria-hidden": "true",
+						"style": {
+							display: "inline-block",
+							width: "8px",
+							height: "8px",
+							borderRadius: "2px",
+							marginRight: "4px",
+							background: entry.color
+						}
+					}, null),
+					createVNode("span", { "class": "v-charts-tooltip-item-name" }, [printable(entry.name)]),
+					createVNode("span", { "class": "v-charts-tooltip-separator" }, [props.separator]),
+					createVNode("span", { "class": "v-charts-tooltip-item-value" }, [printable(finalValue)]),
+					createVNode("span", { "class": "v-charts-tooltip-item-unit" }, [entry.unit || ""])
+				]);
+			})])]);
+		};
+	}
+});
+//#endregion
+export { DefaultTooltipContent };

package/dist/es/components/tooltip/Tooltip.mjs

@@ -0,0 +1,229 @@
+import { useChartPresentation } from "../../model/presentation.mjs";
+import { useTooltipController, useTooltipSource } from "../../model/tooltip.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { useTooltipChartSynchronisation } from "../../events/sync.mjs";
+import { DefaultTooltipContent } from "./DefaultTooltipContent.mjs";
+import { TooltipBoundingBox } from "./TooltipBoundingBox.mjs";
+import { Cursor } from "./Cursor.mjs";
+import { Fragment, Teleport, computed, createVNode, defineComponent, watch } from "vue";
+import { uniqBy } from "es-toolkit/compat";
+import { useTimeoutFn } from "@vueuse/core";
+//#region src/components/tooltip/Tooltip.tsx
+function defaultUniqBy(entry) {
+	return entry.dataKey;
+}
+function getUniqPayload(payload, option, defaultUniqBy) {
+	if (option === true) return uniqBy(payload, defaultUniqBy);
+	if (typeof option === "function") return uniqBy(payload, option);
+	return payload;
+}
+var Tooltip = /* @__PURE__ */ defineComponent({
+	name: "Tooltip",
+	emits: { "update:activeIndex": (_index) => true },
+	props: {
+		/**
+		* If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically.
+		* If false, then Tooltip is never displayed.
+		* If active is undefined, Recharts will control when the Tooltip displays.
+		*/
+		active: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* If true, then Tooltip will show information about hidden series (defaults to false).
+		*/
+		includeHidden: Boolean,
+		formatter: Function,
+		labelFormatter: Function,
+		allowEscapeViewBox: {
+			type: Object,
+			default: () => ({
+				x: false,
+				y: false
+			})
+		},
+		cursor: {
+			type: [Boolean, Object],
+			default: true
+		},
+		filterNull: {
+			type: Boolean,
+			default: true
+		},
+		activeIndex: {
+			type: Number,
+			default: void 0
+		},
+		defaultIndex: Number,
+		isAnimationActive: {
+			type: Boolean,
+			default: true
+		},
+		transition: {
+			type: Object,
+			default: void 0
+		},
+		offset: {
+			type: Number,
+			default: 10
+		},
+		payloadUniqBy: [Boolean, Function],
+		/**
+		* The selector or element that receives the tooltip, as with Teleport.
+		*/
+		to: {
+			type: [String, Object],
+			default: void 0
+		},
+		position: Object,
+		reverseDirection: {
+			type: Object,
+			default: () => ({
+				x: false,
+				y: false
+			})
+		},
+		/**
+		* If true, tooltip will appear on top of all bars on an axis tick.
+		* If false, tooltip will appear on individual bars.
+		*/
+		shared: {
+			type: [Boolean, void 0],
+			default: void 0
+		},
+		/**
+		* If `hover` then the Tooltip shows on mouse enter and hides on mouse leave.
+		* If `click` then the Tooltip shows after clicking and stays active.
+		*/
+		trigger: {
+			type: String,
+			default: "hover"
+		},
+		style: {
+			type: Object,
+			default: () => ({})
+		},
+		/**
+		* Tooltip axis ID
+		*/
+		axisId: {
+			type: [String, Number],
+			default: 0
+		},
+		contentStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		itemStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		labelStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		/** Sort rows. By default they keep the order of the series. */
+		itemSorter: {
+			type: [String, Function],
+			default: void 0
+		},
+		separator: {
+			type: String,
+			default: " : "
+		}
+	},
+	slots: Object,
+	setup(props, { slots, emit }) {
+		const tooltip = useTooltipController();
+		const source = useTooltipSource();
+		const binding = computed(() => ({
+			settings: {
+				activeIndex: props.activeIndex,
+				shared: props.shared,
+				trigger: props.trigger,
+				axisId: props.axisId,
+				active: props.active,
+				defaultIndex: props.defaultIndex
+			},
+			request: (index) => emit("update:activeIndex", index)
+		}));
+		tooltip.bindings.register(binding);
+		const ownsInteraction = computed(() => tooltip.bindings.registrations.value[0] === binding);
+		const presentation = useChartPresentation();
+		const viewBox = presentation.viewBox;
+		const accessibilityLayer = presentation.accessibility;
+		const tooltipEventType = tooltip.eventType;
+		const coordinate = source.coordinate;
+		const payload = source.payload;
+		const tooltipPortalFromContext = useChartLayer("portal");
+		const tooltipPortal = computed(() => props.to ?? tooltipPortalFromContext?.value);
+		const finalIsActive = source.active;
+		const finalLabel = source.label;
+		const emptyPayload = [];
+		const finalPayload = computed(() => {
+			if (!finalIsActive.value) return emptyPayload;
+			let result = payload.value ?? emptyPayload;
+			if (props.filterNull && result.length > 0) result = getUniqPayload(result.filter((entry) => entry.value != null && (entry.hide !== true || props.includeHidden)), props.payloadUniqBy, defaultUniqBy);
+			return result;
+		});
+		const announcement = useTimeoutFn(() => {
+			if (tooltip.controlled.value !== void 0 && source.index.value !== tooltip.requestedIndex.value) return;
+			const entries = finalPayload.value.flatMap((entry, position, payload) => {
+				const formatter = props.formatter ?? entry.formatter;
+				const formatted = formatter ? formatter(entry.value, entry.name, entry, position, payload) : entry.value;
+				if (formatted == null) return [];
+				const [value, name] = formatter && Array.isArray(formatted) ? formatted : [Array.isArray(formatted) ? formatted.join(" ~ ") : formatted, entry.name];
+				return [`${name ?? ""} ${value ?? ""}`.trim()];
+			});
+			if (entries.length) tooltip.announcement.value = finalLabel.value == null ? entries.join(", ") : `${finalLabel.value}: ${entries.join(", ")}`;
+		}, 150, { immediate: false });
+		watch([
+			ownsInteraction,
+			() => tooltip.keyboardInteraction.value.active,
+			() => tooltip.controlled.value !== void 0 ? tooltip.controlled.value : tooltip.keyboardInteraction.value.index,
+			() => tooltip.keyboardInteraction.value.index,
+			() => tooltip.keyboardInteraction.value.configuration
+		], ([owner, active, index], _, cleanup) => {
+			announcement.stop();
+			if (!owner || !accessibilityLayer.value || !active || index == null) return;
+			announcement.start();
+			cleanup(announcement.stop);
+		}, { flush: "post" });
+		const hasPayload = computed(() => finalPayload.value.length > 0);
+		const contentProps = computed(() => ({
+			...props,
+			payload: finalPayload.value,
+			label: finalLabel.value,
+			active: finalIsActive.value,
+			coordinate: coordinate.value,
+			accessibilityLayer: accessibilityLayer.value
+		}));
+		useTooltipChartSynchronisation(source, () => ownsInteraction.value);
+		return () => {
+			if (!tooltipPortal.value) return null;
+			return createVNode(Fragment, null, [createVNode("foreignObject", null, [createVNode(Teleport, { "to": tooltipPortal.value }, { default: () => [createVNode(TooltipBoundingBox, {
+				"allowEscapeViewBox": props.allowEscapeViewBox,
+				"isAnimationActive": props.isAnimationActive,
+				"transition": props.transition,
+				"active": finalIsActive.value,
+				"coordinate": coordinate.value,
+				"hasPayload": hasPayload.value,
+				"offset": props.offset,
+				"position": props.position,
+				"reverseDirection": props.reverseDirection,
+				"viewBox": viewBox.value,
+				"style": props.style
+			}, { default: () => [slots.content ? slots.content(contentProps.value) : createVNode(DefaultTooltipContent, contentProps.value, null)] })] })]), finalIsActive.value && createVNode(Cursor, {
+				"cursor": props.cursor,
+				"cursorSlot": slots.cursor,
+				"tooltipEventType": tooltipEventType.value,
+				"coordinate": coordinate.value,
+				"payload": payload.value,
+				"index": tooltip.target.value?.index
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { Tooltip };

package/dist/es/components/tooltip/TooltipBoundingBox.mjs

@@ -0,0 +1,187 @@
+import { useReducedMotion } from "../../animation/useReducedMotion.mjs";
+import { motionTokens } from "../../animation/motion.mjs";
+import { getTooltipTranslate } from "../../utils/tooltip/translate.mjs";
+import { computed, createVNode, defineComponent, onScopeDispose, reactive, ref, watch, watchEffect, watchPostEffect } from "vue";
+import { useMagicKeys, useResizeObserver } from "@vueuse/core";
+import { animate, useSpring } from "motion-v";
+//#region src/components/tooltip/TooltipBoundingBox.tsx
+var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
+	name: "TooltipBoundingBox",
+	props: {
+		allowEscapeViewBox: Object,
+		isAnimationActive: Boolean,
+		transition: {
+			type: Object,
+			default: void 0
+		},
+		active: Boolean,
+		coordinate: Object,
+		hasPayload: Boolean,
+		offset: Number,
+		position: Object,
+		reverseDirection: Object,
+		viewBox: Object,
+		style: Object
+	},
+	setup(props, { slots }) {
+		const dismissed = ref(false);
+		const dismissedAtCoordinate = reactive({
+			x: 0,
+			y: 0
+		});
+		watchEffect(() => {
+			if (props.coordinate?.x !== dismissedAtCoordinate.x || props.coordinate?.y !== dismissedAtCoordinate.y) dismissed.value = false;
+		}, { flush: "post" });
+		const { escape } = useMagicKeys();
+		watch(escape, (v) => {
+			if (v) {
+				dismissed.value = true;
+				dismissedAtCoordinate.x = props.coordinate?.x ?? 0;
+				dismissedAtCoordinate.y = props.coordinate?.y ?? 0;
+			}
+		});
+		const el = ref();
+		const tooltipSize = ref({
+			width: 0,
+			height: 0
+		});
+		let preTransform;
+		const reducedMotion = useReducedMotion();
+		const spring = computed(() => ({
+			...motionTokens.follow,
+			...props.transition
+		}));
+		const x = useSpring(0, spring);
+		const y = useSpring(0, spring);
+		const writePosition = () => {
+			if (el.value) el.value.style.transform = `translate(${x.get()}px, ${y.get()}px)`;
+		};
+		const offX = x.on("change", writePosition);
+		const offY = y.on("change", writePosition);
+		const { isSupported } = useResizeObserver(el, ([entry]) => {
+			const box = entry.borderBoxSize?.[0];
+			tooltipSize.value = {
+				width: box?.inlineSize ?? entry.contentRect.width,
+				height: box?.blockSize ?? entry.contentRect.height
+			};
+		});
+		watch(el, (element) => {
+			if (element && !isSupported.value) {
+				const { width, height } = element.getBoundingClientRect();
+				tooltipSize.value = {
+					width,
+					height
+				};
+			}
+		}, { flush: "post" });
+		const visible = computed(() => !dismissed.value && props.active && props.hasPayload);
+		const present = ref(false);
+		let placed = false;
+		const content = ref();
+		let fade;
+		let cachedContent;
+		watchPostEffect(() => {
+			const element = content.value;
+			const show = visible.value;
+			if (!element) return;
+			fade?.stop();
+			if (show) present.value = true;
+			if (!props.isAnimationActive) {
+				element.style.opacity = show ? "1" : "0";
+				element.style.transform = "none";
+				present.value = !!show;
+				return;
+			}
+			const reduced = reducedMotion.value === "reduce";
+			fade = animate(element, {
+				opacity: show ? [0, 1] : 0,
+				...reduced ? {} : { scale: show ? [.96, 1] : 1 }
+			}, {
+				duration: motionTokens.feedback.duration,
+				ease: motionTokens.feedback.ease,
+				onComplete: () => {
+					if (!show) {
+						present.value = false;
+						placed = false;
+					}
+				}
+			});
+		});
+		onScopeDispose(() => {
+			offX();
+			offY();
+			x.destroy();
+			y.destroy();
+			fade?.stop();
+		});
+		const currentTransform = computed(() => {
+			const { allowEscapeViewBox, coordinate, position, reverseDirection, viewBox } = props;
+			let { cssClasses, cssProperties, transform } = getTooltipTranslate({
+				allowEscapeViewBox,
+				coordinate,
+				offsetTopLeft: props.offset,
+				position,
+				reverseDirection,
+				tooltipBox: {
+					height: tooltipSize.value.height,
+					width: tooltipSize.value.width
+				},
+				useTranslate3d: false,
+				viewBox
+			});
+			transform = !tooltipSize.value.height && preTransform ? preTransform : transform;
+			preTransform = transform || preTransform;
+			return {
+				cssClasses,
+				cssProperties,
+				transform
+			};
+		});
+		watchPostEffect(() => {
+			const transform = currentTransform.value.transform?.transform;
+			if (!el.value || typeof transform !== "string") return;
+			const match = transform.match(/translate\(([-\d.]+)px, ([-\d.]+)px\)/);
+			if (!match) return;
+			const nextX = Number(match[1]);
+			const nextY = Number(match[2]);
+			if (!visible.value && !placed || !tooltipSize.value.height) return;
+			if (props.isAnimationActive && reducedMotion.value !== "reduce" && placed) {
+				x.set(nextX);
+				y.set(nextY);
+			} else {
+				x.jump(nextX);
+				y.jump(nextY);
+				writePosition();
+				placed = true;
+			}
+		});
+		return () => {
+			const { style } = props;
+			const { cssClasses, cssProperties } = currentTransform.value;
+			const side = cssClasses[1];
+			const transformOrigin = `${side["v-charts-tooltip-wrapper-left"] ? "right" : "left"} ${side["v-charts-tooltip-wrapper-top"] ? "bottom" : "top"}`;
+			const boundingBoxStyle = {
+				...cssProperties,
+				pointerEvents: "none",
+				visibility: present.value || visible.value ? "visible" : "hidden",
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				...style
+			};
+			return createVNode("div", {
+				"data-slot": "tooltip",
+				"role": "tooltip",
+				"tabindex": -1,
+				"class": cssClasses,
+				"style": boundingBoxStyle,
+				"ref": el
+			}, [createVNode("div", {
+				"ref": content,
+				"style": { transformOrigin }
+			}, [visible.value ? cachedContent = slots.default?.() : cachedContent])]);
+		};
+	}
+});
+//#endregion
+export { TooltipBoundingBox };