vccs 0.5.0 → 1.0.0-beta.1

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

@@ -1,50 +1,94 @@
-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 { lineEvents } from "../../events/itemEvents.mjs";
 import { Curve } from "../../shape/Curve.mjs";
+import { shouldRenderDots } from "../../core/coordinates.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, lengthShares, polylineLength, sweptLabels } from "../../animation/ridingLabels.mjs";
 import { LabelList } from "../../components/label/LabelList.mjs";
+import { delegateItemEvents } from "../../events/delegateItemEvents.mjs";
 import { useLineContext } from "./hooks/useLine.mjs";
-import { Fragment, createVNode, defineComponent, mergeProps, onBeforeUnmount, ref, watch } from "vue";
-import { animate } from "motion-v";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
 //#region src/cartesian/line/StaticLine.tsx
 var Dots = /* @__PURE__ */ defineComponent({
 	name: "LineDots",
-	props: { points: {
-		type: Array,
-		default: () => []
-	} },
+	props: {
+		keys: {
+			type: Array,
+			default: () => []
+		},
+		indices: {
+			type: Array,
+			default: () => []
+		},
+		exiting: {
+			type: Array,
+			default: () => []
+		},
+		/** Below 1 while a dot appears behind the tip of a line drawing itself. */
+		opacities: {
+			type: Array,
+			default: () => []
+		},
+		points: {
+			type: Array,
+			default: () => []
+		}
+	},
 	setup(_props) {
+		const emit = lineEvents.use();
 		const { clipPathId, clipDot, props, attrs, needClip, dotSlot } = useLineContext();
+		const listeners = usePointEvents(emit);
+		const delegated = delegateItemEvents((position) => {
+			const point = _props.points[position];
+			if (!point || _props.exiting[position]) return void 0;
+			return {
+				point,
+				index: _props.indices[position] ?? position
+			};
+		}, {
+			click: ({ point, index }, _position, event) => listeners(point, index).onClick(event),
+			mouseenter: ({ point, index }, _position, event) => listeners(point, index).onMouseenter(event),
+			mouseleave: ({ point, index }, _position, event) => listeners(point, index).onMouseleave(event)
+		});
 		return () => {
 			const { points } = _props;
 			if (!shouldRenderDots(points, props.dot)) return null;
 			const dotObjProps = typeof props.dot === "object" && props.dot !== null ? props.dot : {};
 			const dotsProps = {
-				"fill": "#fff",
+				"fill": "var(--v-charts-background, #fff)",
 				"stroke": props.stroke,
 				"stroke-width": props.strokeWidth,
 				...dotObjProps
 			};
-			return createVNode(Layer, {
-				"class": "v-charts-line-dots",
-				"clip-path": needClip.value ? `url(#clipPath-${clipDot ? "" : "dots-"}${clipPathId.value})` : void 0
-			}, { default: () => [points?.map((point, index) => {
-				const pointAsLine = point;
-				if (dotSlot) return dotSlot({
+			return createVNode(Layer, mergeProps({ "class": "v-charts-line-dots" }, delegated, { "clip-path": needClip.value ? `url(#clipPath-${clipDot.value ? "" : "dots-"}${clipPathId.value})` : void 0 }), { default: () => [points?.map((point, position) => {
+				const index = _props.indices[position] ?? position;
+				const exiting = _props.exiting[position];
+				return createVNode("g", {
+					"key": _props.keys[position],
+					"data-v-charts-item-index": exiting ? void 0 : position,
+					"opacity": _props.opacities[position],
+					"pointer-events": exiting ? "none" : void 0
+				}, [dotSlot ? dotSlot({
 					...dotsProps,
 					...attrs,
 					cx: point.x,
 					cy: point.y,
 					index,
-					value: pointAsLine.value,
-					payload: pointAsLine.payload
-				});
-				return createVNode(Dot, mergeProps({ "r": 3 }, dotsProps, attrs, {
+					value: point.value,
+					payload: point.payload
+				}) : createVNode(Dot, mergeProps({ "r": 3 }, dotsProps, attrs, {
 					"cx": point.x,
 					"cy": point.y,
 					"class": "v-charts-line-dot",
-					"clipDot": clipDot
-				}), null);
+					"clipDot": clipDot.value
+				}), null)]);
 			})] });
 		};
 	}
@@ -52,166 +96,85 @@ var Dots = /* @__PURE__ */ defineComponent({
 var StaticLine = /* @__PURE__ */ defineComponent({
 	name: "StaticLine",
 	setup() {
-		const { points, clipPathId, layout, attrs, lineData, props, isAnimating, needClip, shapeSlot, labelSlot } = useLineContext();
-		const currentPoints = ref([]);
-		const strokeDashRatio = ref(1);
-		let isFirstRender = true;
-		let prevPoints = [];
-		let animationTarget = [];
-		let currentAnimation = null;
-		let revealAnimationRunning = false;
-		function stopCurrentAnimation() {
-			if (currentAnimation) {
-				currentAnimation.stop();
-				currentAnimation = null;
-			}
-		}
-		onBeforeUnmount(() => {
-			stopCurrentAnimation();
+		const emit = lineEvents.use();
+		const { points, clipPathId, layout, attrs, props, needClip, shapeSlot, labelSlot, labelData } = useLineContext();
+		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(() => props.hide ? [] : 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);
+			},
+			isActive: () => props.isAnimationActive !== false,
+			transition: () => props.transition,
+			entrance: () => drawTiming(polylineLength(points.value ?? [])),
+			entranceAfterHydration: true,
+			onStart: () => emit("animation-start"),
+			onEnd: () => emit("animation-end")
+		});
+		const reached = computed(() => lengthShares(display.points.value));
+		const drawnLabels = computed(() => sweptLabels(display.items.value.map((item) => {
+			const opacity = labelOpacity(item);
+			return {
+				...item.value.point,
+				key: item.key,
+				...opacity != null ? { opacity } : {}
+			};
+		}), display.reveal.value, (_, index) => reached.value[index]));
+		labelData.value = drawnLabels;
+		/** Dots pop in just behind the tip while the line draws itself. */
+		const dotOpacities = computed(() => {
+			const reveal = display.reveal.value;
+			if (reveal >= 1) return [];
+			return reached.value.map((at) => at == null ? 0 : Math.min(1, Math.max(0, (reveal - at) / .04)));
 		});
-		watch(points, (newPoints) => {
-			if (newPoints && animationTarget.length === newPoints.length && newPoints.every((p, i) => p.x === animationTarget[i].x && p.y === animationTarget[i].y)) return;
-			if (newPoints && newPoints.length > 0) {
-				if (!props.isAnimationActive) {
-					isFirstRender = false;
-					stopCurrentAnimation();
-					revealAnimationRunning = false;
-					isAnimating.value = false;
-					currentPoints.value = newPoints;
-					prevPoints = newPoints;
-					animationTarget = newPoints;
-					strokeDashRatio.value = 0;
-					return;
-				}
-				if (isFirstRender) {
-					isFirstRender = false;
-					revealAnimationRunning = true;
-					isAnimating.value = true;
-					currentPoints.value = newPoints;
-					animationTarget = newPoints;
-					strokeDashRatio.value = 1;
-					stopCurrentAnimation();
-					currentAnimation = animate(1, 0, {
-						...props.transition,
-						onUpdate(v) {
-							if (!revealAnimationRunning) return;
-							strokeDashRatio.value = v;
-						},
-						onPlay() {
-							props.onAnimationStart?.();
-						},
-						onComplete() {
-							strokeDashRatio.value = 0;
-							isAnimating.value = false;
-							revealAnimationRunning = false;
-							currentAnimation = null;
-							prevPoints = currentPoints.value;
-							animationTarget = prevPoints;
-							props.onAnimationEnd?.();
-						}
-					});
-				} else if (revealAnimationRunning) {
-					currentPoints.value = newPoints;
-					animationTarget = newPoints;
-				} else {
-					isAnimating.value = true;
-					strokeDashRatio.value = 0;
-					if (currentPoints.value.length) prevPoints = currentPoints.value;
-					animationTarget = newPoints;
-					stopCurrentAnimation();
-					currentAnimation = animate(0, 1, {
-						...props.transition,
-						onUpdate(t) {
-							if (prevPoints.length) {
-								const prevPointsDiffFactor = prevPoints.length / newPoints.length;
-								currentPoints.value = 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;
-								});
-							} else currentPoints.value = newPoints;
-						},
-						onPlay() {
-							props.onAnimationStart?.();
-						},
-						onComplete() {
-							isAnimating.value = false;
-							prevPoints = newPoints;
-							animationTarget = newPoints;
-							currentAnimation = null;
-							props.onAnimationEnd?.();
-						}
-					});
-				}
-			} else {
-				stopCurrentAnimation();
-				revealAnimationRunning = false;
-				isAnimating.value = false;
-				currentPoints.value = newPoints || [];
-				prevPoints = currentPoints.value;
-				animationTarget = prevPoints;
-				strokeDashRatio.value = 0;
-			}
-		}, { immediate: true });
 		return () => {
-			const curveAttrs = {
+			const curveProps = {
 				...attrs,
 				"fill": "none",
 				"stroke": props.stroke,
-				"stroke-width": props.strokeWidth
-			};
-			const dashRatio = strokeDashRatio.value;
-			const showLabels = !isAnimating.value && (props.label || labelSlot);
-			const labelProps = typeof props.label === "object" ? props.label : {};
-			let curveContent = null;
-			if (currentPoints.value && currentPoints.value.length > 1) if (shapeSlot) curveContent = shapeSlot({
-				...curveAttrs,
-				points: currentPoints.value,
-				connectNulls: props.connectNulls,
-				type: props.type,
-				layout: layout.value,
-				class: "v-charts-line-curve"
-			});
-			else curveContent = createVNode(Curve, mergeProps(curveAttrs, !(attrs["stroke-dasharray"] != null) && dashRatio > 0 ? {
-				"pathLength": 1,
-				"stroke-dasharray": 1,
-				"stroke-dashoffset": dashRatio
-			} : {}, {
-				"points": currentPoints.value,
+				"stroke-width": props.strokeWidth,
+				"points": display.points.value,
 				"connectNulls": props.connectNulls,
 				"type": props.type,
-				"layout": layout.value,
+				"layout": layout.value === "vertical" ? "vertical" : "horizontal",
 				"class": "v-charts-line-curve"
-			}), null);
-			const hasCustomDashArray = attrs["stroke-dasharray"] != null;
-			const needClipAnim = (shapeSlot || hasCustomDashArray) && dashRatio > 0 && curveContent;
+			};
+			const reveal = display.reveal.value;
+			const drawnCurveProps = reveal < 1 && !shapeSlot ? {
+				...curveProps,
+				"pathLength": 1,
+				"stroke-dasharray": `${reveal} 1`
+			} : curveProps;
+			const sweepId = `line-anim-${clipPathId.value}`;
+			const labelProps = typeof props.label === "object" ? props.label : {};
 			return createVNode(Fragment, null, [
-				curveContent && createVNode(Layer, { "clip-path": needClip.value ? `url(#clipPath-${clipPathId.value})` : void 0 }, { default: () => [needClipAnim ? createVNode("g", null, [createVNode("defs", null, [createVNode("clipPath", { "id": `line-anim-${clipPathId.value}` }, [createVNode("rect", {
-					"x": "0",
-					"y": "0",
-					"width": `${(1 - dashRatio) * 100}%`,
-					"height": "100%"
-				}, null)])]), createVNode("g", { "clip-path": `url(#line-anim-${clipPathId.value})` }, [curveContent])]) : curveContent] }),
-				createVNode(Dots, { "points": currentPoints.value }, null),
-				showLabels && createVNode(LabelList, mergeProps(labelProps, {
-					"data": lineData.value ?? [],
+				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": reveal < 1 && shapeSlot ? `url(#${sweepId})` : void 0 }, [createVNode(Layer, mergeProps(seriesListeners, { "clip-path": needClip.value ? `url(#clipPath-${clipPathId.value})` : void 0 }), { default: () => [display.points.value.length > 1 && (shapeSlot ? shapeSlot(curveProps) : createVNode(Curve, drawnCurveProps, null))] }), createVNode(Dots, {
+					"points": display.points.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"),
+					"opacities": dotOpacities.value
+				}, null)]),
+				(props.label || labelSlot) && createVNode(LabelList, mergeProps(labelProps, {
+					"data": drawnLabels.value,
 					"dataKey": props.dataKey
 				}), labelSlot ? { label: labelSlot } : void 0)
 			]);
 		};
 	}
 });
-function shouldRenderDots(points, dot) {
-	if (points == null || !points.length) return false;
-	if (dot) return true;
-	return points.length === 1;
-}
 //#endregion
 export { StaticLine };

package/dist/es/cartesian/line/hooks/useLine.mjs

@@ -1,14 +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 { useIsAnimating } from "../../../hooks/useIsAnimating.mjs";
-import { filterProps } from "../../../utils/VueUtils.mjs";
+import { useChartPresentation } from "../../../model/presentation.mjs";
+import { useChart } from "../../../model/chart.mjs";
+import { useChartId } from "../../../hooks/useChartId.mjs";
+import { isClipDot } from "../../../core/coordinates.mjs";
 import { useNeedsClip } from "../../useNeedsClip.mjs";
-import { selectLinePoints } from "../../../state/selectors/lineSelectors.mjs";
-import { computed, inject, provide } from "vue";
+import { computeLinePoints } from "../../../core/line.mjs";
+import { computed, inject, provide, shallowRef } from "vue";
 //#region src/cartesian/line/hooks/useLine.ts
 var LineContextKey = Symbol("LineContext");
 function provideLineContext(context) {
@@ -20,26 +16,34 @@ function useLineContext() {
 	return context;
 }
 function useLine(props, attrs = {}, shapeSlot, dotSlot, labelSlot) {
-	const layout = useChartLayout();
-	const chartName = useChartName();
-	const localId = uniqueId("v-charts-line-");
+	const chart = useChart();
+	const layout = useChartPresentation().layout;
+	const capabilities = useChartPresentation().capabilities;
+	const localId = useChartId("v-charts-line");
 	const clipPathId = computed(() => props.id || localId);
-	const isPanorama = useIsPanorama();
-	const isAnimating = useIsAnimating(() => props.isAnimationActive);
-	const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
-	const shouldRender = computed(() => (layout.value === "horizontal" || layout.value === "vertical") && (chartName.value === "LineChart" || chartName.value === "ComposedChart") && !props.hide);
-	const lineSettings = computed(() => ({
-		data: props.data,
-		dataKey: props.dataKey
-	}));
-	const lineData = useAppSelector((state) => selectLinePoints(state, props.xAxisId, props.yAxisId, isPanorama, lineSettings.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 { needClip } = useNeedsClip(() => props.xAxisId, () => props.yAxisId);
+	const shouldRender = computed(() => (layout.value === "horizontal" || layout.value === "vertical") && capabilities.value.series.includes("line"));
+	const xAxis = computed(() => chart.axis("xAxis", props.xAxisId));
+	const yAxis = computed(() => chart.axis("yAxis", props.yAxisId));
+	const lineData = 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 displayedData = chart.dataRange.displayedData(props);
+		if (!x || !y || !xTicks?.length || !yTicks?.length || !displayedData) return void 0;
+		return computeLinePoints({
+			layout: layout.value,
+			xAxis: x,
+			yAxis: y,
+			xAxisTicks: xTicks,
+			yAxisTicks: yTicks,
+			dataKey: props.dataKey,
+			bandSize: (layout.value === "horizontal" ? xAxis.value : yAxis.value).bandSize.value,
+			displayedData
+		});
+	});
+	const clipDot = computed(() => isClipDot(props.dot));
 	const lineContext = {
 		clipPathId,
 		layout,
@@ -47,14 +51,12 @@ function useLine(props, attrs = {}, shapeSlot, dotSlot, labelSlot) {
 		props,
 		attrs,
 		lineData,
-		isAnimating,
 		needClip,
-		dot,
 		clipDot,
-		dotSize,
 		shapeSlot,
 		dotSlot,
-		labelSlot
+		labelSlot,
+		labelData: shallowRef(void 0)
 	};
 	provideLineContext(lineContext);
 	return {
@@ -62,8 +64,9 @@ function useLine(props, attrs = {}, shapeSlot, dotSlot, labelSlot) {
 		needClip,
 		lineData,
 		points: lineContext.points,
-		clipPathId
+		clipPathId,
+		labelData: computed(() => lineContext.labelData.value?.value)
 	};
 }
 //#endregion
-export { LineContextKey, provideLineContext, useLine, useLineContext };
+export { useLine, useLineContext };

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

@@ -1,20 +1,13 @@
 import { classProp } from "../../types/common.mjs";
-import { CurveVueProps } from "../../shape/Curve.mjs";
 //#region src/cartesian/line/type.ts
 var LineVueProps = {
-	...CurveVueProps,
 	activeDot: {
-		type: [
-			Boolean,
-			Object,
-			Function
-		],
+		type: [Boolean, Object],
 		default: true
 	},
-	animationId: { type: String },
 	isAnimationActive: {
 		type: Boolean,
-		default: true
+		default: void 0
 	},
 	connectNulls: {
 		type: Boolean,
@@ -33,11 +26,7 @@ var LineVueProps = {
 		required: true
 	},
 	dot: {
-		type: [
-			Boolean,
-			Object,
-			Function
-		],
+		type: [Boolean, Object],
 		default: true
 	},
 	hide: {
@@ -49,11 +38,9 @@ var LineVueProps = {
 		type: String,
 		default: "line"
 	},
-	onAnimationEnd: { type: Function },
-	onAnimationStart: { type: Function },
 	stroke: {
 		type: String,
-		default: "#3182bd"
+		default: void 0
 	},
 	strokeWidth: {
 		type: Number,
@@ -62,10 +49,7 @@ var LineVueProps = {
 	tooltipType: { type: String },
 	transition: {
 		type: Object,
-		default: () => ({
-			duration: .8,
-			ease: "easeOut"
-		})
+		default: void 0
 	},
 	type: { type: [String, Function] },
 	unit: { type: [String, Number] },
@@ -77,29 +61,7 @@ var LineVueProps = {
 		type: [String, Number],
 		default: 0
 	},
-	needClip: {
-		type: Boolean,
-		default: false
-	},
 	id: { type: String },
-	activeIndex: { type: Number },
-	activePoint: { type: Object },
-	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
 };