vccs 0.1.0 → 0.3.0

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

@@ -1,148 +1,217 @@
-import { interpolate as e } from "../../utils/data-utils.mjs";
-import { Curve as t } from "../../shape/Curve.mjs";
-import { Layer as n } from "../../container/Layer.mjs";
-import { Dot as r } from "../../shape/Dot.mjs";
-import { LabelList as i } from "../../components/label/LabelList.mjs";
-import { useLineContext as a } from "./hooks/useLine.mjs";
-import { Fragment as o, createVNode as s, defineComponent as c, mergeProps as l, onBeforeUnmount as u, ref as d, watch as f } from "vue";
-import { animate as p } from "motion-v";
+import { interpolate } from "../../utils/data-utils.mjs";
+import { Curve } from "../../shape/Curve.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { useLineContext } from "./hooks/useLine.mjs";
+import { Fragment, createVNode, defineComponent, mergeProps, onBeforeUnmount, ref, watch } from "vue";
+import { animate } from "motion-v";
 //#region src/cartesian/line/StaticLine.tsx
-var m = /* @__PURE__ */ c({
+var Dots = /* @__PURE__ */ defineComponent({
 	name: "LineDots",
 	props: { points: {
 		type: Array,
 		default: () => []
 	} },
-	setup(e) {
-		let { clipPathId: t, clipDot: i, props: o, attrs: c, needClip: u, dotSlot: d } = a();
+	setup(_props) {
+		const { clipPathId, clipDot, props, attrs, needClip, dotSlot } = useLineContext();
 		return () => {
-			let { points: a } = e;
-			if (!g(a, o.dot)) return null;
-			let f = typeof o.dot == "object" && o.dot !== null ? o.dot : {}, p = {
-				fill: "#fff",
-				stroke: o.stroke,
-				"stroke-width": o.strokeWidth,
-				...f
+			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",
+				"stroke": props.stroke,
+				"stroke-width": props.strokeWidth,
+				...dotObjProps
 			};
-			return s(n, {
-				class: "v-charts-line-dots",
-				"clip-path": u.value ? `url(#clipPath-${i ? "" : "dots-"}${t.value})` : void 0
-			}, { default: () => [a?.map((e, t) => {
-				let n = e;
-				return d ? d({
-					...p,
-					...c,
-					cx: e.x,
-					cy: e.y,
-					index: t,
-					value: n.value,
-					payload: n.payload
-				}) : s(r, l({ r: 3 }, p, c, {
-					cx: e.x,
-					cy: e.y,
-					class: "v-charts-line-dot",
-					clipDot: i
+			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({
+					...dotsProps,
+					...attrs,
+					cx: point.x,
+					cy: point.y,
+					index,
+					value: pointAsLine.value,
+					payload: pointAsLine.payload
+				});
+				return createVNode(Dot, mergeProps({ "r": 3 }, dotsProps, attrs, {
+					"cx": point.x,
+					"cy": point.y,
+					"class": "v-charts-line-dot",
+					"clipDot": clipDot
 				}), null);
 			})] });
 		};
 	}
-}), h = /* @__PURE__ */ c({
+});
+var StaticLine = /* @__PURE__ */ defineComponent({
 	name: "StaticLine",
 	setup() {
-		let { points: r, clipPathId: c, layout: h, attrs: g, lineData: _, props: v, isAnimating: y, needClip: b, shapeSlot: x, labelSlot: S } = a(), C = d([]), w = d(1), T = !0, E = [], D = [], O = null, k = !1;
-		function A() {
-			O &&= (O.stop(), null);
+		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;
+			}
 		}
-		return u(() => {
-			A();
-		}), f(r, (t) => {
-			if (!(t && D.length === t.length && t.every((e, t) => e.x === D[t].x && e.y === D[t].y))) if (t && t.length > 0) {
-				if (!v.isAnimationActive) {
-					T = !1, A(), k = !1, y.value = !1, C.value = t, E = t, D = t, w.value = 0;
+		onBeforeUnmount(() => {
+			stopCurrentAnimation();
+		});
+		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;
 				}
-				T ? (T = !1, k = !0, y.value = !0, C.value = t, D = t, w.value = 1, A(), O = p(1, 0, {
-					...v.transition,
-					onUpdate(e) {
-						k && (w.value = e);
-					},
-					onPlay() {
-						v.onAnimationStart?.();
-					},
-					onComplete() {
-						w.value = 0, y.value = !1, k = !1, O = null, E = C.value, D = E, v.onAnimationEnd?.();
-					}
-				})) : k ? (C.value = t, D = t) : (y.value = !0, w.value = 0, C.value.length && (E = C.value), D = t, A(), O = p(0, 1, {
-					...v.transition,
-					onUpdate(n) {
-						if (E.length) {
-							let r = E.length / t.length;
-							C.value = n === 1 ? t : t.map((t, i) => {
-								let a = Math.floor(i * r);
-								if (E[a]) {
-									let r = E[a];
-									return {
-										...t,
-										x: e(r.x, t.x, n),
-										y: e(r.y, t.y, n)
-									};
-								}
-								return t;
-							});
-						} else C.value = t;
-					},
-					onPlay() {
-						v.onAnimationStart?.();
-					},
-					onComplete() {
-						y.value = !1, E = t, D = t, O = null, v.onAnimationEnd?.();
-					}
-				}));
-			} else A(), k = !1, y.value = !1, C.value = t || [], E = C.value, D = E, w.value = 0;
-		}, { immediate: !0 }), () => {
-			let e = {
-				...g,
-				fill: "none",
-				stroke: v.stroke,
-				"stroke-width": v.strokeWidth
-			}, r = w.value, a = !y.value && (v.label || S), u = typeof v.label == "object" ? v.label : {}, d = null;
-			C.value && C.value.length > 1 && (d = x ? x({
-				...e,
-				points: C.value,
-				connectNulls: v.connectNulls,
-				type: v.type,
-				layout: h.value,
+				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 = {
+				...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"
-			}) : s(t, l(e, g["stroke-dasharray"] == null && r > 0 ? {
-				pathLength: 1,
+			});
+			else curveContent = createVNode(Curve, mergeProps(curveAttrs, !(attrs["stroke-dasharray"] != null) && dashRatio > 0 ? {
+				"pathLength": 1,
 				"stroke-dasharray": 1,
-				"stroke-dashoffset": r
+				"stroke-dashoffset": dashRatio
 			} : {}, {
-				points: C.value,
-				connectNulls: v.connectNulls,
-				type: v.type,
-				layout: h.value,
-				class: "v-charts-line-curve"
-			}), null));
-			let f = g["stroke-dasharray"] != null, p = (x || f) && r > 0 && d;
-			return s(o, null, [
-				d && s(n, { "clip-path": b.value ? `url(#clipPath-${c.value})` : void 0 }, { default: () => [p ? s("g", null, [s("defs", null, [s("clipPath", { id: `line-anim-${c.value}` }, [s("rect", {
-					x: "0",
-					y: "0",
-					width: `${(1 - r) * 100}%`,
-					height: "100%"
-				}, null)])]), s("g", { "clip-path": `url(#line-anim-${c.value})` }, [d])]) : d] }),
-				s(m, { points: C.value }, null),
-				a && s(i, l(u, {
-					data: _.value ?? [],
-					dataKey: v.dataKey
-				}), S ? { label: S } : void 0)
+				"points": currentPoints.value,
+				"connectNulls": props.connectNulls,
+				"type": props.type,
+				"layout": layout.value,
+				"class": "v-charts-line-curve"
+			}), null);
+			const hasCustomDashArray = attrs["stroke-dasharray"] != null;
+			const needClipAnim = (shapeSlot || hasCustomDashArray) && dashRatio > 0 && curveContent;
+			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 ?? [],
+					"dataKey": props.dataKey
+				}), labelSlot ? { label: labelSlot } : void 0)
 			]);
 		};
 	}
 });
-function g(e, t) {
-	return e == null || !e.length ? !1 : t ? !0 : e.length === 1;
+function shouldRenderDots(points, dot) {
+	if (points == null || !points.length) return false;
+	if (dot) return true;
+	return points.length === 1;
 }
 //#endregion
-export { h as StaticLine };
+export { StaticLine };

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

@@ -1,53 +1,69 @@
-import { uniqueId as e } from "../../../utils/data-utils.mjs";
-import { useIsPanorama as t } from "../../../context/PanoramaContextProvider.mjs";
-import { isClipDot as n } from "../../../utils/chart.mjs";
-import { useAppSelector as r } from "../../../state/hooks.mjs";
-import { useChartLayout as i } from "../../../context/chartLayoutContext.mjs";
-import { useChartName as a } from "../../../state/selectors/selectors.mjs";
-import { filterProps as o } from "../../../utils/VueUtils.mjs";
-import { useNeedsClip as s } from "../../useNeedsClip.mjs";
-import { selectLinePoints as c } from "../../../state/selectors/lineSelectors.mjs";
-import { computed as l, inject as u, provide as d, ref as f } from "vue";
+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 { useNeedsClip } from "../../useNeedsClip.mjs";
+import { selectLinePoints } from "../../../state/selectors/lineSelectors.mjs";
+import { computed, inject, provide } from "vue";
 //#region src/cartesian/line/hooks/useLine.ts
-var p = Symbol("LineContext");
-function m(e) {
-	d(p, e);
+var LineContextKey = Symbol("LineContext");
+function provideLineContext(context) {
+	provide(LineContextKey, context);
 }
-function h() {
-	let e = u(p);
-	if (!e) throw Error("useLineContext must be used within Line component");
-	return e;
+function useLineContext() {
+	const context = inject(LineContextKey);
+	if (!context) throw new Error("useLineContext must be used within Line component");
+	return context;
 }
-function g(u, d = {}, p, h, g) {
-	let _ = i(), v = a(), y = e("v-charts-line-"), b = l(() => u.id || y), x = t(), S = f(u.isAnimationActive), { needClip: C } = s(u.xAxisId, u.yAxisId), w = l(() => (_.value === "horizontal" || _.value === "vertical") && (v.value === "LineChart" || v.value === "ComposedChart") && !u.hide), T = l(() => ({
-		data: u.data,
-		dataKey: u.dataKey
-	})), E = r((e) => c(e, u.xAxisId, u.yAxisId, x, T.value)), D = u.dot, O = n(D), { r: k = 3, strokeWidth: A = 2 } = o(D, !1) ?? {
+function useLine(props, attrs = {}, shapeSlot, dotSlot, labelSlot) {
+	const layout = useChartLayout();
+	const chartName = useChartName();
+	const localId = uniqueId("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
-	}, j = k * 2 + A, M = {
-		clipPathId: b,
-		layout: _,
-		points: l(() => E.value),
-		props: u,
-		attrs: d,
-		lineData: E,
-		isAnimating: S,
-		needClip: C,
-		dot: D,
-		clipDot: O,
-		dotSize: j,
-		shapeSlot: p,
-		dotSlot: h,
-		labelSlot: g
 	};
-	return m(M), {
-		shouldRender: w,
-		needClip: C,
-		lineData: E,
-		points: M.points,
-		clipPathId: b
+	const dotSize = r * 2 + strokeWidth;
+	const lineContext = {
+		clipPathId,
+		layout,
+		points: computed(() => lineData.value),
+		props,
+		attrs,
+		lineData,
+		isAnimating,
+		needClip,
+		dot,
+		clipDot,
+		dotSize,
+		shapeSlot,
+		dotSlot,
+		labelSlot
+	};
+	provideLineContext(lineContext);
+	return {
+		shouldRender,
+		needClip,
+		lineData,
+		points: lineContext.points,
+		clipPathId
 	};
 }
 //#endregion
-export { p as LineContextKey, m as provideLineContext, g as useLine, h as useLineContext };
+export { LineContextKey, provideLineContext, useLine, useLineContext };

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

@@ -1,29 +1,24 @@
-import { CurveVueProps as e } from "../../shape/Curve.mjs";
+import { classProp } from "../../types/common.mjs";
+import { CurveVueProps } from "../../shape/Curve.mjs";
 //#region src/cartesian/line/type.ts
-var t = {
-	...e,
+var LineVueProps = {
+	...CurveVueProps,
 	activeDot: {
 		type: [
 			Boolean,
 			Object,
 			Function
 		],
-		default: !0
-	},
-	animationDuration: { type: Number },
-	animationEasing: { type: String },
-	animationBegin: {
-		type: Number,
-		default: 0
+		default: true
 	},
 	animationId: { type: String },
 	isAnimationActive: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	connectNulls: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	data: {
 		type: Array,
@@ -35,7 +30,7 @@ var t = {
 			Number,
 			Function
 		],
-		required: !0
+		required: true
 	},
 	dot: {
 		type: [
@@ -43,11 +38,11 @@ var t = {
 			Object,
 			Function
 		],
-		default: !0
+		default: true
 	},
 	hide: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	label: { type: [Boolean, Object] },
 	legendType: {
@@ -84,7 +79,7 @@ var t = {
 	},
 	needClip: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	id: { type: String },
 	activeIndex: { type: Number },
@@ -106,7 +101,7 @@ var t = {
 		default: 0
 	},
 	name: { type: [String, Number] },
-	class: { type: String }
+	class: classProp
 };
 //#endregion
-export { t as LineVueProps };
+export { LineVueProps };

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

@@ -1,33 +1,34 @@
-import { isNullish as e } from "../../utils/validate.mjs";
-import { getCateCoordinateOfLine as t, getValueByDataKey as n } from "../../utils/chart.mjs";
+import { isNullish } from "../../utils/validate.mjs";
+import { getCateCoordinateOfLine, getValueByDataKey } from "../../utils/chart.mjs";
 //#region src/cartesian/line/utils.ts
-function r({ layout: r, xAxis: i, yAxis: a, xAxisTicks: o, yAxisTicks: s, dataKey: c, bandSize: l, displayedData: u }) {
-	return u.map((u, d) => {
-		let f = n(u, c);
-		return r === "horizontal" ? {
-			x: t({
-				axis: i,
-				ticks: o,
-				bandSize: l,
-				entry: u,
-				index: d
+function computeLinePoints({ layout, xAxis, yAxis, xAxisTicks, yAxisTicks, dataKey, bandSize, displayedData }) {
+	return displayedData.map((entry, index) => {
+		const value = getValueByDataKey(entry, dataKey);
+		if (layout === "horizontal") return {
+			x: getCateCoordinateOfLine({
+				axis: xAxis,
+				ticks: xAxisTicks,
+				bandSize,
+				entry,
+				index
 			}),
-			y: e(f) ? null : a.scale(f),
-			value: f,
-			payload: u
-		} : {
-			x: e(f) ? null : i.scale(f),
-			y: t({
-				axis: a,
-				ticks: s,
-				bandSize: l,
-				entry: u,
-				index: d
+			y: isNullish(value) ? null : yAxis.scale(value),
+			value,
+			payload: entry
+		};
+		return {
+			x: isNullish(value) ? null : xAxis.scale(value),
+			y: getCateCoordinateOfLine({
+				axis: yAxis,
+				ticks: yAxisTicks,
+				bandSize,
+				entry,
+				index
 			}),
-			value: f,
-			payload: u
+			value,
+			payload: entry
 		};
 	});
 }
 //#endregion
-export { r as computeLinePoints };
+export { computeLinePoints };