vccs 0.0.1 → 0.2.0

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

@@ -0,0 +1,192 @@
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitYAxis, selectAxisScale, selectTicksOfAxis, selectYAxisPosition, selectYAxisSize } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { addYAxis, removeYAxis } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+//#region src/cartesian/axis/YAxis.tsx
+var YAxisImpl = /* @__PURE__ */ defineComponent({
+	props: { yAxisId: {
+		type: [String, Number],
+		default: 0
+	} },
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const isPanorama = useIsPanorama();
+		const axisType = "yAxis";
+		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.yAxisId, isPanorama));
+		const axisSize = useAppSelector((state) => selectYAxisSize(state, props.yAxisId));
+		const position = useAppSelector((state) => selectYAxisPosition(state, props.yAxisId));
+		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.yAxisId, isPanorama));
+		const viewBox = useAppSelector(selectAxisViewBox);
+		return () => {
+			const { ...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-yAxis yAxis", attrs.class]
+			}), null);
+		};
+	}
+});
+var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
+	props: {
+		interval: [String, Number],
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		scale: [String, Function],
+		type: String,
+		padding: Object,
+		allowDataOverflow: Boolean,
+		allowDuplicatedCategory: Boolean,
+		allowDecimals: Boolean,
+		tickCount: Number,
+		includeHidden: Boolean,
+		reversed: Boolean,
+		ticks: Array,
+		width: Number,
+		orientation: String,
+		mirror: Boolean,
+		hide: Boolean,
+		unit: String,
+		name: String,
+		angle: Number,
+		minTickGap: Number,
+		tick: {
+			type: [Boolean, Object],
+			default: true
+		},
+		tickFormatter: Function,
+		domain: Array,
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		}
+	},
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				...props,
+				interval: props.interval ?? "preserveEnd",
+				id: props.yAxisId,
+				dataKey: props.dataKey,
+				includeHidden: props.includeHidden ?? false,
+				angle: props.angle ?? 0,
+				minTickGap: props.minTickGap ?? 5,
+				tick: props.tick ?? true
+			};
+			dispatch(addYAxis(settings));
+			onCleanup(() => {
+				dispatch(removeYAxis(settings));
+			});
+		});
+		return () => createVNode(YAxisImpl, props, null);
+	}
+});
+var YAxis = /* @__PURE__ */ defineComponent({
+	name: "YAxis",
+	props: {
+		allowDataOverflow: {
+			type: Boolean,
+			default: implicitYAxis.allowDataOverflow
+		},
+		allowDecimals: {
+			type: Boolean,
+			default: implicitYAxis.allowDecimals
+		},
+		allowDuplicatedCategory: {
+			type: Boolean,
+			default: implicitYAxis.allowDuplicatedCategory
+		},
+		width: {
+			type: Number,
+			default: implicitYAxis.width
+		},
+		hide: {
+			type: Boolean,
+			default: false
+		},
+		mirror: {
+			type: Boolean,
+			default: implicitYAxis.mirror
+		},
+		orientation: {
+			type: String,
+			default: implicitYAxis.orientation
+		},
+		padding: {
+			type: Object,
+			default: implicitYAxis.padding
+		},
+		reversed: {
+			type: Boolean,
+			default: implicitYAxis.reversed
+		},
+		scale: {
+			type: [String, Function],
+			default: implicitYAxis.scale
+		},
+		tickCount: {
+			type: Number,
+			default: implicitYAxis.tickCount
+		},
+		type: {
+			type: String,
+			default: implicitYAxis.type
+		},
+		yAxisId: { type: [String, Number] },
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		tickFormatter: {
+			type: Function,
+			default: void 0
+		},
+		unit: {
+			type: String,
+			default: void 0
+		},
+		interval: { type: [String, Number] },
+		domain: {
+			type: Array,
+			default: void 0
+		},
+		axisLine: {
+			type: [Boolean, Object],
+			default: true
+		},
+		tickLine: {
+			type: [Boolean, Object],
+			default: true
+		},
+		tickMargin: Number,
+		minTickGap: {
+			type: Number,
+			default: 5
+		}
+	},
+	setup(props, { attrs }) {
+		return () => createVNode(YAxisSettingsDispatcher, mergeProps(props, attrs), null);
+	}
+});
+//#endregion
+export { YAxis };

package/dist/es/cartesian/bar/Bar.mjs

@@ -0,0 +1,111 @@
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { useChartLayout } from "../../context/chartLayoutContext.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { BarVueProps } from "./type.mjs";
+import { useNeedsClip } from "../useNeedsClip.mjs";
+import { useBar } from "./hooks/useBar.mjs";
+import { GraphicalItemClipPath } from "../GraphicalItemClipPath.mjs";
+import { BarBackground } from "./components/BarBackground.mjs";
+import { BarRectangles } from "./components/BarRectangles.mjs";
+import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry } from "../error-bar/ErrorBarContext.mjs";
+import { Cell } from "../../components/Cell.mjs";
+import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+//#region src/cartesian/bar/Bar.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var errorBarDataPointFormatter = (dataPoint, dataKey) => {
+	const value = Array.isArray(dataPoint.value) ? dataPoint.value[1] : dataPoint.value;
+	return {
+		x: dataPoint.x,
+		y: dataPoint.y,
+		value,
+		errorVal: getValueByDataKey(dataPoint.payload ?? dataPoint, dataKey)
+	};
+};
+var Bar = /* @__PURE__ */ defineComponent({
+	name: "Bar",
+	props: BarVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const errorBarRegistry = createErrorBarRegistry();
+		provideErrorBarRegistry(errorBarRegistry);
+		useSetupGraphicalItem(props, "bar", { errorBars: errorBarRegistry.errorBars });
+		const { shouldRender, clipPathId, barData, isAnimating, cellProps: cellPropsRef } = useBar(props, slots.shape, slots.activeBar);
+		const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
+		const layout = useChartLayout();
+		const errorBarOffset = computed(() => {
+			const first = barData.value?.[0];
+			if (first == null || first.height == null || first.width == null) return 0;
+			return layout.value === "vertical" ? first.height / 2 : first.width / 2;
+		});
+		provideErrorBarContext({
+			data: barData,
+			xAxisId: props.xAxisId ?? "xAxis-0",
+			yAxisId: props.yAxisId ?? "yAxis-0",
+			dataPointFormatter: errorBarDataPointFormatter,
+			errorBarOffset
+		});
+		provideCartesianLabelListData(computed(() => {
+			if (isAnimating.value || !barData.value) return void 0;
+			return barData.value.map((entry, i) => {
+				const fill = cellPropsRef.value?.[i]?.fill ?? entry.payload?.fill ?? props.fill;
+				return {
+					x: entry.x,
+					y: entry.y,
+					width: entry.width,
+					height: entry.height,
+					value: entry.value,
+					payload: entry.payload,
+					parentViewBox: entry.parentViewBox,
+					...fill != null ? { fill } : {}
+				};
+			});
+		}));
+		const graphicalLayerRef = useGraphicalLayerRef(null);
+		const extractCellProps = (vnodes) => {
+			const result = [];
+			for (const vnode of vnodes) if (vnode.type === Cell) result.push(vnode.props ?? {});
+			else if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...extractCellProps(vnode.children));
+			return result;
+		};
+		const filterOutCells = (vnodes) => {
+			const result = [];
+			for (const vnode of vnodes) {
+				if (vnode.type === Cell) continue;
+				if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...filterOutCells(vnode.children));
+				else result.push(vnode);
+			}
+			return result;
+		};
+		return () => {
+			if (!shouldRender.value) return null;
+			const defaultContent = slots.default?.() ?? [];
+			const cells = extractCellProps(defaultContent);
+			cellPropsRef.value = cells;
+			const nonCellContent = cells.length > 0 ? filterOutCells(defaultContent) : defaultContent;
+			const barContent = createVNode(Layer, { "class": ["v-charts-bar", attrs.class] }, { default: () => [
+				needClip.value && createVNode("defs", null, [createVNode(GraphicalItemClipPath, {
+					"clipPathId": clipPathId,
+					"xAxisId": props.xAxisId,
+					"yAxisId": props.yAxisId
+				}, null)]),
+				createVNode(Layer, {
+					"class": "v-charts-bar-rectangles",
+					"clip-path": needClip.value ? `url(#clipPath-${clipPathId})` : null
+				}, { default: () => [props.background && createVNode(BarBackground, null, null), createVNode(BarRectangles, null, null)] }),
+				!isAnimating.value && props.label && createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": barData.value }), null),
+				nonCellContent
+			] });
+			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(barContent) ? barContent : { default: () => [barContent] });
+			return barContent;
+		};
+	}
+});
+//#endregion
+export { Bar };

package/dist/es/cartesian/bar/components/BarBackground.mjs

@@ -0,0 +1,32 @@
+import { Layer } from "../../../container/Layer.mjs";
+import { useBarContext } from "../hooks/useBar.mjs";
+import { Rectangle } from "../../../shape/Rectangle.mjs";
+import { Fragment, createVNode, defineComponent } from "vue";
+//#region src/cartesian/bar/components/BarBackground.tsx
+var BarBackground = /* @__PURE__ */ defineComponent({
+	name: "BarBackground",
+	inheritAttrs: false,
+	setup(_, { attrs }) {
+		const { props, data: barData } = useBarContext();
+		return () => {
+			const data = barData.value;
+			const backgroundFromProps = props.background;
+			if (!backgroundFromProps || !data) return null;
+			return createVNode(Fragment, null, [data.map((entry, i) => {
+				const { value, background: backgroundFromDataEntry, tooltipPosition, ...rest } = entry;
+				if (!backgroundFromDataEntry) return null;
+				const backgroundObjectProps = typeof backgroundFromProps === "object" ? backgroundFromProps : {};
+				const barRectangleProps = {
+					option: backgroundFromProps,
+					...rest,
+					fill: "#eee",
+					...backgroundFromDataEntry,
+					...backgroundObjectProps
+				};
+				return createVNode(Layer, { "key": `background-bar-${i}` }, { default: () => [createVNode(Rectangle, barRectangleProps, null)] });
+			})]);
+		};
+	}
+});
+//#endregion
+export { BarBackground };

package/dist/es/cartesian/bar/components/BarRectangles.mjs

@@ -0,0 +1,143 @@
+import { mouseLeaveItem, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../../../state/tooltipSlice.mjs";
+import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from "../../../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
+import { filterProps } from "../../../utils/VueUtils.mjs";
+import { Layer } from "../../../container/Layer.mjs";
+import { Animate } from "../../../animation/Animate.mjs";
+import { useBarContext } from "../hooks/useBar.mjs";
+import { Rectangle } from "../../../shape/Rectangle.mjs";
+import { Fragment, createVNode, defineComponent, isVNode } from "vue";
+//#region src/cartesian/bar/components/BarRectangles.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var BarRectangles = /* @__PURE__ */ defineComponent({
+	name: "BarRectangles",
+	inheritAttrs: false,
+	setup(_) {
+		const dispatch = useAppDispatch();
+		const activeIndex = useAppSelector(selectActiveTooltipIndex);
+		const activeDataKey = useAppSelector(selectActiveTooltipDataKey);
+		let previousRectangles = null;
+		let animationId = 0;
+		const { props, data: barData, layout, isAnimating, shapeSlot, activeBarSlot, cellProps } = useBarContext();
+		const { dataKey, isAnimationActive, onAnimationStart, onAnimationEnd, activeBar, activeIndex: activeIndexProp } = props;
+		const onMouseEnterFromContext = (entry, index) => (e) => {
+			dispatch(setActiveMouseOverItemIndex({
+				activeDataKey: dataKey,
+				activeIndex: String(index),
+				activeCoordinate: {
+					x: entry.tooltipPosition.x,
+					y: entry.tooltipPosition.y
+				}
+			}));
+		};
+		const onMouseLeaveFromContext = (entry, index) => (e) => {
+			dispatch(mouseLeaveItem());
+		};
+		const onClickFromContext = (entry, index) => (e) => {
+			dispatch(setActiveClickItemIndex({
+				activeDataKey: dataKey,
+				activeIndex: String(index),
+				activeCoordinate: {
+					x: entry.tooltipPosition.x,
+					y: entry.tooltipPosition.y
+				}
+			}));
+		};
+		const baseProps = filterProps(props, false);
+		const interpolateNumber = (from, to) => (t) => from + (to - from) * t;
+		const renderRectangles = (data) => {
+			if (!data) return null;
+			return createVNode(Fragment, null, [data.map((entry, i) => {
+				let _slot;
+				const activeEnabled = activeBar !== false || activeIndexProp != null || !!activeBarSlot;
+				const isActive = activeIndexProp != null ? activeEnabled && i === activeIndexProp : activeEnabled && String(i) === activeIndex.value && (activeDataKey.value == null || dataKey === activeDataKey.value);
+				const activeBarProps = isActive && typeof activeBar === "object" ? activeBar : {};
+				const entryFill = entry.payload?.fill;
+				const cellPropsForIndex = cellProps.value?.[i];
+				const barRectangleProps = {
+					...baseProps,
+					...entryFill ? { fill: entryFill } : {},
+					...entry,
+					...cellPropsForIndex ?? {},
+					...isActive ? activeBarProps : {},
+					isActive,
+					index: i,
+					dataKey
+				};
+				const renderShape = () => {
+					if (isActive && activeBarSlot) return activeBarSlot(barRectangleProps);
+					if (shapeSlot) return shapeSlot(barRectangleProps);
+					return createVNode(Rectangle, barRectangleProps, null);
+				};
+				return createVNode(Layer, {
+					"key": `rectangle-${entry?.x}-${entry?.y}-${entry?.value}-${i}`,
+					"class": "v-charts-bar-rectangle",
+					"onMouseenter": onMouseEnterFromContext(entry, i),
+					"onMouseleave": onMouseLeaveFromContext(entry, i),
+					"onClick": onClickFromContext(entry, i)
+				}, _isSlot(_slot = renderShape()) ? _slot : { default: () => [_slot] });
+			})]);
+		};
+		return () => {
+			const data = barData.value;
+			if (!data) return null;
+			if (isAnimationActive && previousRectangles !== data) {
+				const prevData = previousRectangles;
+				animationId++;
+				isAnimating.value = true;
+				return createVNode(Animate, {
+					"key": animationId,
+					"transition": props.transition,
+					"isActive": isAnimationActive,
+					"onAnimationStart": onAnimationStart,
+					"onAnimationEnd": () => {
+						isAnimating.value = false;
+						onAnimationEnd?.();
+					}
+				}, { default: (t) => {
+					const stepData = t === 1 ? data : data.map((entry, index) => {
+						const prev = prevData?.[index];
+						if (prev && prev.stackedBarStart === entry.stackedBarStart) {
+							const interpolatorX = interpolateNumber(prev.x || 0, entry.x || 0);
+							const interpolatorY = interpolateNumber(prev.y || 0, entry.y || 0);
+							const interpolatorWidth = interpolateNumber(prev.width, entry.width);
+							const interpolatorHeight = interpolateNumber(prev.height, entry.height);
+							return {
+								...entry,
+								x: interpolatorX(t),
+								y: interpolatorY(t),
+								width: interpolatorWidth(t),
+								height: interpolatorHeight(t)
+							};
+						}
+						if (layout.value === "horizontal") {
+							const h = interpolateNumber(0, entry.height)(t);
+							const y = interpolateNumber(entry.stackedBarStart, entry.y)(t);
+							return {
+								...entry,
+								y,
+								height: h
+							};
+						}
+						const w = interpolateNumber(0, entry.width)(t);
+						const x = interpolateNumber(entry.stackedBarStart, entry.x)(t);
+						return {
+							...entry,
+							width: w,
+							x
+						};
+					});
+					if (t > 0) previousRectangles = stepData;
+					return createVNode("g", null, [renderRectangles(stepData)]);
+				} });
+			}
+			isAnimating.value = false;
+			previousRectangles = data;
+			return createVNode("g", null, [renderRectangles(data)]);
+		};
+	}
+});
+//#endregion
+export { BarRectangles };

package/dist/es/cartesian/bar/hooks/useBar.mjs

@@ -0,0 +1,53 @@
+import { uniqueId } from "../../../utils/data-utils.mjs";
+import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
+import { getNormalizedStackId } from "../../../utils/chart.mjs";
+import { useAppSelector } from "../../../state/hooks.mjs";
+import { useChartLayout } from "../../../context/chartLayoutContext.mjs";
+import { useNeedsClip } from "../../useNeedsClip.mjs";
+import { selectBarRectangles } from "../../../state/selectors/barSelectors.mjs";
+import { computed, ref, shallowRef, useAttrs } from "vue";
+import { createContext } from "motion-v";
+//#region src/cartesian/bar/hooks/useBar.ts
+var [useBarContext, provideBarContext] = createContext("BarContext");
+function useBar(props, shapeSlot, activeBarSlot) {
+	const isPanorama = useIsPanorama();
+	const attrs = useAttrs();
+	const layout = useChartLayout();
+	const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
+	const barSettings = computed(() => ({
+		barSize: props.barSize,
+		data: props.data,
+		dataKey: props.dataKey,
+		maxBarSize: props.maxBarSize,
+		minPointSize: props.minPointSize,
+		stackId: getNormalizedStackId(props.stackId)
+	}));
+	const rects = useAppSelector((state) => selectBarRectangles(state, props.xAxisId, props.yAxisId, isPanorama, barSettings.value));
+	const shouldRender = computed(() => {
+		return (layout.value === "vertical" || layout.value === "horizontal") && !props.hide;
+	});
+	const clipPathId = uniqueId("v-charts-bar-");
+	const isAnimating = ref(false);
+	const cellPropsRef = shallowRef([]);
+	provideBarContext({
+		clipPathId,
+		layout,
+		props,
+		attrs,
+		data: rects,
+		isAnimating,
+		shapeSlot,
+		activeBarSlot,
+		cellProps: cellPropsRef
+	});
+	return {
+		shouldRender,
+		needClip,
+		clipPathId,
+		barData: rects,
+		isAnimating,
+		cellProps: cellPropsRef
+	};
+}
+//#endregion
+export { useBar, useBarContext };

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

@@ -0,0 +1,131 @@
+//#region src/cartesian/bar/type.ts
+var BarVueProps = {
+	class: {
+		type: String,
+		default: void 0
+	},
+	barSize: { type: [String, Number] },
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	fill: {
+		type: String,
+		default: void 0
+	},
+	stroke: {
+		type: String,
+		default: void 0
+	},
+	strokeWidth: {
+		type: Number,
+		default: 0
+	},
+	unit: {
+		type: [String, Number],
+		default: void 0
+	},
+	name: { type: [String, Number] },
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	legendType: {
+		type: String,
+		default: "rect"
+	},
+	minPointSize: {
+		type: [Number, Function],
+		default: 0
+	},
+	maxBarSize: { type: Number },
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	background: {
+		type: [Boolean, Object],
+		default: false
+	},
+	radius: {
+		type: [Number, Array],
+		default: void 0
+	},
+	onAnimationStart: {
+		type: Function,
+		default: void 0
+	},
+	onAnimationEnd: {
+		type: Function,
+		default: void 0
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	activeBar: {
+		type: [
+			Object,
+			Boolean,
+			Function
+		],
+		default: false
+	},
+	activeIndex: {
+		type: Number,
+		default: void 0
+	},
+	id: {
+		type: String,
+		default: void 0
+	},
+	stackId: {
+		type: [String, Number],
+		default: void 0
+	},
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	animationBegin: {
+		type: Number,
+		default: 0
+	},
+	animationDuration: {
+		type: Number,
+		default: 1500
+	},
+	animationEasing: {
+		type: String,
+		default: "ease"
+	},
+	transition: {
+		type: Object,
+		default: {
+			duration: .4,
+			ease: "easeOut"
+		}
+	},
+	needClip: {
+		type: Boolean,
+		default: false
+	},
+	label: {
+		type: [Boolean, Object],
+		default: false
+	}
+};
+//#endregion
+export { BarVueProps };