vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/components/Tooltip.mjs

@@ -1,479 +0,0 @@
-import { isNumOrStr } from "../utils/validate.mjs";
-import { Curve } from "../shape/Curve.mjs";
-import { useTooltipEventType } from "../state/selectors/selectTooltipEventType.mjs";
-import { setTooltipSettingsState } from "../state/tooltipSlice.mjs";
-import { useAppDispatch, useAppSelector } from "../state/hooks.mjs";
-import { useChartLayout, useOffsetInternal, useViewBox } from "../context/chartLayoutContext.mjs";
-import { selectActiveCoordinate, selectActiveLabel, selectIsTooltipActive, selectTooltipPayload, useChartName } from "../state/selectors/selectors.mjs";
-import { Rectangle } from "../shape/Rectangle.mjs";
-import { useCursorLayerRef } from "../context/cursorLayerContext.mjs";
-import { usePortal } from "../chart/TooltipPortalContext.mjs";
-import { Sector } from "../shape/Sector.mjs";
-import { useAccessibilityLayer } from "../context/accessibilityContext.mjs";
-import { getTooltipTranslate } from "../utils/tooltip/translate.mjs";
-import { Cross } from "../shape/Cross.mjs";
-import { getCursorPoints } from "./utils.mjs";
-import { useTooltipAxisBandSize } from "../context/useTooltipAxis.mjs";
-import { useTooltipChartSynchronisation } from "../synchronisation/useChartSynchronisation.mjs";
-import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, reactive, ref, watch, watchEffect, watchPostEffect } from "vue";
-import { sortBy, uniqBy } from "es-toolkit/compat";
-import { animate } from "motion-v";
-import { useMagicKeys, usePreferredReducedMotion } from "@vueuse/core";
-//#region src/components/Tooltip.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-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;
-}
-function defaultFormatter(value) {
-	return Array.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1]) ? value.join(" ~ ") : value;
-}
-var DefaultTooltipContent = /* @__PURE__ */ defineComponent({
-	name: "DefaultTooltipContent",
-	props: {
-		label: [String, Number],
-		payload: Array,
-		active: Boolean,
-		separator: {
-			type: String,
-			default: " : "
-		},
-		contentStyle: Object,
-		labelStyle: Object,
-		itemStyle: Object,
-		itemSorter: [Function, String],
-		formatter: Function
-	},
-	setup(props) {
-		return () => {
-			if (!props.active || !props.payload?.length) return null;
-			const { contentStyle, labelStyle, itemStyle } = props;
-			const finalStyle = {
-				margin: 0,
-				padding: "10px",
-				backgroundColor: "#fff",
-				border: "1px solid #ccc",
-				whiteSpace: "nowrap",
-				...contentStyle
-			};
-			const finalLabelStyle = {
-				margin: 0,
-				...labelStyle
-			};
-			const { itemSorter, payload, formatter } = props;
-			const sortedPayload = itemSorter ? sortBy(payload, itemSorter) : payload;
-			return createVNode("div", {
-				"class": "v-charts-tooltip-content",
-				"style": finalStyle
-			}, [props.label && createVNode("div", {
-				"class": "v-charts-tooltip-label",
-				"style": finalLabelStyle
-			}, [props.label]), createVNode("div", { "class": "v-charts-tooltip-list" }, [sortedPayload.map((entry, index) => {
-				const finalItemStyle = {
-					display: "block",
-					paddingTop: 4,
-					paddingBottom: 4,
-					color: entry.color || "#000",
-					...itemStyle
-				};
-				const finalFormatter = entry.formatter || 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-item-name",
-						"style": { color: entry.color }
-					}, [entry.name]),
-					createVNode("span", { "class": "v-charts-tooltip-separator" }, [props.separator]),
-					createVNode("span", { "class": "v-charts-tooltip-item-value" }, [finalValue]),
-					createVNode("span", { "class": "v-charts-tooltip-item-unit" }, [entry.unit || ""])
-				]);
-			})])]);
-		};
-	}
-});
-var TooltipBoundingBox = /* @__PURE__ */ defineComponent({
-	name: "TooltipBoundingBox",
-	props: {
-		allowEscapeViewBox: Object,
-		isAnimationActive: Boolean,
-		transition: {
-			type: Object,
-			default: () => ({
-				duration: .4,
-				ease: "easeOut"
-			})
-		},
-		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;
-		let animationControls;
-		const reducedMotion = usePreferredReducedMotion();
-		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((onCleanup) => {
-			const element = el.value;
-			const transform = currentTransform.value.transform;
-			if (!element || !transform?.transform) return;
-			if (props.isAnimationActive && reducedMotion.value !== "reduce") animationControls = animate(element, { transform: transform.transform }, props.transition);
-			else element.style.transform = transform.transform;
-			const width = element.offsetWidth;
-			const height = element.offsetHeight;
-			if (height > 0 && (width !== tooltipSize.value.width || height !== tooltipSize.value.height)) tooltipSize.value = {
-				width,
-				height
-			};
-			onCleanup(() => {
-				animationControls?.stop();
-				animationControls = void 0;
-			});
-		});
-		return () => {
-			const { active, hasPayload, style } = props;
-			const { cssClasses, cssProperties } = currentTransform.value;
-			const boundingBoxStyle = {
-				...cssProperties,
-				pointerEvents: "none",
-				visibility: !dismissed.value && active && hasPayload ? "visible" : "hidden",
-				position: "absolute",
-				top: 0,
-				left: 0,
-				...style
-			};
-			return createVNode("div", {
-				"role": "tooltip",
-				"aria-live": "polite",
-				"tabindex": -1,
-				"class": cssClasses,
-				"style": boundingBoxStyle,
-				"ref": el
-			}, [slots.default?.()]);
-		};
-	}
-});
-var Cursor = /* @__PURE__ */ defineComponent({
-	name: "Cursor",
-	props: {
-		cursor: [Boolean, Object],
-		cursorSlot: Function,
-		tooltipEventType: String,
-		coordinate: Object,
-		payload: Array,
-		index: String
-	},
-	setup(props) {
-		const offset = useOffsetInternal();
-		const layout = useChartLayout();
-		const chartName = useChartName();
-		const tooltipAxisBandSize = useTooltipAxisBandSize();
-		const cursorLayerRef = useCursorLayerRef(null);
-		const points = computed(() => getCursorPoints(layout.value, props.coordinate, offset.value));
-		return () => {
-			if (!props.cursor || !props.coordinate) return null;
-			const isScatterChart = chartName.value === "ScatterChart";
-			if (!isScatterChart && props.tooltipEventType !== "axis") return null;
-			const cursor = props.cursor;
-			const cursorSvgProps = typeof cursor === "object" ? cursor : {};
-			let cursorElement;
-			if (isScatterChart) {
-				const { offset: _offset, ...coord } = props.coordinate;
-				const crossProps = {
-					stroke: "#ccc",
-					fill: "none",
-					...offset.value,
-					...coord,
-					class: "v-charts-tooltip-cursor",
-					style: { pointerEvents: "none" },
-					payload: props.payload ?? [],
-					payloadIndex: props.index,
-					...cursorSvgProps
-				};
-				cursorElement = props.cursorSlot ? props.cursorSlot(crossProps) : createVNode(Cross, crossProps, null);
-			} else if (chartName.value === "BarChart") {
-				const bandSize = tooltipAxisBandSize.value ?? 0;
-				const halfSize = bandSize / 2;
-				const coord = props.coordinate;
-				const off = offset.value;
-				const rectProps = {
-					...off,
-					stroke: "none",
-					fill: "#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: props.index,
-					...cursorSvgProps
-				};
-				cursorElement = props.cursorSlot ? props.cursorSlot(rectProps) : createVNode(Rectangle, rectProps, null);
-			} else if (layout.value === "radial" && props.coordinate?.cx != null) {
-				const radialPoints = points.value;
-				const sectorProps = {
-					stroke: "#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: props.index,
-					...cursorSvgProps
-				};
-				cursorElement = props.cursorSlot ? props.cursorSlot(sectorProps) : createVNode(Sector, sectorProps, null);
-			} else {
-				const cursorProps = {
-					stroke: "#ccc",
-					...offset.value,
-					layout: layout.value,
-					points: points.value,
-					class: ["v-charts-tooltip-cursor"],
-					style: { pointerEvents: "none" },
-					payload: props.payload ?? [],
-					payloadIndex: props.index,
-					...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;
-		};
-	}
-});
-var Tooltip = /* @__PURE__ */ defineComponent({
-	name: "Tooltip",
-	props: {
-		active: {
-			type: Boolean,
-			default: void 0
-		},
-		includeHidden: Boolean,
-		allowEscapeViewBox: {
-			type: Object,
-			default: () => ({
-				x: false,
-				y: false
-			})
-		},
-		content: [Object, Function],
-		cursor: {
-			type: [Boolean, Object],
-			default: true
-		},
-		filterNull: {
-			type: Boolean,
-			default: true
-		},
-		defaultIndex: [Number, String],
-		isAnimationActive: {
-			type: Boolean,
-			default: true
-		},
-		offset: {
-			type: Number,
-			default: 10
-		},
-		payloadUniqBy: [Boolean, Function],
-		portal: {
-			type: Object,
-			default: void 0
-		},
-		position: Object,
-		reverseDirection: {
-			type: Object,
-			default: () => ({
-				x: false,
-				y: false
-			})
-		},
-		shared: {
-			type: [Boolean, void 0],
-			default: void 0
-		},
-		trigger: {
-			type: String,
-			default: "hover"
-		},
-		style: {
-			type: Object,
-			default: () => ({})
-		},
-		axisId: {
-			type: [String, Number],
-			default: 0
-		},
-		contentStyle: {
-			type: Object,
-			default: () => ({})
-		},
-		itemStyle: {
-			type: Object,
-			default: () => ({})
-		},
-		labelStyle: {
-			type: Object,
-			default: () => ({})
-		},
-		itemSorter: {
-			type: String,
-			default: "name"
-		},
-		separator: {
-			type: String,
-			default: " : "
-		}
-	},
-	slots: Object,
-	setup(props, { slots }) {
-		const dispatch = useAppDispatch();
-		const defaultIndexAsString = computed(() => typeof props.defaultIndex === "number" ? String(props.defaultIndex) : props.defaultIndex);
-		watchEffect(() => {
-			dispatch(setTooltipSettingsState({
-				shared: props.shared,
-				trigger: props.trigger,
-				axisId: props.axisId,
-				active: props.active,
-				defaultIndex: defaultIndexAsString.value
-			}));
-		});
-		const viewBox = useViewBox();
-		const accessibilityLayer = useAccessibilityLayer();
-		const tooltipEventType = useTooltipEventType(props.shared);
-		const tooltipState = useAppSelector((state) => selectIsTooltipActive(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
-		const payloadFromRedux = useAppSelector((state) => selectTooltipPayload(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
-		const labelFromRedux = useAppSelector((state) => selectActiveLabel(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
-		const coordinate = useAppSelector((state) => selectActiveCoordinate(state, tooltipEventType.value, props.trigger, defaultIndexAsString.value));
-		const payload = computed(() => payloadFromRedux.value ?? []);
-		const tooltipPortalFromContext = usePortal();
-		const tooltipPortal = computed(() => props.portal ?? tooltipPortalFromContext?.value);
-		const finalIsActive = computed(() => props.active ?? tooltipState.value?.isActive);
-		const finalLabel = computed(() => tooltipEventType.value === "axis" ? labelFromRedux.value : void 0);
-		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 hasPayload = computed(() => finalPayload.value.length > 0);
-		const contentComponent = computed(() => {
-			if (props.content) return props.content;
-			return DefaultTooltipContent;
-		});
-		const contentProps = computed(() => ({
-			...props,
-			payload: finalPayload.value,
-			label: finalLabel.value,
-			active: finalIsActive.value,
-			coordinate: coordinate.value,
-			accessibilityLayer: accessibilityLayer.value
-		}));
-		const hasContentSlot = computed(() => !!slots.content);
-		useTooltipChartSynchronisation({
-			tooltipEventType,
-			trigger: props.trigger,
-			activeCoordinate: coordinate,
-			activeLabel: finalLabel,
-			activeIndex: computed(() => tooltipState.value?.activeIndex),
-			isTooltipActive: finalIsActive
-		});
-		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,
-				"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: () => [hasContentSlot.value ? slots.content(contentProps.value) : createVNode(contentComponent.value, contentProps.value, null)] })] })]), finalIsActive.value && createVNode(Cursor, {
-				"cursor": props.cursor,
-				"cursorSlot": slots.cursor,
-				"tooltipEventType": tooltipEventType.value,
-				"coordinate": coordinate.value,
-				"payload": payload.value,
-				"index": tooltipState.value?.activeIndex
-			}, null)]);
-		};
-	}
-});
-//#endregion
-export { Tooltip as default, getUniqPayload };

package/dist/es/context/ChartDataContextProvider.mjs

@@ -1,27 +0,0 @@
-import { useAppDispatch } from "../state/hooks.mjs";
-import { setChartData } from "../state/chartDataSlice.mjs";
-import { defineComponent, onUnmounted, watch } from "vue";
-//#region src/context/ChartDataContextProvider.ts
-/**
-* ChartDataContextProvider for Vue
-* Sets chartData in store on mount/update, clears on unmount. Renders nothing.
-*/
-var ChartDataContextProvider = defineComponent({
-	name: "ChartDataContextProvider",
-	props: { chartData: {
-		type: Array,
-		required: true
-	} },
-	setup(props) {
-		const dispatch = useAppDispatch();
-		watch(() => props.chartData, (val) => {
-			dispatch(setChartData(Array.from(val)));
-		}, { immediate: true });
-		onUnmounted(() => {
-			dispatch(setChartData(void 0));
-		});
-		return () => null;
-	}
-});
-//#endregion
-export { ChartDataContextProvider };

package/dist/es/context/PanoramaContextProvider.mjs

@@ -1,24 +0,0 @@
-import { createContext } from "../utils/createContext.mjs";
-import { defineComponent } from "vue";
-//#region src/context/PanoramaContextProvider.ts
-var [injectPanorama, providePanoramaContext] = createContext("PanoramaContext");
-/**
-* useIsPanorama composable
-* Returns the injected isPanorama value (default: false)
-*/
-function useIsPanorama() {
-	return injectPanorama(false);
-}
-defineComponent({
-	name: "PanoramaContextProvider",
-	props: { isPanorama: {
-		type: Boolean,
-		required: true
-	} },
-	setup(props, { slots }) {
-		providePanoramaContext(true);
-		return () => slots.default?.();
-	}
-});
-//#endregion
-export { useIsPanorama };

package/dist/es/context/accessibilityContext.mjs

@@ -1,5 +0,0 @@
-import { useAppSelector } from "../state/hooks.mjs";
-//#region src/context/accessibilityContext.tsx
-var useAccessibilityLayer = () => useAppSelector((state) => state.rootProps.accessibilityLayer);
-//#endregion
-export { useAccessibilityLayer };

package/dist/es/context/chartLayoutContext.mjs

@@ -1,49 +0,0 @@
-import { useIsPanorama } from "./PanoramaContextProvider.mjs";
-import { selectChartHeight, selectChartWidth } from "../state/selectors/containerSelectors.mjs";
-import { selectChartOffset, selectChartViewBox } from "../state/selectors/selectChartOffset.mjs";
-import { selectBrushDimensions, selectBrushSettings } from "../state/selectors/brushSelectors.mjs";
-import { selectChartLayout } from "../state/selectors/common.mjs";
-import { useAppSelector } from "../state/hooks.mjs";
-import { selectChartOffsetInternal } from "../state/selectors/selectChartOffsetInternal.mjs";
-import { computed } from "vue";
-//#region src/context/chartLayoutContext.tsx
-function useOffset() {
-	return useAppSelector(selectChartOffset);
-}
-var useChartLayout = () => useAppSelector(selectChartLayout);
-function useViewBox() {
-	const panorama = useIsPanorama();
-	const rootViewBox = useAppSelector(selectChartViewBox);
-	const brushDimensions = useAppSelector(selectBrushDimensions);
-	const brushPadding = useAppSelector(selectBrushSettings);
-	return computed(() => {
-		if (!panorama || !brushDimensions.value || !brushPadding.value) return rootViewBox.value;
-		const padding = brushPadding.value.padding;
-		return {
-			width: brushDimensions.value.width - padding.left - padding.right,
-			height: brushDimensions.value.height - padding.top - padding.bottom,
-			x: padding.left,
-			y: padding.top
-		};
-	});
-}
-function useChartWidth() {
-	return useAppSelector(selectChartWidth);
-}
-function useChartHeight() {
-	return useAppSelector(selectChartHeight);
-}
-function useOffsetInternal() {
-	return useAppSelector(selectChartOffsetInternal);
-}
-var manyComponentsThrowErrorsIfMarginIsUndefined = {
-	top: 0,
-	right: 0,
-	bottom: 0,
-	left: 0
-};
-function useMargin() {
-	return useAppSelector((state) => state.layout.margin ?? manyComponentsThrowErrorsIfMarginIsUndefined);
-}
-//#endregion
-export { useChartHeight, useChartLayout, useChartWidth, useMargin, useOffset, useOffsetInternal, useViewBox };

package/dist/es/context/cursorLayerContext.mjs

@@ -1,5 +0,0 @@
-import { createContext } from "../utils/createContext.mjs";
-//#region src/context/cursorLayerContext.ts
-var [useCursorLayerRef, provideCursorLayerRef] = createContext("CursorLayerContext");
-//#endregion
-export { provideCursorLayerRef, useCursorLayerRef };

package/dist/es/context/graphicalLayerContext.mjs

@@ -1,5 +0,0 @@
-import { createContext } from "../utils/createContext.mjs";
-//#region src/context/graphicalLayerContext.ts
-var [useGraphicalLayerRef, provideGraphicalLayerRef] = createContext("GraphicalLayerContext");
-//#endregion
-export { provideGraphicalLayerRef, useGraphicalLayerRef };

package/dist/es/context/labelLayerContext.mjs

@@ -1,5 +0,0 @@
-import { createContext } from "../utils/createContext.mjs";
-//#region src/context/labelLayerContext.ts
-var [useLabelLayerRef, provideLabelLayerRef] = createContext("LabelLayerContext");
-//#endregion
-export { provideLabelLayerRef, useLabelLayerRef };

package/dist/es/context/useTooltipAxis.mjs

@@ -1,17 +0,0 @@
-import { getBandSizeOfAxis } from "../utils/chart.mjs";
-import { selectTooltipAxis, selectTooltipAxisScale, selectTooltipAxisTicks } from "../state/selectors/tooltipSelectors.mjs";
-import { useAppSelector } from "../state/hooks.mjs";
-import { computed } from "vue";
-//#region src/context/useTooltipAxis.ts
-var useTooltipAxis = () => useAppSelector(selectTooltipAxis);
-function useTooltipAxisBandSize() {
-	const tooltipAxis = useTooltipAxis();
-	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
-	const tooltipAxisScale = useAppSelector(selectTooltipAxisScale);
-	return computed(() => getBandSizeOfAxis({
-		...tooltipAxis.value,
-		scale: tooltipAxisScale.value
-	}, tooltipTicks.value));
-}
-//#endregion
-export { useTooltipAxisBandSize };