vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/cartesian/error-bar/ErrorBar.mjs

@@ -1,9 +1,11 @@
-import { selectAxisWithScale } from "../../state/selectors/axisSelectors.mjs";
-import { useAppSelector } from "../../state/hooks.mjs";
-import { useChartLayout } from "../../context/chartLayoutContext.mjs";
+import { useChartPresentation } from "../../model/presentation.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { Layer } from "../../container/Layer.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { useErrorBarContext, useErrorBarRegistry } from "./ErrorBarContext.mjs";
-import { createVNode, defineComponent, isVNode, onUnmounted } from "vue";
+import { errorBarLines } from "../../core/errorBar.mjs";
+import { computed, createVNode, defineComponent, h, isVNode, mergeProps, onUnmounted } from "vue";
 //#region src/cartesian/error-bar/ErrorBar.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -24,19 +26,66 @@ var ErrorBarVueProps = {
 	direction: { type: String },
 	stroke: {
 		type: String,
-		default: "black"
+		default: "var(--v-charts-axis, black)"
 	},
 	strokeWidth: {
 		type: [Number, String],
 		default: 1.5
 	}
 };
-var ErrorBar = /* @__PURE__ */ defineComponent({
+var ErrorBarView = /* @__PURE__ */ defineComponent({
+	name: "ErrorBarView",
+	inheritAttrs: true,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(view, { slots }) {
+		const props = view.item;
+		view.svgAttrs;
+		const layout = useChartPresentation().layout;
+		const context = useErrorBarContext();
+		const chart = useChart();
+		const errorBars = computed(() => {
+			const direction = props.direction ?? (layout.value === "horizontal" ? "y" : "x");
+			const axis = direction === "x" ? chart.axis("xAxis", context.xAxisId).withScale.value : chart.axis("yAxis", context.yAxisId).withScale.value;
+			if (!axis || !context.data.value) return void 0;
+			return context.data.value.map((entry, index) => {
+				const point = context.dataPointFormatter(entry, props.dataKey, direction);
+				return {
+					point,
+					lines: errorBarLines(point, axis, direction, context.errorBarOffset.value, props.width),
+					index
+				};
+			});
+		});
+		return () => {
+			let _slot2;
+			if (!errorBars.value) return null;
+			return createVNode(Layer, { "class": "v-charts-error-bars" }, _isSlot(_slot2 = errorBars.value.map(({ point: { x, y, value }, lines, index }) => {
+				let _slot;
+				return lines && createVNode(Layer, {
+					"class": "v-charts-error-bar",
+					"key": `bar-${x}-${y}-${value}-${index}`
+				}, _isSlot(_slot = lines.map((line, lineIndex) => createVNode("line", mergeProps({ "key": `errorbar-${index}-${line.x1}-${line.y1}-${line.x2}-${line.y2}-${lineIndex}` }, line, {
+					"stroke": props.stroke,
+					"stroke-width": props.strokeWidth
+				}), null))) ? _slot : { default: () => [_slot] });
+			})) ? _slot2 : { default: () => [_slot2] });
+		};
+	}
+});
+var ErrorBar = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
 	name: "ErrorBar",
 	props: ErrorBarVueProps,
-	setup(props) {
-		const layout = useChartLayout();
-		const { data, dataPointFormatter, xAxisId, yAxisId, errorBarOffset } = useErrorBarContext();
+	setup(props, { attrs, slots }) {
+		const layout = useChartPresentation().layout;
 		const registry = useErrorBarRegistry(null);
 		if (registry) {
 			const settings = {
@@ -46,98 +95,12 @@ var ErrorBar = /* @__PURE__ */ defineComponent({
 			registry.register(settings);
 			onUnmounted(() => registry.unregister(settings));
 		}
-		const xAxis = useAppSelector((state) => selectAxisWithScale(state, "xAxis", xAxisId, false));
-		const yAxis = useAppSelector((state) => selectAxisWithScale(state, "yAxis", yAxisId, false));
-		return () => {
-			const xAxisVal = xAxis.value;
-			const yAxisVal = yAxis.value;
-			if (xAxisVal?.scale == null || yAxisVal?.scale == null || data.value == null) return null;
-			const direction = props.direction ?? (layout.value === "horizontal" ? "y" : "x");
-			if (direction === "x" && xAxisVal.type !== "number") return null;
-			const offset = errorBarOffset.value;
-			const errorBars = data.value.map((entry, dataIndex) => {
-				let _slot;
-				const { x, y, value, errorVal } = dataPointFormatter(entry, props.dataKey, direction);
-				if (!errorVal || x == null || y == null) return null;
-				const lineCoordinates = [];
-				let lowBound, highBound;
-				if (Array.isArray(errorVal)) {
-					const [low, high] = errorVal;
-					if (low == null || high == null) return null;
-					lowBound = low;
-					highBound = high;
-				} else lowBound = highBound = errorVal;
-				if (direction === "x") {
-					const { scale } = xAxisVal;
-					const yMid = y + offset;
-					const yMin = yMid + props.width;
-					const yMax = yMid - props.width;
-					const xMin = scale(value - lowBound);
-					const xMax = scale(value + highBound);
-					if (xMin != null && xMax != null) {
-						lineCoordinates.push({
-							x1: xMax,
-							y1: yMin,
-							x2: xMax,
-							y2: yMax
-						});
-						lineCoordinates.push({
-							x1: xMin,
-							y1: yMid,
-							x2: xMax,
-							y2: yMid
-						});
-						lineCoordinates.push({
-							x1: xMin,
-							y1: yMin,
-							x2: xMin,
-							y2: yMax
-						});
-					}
-				} else if (direction === "y") {
-					const { scale } = yAxisVal;
-					const xMid = x + offset;
-					const xMin = xMid - props.width;
-					const xMax = xMid + props.width;
-					const yMin = scale(value - lowBound);
-					const yMax = scale(value + highBound);
-					if (yMin != null && yMax != null) {
-						lineCoordinates.push({
-							x1: xMin,
-							y1: yMax,
-							x2: xMax,
-							y2: yMax
-						});
-						lineCoordinates.push({
-							x1: xMid,
-							y1: yMin,
-							x2: xMid,
-							y2: yMax
-						});
-						lineCoordinates.push({
-							x1: xMin,
-							y1: yMin,
-							x2: xMax,
-							y2: yMin
-						});
-					}
-				}
-				return createVNode(Layer, {
-					"class": "v-charts-errorBar",
-					"key": `bar-${x}-${y}-${value}-${dataIndex}`
-				}, _isSlot(_slot = lineCoordinates.map((c, lineIndex) => createVNode("line", {
-					"key": `errorbar-${dataIndex}-${c.x1}-${c.y1}-${c.x2}-${c.y2}-${lineIndex}`,
-					"x1": c.x1,
-					"y1": c.y1,
-					"x2": c.x2,
-					"y2": c.y2,
-					"stroke": props.stroke,
-					"stroke-width": props.strokeWidth
-				}, null))) ? _slot : { default: () => [_slot] });
-			});
-			return createVNode(Layer, { "class": "v-charts-errorBars" }, _isSlot(errorBars) ? errorBars : { default: () => [errorBars] });
-		};
+		const View = useDeferredView(ErrorBarView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs
+		}, slots);
 	}
-});
+}));
 //#endregion
-export { ErrorBar, ErrorBarVueProps };
+export { ErrorBar };

package/dist/es/cartesian/error-bar/ErrorBarContext.mjs

@@ -1,9 +1,25 @@
-import { createContext as createContext$1 } from "../../utils/createContext.mjs";
-import { shallowRef } from "vue";
-import { createContext } from "motion-v";
+import { inject, provide, shallowRef } from "vue";
 //#region src/cartesian/error-bar/ErrorBarContext.ts
-var [useErrorBarContext, provideErrorBarContext] = createContext("ErrorBarContext");
-var [useErrorBarRegistry, provideErrorBarRegistry] = createContext$1("ErrorBarRegistry");
+var errorBarKey = Symbol("v-charts-error-bar-context");
+function provideErrorBarContext(value) {
+	provide(errorBarKey, value);
+	return value;
+}
+function useErrorBarContext(fallback) {
+	const value = inject(errorBarKey, fallback);
+	if (value === void 0) throw new Error("vccs: useErrorBarContext requires its provider.");
+	return value;
+}
+var registryKey = Symbol("v-charts-error-bar-registry");
+function provideErrorBarRegistry(value) {
+	provide(registryKey, value);
+	return value;
+}
+function useErrorBarRegistry(fallback) {
+	const value = inject(registryKey, fallback);
+	if (value === void 0) throw new Error("vccs: ErrorBar requires its series registry.");
+	return value;
+}
 function createErrorBarRegistry() {
 	const errorBars = shallowRef([]);
 	return {

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

@@ -1,29 +1,239 @@
-import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
-import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
-import { useIsAnimating } from "../../hooks/useIsAnimating.mjs";
+import { getTooltipNameProp } from "../../core/tooltip.mjs";
+import { useTrackedData } from "../../hooks/useTrackedData.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { funnelEvents } from "../../events/itemEvents.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { Layer } from "../../container/Layer.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { useKeyedTransition } from "../../animation/useKeyedTransition.mjs";
+import { labelOpacity } from "../../animation/ridingLabels.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 { extractCellProps, filterOutCells } from "../../utils/cell.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { entryColor } from "../../core/color.mjs";
+import { useSetupPolarItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { assignCells, extractCellProps, filterOutCells } from "../../utils/cell.mjs";
 import { Trapezoid } from "../../shape/Trapezoid.mjs";
-import { selectFunnelTrapezoids } from "../../state/selectors/funnelSelectors.mjs";
+import { funnelTrapezoids } from "../../core/funnel.mjs";
 import { FunnelVueProps } from "./type.mjs";
-import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { computed, createVNode, defineComponent, h, mergeProps, shallowRef } from "vue";
 //#region src/cartesian/funnel/Funnel.tsx
-var Funnel = /* @__PURE__ */ defineComponent({
+var FunnelView = /* @__PURE__ */ defineComponent({
+	name: "FunnelView",
+	inheritAttrs: false,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		trapezoids: {
+			type: Object,
+			required: true
+		},
+		cellPropsRef: {
+			type: Object,
+			required: true
+		}
+	},
+	slots: Object,
+	setup(view, { slots }) {
+		const emit = funnelEvents.use();
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const data = view.data;
+		const trapezoids = view.trapezoids;
+		const cellPropsRef = view.cellPropsRef;
+		const tooltip = useChart().tooltip;
+		const seam = (trap, { previous, next }) => {
+			if (next) return {
+				...trap,
+				x: next.x,
+				y: next.y,
+				upperWidth: next.upperWidth,
+				lowerWidth: next.upperWidth,
+				height: 0
+			};
+			if (previous) {
+				const x = previous.x + (previous.upperWidth - previous.lowerWidth) / 2;
+				return {
+					...trap,
+					x,
+					y: previous.y + previous.height,
+					upperWidth: previous.lowerWidth,
+					lowerWidth: previous.lowerWidth,
+					height: 0
+				};
+			}
+			return {
+				...trap,
+				height: 0
+			};
+		};
+		const { items, isAnimating } = useKeyedTransition(() => trapezoids.value.map((trap, index) => ({
+			...trap,
+			index
+		})), {
+			key: (trap, index) => getValueByDataKey(trap.payload, props.nameKey, index),
+			interpolate: (from, to, t) => ({
+				...to,
+				x: from.x + (to.x - from.x) * t,
+				y: from.y + (to.y - from.y) * t,
+				upperWidth: from.upperWidth + (to.upperWidth - from.upperWidth) * t,
+				lowerWidth: from.lowerWidth + (to.lowerWidth - from.lowerWidth) * t,
+				height: from.height + (to.height - from.height) * t
+			}),
+			enterFrom: (to, neighbors) => seam(to, neighbors),
+			exitTo: (from, neighbors) => seam(from, neighbors),
+			connected: true,
+			isActive: () => props.isAnimationActive !== false,
+			transition: () => props.transition,
+			onStart: () => emit("animation-start"),
+			onEnd: () => emit("animation-end")
+		});
+		const tooltipConfiguration = computed(() => ({
+			dataDefinedOnItem: data.value ?? [],
+			positions: trapezoids.value.map((t) => t.tooltipPosition),
+			colors: trapezoids.value.map((trap, index) => entryColor({
+				cell: cellPropsRef.value[index],
+				row: trap.payload,
+				seriesFill: props.fill,
+				index
+			})),
+			settings: {
+				dataKey: props.dataKey,
+				nameKey: props.nameKey,
+				name: getTooltipNameProp(props.name, props.dataKey),
+				hide: props.hide,
+				type: props.tooltipType,
+				color: props.fill,
+				fill: props.fill,
+				stroke: props.stroke,
+				unit: ""
+			}
+		}));
+		tooltip.entries.register(tooltipConfiguration);
+		const activeIndex = tooltip.activeIndexFor(tooltipConfiguration);
+		provideCartesianLabelListData(computed(() => {
+			if (items.value.length === 0) return void 0;
+			return items.value.map((item) => {
+				const trap = item.value;
+				const opacity = labelOpacity(item);
+				return {
+					x: trap.x,
+					y: trap.y,
+					width: Math.max(trap.upperWidth, trap.lowerWidth),
+					height: trap.height,
+					value: trap.value ?? trap.val ?? "",
+					payload: trap.payload,
+					dataKey: props.dataKey,
+					inactive: props.hide,
+					parentViewBox: trap.parentViewBox,
+					fill: entryColor({
+						cell: cellPropsRef.value[trap.index],
+						row: trap.payload,
+						seriesFill: props.fill,
+						index: trap.index
+					}),
+					key: item.key,
+					...opacity != null ? { opacity } : {}
+				};
+			});
+		}));
+		function handleTrapezoidEnter(trap, index) {
+			tooltip.activate("hover", {
+				type: "item",
+				configuration: tooltipConfiguration.value,
+				index,
+				coordinate: trap.tooltipPosition
+			});
+		}
+		function handleTrapezoidLeave() {
+			tooltip.clear("hover", "item");
+		}
+		return () => {
+			if (props.hide) return null;
+			if (items.value.length === 0) return null;
+			const defaultContent = slots.default?.() ?? [];
+			const cells = extractCellProps(defaultContent);
+			assignCells(cellPropsRef, cells);
+			const nonCellContent = cells.length > 0 ? filterOutCells(defaultContent) : defaultContent;
+			const stroke = props.stroke;
+			return createVNode(Layer, {
+				"data-slot": "series",
+				"class": ["v-charts-funnel", props.class]
+			}, { default: () => [items.value.map(({ key, value: trap }) => {
+				const cellProps = cells[trap.index] ?? {};
+				const trapFill = entryColor({
+					cell: cellProps,
+					row: trap.payload,
+					seriesFill: props.fill,
+					index: trap.index
+				});
+				const trapStroke = cellProps.stroke ?? stroke;
+				const trapezoidProps = {
+					...trap,
+					isActive: activeIndex.value === trap.index,
+					fill: trapFill,
+					stroke: trapStroke,
+					animationProgress: isAnimating.value ? 0 : 1
+				};
+				const keyboard = tooltip.keyboardInteraction.value;
+				const focused = keyboard.active && keyboard.configuration === tooltipConfiguration.value && keyboard.index === trap.index;
+				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": focused ? "var(--v-charts-focus, Highlight)" : trapStroke,
+					"stroke-width": focused ? 2 : void 0
+				}), null);
+				return createVNode("g", {
+					"key": key,
+					"onMouseenter": (event) => {
+						handleTrapezoidEnter(trap, trap.index);
+						emit("mouseenter", trap, trap.index, event);
+					},
+					"onMouseleave": (event) => {
+						handleTrapezoidLeave();
+						emit("mouseleave", trap, trap.index, event);
+					},
+					"onClick": (event) => {
+						tooltip.activate("click", {
+							type: "item",
+							configuration: tooltipConfiguration.value,
+							index: trap.index,
+							coordinate: trap.tooltipPosition
+						});
+						emit("click", trap, trap.index, event);
+					}
+				}, [content]);
+			}), nonCellContent] });
+		};
+	}
+});
+var Funnel = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
 	name: "Funnel",
+	emits: funnelEvents.emits,
 	props: FunnelVueProps,
 	inheritAttrs: false,
 	slots: Object,
-	setup(props, { attrs, slots }) {
-		const dispatch = useAppDispatch();
-		const isAnimating = useIsAnimating(() => props.isAnimationActive);
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps);
+		funnelEvents.provide(emit);
+		const data = useTrackedData(() => props.data);
 		const cellPropsRef = shallowRef([]);
 		const funnelSettings = computed(() => ({
-			data: props.data,
+			data: data.value,
 			dataKey: props.dataKey,
 			nameKey: props.nameKey,
 			tooltipType: props.tooltipType,
@@ -35,128 +245,38 @@ var Funnel = /* @__PURE__ */ defineComponent({
 				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 chart = useChart();
+		const composedData = computed(() => funnelTrapezoids(chart.offset.value, funnelSettings.value, chart.data.value));
 		const trapezoids = computed(() => composedData.value?.trapezoids ?? []);
-		SetLegendPayload(computed(() => {
+		const legendPayload = 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,
+				color: entryColor({
+					cell: cells[i],
+					row: trap.payload,
+					seriesFill: props.fill,
+					index: i
+				}),
 				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.class] }, { 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] });
-		};
+		useSetupPolarItem(props, "funnel", {
+			settings: () => ({ data: data.value ?? [] }),
+			legend: () => legendPayload.value
+		});
+		const View = useDeferredView(FunnelView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs,
+			data,
+			trapezoids,
+			cellPropsRef
+		}, slots);
 	}
-});
+}));
 //#endregion
 export { Funnel };

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

@@ -21,6 +21,11 @@ var FunnelVueProps = {
 		],
 		default: "name"
 	},
+	/** Series name for the tooltip; defaults to a string `dataKey`. */
+	name: {
+		type: [String, Number],
+		default: void 0
+	},
 	lastShapeType: {
 		type: String,
 		default: "triangle"
@@ -31,11 +36,11 @@ var FunnelVueProps = {
 	},
 	fill: {
 		type: String,
-		default: "#808080"
+		default: void 0
 	},
 	stroke: {
 		type: String,
-		default: "#fff"
+		default: "var(--v-charts-background, #fff)"
 	},
 	legendType: {
 		type: String,
@@ -51,21 +56,10 @@ var FunnelVueProps = {
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: true
+		default: void 0
 	},
 	transition: {
 		type: Object,
-		default: () => ({
-			duration: .8,
-			ease: "easeOut"
-		})
-	},
-	onAnimationStart: {
-		type: Function,
-		default: void 0
-	},
-	onAnimationEnd: {
-		type: Function,
 		default: void 0
 	},
 	width: {