vccs 0.0.1 → 0.2.0

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

@@ -0,0 +1,217 @@
+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 Dots = /* @__PURE__ */ defineComponent({
+	name: "LineDots",
+	props: { points: {
+		type: Array,
+		default: () => []
+	} },
+	setup(_props) {
+		const { clipPathId, clipDot, props, attrs, needClip, dotSlot } = useLineContext();
+		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",
+				"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({
+					...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);
+			})] });
+		};
+	}
+});
+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();
+		});
+		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 = {
+				...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,
+				"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 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

@@ -0,0 +1,69 @@
+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 LineContextKey = Symbol("LineContext");
+function provideLineContext(context) {
+	provide(LineContextKey, context);
+}
+function useLineContext() {
+	const context = inject(LineContextKey);
+	if (!context) throw new Error("useLineContext must be used within Line component");
+	return context;
+}
+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
+	};
+	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 { LineContextKey, provideLineContext, useLine, useLineContext };

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

@@ -0,0 +1,112 @@
+import { CurveVueProps } from "../../shape/Curve.mjs";
+//#region src/cartesian/line/type.ts
+var LineVueProps = {
+	...CurveVueProps,
+	activeDot: {
+		type: [
+			Boolean,
+			Object,
+			Function
+		],
+		default: true
+	},
+	animationDuration: { type: Number },
+	animationEasing: { type: String },
+	animationBegin: {
+		type: Number,
+		default: 0
+	},
+	animationId: { type: String },
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	connectNulls: {
+		type: Boolean,
+		default: false
+	},
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	dot: {
+		type: [
+			Boolean,
+			Object,
+			Function
+		],
+		default: true
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	label: { type: [Boolean, Object] },
+	legendType: {
+		type: String,
+		default: "line"
+	},
+	onAnimationEnd: { type: Function },
+	onAnimationStart: { type: Function },
+	stroke: {
+		type: String,
+		default: "#3182bd"
+	},
+	strokeWidth: {
+		type: Number,
+		default: 1
+	},
+	tooltipType: { type: String },
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: .8,
+			ease: "easeOut"
+		})
+	},
+	type: { type: [String, Function] },
+	unit: { type: [String, Number] },
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		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: { type: String }
+};
+//#endregion
+export { LineVueProps };

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

@@ -0,0 +1,34 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { getCateCoordinateOfLine, getValueByDataKey } from "../../utils/chart.mjs";
+//#region src/cartesian/line/utils.ts
+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: 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,
+			payload: entry
+		};
+	});
+}
+//#endregion
+export { computeLinePoints };

package/dist/es/cartesian/reference-area/ReferenceArea.mjs

@@ -0,0 +1,163 @@
+import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { Rectangle } from "../../shape/Rectangle.mjs";
+import { addArea, removeArea } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
+//#region src/cartesian/reference-area/ReferenceArea.tsx
+function scaleValue(scale, value, position) {
+	const coord = scale(value);
+	if (!isWellBehavedNumber(coord)) return void 0;
+	const bandwidth = scale.bandwidth?.() ?? 0;
+	return position === "start" ? coord : coord + bandwidth;
+}
+function rangeMin(scale) {
+	const r = scale.range();
+	return Math.min(r[0], r[1]);
+}
+function rangeMax(scale) {
+	const r = scale.range();
+	return Math.max(r[0], r[1]);
+}
+var ReferenceArea = /* @__PURE__ */ defineComponent({
+	name: "ReferenceArea",
+	props: {
+		x1: {
+			type: [Number, String],
+			default: void 0
+		},
+		x2: {
+			type: [Number, String],
+			default: void 0
+		},
+		y1: {
+			type: [Number, String],
+			default: void 0
+		},
+		y2: {
+			type: [Number, String],
+			default: void 0
+		},
+		xAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		yAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		stroke: {
+			type: String,
+			default: "none"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 1
+		},
+		fill: {
+			type: String,
+			default: "#ccc"
+		},
+		fillOpacity: {
+			type: Number,
+			default: .5
+		},
+		label: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			default: void 0
+		},
+		ifOverflow: {
+			type: String,
+			default: "discard"
+		},
+		className: {
+			type: String,
+			default: void 0
+		},
+		radius: {
+			type: [Number, Array],
+			default: 0
+		}
+	},
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const dispatch = useAppDispatch();
+		const isPanorama = useIsPanorama();
+		const clipPathId = useClipPathId();
+		const settings = reactive({
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			ifOverflow: props.ifOverflow,
+			x1: props.x1,
+			x2: props.x2,
+			y1: props.y1,
+			y2: props.y2
+		});
+		onMounted(() => {
+			dispatch(addArea(settings));
+		});
+		onUnmounted(() => {
+			dispatch(removeArea(settings));
+		});
+		const xAxisScale = useAppSelector((state) => selectAxisScale(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxisScale = useAppSelector((state) => selectAxisScale(state, "yAxis", props.yAxisId, isPanorama));
+		const rect = computed(() => {
+			const xScale = xAxisScale.value;
+			const yScale = yAxisScale.value;
+			if (!xScale || !yScale) return null;
+			const hasX1 = isNumOrStr(props.x1);
+			const hasX2 = isNumOrStr(props.x2);
+			const hasY1 = isNumOrStr(props.y1);
+			const hasY2 = isNumOrStr(props.y2);
+			if (!hasX1 && !hasX2 && !hasY1 && !hasY2) return null;
+			const px1 = hasX1 ? scaleValue(xScale, props.x1, "start") : rangeMin(xScale);
+			const px2 = hasX2 ? scaleValue(xScale, props.x2, "end") : rangeMax(xScale);
+			const py1 = hasY1 ? scaleValue(yScale, props.y1, "start") : rangeMin(yScale);
+			const py2 = hasY2 ? scaleValue(yScale, props.y2, "end") : rangeMax(yScale);
+			if (px1 == null || px2 == null || py1 == null || py2 == null) return null;
+			return {
+				x: Math.min(px1, px2),
+				y: Math.min(py1, py2),
+				width: Math.abs(px2 - px1),
+				height: Math.abs(py2 - py1)
+			};
+		});
+		return () => {
+			const r = rect.value;
+			if (!r) return null;
+			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
+			const svgAttrs = {
+				...attrs,
+				"stroke": props.stroke,
+				"stroke-width": props.strokeWidth,
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity
+			};
+			const labelValue = props.label;
+			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
+			return createVNode(Layer, { "class": ["v-charts-reference-area", props.className] }, { default: () => [createVNode(Rectangle, mergeProps(svgAttrs, {
+				"clip-path": clipPath,
+				"x": r.x,
+				"y": r.y,
+				"width": r.width,
+				"height": r.height,
+				"radius": props.radius,
+				"class": "v-charts-reference-area-rect"
+			}), null), labelValue != null && labelValue !== false && createVNode(Label, mergeProps({
+				"viewBox": r,
+				"value": typeof labelValue === "string" || typeof labelValue === "number" ? labelValue : void 0
+			}, labelProps), null)] });
+		};
+	}
+});
+//#endregion
+export { ReferenceArea };