vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/cartesian/area/Area.mjs

@@ -1,52 +1,89 @@
+import { useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { useSeriesPointEvents } from "../../events/usePointEvents.mjs";
+import { areaEvents } from "../../events/itemEvents.mjs";
+import { useLayerTeleport } from "../../hooks/useLayerTeleport.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { AreaVueProps } from "./type.mjs";
 import { useArea } from "./hooks/useArea.mjs";
 import { Layer } from "../../container/Layer.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { StaticArea } from "./RenderArea.mjs";
-import { ClipRect } from "./ClipRect.mjs";
-import { ActivePoints } from "./ActivePoints.mjs";
+import { ActivePoints } from "../ActivePoints.mjs";
+import { mainColor } from "../../core/color.mjs";
 import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
-import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
-import { Fragment, Teleport, createVNode, defineComponent, isVNode } from "vue";
+import { DotsClipPath, GraphicalItemClipPath } from "../GraphicalItemClipPath.mjs";
+import { Fragment, createVNode, defineComponent, h, proxyRefs, toRefs } from "vue";
 //#region src/cartesian/area/Area.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-/**
-* Type-safe Area component with slot types preserved in .d.ts output.
-* The `new () => { $slots }` pattern ensures Volar picks up slot types
-* even when consuming from compiled declarations.
-*/
-var Area = /* @__PURE__ */ defineComponent({
-	name: "Area",
-	props: AreaVueProps,
+var AreaView = /* @__PURE__ */ defineComponent({
+	name: "AreaView",
 	inheritAttrs: false,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		}
+	},
 	slots: Object,
-	setup(props, { attrs, slots }) {
-		useSetupGraphicalItem(props, "area");
-		const { shouldRender, areaData, points, clipPathId, shouldShowAnimation } = useArea(props, attrs, slots.dot);
-		const graphicalLayerRef = useGraphicalLayerRef(null);
+	setup(view, { slots }) {
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const trackedProps = proxyRefs({
+			...toRefs(props),
+			data: view.data
+		});
+		const { shouldRender, areaData, needClip, clipPathId } = useArea(trackedProps, attrs, slots.dot);
+		const activeListeners = useSeriesPointEvents(areaEvents.use(), () => areaData.value?.points ?? []);
+		const teleport = useLayerTeleport();
+		const graphicalLayerRef = useChartLayer("graphical");
 		return () => {
-			let _slot;
 			if (!shouldRender.value) return null;
-			let activeDot;
-			if (slots.activeDot) activeDot = { activeDot: slots.activeDot };
-			const renderAreaContent = () => {
-				if (shouldShowAnimation.value) return createVNode(Layer, { "key": "area-with-animation" }, { default: () => [createVNode("defs", null, [createVNode("clipPath", { "id": `animationClipPath-${clipPathId.value}` }, [createVNode(ClipRect, null, null)])]), createVNode(Layer, { "clip-path": `url(#animationClipPath-${clipPathId.value})` }, { default: () => [createVNode(StaticArea, null, null)] })] });
-				return createVNode(StaticArea, { "key": "static-area" }, null);
-			};
-			const areaContent = createVNode(Fragment, null, [createVNode(Layer, { "class": ["v-charts-area", attrs.class] }, _isSlot(_slot = renderAreaContent()) ? _slot : { default: () => [_slot] }), createVNode(ActivePoints, {
+			const areaContent = createVNode(Fragment, null, [createVNode(Layer, {
+				"data-slot": "series",
+				"class": ["v-charts-area", props.class]
+			}, { default: () => [needClip.value && createVNode("defs", null, [createVNode(GraphicalItemClipPath, {
+				"clipPathId": clipPathId.value,
+				"xAxisId": props.xAxisId,
+				"yAxisId": props.yAxisId
+			}, null), createVNode(DotsClipPath, {
+				"clipPathId": clipPathId.value,
+				"dot": props.dot
+			}, null)]), createVNode(StaticArea, null, { label: slots.label })] }), createVNode(Layer, activeListeners, { default: () => [!props.hide && createVNode(ActivePoints, {
 				"points": areaData.value?.points ?? [],
-				"mainColor": getLegendItemColor(attrs.stroke, props.fill),
+				"mainColor": mainColor("area", props),
 				"itemDataKey": props.dataKey,
-				"activeDot": props.activeDot
-			}, _isSlot(activeDot) ? activeDot : { default: () => [activeDot] })]);
-			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(areaContent) ? areaContent : { default: () => [areaContent] });
-			return areaContent;
+				"activeDot": props.activeDot,
+				"isAnimationActive": props.isAnimationActive
+			}, { activeDot: slots.activeDot })] })]);
+			return teleport(areaContent, graphicalLayerRef);
 		};
 	}
 });
-function getLegendItemColor(stroke, fill) {
-	return stroke && stroke !== "none" ? stroke : fill;
-}
+var Area = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "Area",
+	emits: areaEvents.emits,
+	props: AreaVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps, ["fill", "stroke"]);
+		areaEvents.provide(emit);
+		const { data } = useSetupGraphicalItem(props, "area");
+		const View = useDeferredView(AreaView);
+		return () => h(View, {
+			item: props,
+			data,
+			svgAttrs: attrs
+		}, slots);
+	}
+}));
 //#endregion
 export { Area };

package/dist/es/cartesian/area/RenderArea.mjs

@@ -1,27 +1,49 @@
-import { isNan, isNullish, isNumber } from "../../utils/validate.mjs";
-import { interpolate } from "../../utils/data-utils.mjs";
+import { useChartPresentation } from "../../model/presentation.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { usePointEvents, useSeriesPointEvents } from "../../events/usePointEvents.mjs";
+import { areaEvents } from "../../events/itemEvents.mjs";
 import { Curve } from "../../shape/Curve.mjs";
-import { isClipDot } from "../../utils/chart.mjs";
-import { useOffset } from "../../context/chartLayoutContext.mjs";
+import { isClipDot, shouldRenderDots } from "../../core/coordinates.mjs";
 import { useAreaContext } from "./hooks/useArea.mjs";
 import { Layer } from "../../container/Layer.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
 import { Dot } from "../../shape/Dot.mjs";
+import { drawTiming } from "../../animation/motion.mjs";
+import { usePointTransition } from "../../animation/usePointTransition.mjs";
+import { SweepClip } from "../../animation/SweepClip.mjs";
+import { labelOpacity, polylineLength, sweepShare, sweptLabels } from "../../animation/ridingLabels.mjs";
 import { LabelList } from "../../components/label/LabelList.mjs";
-import { Fragment, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
-import { animate } from "motion-v";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
 //#region src/cartesian/area/RenderArea.tsx
 var Dots = /* @__PURE__ */ defineComponent({
 	name: "Dots",
-	props: { points: {
-		type: Array,
-		default: () => []
-	} },
+	props: {
+		keys: {
+			type: Array,
+			default: () => []
+		},
+		indices: {
+			type: Array,
+			default: () => []
+		},
+		exiting: {
+			type: Array,
+			default: () => []
+		},
+		points: {
+			type: Array,
+			default: () => []
+		}
+	},
 	setup(_props) {
-		const { clipPathId, props, attrs, dotSlot } = useAreaContext();
+		const emit = areaEvents.use();
+		const { props, attrs, dotSlot, needClip, clipPathId } = useAreaContext();
+		const listeners = usePointEvents(emit);
 		return () => {
 			const { points } = _props;
 			if (!shouldRenderDots(points, props.dot)) return null;
 			const clipDot = isClipDot(props.dot);
+			const dotObjProps = typeof props.dot === "object" && props.dot !== null ? props.dot : {};
 			const dotsProps = {
 				"fill": props.fill,
 				"fill-opacity": props.fillOpacity,
@@ -30,102 +52,78 @@ var Dots = /* @__PURE__ */ defineComponent({
 			};
 			return createVNode(Layer, {
 				"class": "v-charts-area-dots",
-				"clip-path": props.needClip ? `url(#clipPath-${clipDot ? "" : "dots-"}${clipPathId.value})` : void 0
-			}, { default: () => [points?.map((point) => {
+				"clip-path": needClip.value ? `url(#clipPath-${clipDot ? "" : "dots-"}${clipPathId.value})` : void 0
+			}, { default: () => [points?.map((point, position) => {
+				const index = _props.indices[position] ?? position;
+				const exiting = _props.exiting[position];
+				const handlers = exiting ? {} : listeners(point, index);
 				const dotProps = {
 					...dotsProps,
 					...attrs,
 					r: 3,
+					...dotObjProps,
 					cx: point.x,
 					cy: point.y,
 					class: "v-charts-area-dot",
 					clipDot
 				};
-				if (dotSlot) return dotSlot(dotProps);
-				return createVNode(Dot, dotProps, null);
+				if (dotSlot) return createVNode("g", mergeProps({
+					"key": _props.keys[position],
+					"pointer-events": exiting ? "none" : void 0
+				}, handlers), [dotSlot(dotProps)]);
+				return createVNode("g", mergeProps({
+					"key": _props.keys[position],
+					"pointer-events": exiting ? "none" : void 0
+				}, handlers), [createVNode(Dot, dotProps, null)]);
 			})] });
 		};
 	}
 });
 var StaticArea = /* @__PURE__ */ defineComponent({
 	name: "StaticArea",
-	setup() {
-		const { points, clipPathId, layout, attrs, areaData, props, isAnimating, isClipRectAnimating } = useAreaContext();
-		const offset = useOffset();
-		const currentPoints = ref(points.value || []);
-		const currentBaseLine = ref(areaData.value?.baseLine || []);
-		let prevPoints = currentPoints.value || [];
-		let prevBaseLine = areaData.value?.baseLine || [];
-		let animationStopped = false;
-		watch(points, (newPoints, _, onCleanup) => {
-			if (isClipRectAnimating.value) {
-				currentPoints.value = newPoints;
-				currentBaseLine.value = areaData.value?.baseLine || [];
-				return;
-			}
-			if (newPoints && newPoints.length > 0) {
-				animationStopped = false;
-				isAnimating.value = true;
-				const animation = animate(0, 1, {
-					...props.transition,
-					onUpdate(t) {
-						if (animationStopped) return;
-						if (prevPoints.length) {
-							const prevPointsDiffFactor = prevPoints.length / newPoints.length;
-							const stepPoints = t === 1 ? newPoints : newPoints.map((entry, index) => {
-								const prevPointIndex = Math.floor(index * prevPointsDiffFactor);
-								if (prevPoints[prevPointIndex]) {
-									const prev = prevPoints[prevPointIndex];
-									return {
-										...entry,
-										x: interpolate(prev.x, entry.x, t),
-										y: interpolate(prev.y, entry.y, t)
-									};
-								}
-								return entry;
-							});
-							let stepBaseLine;
-							if (isNumber(areaData.value?.baseLine)) stepBaseLine = interpolate(prevBaseLine, areaData.value?.baseLine, t);
-							else if (isNullish(areaData.value?.baseLine) || isNan(areaData.value?.baseLine)) stepBaseLine = interpolate(prevBaseLine, 0, t);
-							else stepBaseLine = areaData?.value.baseLine.map((entry, index) => {
-								const prevPointIndex = Math.floor(index * prevPointsDiffFactor);
-								if (Array.isArray(prevBaseLine) && prevBaseLine[prevPointIndex]) {
-									const prev = prevBaseLine[prevPointIndex];
-									return {
-										...entry,
-										x: interpolate(prev.x, entry.x, t),
-										y: interpolate(prev.y, entry.y, t)
-									};
-								}
-								return entry;
-							});
-							currentPoints.value = stepPoints;
-							currentBaseLine.value = stepBaseLine;
-						}
-					},
-					onPlay() {
-						props.onAnimationStart?.();
-					},
-					onComplete() {
-						isAnimating.value = false;
-						props.onAnimationEnd?.();
-					}
-				});
-				onCleanup(() => {
-					animationStopped = true;
-					animation.stop();
-					prevPoints = currentPoints.value;
-					prevBaseLine = currentBaseLine.value;
-				});
-			} else {
-				isAnimating.value = false;
-				currentPoints.value = newPoints || [];
-				currentBaseLine.value = areaData.value?.baseLine || [];
-				prevPoints = currentPoints.value;
-				prevBaseLine = currentBaseLine.value;
-			}
-		}, { immediate: true });
+	setup(_, { slots }) {
+		const emit = areaEvents.use();
+		const { points, clipPathId, layout, attrs, areaData, props, needClip } = useAreaContext();
+		const seriesListeners = useSeriesPointEvents(emit, () => points.value ?? []);
+		const offset = useChartPresentation().offset;
+		const chart = useChart();
+		const categoryAxis = computed(() => layout.value === "vertical" ? chart.axis("yAxis", props.yAxisId).settings.value : chart.axis("xAxis", props.xAxisId).settings.value);
+		const display = usePointTransition(() => points.value, {
+			key: (point, index) => {
+				const dataKey = categoryAxis.value?.dataKey;
+				const category = dataKey == null ? void 0 : getValueByDataKey(point.payload, dataKey);
+				return category == null ? index : String(category);
+			},
+			baseline: () => areaData.value?.baseLine,
+			hidden: () => !!props.hide,
+			valueAxis: () => layout.value === "vertical" ? "x" : "y",
+			isActive: () => props.isAnimationActive !== false,
+			transition: () => props.transition,
+			entrance: () => drawTiming(polylineLength(points.value ?? [])),
+			onStart: () => emit("animation-start"),
+			onEnd: () => emit("animation-end")
+		});
+		const currentPoints = display.points;
+		const currentBaseLine = display.baseline;
+		const sweep = computed(() => layout.value === "vertical" ? {
+			start: offset.value.top - 8,
+			size: offset.value.height + 16,
+			vertical: true
+		} : {
+			start: offset.value.left - 8,
+			size: offset.value.width + 16,
+			vertical: false
+		});
+		const labels = computed(() => sweptLabels(display.items.value.map((item) => {
+			const opacity = props.hide ? 1 - (item.progress ?? 1) : labelOpacity(item);
+			return {
+				...item.value.point,
+				key: item.key,
+				...opacity != null ? { opacity } : {}
+			};
+		}), display.reveal.value, (point) => sweepShare(sweep.value.vertical ? point.y : point.x, sweep.value.start, sweep.value.size)));
 		return () => {
+			if (props.hide && !display.isAnimating.value) return null;
 			const curveAttrs = {
 				...attrs,
 				"fill": props.fill,
@@ -134,11 +132,21 @@ var StaticArea = /* @__PURE__ */ defineComponent({
 				"width": offset.value.width,
 				"stroke-width": props.strokeWidth
 			};
+			const sweepId = `animationClipPath-${clipPathId.value}`;
 			const isRange = areaData.value?.isRange;
-			const showLabels = !isAnimating.value && props.label;
+			const showLabels = props.label || slots.label;
 			const labelProps = typeof props.label === "object" ? props.label : {};
 			return createVNode(Fragment, null, [
-				currentPoints.value && currentPoints.value.length > 1 && createVNode(Layer, { "clip-path": props.needClip ? `url(#clipPath-${clipPathId.value})` : void 0 }, { default: () => [
+				createVNode("defs", null, [createVNode(SweepClip, {
+					"id": sweepId,
+					"progress": display.reveal.value,
+					"vertical": layout.value === "vertical",
+					"x": offset.value.left - 8,
+					"y": offset.value.top - 8,
+					"width": offset.value.width + 16,
+					"height": offset.value.height + 16
+				}, null)]),
+				createVNode("g", { "clip-path": display.reveal.value < 1 ? `url(#${sweepId})` : void 0 }, [currentPoints.value && currentPoints.value.length > 1 && createVNode(Layer, mergeProps(seriesListeners, { "clip-path": needClip.value ? `url(#clipPath-${clipPathId.value})` : void 0 }), { default: () => [
 					createVNode(Curve, mergeProps(curveAttrs, {
 						"points": currentPoints.value,
 						"connectNulls": props.connectNulls,
@@ -148,7 +156,7 @@ var StaticArea = /* @__PURE__ */ defineComponent({
 						"stroke": "none",
 						"class": "v-charts-area-area"
 					}), null),
-					attrs.stroke !== "none" && createVNode(Curve, mergeProps(curveAttrs, {
+					props.stroke !== "none" && createVNode(Curve, mergeProps(curveAttrs, {
 						"layout": layout.value,
 						"type": props.type,
 						"connectNulls": props.connectNulls,
@@ -157,29 +165,28 @@ var StaticArea = /* @__PURE__ */ defineComponent({
 						"stroke": props.stroke,
 						"class": "v-charts-area-curve"
 					}), null),
-					attrs.stroke !== "none" && isRange && createVNode(Curve, mergeProps(curveAttrs, {
+					props.stroke !== "none" && isRange && createVNode(Curve, mergeProps(curveAttrs, {
 						"class": "v-charts-area-curve",
 						"layout": layout.value,
 						"type": props.type,
 						"connectNulls": props.connectNulls,
 						"fill": "none",
-						"points": currentBaseLine.value,
+						"points": typeof currentBaseLine.value === "number" ? [] : currentBaseLine.value,
 						"stroke": props.stroke
 					}), null)
-				] }),
-				createVNode(Dots, { "points": currentPoints.value }, null),
+				] }), createVNode(Dots, {
+					"points": currentPoints.value,
+					"keys": display.items.value.map((item) => item.key),
+					"indices": display.items.value.map((item) => item.value.index),
+					"exiting": display.items.value.map((item) => item.phase === "exit")
+				}, null)]),
 				showLabels && createVNode(LabelList, mergeProps(labelProps, {
-					"data": areaData.value?.points ?? [],
+					"data": labels.value,
 					"dataKey": props.dataKey
-				}), null)
+				}), { label: slots.label })
 			]);
 		};
 	}
 });
-function shouldRenderDots(points, dot) {
-	if (points == null || !points.length) return false;
-	if (dot) return true;
-	return points.length === 1;
-}
 //#endregion
 export { StaticArea };

package/dist/es/cartesian/area/hooks/useArea.mjs

@@ -1,13 +1,10 @@
-import { uniqueId } from "../../../utils/data-utils.mjs";
-import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
-import { isClipDot } from "../../../utils/chart.mjs";
-import { useAppSelector } from "../../../state/hooks.mjs";
-import { useChartLayout } from "../../../context/chartLayoutContext.mjs";
-import { useChartName } from "../../../state/selectors/selectors.mjs";
-import { selectArea } from "../../../state/selectors/areaSelectors.mjs";
-import { useIsAnimating } from "../../../hooks/useIsAnimating.mjs";
-import { filterProps } from "../../../utils/VueUtils.mjs";
-import { computed, inject, provide, ref, watch } from "vue";
+import { useChartPresentation } from "../../../model/presentation.mjs";
+import { useChart } from "../../../model/chart.mjs";
+import { useChartId } from "../../../hooks/useChartId.mjs";
+import { getNormalizedStackId } from "../../../core/coordinates.mjs";
+import { computeArea } from "../../../core/area.mjs";
+import { useNeedsClip } from "../../useNeedsClip.mjs";
+import { computed, inject, provide } from "vue";
 //#region src/cartesian/area/hooks/useArea.ts
 var AreaContextKey = Symbol("AreaContext");
 function provideAreaContext(context) {
@@ -19,19 +16,13 @@ function useAreaContext() {
 	return context;
 }
 function useArea(props, attrs = {}, dotSlot) {
-	const layout = useChartLayout();
-	const chartName = useChartName();
-	const localId = uniqueId("v-charts-area-");
+	const chart = useChart();
+	const layout = useChartPresentation().layout;
+	const capabilities = useChartPresentation().capabilities;
+	const localId = useChartId("v-charts-area");
 	const clipPathId = computed(() => props.id || localId);
-	const isPanorama = useIsPanorama();
-	/**
-	* is Area animating
-	*/
-	const isAnimating = useIsAnimating(() => props.isAnimationActive);
-	/**
-	* render only when layout is horizontal or vertical and chartName is AreaChart or ComposedChart
-	*/
-	const shouldRender = computed(() => (layout.value === "horizontal" || layout.value === "vertical") && (chartName.value === "AreaChart" || chartName.value === "ComposedChart") && !props.hide);
+	const { needClip } = useNeedsClip(() => props.xAxisId, () => props.yAxisId);
+	const shouldRender = computed(() => (layout.value === "horizontal" || layout.value === "vertical") && capabilities.value.series.includes("area"));
 	const areaSettings = computed(() => ({
 		baseValue: props.baseValue,
 		stackId: props.stackId,
@@ -39,34 +30,45 @@ function useArea(props, attrs = {}, dotSlot) {
 		data: props.data,
 		dataKey: props.dataKey
 	}));
-	const areaData = useAppSelector((state) => selectArea(state, props.xAxisId, props.yAxisId, isPanorama, areaSettings.value));
-	const isClipRectAnimating = ref(true);
-	watch(() => props.hide, (v) => {
-		if (!v) isClipRectAnimating.value = true;
+	const xAxis = computed(() => chart.axis("xAxis", props.xAxisId));
+	const yAxis = computed(() => chart.axis("yAxis", props.yAxisId));
+	const stackedData = computed(() => {
+		const numericAxis = layout.value === "horizontal" ? yAxis.value : xAxis.value;
+		const stackId = getNormalizedStackId(props.stackId);
+		return stackId == null ? void 0 : numericAxis.stackGroups.value[stackId]?.stackedData.find((stack) => stack.key === props.dataKey);
 	});
-	const shouldShowAnimation = computed(() => {
-		return props.isAnimationActive && areaData.value?.points?.length && isClipRectAnimating.value;
+	const areaData = computed(() => {
+		const x = xAxis.value.withScale.value;
+		const y = yAxis.value.withScale.value;
+		const xTicks = xAxis.value.graphicalTicks.value;
+		const yTicks = yAxis.value.graphicalTicks.value;
+		const { dataStartIndex } = chart.dataRange.state.value;
+		const displayedData = chart.dataRange.displayedData(props);
+		const type = layout.value;
+		if (!x || !y || !xTicks?.length || !yTicks?.length || !displayedData || type !== "horizontal" && type !== "vertical") return;
+		return computeArea({
+			layout: type,
+			xAxis: x,
+			yAxis: y,
+			xAxisTicks: xTicks,
+			yAxisTicks: yTicks,
+			dataStartIndex,
+			areaSettings: areaSettings.value,
+			stackedData: stackedData.value,
+			displayedData,
+			chartBaseValue: void 0,
+			bandSize: (type === "horizontal" ? xAxis.value : yAxis.value).bandSize.value
+		});
 	});
-	const dot = props.dot;
-	const clipDot = isClipDot(dot);
-	const { r = 3, strokeWidth = 2 } = filterProps(dot, false) ?? {
-		r: 3,
-		strokeWidth: 2
-	};
-	const dotSize = r * 2 + strokeWidth;
 	const areaContext = {
 		clipPathId,
 		layout,
 		points: computed(() => areaData.value?.points),
 		props,
 		attrs,
-		dot,
-		clipDot,
-		dotSize,
+		needClip,
 		dotSlot,
-		areaData,
-		isAnimating,
-		isClipRectAnimating
+		areaData
 	};
 	provideAreaContext(areaContext);
 	return {
@@ -74,7 +76,7 @@ function useArea(props, attrs = {}, dotSlot) {
 		areaData,
 		points: areaContext.points,
 		clipPathId,
-		shouldShowAnimation
+		needClip
 	};
 }
 //#endregion

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

@@ -2,9 +2,9 @@ import { classProp } from "../../types/common.mjs";
 import { CurveVueProps } from "../../shape/Curve.mjs";
 //#region src/cartesian/area/type.ts
 var AreaVueProps = {
-	...CurveVueProps,
+	type: CurveVueProps.type,
 	activeDot: {
-		type: Boolean,
+		type: [Boolean, Object],
 		default: true
 	},
 	baseValue: {
@@ -28,12 +28,12 @@ var AreaVueProps = {
 		required: true
 	},
 	dot: {
-		type: Boolean,
+		type: [Boolean, Object],
 		default: false
 	},
 	fill: {
 		type: String,
-		default: "#3182bd"
+		default: void 0
 	},
 	fillOpacity: {
 		type: Number,
@@ -42,7 +42,7 @@ var AreaVueProps = {
 	strokeWidth: { type: Number },
 	stroke: {
 		type: String,
-		default: "#3182bd"
+		default: void 0
 	},
 	hide: {
 		type: Boolean,
@@ -50,8 +50,15 @@ var AreaVueProps = {
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: true
+		default: void 0
 	},
+	/**
+	* Label for each data point.
+	* - boolean: true for default label rendering
+	* - object: config object for label style/behavior
+	* - function: custom render function
+	* - VNode: custom Vue element
+	*/
 	label: {
 		type: [Boolean, Object],
 		default: void 0
@@ -60,24 +67,9 @@ var AreaVueProps = {
 		type: String,
 		default: "line"
 	},
-	onAnimationEnd: {
-		type: Function,
-		default: void 0
-	},
-	onAnimationStart: {
-		type: Function,
-		default: void 0
-	},
 	transition: {
 		type: Object,
-		default: {
-			duration: .8,
-			ease: "easeOut"
-		}
-	},
-	needClip: {
-		type: Boolean,
-		default: false
+		default: void 0
 	},
 	stackId: {
 		type: [String, Number],
@@ -99,34 +91,10 @@ var AreaVueProps = {
 		type: [String, Number],
 		default: 0
 	},
-	activeIndex: {
-		type: Number,
-		default: void 0
-	},
-	activePoint: {
-		type: Object,
-		default: void 0
-	},
 	id: {
 		type: String,
 		default: void 0
 	},
-	left: {
-		type: Number,
-		default: 0
-	},
-	top: {
-		type: Number,
-		default: 0
-	},
-	width: {
-		type: Number,
-		default: 0
-	},
-	height: {
-		type: Number,
-		default: 0
-	},
 	name: { type: [String, Number] },
 	class: classProp
 };