vccs 0.0.1 → 0.2.0

package/dist/es/cartesian/funnel/Funnel.mjs

@@ -0,0 +1,177 @@
+import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useIsAnimating } from "../../hooks/useIsAnimating.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { SetPolarGraphicalItem } from "../../state/SetGraphicalItem.mjs";
+import { SetLegendPayload } from "../../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { Cell } from "../../components/Cell.mjs";
+import { Trapezoid } from "../../shape/Trapezoid.mjs";
+import { selectFunnelTrapezoids } from "../../state/selectors/funnelSelectors.mjs";
+import { FunnelVueProps } from "./type.mjs";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+//#region src/cartesian/funnel/Funnel.tsx
+function extractCellProps(vnodes) {
+	const result = [];
+	for (const vnode of vnodes) if (vnode.type === Cell) result.push(vnode.props ?? {});
+	else if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...extractCellProps(vnode.children));
+	return result;
+}
+function filterOutCells(vnodes) {
+	const result = [];
+	for (const vnode of vnodes) {
+		if (vnode.type === Cell) continue;
+		if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...filterOutCells(vnode.children));
+		else result.push(vnode);
+	}
+	return result;
+}
+var Funnel = /* @__PURE__ */ defineComponent({
+	name: "Funnel",
+	props: FunnelVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const dispatch = useAppDispatch();
+		const isAnimating = useIsAnimating(() => props.isAnimationActive);
+		const cellPropsRef = shallowRef([]);
+		const funnelSettings = computed(() => ({
+			data: props.data,
+			dataKey: props.dataKey,
+			nameKey: props.nameKey,
+			tooltipType: props.tooltipType,
+			lastShapeType: props.lastShapeType,
+			reversed: props.reversed,
+			customWidth: props.width,
+			presentationProps: {
+				fill: props.fill,
+				stroke: props.stroke
+			}
+		}));
+		SetPolarGraphicalItem(computed(() => ({
+			type: "funnel",
+			data: props.data ?? [],
+			dataKey: props.dataKey,
+			hide: props.hide,
+			angleAxisId: 0,
+			radiusAxisId: 0
+		})));
+		const composedData = useAppSelector((state) => selectFunnelTrapezoids(state, funnelSettings.value));
+		const trapezoids = computed(() => composedData.value?.trapezoids ?? []);
+		SetLegendPayload(computed(() => {
+			const trapList = trapezoids.value;
+			if (!trapList || trapList.length === 0) return [];
+			const cells = cellPropsRef.value;
+			return trapList.map((trap, i) => ({
+				type: props.legendType,
+				value: String(trap.name ?? ""),
+				color: cells[i]?.fill ?? trap.fill ?? props.fill,
+				payload: trap.payload
+			}));
+		}));
+		SetTooltipEntrySettings({
+			fn: (v) => v,
+			args: computed(() => ({
+				dataDefinedOnItem: props.data ?? [],
+				positions: trapezoids.value.map((t) => t.tooltipPosition),
+				settings: {
+					dataKey: props.dataKey,
+					nameKey: props.nameKey,
+					name: String(props.dataKey ?? ""),
+					hide: props.hide,
+					type: props.tooltipType,
+					color: props.fill,
+					fill: props.fill,
+					stroke: props.stroke,
+					unit: ""
+				}
+			}))
+		});
+		provideCartesianLabelListData(computed(() => {
+			if (props.isAnimationActive && isAnimating.value) return void 0;
+			const trapList = trapezoids.value;
+			if (!trapList || trapList.length === 0) return void 0;
+			return trapList.map((trap) => ({
+				x: trap.x,
+				y: trap.y,
+				width: Math.max(trap.upperWidth, trap.lowerWidth),
+				height: trap.height,
+				value: trap.value ?? trap.val ?? "",
+				payload: trap.payload,
+				parentViewBox: trap.parentViewBox,
+				fill: trap.fill ?? props.fill
+			}));
+		}));
+		function handleTrapezoidEnter(trap, index) {
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: String(index),
+				activeDataKey: props.dataKey,
+				activeCoordinate: trap.tooltipPosition
+			}));
+		}
+		function handleTrapezoidLeave() {
+			dispatch(mouseLeaveItem());
+		}
+		return () => {
+			if (props.hide) return null;
+			const trapList = trapezoids.value;
+			if (!trapList || trapList.length === 0) return null;
+			const defaultContent = slots.default?.() ?? [];
+			const cells = extractCellProps(defaultContent);
+			cellPropsRef.value = cells;
+			const nonCellContent = cells.length > 0 ? filterOutCells(defaultContent) : defaultContent;
+			const stroke = attrs.stroke ?? props.stroke;
+			return createVNode(Layer, { "class": ["v-charts-funnel", props.className] }, { default: () => [createVNode(Animate, {
+				"isActive": props.isAnimationActive,
+				"from": 0,
+				"to": 1,
+				"transition": props.transition,
+				"onAnimationStart": props.onAnimationStart,
+				"onAnimationEnd": () => {
+					isAnimating.value = false;
+					props.onAnimationEnd?.();
+				}
+			}, { default: (progress) => {
+				return trapList.map((trap, i) => {
+					const animatedHeight = trap.height * progress;
+					const yOffset = trap.height * (1 - progress);
+					const animatedUpperWidth = trap.upperWidth * progress;
+					const animatedLowerWidth = trap.lowerWidth * progress;
+					const animatedX = trap.x + trap.upperWidth / 2 - animatedUpperWidth / 2;
+					const cellProps = cells[i] ?? {};
+					const trapFill = cellProps.fill ?? trap.fill ?? props.fill;
+					const trapStroke = cellProps.stroke ?? stroke;
+					const trapezoidProps = {
+						...trap,
+						x: animatedX,
+						y: trap.y + yOffset / 2,
+						height: animatedHeight,
+						upperWidth: animatedUpperWidth,
+						lowerWidth: animatedLowerWidth,
+						fill: trapFill,
+						stroke: trapStroke,
+						animationProgress: progress
+					};
+					const content = slots.shape ? slots.shape(trapezoidProps) : createVNode(Trapezoid, mergeProps(attrs, {
+						"x": trapezoidProps.x,
+						"y": trapezoidProps.y,
+						"upperWidth": trapezoidProps.upperWidth,
+						"lowerWidth": trapezoidProps.lowerWidth,
+						"height": trapezoidProps.height,
+						"fill": trapFill,
+						"stroke": trapStroke
+					}), null);
+					return createVNode("g", {
+						"key": `trapezoid-${i}`,
+						"onMouseenter": () => handleTrapezoidEnter(trap, i),
+						"onMouseleave": handleTrapezoidLeave
+					}, [content]);
+				});
+			} }), nonCellContent] });
+		};
+	}
+});
+//#endregion
+export { Funnel };

package/dist/es/cartesian/funnel/type.mjs

@@ -0,0 +1,80 @@
+//#region src/cartesian/funnel/type.ts
+var FunnelVueProps = {
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	nameKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "name"
+	},
+	lastShapeType: {
+		type: String,
+		default: "triangle"
+	},
+	reversed: {
+		type: Boolean,
+		default: false
+	},
+	fill: {
+		type: String,
+		default: "#808080"
+	},
+	stroke: {
+		type: String,
+		default: "#fff"
+	},
+	legendType: {
+		type: String,
+		default: "rect"
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: .8,
+			ease: "easeOut"
+		})
+	},
+	onAnimationStart: {
+		type: Function,
+		default: void 0
+	},
+	onAnimationEnd: {
+		type: Function,
+		default: void 0
+	},
+	className: {
+		type: String,
+		default: void 0
+	},
+	width: {
+		type: [Number, String],
+		default: void 0
+	}
+};
+//#endregion
+export { FunnelVueProps };

package/dist/es/cartesian/funnel/utils.mjs

@@ -0,0 +1,102 @@
+import { isNumber } from "../../utils/validate.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { omit } from "lodash-es";
+//#region src/cartesian/funnel/utils.ts
+function getRealWidthHeight({ customWidth }, offset) {
+	const { width, height, left, right, top, bottom } = offset;
+	const realHeight = height;
+	let realWidth = width;
+	if (isNumber(customWidth)) realWidth = customWidth;
+	else if (typeof customWidth === "string") realWidth = realWidth * parseFloat(customWidth) / 100;
+	return {
+		realWidth: realWidth - left - right,
+		realHeight: realHeight - bottom - top,
+		offsetX: (width - realWidth) / 2,
+		offsetY: (height - realHeight) / 2
+	};
+}
+function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType, lastShapeType, reversed, offset, customWidth }) {
+	const { left, top } = offset;
+	const { realHeight, realWidth, offsetX, offsetY } = getRealWidthHeight({ customWidth }, offset);
+	const maxValue = Math.max.apply(null, displayedData.map((entry) => getValueByDataKey(entry, dataKey, 0)));
+	const len = displayedData.length;
+	const rowHeight = realHeight / len;
+	const parentViewBox = {
+		x: offset.left,
+		y: offset.top,
+		width: offset.width,
+		height: offset.height
+	};
+	let trapezoids = displayedData.map((entry, i) => {
+		const rawVal = getValueByDataKey(entry, dataKey, 0);
+		const name = getValueByDataKey(entry, nameKey, i);
+		let val = rawVal;
+		let nextVal;
+		if (i !== len - 1) {
+			nextVal = getValueByDataKey(displayedData[i + 1], dataKey, 0);
+			if (Array.isArray(nextVal)) [nextVal] = nextVal;
+		} else if (Array.isArray(rawVal) && rawVal.length === 2) [val, nextVal] = rawVal;
+		else if (lastShapeType === "rectangle") nextVal = val;
+		else nextVal = 0;
+		const x = (maxValue - val) * realWidth / (2 * maxValue) + left + offsetX;
+		const y = rowHeight * i + top + offsetY;
+		const upperWidth = val / maxValue * realWidth;
+		const lowerWidth = nextVal / maxValue * realWidth;
+		const tooltipPayload = [{
+			name,
+			value: val,
+			payload: entry,
+			dataKey,
+			type: tooltipType
+		}];
+		const tooltipPosition = {
+			x: x + upperWidth / 2,
+			y: y + rowHeight / 2
+		};
+		return {
+			x,
+			y,
+			width: Math.max(upperWidth, lowerWidth),
+			upperWidth,
+			lowerWidth,
+			height: rowHeight,
+			name,
+			val,
+			tooltipPayload,
+			tooltipPosition,
+			...omit(entry, "width"),
+			payload: entry,
+			parentViewBox,
+			labelViewBox: {
+				x: x + (upperWidth - lowerWidth) / 4,
+				y,
+				width: Math.abs(upperWidth - lowerWidth) / 2 + Math.min(upperWidth, lowerWidth),
+				height: rowHeight
+			}
+		};
+	});
+	if (reversed) trapezoids = trapezoids.map((entry, index) => {
+		const newY = entry.y - index * rowHeight + (len - 1 - index) * rowHeight;
+		return {
+			...entry,
+			upperWidth: entry.lowerWidth,
+			lowerWidth: entry.upperWidth,
+			x: entry.x - (entry.lowerWidth - entry.upperWidth) / 2,
+			y: entry.y - index * rowHeight + (len - 1 - index) * rowHeight,
+			tooltipPosition: {
+				...entry.tooltipPosition,
+				y: newY + rowHeight / 2
+			},
+			labelViewBox: {
+				...entry.labelViewBox,
+				y: newY
+			}
+		};
+	});
+	return {
+		trapezoids,
+		data: displayedData
+	};
+}
+//#endregion
+export { computeFunnelTrapezoids };

package/dist/es/cartesian/line/ActivePoints.mjs

@@ -0,0 +1,79 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { createVNode, defineComponent, isVNode } from "vue";
+//#region src/cartesian/line/ActivePoints.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ActivePoints = /* @__PURE__ */ defineComponent({
+	name: "ActivePoints",
+	props: {
+		points: {
+			type: Array,
+			required: true
+		},
+		mainColor: {
+			type: String,
+			required: true
+		},
+		itemDataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: true
+		},
+		activeDot: {
+			type: [
+				Object,
+				Boolean,
+				Function
+			],
+			required: true
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
+		return () => {
+			const { points } = props;
+			if (!points?.length || isNullish(activeTooltipIndex.value)) return null;
+			const activePoint = points[Number(activeTooltipIndex.value)];
+			if (isNullish(activePoint)) return null;
+			return renderActivePoint({
+				point: activePoint,
+				childIndex: Number(activeTooltipIndex.value),
+				mainColor: props.mainColor,
+				dataKey: props.itemDataKey,
+				activeDot: props.activeDot,
+				slots
+			});
+		};
+	}
+});
+function renderActivePoint({ point, childIndex, mainColor, activeDot, dataKey, slots }) {
+	if (activeDot === false) return null;
+	const dotProps = {
+		"index": childIndex,
+		dataKey,
+		"cx": point.x,
+		"cy": point.y,
+		"r": 4,
+		"fill": mainColor,
+		"stroke-width": 2,
+		"stroke": "#fff",
+		"payload": point.payload,
+		"value": point.value,
+		...typeof activeDot === "object" ? activeDot : {}
+	};
+	let dot;
+	if (slots.activeDot) dot = slots.activeDot(dotProps);
+	else dot = createVNode(Dot, dotProps, null);
+	return createVNode(Layer, { "class": "v-charts-active-dot" }, _isSlot(dot) ? dot : { default: () => [dot] });
+}
+//#endregion
+export { ActivePoints };

package/dist/es/cartesian/line/Line.mjs

@@ -0,0 +1,50 @@
+import { Layer } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { GraphicalItemClipPath } from "../GraphicalItemClipPath.mjs";
+import { LineVueProps } from "./type.mjs";
+import { useLine } from "./hooks/useLine.mjs";
+import { StaticLine } from "./StaticLine.mjs";
+import { ActivePoints } from "./ActivePoints.mjs";
+import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode } from "vue";
+//#region src/cartesian/line/Line.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var Line = /* @__PURE__ */ defineComponent({
+	name: "Line",
+	props: LineVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		useSetupGraphicalItem(props, "line");
+		const { shouldRender, needClip, clipPathId, lineData, points } = useLine(props, attrs, slots.shape, slots.dot, slots.label);
+		const graphicalLayerRef = useGraphicalLayerRef(null);
+		provideCartesianLabelListData(computed(() => lineData.value));
+		return () => {
+			if (!shouldRender.value) return null;
+			let activeDot;
+			if (slots.activeDot) activeDot = { activeDot: slots.activeDot };
+			const defaultContent = slots.default?.();
+			const lineContent = createVNode(Fragment, null, [createVNode(Layer, { "class": ["v-charts-line", attrs.class] }, { default: () => [
+				needClip.value && createVNode("defs", null, [createVNode(GraphicalItemClipPath, {
+					"clipPathId": clipPathId.value,
+					"xAxisId": props.xAxisId,
+					"yAxisId": props.yAxisId
+				}, null)]),
+				createVNode(StaticLine, null, null),
+				defaultContent
+			] }), createVNode(ActivePoints, {
+				"points": lineData.value ?? [],
+				"mainColor": attrs.stroke ?? props.stroke,
+				"itemDataKey": props.dataKey,
+				"activeDot": props.activeDot
+			}, _isSlot(activeDot) ? activeDot : { default: () => [activeDot] })]);
+			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(lineContent) ? lineContent : { default: () => [lineContent] });
+			return lineContent;
+		};
+	}
+});
+//#endregion
+export { Line };