vccs 0.0.1 → 0.2.0

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

@@ -0,0 +1,185 @@
+import { isNan, isNullish, isNumber } from "../../utils/validate.mjs";
+import { interpolate } from "../../utils/data-utils.mjs";
+import { Curve } from "../../shape/Curve.mjs";
+import { isClipDot } from "../../utils/chart.mjs";
+import { useOffset } from "../../context/chartLayoutContext.mjs";
+import { useAreaContext } from "./hooks/useArea.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { Fragment, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
+import { animate } from "motion-v";
+//#region src/cartesian/area/RenderArea.tsx
+var Dots = /* @__PURE__ */ defineComponent({
+	name: "Dots",
+	props: { points: {
+		type: Array,
+		default: () => []
+	} },
+	setup(_props) {
+		const { clipPathId, props, attrs, dotSlot } = useAreaContext();
+		return () => {
+			const { points } = _props;
+			if (!shouldRenderDots(points, props.dot)) return null;
+			const clipDot = isClipDot(props.dot);
+			const dotsProps = {
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"stroke-width": props.strokeWidth,
+				"stroke": props.stroke
+			};
+			return createVNode(Layer, {
+				"class": "v-charts-area-dots",
+				"clip-path": props.needClip ? `url(#clipPath-${clipDot ? "" : "dots-"}${clipPathId.value})` : void 0
+			}, { default: () => [points?.map((point) => {
+				const dotProps = {
+					...dotsProps,
+					...attrs,
+					r: 3,
+					cx: point.x,
+					cy: point.y,
+					class: "v-charts-area-dot",
+					clipDot
+				};
+				if (dotSlot) return dotSlot(dotProps);
+				return 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 });
+		return () => {
+			const curveAttrs = {
+				...attrs,
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"height": offset.value.height,
+				"width": offset.value.width,
+				"stroke-width": props.strokeWidth
+			};
+			const isRange = areaData.value?.isRange;
+			const showLabels = !isAnimating.value && props.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(Curve, mergeProps(curveAttrs, {
+						"points": currentPoints.value,
+						"connectNulls": props.connectNulls,
+						"type": props.type,
+						"layout": layout.value,
+						"baseLine": currentBaseLine.value,
+						"stroke": "none",
+						"class": "v-charts-area-area"
+					}), null),
+					attrs.stroke !== "none" && createVNode(Curve, mergeProps(curveAttrs, {
+						"layout": layout.value,
+						"type": props.type,
+						"connectNulls": props.connectNulls,
+						"fill": "none",
+						"points": currentPoints.value,
+						"stroke": props.stroke,
+						"class": "v-charts-area-curve"
+					}), null),
+					attrs.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,
+						"stroke": props.stroke
+					}), null)
+				] }),
+				createVNode(Dots, { "points": currentPoints.value }, null),
+				showLabels && createVNode(LabelList, mergeProps(labelProps, {
+					"data": areaData.value?.points ?? [],
+					"dataKey": props.dataKey
+				}), null)
+			]);
+		};
+	}
+});
+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

@@ -0,0 +1,81 @@
+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";
+//#region src/cartesian/area/hooks/useArea.ts
+var AreaContextKey = Symbol("AreaContext");
+function provideAreaContext(context) {
+	provide(AreaContextKey, context);
+}
+function useAreaContext() {
+	const context = inject(AreaContextKey);
+	if (!context) throw new Error("useAreaContext must be used within Area component");
+	return context;
+}
+function useArea(props, attrs = {}, dotSlot) {
+	const layout = useChartLayout();
+	const chartName = useChartName();
+	const localId = uniqueId("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 areaSettings = computed(() => ({
+		baseValue: props.baseValue,
+		stackId: props.stackId,
+		connectNulls: props.connectNulls,
+		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 shouldShowAnimation = computed(() => {
+		return props.isAnimationActive && areaData.value?.points?.length && isClipRectAnimating.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,
+		dotSlot,
+		areaData,
+		isAnimating,
+		isClipRectAnimating
+	};
+	provideAreaContext(areaContext);
+	return {
+		shouldRender,
+		areaData,
+		points: areaContext.points,
+		clipPathId,
+		shouldShowAnimation
+	};
+}
+//#endregion
+export { useArea, useAreaContext };

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

@@ -0,0 +1,136 @@
+import { CurveVueProps } from "../../shape/Curve.mjs";
+//#region src/cartesian/area/type.ts
+var AreaVueProps = {
+	...CurveVueProps,
+	activeDot: {
+		type: Boolean,
+		default: true
+	},
+	baseValue: {
+		type: [Number, String],
+		default: void 0
+	},
+	connectNulls: {
+		type: Boolean,
+		default: false
+	},
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	dot: {
+		type: Boolean,
+		default: false
+	},
+	fill: {
+		type: String,
+		default: "#3182bd"
+	},
+	fillOpacity: {
+		type: Number,
+		default: .6
+	},
+	strokeWidth: { type: Number },
+	stroke: {
+		type: String,
+		default: "#3182bd"
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	label: {
+		type: [Boolean, Object],
+		default: void 0
+	},
+	legendType: {
+		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
+	},
+	stackId: {
+		type: [String, Number],
+		default: void 0
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	unit: {
+		type: [String, Number],
+		default: void 0
+	},
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		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: {
+		type: String,
+		default: void 0
+	}
+};
+//#endregion
+export { AreaVueProps };

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

@@ -0,0 +1,79 @@
+import { isNumber } from "../../utils/validate.mjs";
+import { getCateCoordinateOfLine, getValueByDataKey } from "../../utils/chart.mjs";
+//#region src/cartesian/area/utils.ts
+function getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis) {
+	const baseValue = itemBaseValue ?? chartBaseValue;
+	if (isNumber(baseValue)) return baseValue;
+	const numericAxis = layout === "horizontal" ? yAxis : xAxis;
+	const domain = numericAxis.scale.domain();
+	if (numericAxis.type === "number") {
+		const domainMax = Math.max(domain[0], domain[1]);
+		const domainMin = Math.min(domain[0], domain[1]);
+		if (baseValue === "dataMin") return domainMin;
+		if (baseValue === "dataMax") return domainMax;
+		return domainMax < 0 ? domainMax : Math.max(Math.min(domain[0], domain[1]), 0);
+	}
+	if (baseValue === "dataMin") return domain[0];
+	if (baseValue === "dataMax") return domain[1];
+	return domain[0];
+}
+function computeArea({ areaSettings: { connectNulls, baseValue: itemBaseValue, dataKey }, stackedData, layout, chartBaseValue, xAxis, yAxis, displayedData, dataStartIndex, xAxisTicks, yAxisTicks, bandSize }) {
+	const hasStack = stackedData && stackedData.length;
+	const baseValue = getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis);
+	const isHorizontalLayout = layout === "horizontal";
+	let isRange = false;
+	const points = displayedData.map((entry, index) => {
+		let value;
+		if (hasStack) value = stackedData[dataStartIndex + index];
+		else {
+			value = getValueByDataKey(entry, dataKey);
+			if (!Array.isArray(value)) value = [baseValue, value];
+			else isRange = true;
+		}
+		const isBreakPoint = value[1] == null || hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null;
+		if (isHorizontalLayout) return {
+			x: getCateCoordinateOfLine({
+				axis: xAxis,
+				ticks: xAxisTicks,
+				bandSize,
+				entry,
+				index
+			}),
+			y: isBreakPoint ? null : yAxis.scale(value[1]),
+			value,
+			payload: entry
+		};
+		return {
+			x: isBreakPoint ? null : xAxis.scale(value[1]),
+			y: getCateCoordinateOfLine({
+				axis: yAxis,
+				ticks: yAxisTicks,
+				bandSize,
+				entry,
+				index
+			}),
+			value,
+			payload: entry
+		};
+	});
+	let baseLine;
+	if (hasStack || isRange) baseLine = points.map((entry) => {
+		const x = Array.isArray(entry.value) ? entry.value[0] : null;
+		if (isHorizontalLayout) return {
+			x: entry.x,
+			y: x != null && entry.y != null ? yAxis.scale(x) : null
+		};
+		return {
+			x: x != null ? xAxis.scale(x) : null,
+			y: entry.y
+		};
+	});
+	else baseLine = isHorizontalLayout ? yAxis.scale(baseValue) : xAxis.scale(baseValue);
+	return {
+		points,
+		baseLine,
+		isRange
+	};
+}
+//#endregion
+export { computeArea };

package/dist/es/cartesian/axis/XAxis.mjs

@@ -0,0 +1,203 @@
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitXAxis, selectAxisScale, selectTicksOfAxis, selectXAxisPosition, selectXAxisSize } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { addXAxis, removeXAxis } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+//#region src/cartesian/axis/XAxis.tsx
+/**
+* @fileOverview X Axis
+*/
+var XAxisImpl = /* @__PURE__ */ defineComponent({
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		ticks: Array
+	},
+	inheritAttrs: false,
+	setup(props, { attrs, slots }) {
+		const isPanorama = useIsPanorama();
+		const axisType = "xAxis";
+		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.xAxisId, isPanorama));
+		const axisSize = useAppSelector((state) => selectXAxisSize(state, props.xAxisId));
+		const position = useAppSelector((state) => selectXAxisPosition(state, props.xAxisId));
+		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.xAxisId, isPanorama));
+		const viewBox = useAppSelector(selectAxisViewBox);
+		return () => {
+			const { ticks, ...allOtherProps } = props;
+			if (axisSize.value == null || position.value == null) return null;
+			return createVNode(CartesianAxis, mergeProps(allOtherProps, attrs, {
+				"viewBox": viewBox.value,
+				"scale": scale.value,
+				"x": position.value?.x,
+				"y": position.value?.y,
+				"width": axisSize.value?.width,
+				"height": axisSize.value?.height,
+				"ticks": cartesianTickItems.value,
+				"class": ["v-charts-xAxis xAxis", attrs.class]
+			}), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
+		};
+	}
+});
+var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
+	props: {
+		interval: [String, Number],
+		xAxisId: [String, Number],
+		scale: [String, Function],
+		type: String,
+		padding: Object,
+		allowDataOverflow: Boolean,
+		domain: { type: Array },
+		dataKey: { type: [
+			String,
+			Number,
+			Function
+		] },
+		allowDuplicatedCategory: Boolean,
+		allowDecimals: Boolean,
+		tickCount: Number,
+		includeHidden: Boolean,
+		reversed: Boolean,
+		ticks: Array,
+		height: Number,
+		orientation: String,
+		mirror: Boolean,
+		hide: Boolean,
+		unit: String,
+		name: String,
+		angle: Number,
+		minTickGap: Number,
+		tick: {
+			type: [Boolean, Object],
+			default: true
+		},
+		tickFormatter: Function
+	},
+	setup(props, { slots: dispatcherSlots }) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				interval: props.interval ?? "preserveEnd",
+				id: props.xAxisId,
+				scale: props.scale,
+				type: props.type,
+				padding: props.padding,
+				allowDataOverflow: props.allowDataOverflow,
+				domain: props.domain,
+				dataKey: props.dataKey,
+				allowDuplicatedCategory: props.allowDuplicatedCategory,
+				allowDecimals: props.allowDecimals,
+				tickCount: props.tickCount,
+				includeHidden: props.includeHidden ?? false,
+				reversed: props.reversed,
+				ticks: props.ticks,
+				height: props.height,
+				orientation: props.orientation,
+				mirror: props.mirror,
+				hide: props.hide,
+				unit: props.unit,
+				name: props.name,
+				angle: props.angle ?? 0,
+				minTickGap: props.minTickGap ?? 5,
+				tick: props.tick ?? true,
+				tickFormatter: props.tickFormatter
+			};
+			dispatch(addXAxis(settings));
+			onCleanup(() => {
+				dispatch(removeXAxis(settings));
+			});
+		});
+		return () => createVNode(XAxisImpl, props, { default: () => [dispatcherSlots.tick ? { tick: dispatcherSlots.tick } : void 0] });
+	}
+});
+var XAxis = /* @__PURE__ */ defineComponent({
+	name: "XAxis",
+	props: {
+		allowDataOverflow: {
+			type: Boolean,
+			default: implicitXAxis.allowDataOverflow
+		},
+		allowDecimals: {
+			type: Boolean,
+			default: implicitXAxis.allowDecimals
+		},
+		allowDuplicatedCategory: {
+			type: Boolean,
+			default: implicitXAxis.allowDuplicatedCategory
+		},
+		height: {
+			type: Number,
+			default: implicitXAxis.height
+		},
+		hide: {
+			type: Boolean,
+			default: false
+		},
+		mirror: {
+			type: Boolean,
+			default: implicitXAxis.mirror
+		},
+		orientation: {
+			type: String,
+			default: implicitXAxis.orientation
+		},
+		padding: {
+			type: Object,
+			default: implicitXAxis.padding
+		},
+		reversed: {
+			type: Boolean,
+			default: implicitXAxis.reversed
+		},
+		scale: {
+			type: [String, Function],
+			default: implicitXAxis.scale
+		},
+		tickCount: {
+			type: Number,
+			default: implicitXAxis.tickCount
+		},
+		type: {
+			type: String,
+			default: implicitXAxis.type
+		},
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		domain: { type: Array },
+		axisLine: {
+			type: Boolean,
+			default: true
+		},
+		ticks: { type: Array },
+		interval: { type: [String, Number] },
+		unit: { type: String },
+		tickLine: {
+			type: [Boolean, Object],
+			default: true
+		},
+		tickMargin: Number,
+		minTickGap: {
+			type: Number,
+			default: 5
+		},
+		tickFormatter: Function
+	},
+	setup(props, { attrs, slots }) {
+		return () => createVNode(XAxisSettingsDispatcher, mergeProps(props, attrs), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
+	}
+});
+//#endregion
+export { XAxis };