vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/animation/Animate.mjs

@@ -1,89 +0,0 @@
-import { defineComponent, onUnmounted, ref, watch } from "vue";
-import { animate } from "motion-v";
-import { usePreferredReducedMotion } from "@vueuse/core";
-//#region src/animation/Animate.tsx
-var DEFAULT_TRANSITION = {
-	duration: .4,
-	ease: "easeOut"
-};
-var Animate = /* @__PURE__ */ defineComponent({
-	name: "Animate",
-	props: {
-		isActive: {
-			type: Boolean,
-			default: true
-		},
-		transition: {
-			type: Object,
-			default: void 0
-		},
-		onAnimationStart: {
-			type: Function,
-			default: void 0
-		},
-		onAnimationEnd: {
-			type: Function,
-			default: void 0
-		},
-		onUpdate: {
-			type: Function,
-			default: void 0
-		},
-		from: {
-			type: Number,
-			default: 0
-		},
-		to: {
-			type: Number,
-			default: 1
-		}
-	},
-	setup(props, { slots }) {
-		let animationControls = null;
-		const currentValue = ref(0);
-		const reducedMotion = usePreferredReducedMotion();
-		const startAnimation = () => {
-			if (animationControls) animationControls.stop();
-			if (props.onAnimationStart) props.onAnimationStart();
-			animationControls = animate(props.from, props.to, {
-				...DEFAULT_TRANSITION,
-				...props.transition,
-				onUpdate: (latest) => {
-					currentValue.value = latest;
-					if (props.onUpdate) props.onUpdate(latest);
-				},
-				onComplete: () => {
-					currentValue.value = 1;
-					if (props.onAnimationEnd) props.onAnimationEnd();
-				}
-			});
-		};
-		const stopAnimation = () => {
-			if (animationControls) {
-				animationControls.stop();
-				animationControls = null;
-			}
-		};
-		watch([() => props.isActive, reducedMotion], ([isActive, motion]) => {
-			if (isActive) if (motion === "reduce") {
-				stopAnimation();
-				if (props.onAnimationStart) props.onAnimationStart();
-				currentValue.value = props.to;
-				if (props.onAnimationEnd) props.onAnimationEnd();
-			} else startAnimation();
-			else {
-				stopAnimation();
-				currentValue.value = props.to;
-			}
-		}, { immediate: true });
-		onUnmounted(() => {
-			stopAnimation();
-		});
-		return () => {
-			if (!slots.default) return null;
-			return slots.default(currentValue.value);
-		};
-	}
-});
-//#endregion
-export { Animate };

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

@@ -1,78 +0,0 @@
-import { isNullish } from "../../utils/validate.mjs";
-import { selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
-import { useAppSelector } from "../../state/hooks.mjs";
-import { Layer } from "../../container/Layer.mjs";
-import { Dot } from "../../shape/Dot.mjs";
-import { createVNode, defineComponent, isVNode } from "vue";
-//#region src/cartesian/area/ActivePoints.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-var ActivePoints = /* @__PURE__ */ defineComponent({
-	name: "ActivePoints",
-	props: {
-		points: {
-			type: Array,
-			required: true
-		},
-		mainColor: {
-			type: String,
-			required: true
-		},
-		itemDataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			required: true
-		},
-		activeDot: {
-			type: [
-				Object,
-				Boolean,
-				Function
-			],
-			required: true
-		}
-	},
-	slots: Object,
-	setup(props, { slots }) {
-		const activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
-		return () => {
-			const { points } = props;
-			if (!points?.length || isNullish(activeTooltipIndex.value)) return null;
-			const activePoint = points[Number(activeTooltipIndex.value)];
-			if (isNullish(activePoint)) return null;
-			return renderActivePoint({
-				point: activePoint,
-				childIndex: Number(activeTooltipIndex.value),
-				mainColor: props.mainColor,
-				dataKey: props.itemDataKey,
-				activeDot: props.activeDot,
-				slots
-			});
-		};
-	}
-});
-function renderActivePoint({ point, childIndex, mainColor, activeDot, dataKey, slots }) {
-	if (activeDot === false) return null;
-	const dotProps = {
-		"index": childIndex,
-		dataKey,
-		"cx": point.x,
-		"cy": point.y,
-		"r": 4,
-		"fill": mainColor,
-		"stroke-width": 2,
-		"stroke": "#fff",
-		"payload": point.payload,
-		"value": point.value
-	};
-	let dot;
-	if (slots.activeDot) dot = slots.activeDot(dotProps);
-	else dot = createVNode(Dot, dotProps, null);
-	return createVNode(Layer, { "class": "v-charts-active-dot" }, _isSlot(dot) ? dot : { default: () => [dot] });
-}
-//#endregion
-export { ActivePoints };

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

@@ -1,125 +0,0 @@
-import { isNumber, isWellBehavedNumber } from "../../utils/validate.mjs";
-import { useAreaContext } from "./hooks/useArea.mjs";
-import { Animate } from "../../animation/Animate.mjs";
-import { createVNode, defineComponent, ref, watch } from "vue";
-//#region src/cartesian/area/ClipRect.tsx
-var HorizontalRect = /* @__PURE__ */ defineComponent({
-	name: "HorizontalRect",
-	props: {
-		alpha: {
-			type: Number,
-			required: true
-		},
-		points: {
-			type: Array,
-			required: true
-		},
-		baseLine: {
-			type: [Number, Array],
-			required: true
-		},
-		strokeWidth: {
-			type: Number,
-			required: true
-		}
-	},
-	setup(props) {
-		const { points } = props;
-		return () => {
-			const { alpha, baseLine, strokeWidth } = props;
-			const startX = points[0].x;
-			const endX = points[points.length - 1].x;
-			const width = alpha * Math.abs(startX - endX);
-			let maxY = Math.max(...points.map((entry) => entry.y || 0));
-			if (isNumber(baseLine)) maxY = Math.max(baseLine, maxY);
-			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxY = Math.max(...baseLine.map((entry) => entry.y || 0), maxY);
-			if (isNumber(maxY)) return createVNode("rect", {
-				"x": startX < endX ? startX : startX - width,
-				"y": 0,
-				"width": width,
-				"height": Math.floor(maxY + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1))
-			}, null);
-			return null;
-		};
-	}
-});
-var VerticalRect = /* @__PURE__ */ defineComponent({
-	name: "VerticalRect",
-	props: {
-		alpha: {
-			type: Number,
-			required: true
-		},
-		points: {
-			type: Array,
-			required: true
-		},
-		baseLine: {
-			type: [Number, Array],
-			required: true
-		},
-		strokeWidth: {
-			type: Number,
-			required: true
-		}
-	},
-	setup(props) {
-		const { points } = props;
-		return () => {
-			const { alpha, baseLine, strokeWidth } = props;
-			const startY = points[0].y;
-			const endY = points[points.length - 1].y;
-			if (!isWellBehavedNumber(startY) || !isWellBehavedNumber(endY)) return null;
-			const height = alpha * Math.abs(startY - endY);
-			let maxX = Math.max(...points.map((entry) => entry.x || 0));
-			if (isNumber(baseLine)) maxX = Math.max(baseLine, maxX);
-			else if (baseLine && Array.isArray(baseLine) && baseLine.length) maxX = Math.max(...baseLine.map((entry) => entry.x || 0), maxX);
-			return createVNode("rect", {
-				"x": 0,
-				"y": startY < endY ? startY : startY - height,
-				"width": maxX + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1),
-				"height": Math.floor(height)
-			}, null);
-		};
-	}
-});
-var ClipRect = /* @__PURE__ */ defineComponent({
-	name: "ClipRect",
-	setup() {
-		const { points, props, areaData, layout, isClipRectAnimating } = useAreaContext();
-		const isAnimationActive = ref(false);
-		watch(points, (newPoints) => {
-			if (newPoints && newPoints.length > 0 && !isAnimationActive.value) isAnimationActive.value = true;
-		}, { immediate: true });
-		const handleAnimationEnd = () => {
-			isAnimationActive.value = false;
-			isClipRectAnimating.value = false;
-			props.onAnimationEnd?.();
-		};
-		return () => {
-			const baseLine = areaData.value?.baseLine;
-			if (!points.value || points.value.length === 0) return null;
-			return createVNode(Animate, {
-				"isActive": isAnimationActive.value,
-				"transition": props.transition,
-				"onAnimationStart": props.onAnimationStart,
-				"onAnimationEnd": handleAnimationEnd
-			}, { default: (t) => {
-				if (layout.value === "horizontal") return createVNode(HorizontalRect, {
-					"alpha": t,
-					"points": points.value,
-					"baseLine": baseLine,
-					"strokeWidth": props.strokeWidth || 2
-				}, null);
-				return createVNode(VerticalRect, {
-					"alpha": t,
-					"points": points.value,
-					"baseLine": baseLine,
-					"strokeWidth": props.strokeWidth || 2
-				}, null);
-			} });
-		};
-	}
-});
-//#endregion
-export { ClipRect };

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

@@ -1,79 +0,0 @@
-import { isNullish } from "../../utils/validate.mjs";
-import { selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
-import { useAppSelector } from "../../state/hooks.mjs";
-import { Layer } from "../../container/Layer.mjs";
-import { Dot } from "../../shape/Dot.mjs";
-import { createVNode, defineComponent, isVNode } from "vue";
-//#region src/cartesian/line/ActivePoints.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-var ActivePoints = /* @__PURE__ */ defineComponent({
-	name: "ActivePoints",
-	props: {
-		points: {
-			type: Array,
-			required: true
-		},
-		mainColor: {
-			type: String,
-			required: true
-		},
-		itemDataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			required: true
-		},
-		activeDot: {
-			type: [
-				Object,
-				Boolean,
-				Function
-			],
-			required: true
-		}
-	},
-	slots: Object,
-	setup(props, { slots }) {
-		const activeTooltipIndex = useAppSelector(selectActiveTooltipIndex);
-		return () => {
-			const { points } = props;
-			if (!points?.length || isNullish(activeTooltipIndex.value)) return null;
-			const activePoint = points[Number(activeTooltipIndex.value)];
-			if (isNullish(activePoint)) return null;
-			return renderActivePoint({
-				point: activePoint,
-				childIndex: Number(activeTooltipIndex.value),
-				mainColor: props.mainColor,
-				dataKey: props.itemDataKey,
-				activeDot: props.activeDot,
-				slots
-			});
-		};
-	}
-});
-function renderActivePoint({ point, childIndex, mainColor, activeDot, dataKey, slots }) {
-	if (activeDot === false) return null;
-	const dotProps = {
-		"index": childIndex,
-		dataKey,
-		"cx": point.x,
-		"cy": point.y,
-		"r": 4,
-		"fill": mainColor,
-		"stroke-width": 2,
-		"stroke": "#fff",
-		"payload": point.payload,
-		"value": point.value,
-		...typeof activeDot === "object" ? activeDot : {}
-	};
-	let dot;
-	if (slots.activeDot) dot = slots.activeDot(dotProps);
-	else dot = createVNode(Dot, dotProps, null);
-	return createVNode(Layer, { "class": "v-charts-active-dot" }, _isSlot(dot) ? dot : { default: () => [dot] });
-}
-//#endregion
-export { ActivePoints };

package/dist/es/chart/LegendPortalContext.mjs

@@ -1,5 +0,0 @@
-import { createContext } from "../utils/createContext.mjs";
-//#region src/chart/LegendPortalContext.ts
-var [useLegendPortal, provideLegendPortalRaw] = createContext("LegendPortalContext");
-//#endregion
-export { provideLegendPortalRaw, useLegendPortal };

package/dist/es/chart/Surface.mjs

@@ -1,5 +0,0 @@
-import Surface_vue_vue_type_script_setup_true_lang_default from "./Surface.vue_vue_type_script_setup_true_lang.mjs";
-//#region src/chart/Surface.vue
-var Surface_default = Surface_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { Surface_default as default };

package/dist/es/chart/Surface.vue_vue_type_script_setup_true_lang.mjs

@@ -1,78 +0,0 @@
-import { provideLabelLayerRef } from "../context/labelLayerContext.mjs";
-import { provideGraphicalLayerRef } from "../context/graphicalLayerContext.mjs";
-import { provideCursorLayerRef } from "../context/cursorLayerContext.mjs";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString } from "vue";
-//#region src/chart/Surface.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"width",
-	"height",
-	"viewBox"
-];
-var Surface_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "ChartsSurface",
-	inheritAttrs: false,
-	__name: "Surface",
-	props: {
-		width: {},
-		height: {},
-		viewBox: {},
-		class: {},
-		style: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		title: {},
-		desc: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const svgViewBox = computed(() => {
-			const svgView = props.viewBox || {
-				width: props.width,
-				height: props.height,
-				x: 0,
-				y: 0
-			};
-			return `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`;
-		});
-		const cursorLayerRef = ref(null);
-		provideCursorLayerRef(cursorLayerRef);
-		const graphicalLayerRef = ref(null);
-		provideGraphicalLayerRef(graphicalLayerRef);
-		const labelLayerRef = ref(null);
-		provideLabelLayerRef(labelLayerRef);
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("svg", mergeProps(_ctx.$attrs, {
-				class: ["vcharts-surface", [props.class]],
-				width: _ctx.width,
-				height: _ctx.height,
-				style: _ctx.style,
-				viewBox: svgViewBox.value
-			}), [
-				createElementVNode("title", null, toDisplayString(_ctx.title), 1),
-				createElementVNode("desc", null, toDisplayString(_ctx.desc), 1),
-				renderSlot(_ctx.$slots, "default"),
-				createElementVNode("g", {
-					ref_key: "cursorLayerRef",
-					ref: cursorLayerRef,
-					class: "v-charts-cursor-layer"
-				}, null, 512),
-				createElementVNode("g", {
-					ref_key: "graphicalLayerRef",
-					ref: graphicalLayerRef,
-					class: "v-charts-graphical-layer"
-				}, null, 512),
-				createElementVNode("g", {
-					ref_key: "labelLayerRef",
-					ref: labelLayerRef,
-					class: "v-charts-label-layer"
-				}, null, 512)
-			], 16, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { Surface_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/chart/TooltipPortalContext.mjs

@@ -1,5 +0,0 @@
-import { createContext } from "../utils/createContext.mjs";
-//#region src/chart/TooltipPortalContext.ts
-var [usePortal, providePortalRaw] = createContext("PortalContext");
-//#endregion
-export { providePortalRaw, usePortal };

package/dist/es/chart/generateCategoricalChart.mjs

@@ -1,184 +0,0 @@
-import { classProp } from "../types/common.mjs";
-import { provideClipPathId } from "./provideClipPathId.mjs";
-import { createRechartsStore } from "../state/store.mjs";
-import Surface_default from "./Surface.mjs";
-import { ChartDataContextProvider } from "../context/ChartDataContextProvider.mjs";
-import ClipPath_default from "../container/ClipPath.mjs";
-import { ChartsWrapper } from "./ChartsWrapper.mjs";
-import { FULL_WIDTH_AND_HEIGHT } from "./const.mjs";
-import { ReportMainChartProps } from "../state/ReportMainChartProps.mjs";
-import ReportChartProps_default from "../state/ReportChartProps.mjs";
-import { applyDefaultProps } from "../utils/props.mjs";
-import { ReportPolarOptions } from "../state/ReportPolarOptions.mjs";
-import { useResponsiveSize } from "../hooks/useResponsiveSize.mjs";
-import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
-import { provideStore } from "@reduxjs/vue-redux";
-//#region src/chart/generateCategoricalChart.tsx
-var defaultLayout = "horizontal";
-var defaultMargin = {
-	top: 5,
-	right: 5,
-	bottom: 5,
-	left: 5
-};
-var CategoricalProps = {
-	accessibilityLayer: {
-		type: Boolean,
-		default: true
-	},
-	barCategoryGap: {
-		type: [Number, String],
-		default: "10%"
-	},
-	barGap: {
-		type: [Number, String],
-		default: 4
-	},
-	barSize: { type: [Number, String] },
-	class: classProp,
-	compact: { type: Boolean },
-	cx: { type: [Number, String] },
-	cy: { type: [Number, String] },
-	data: {
-		type: Array,
-		default: () => []
-	},
-	dataKey: { type: [
-		String,
-		Number,
-		Function
-	] },
-	desc: { type: String },
-	endAngle: { type: Number },
-	height: { type: Number },
-	id: { type: String },
-	innerRadius: { type: [Number, String] },
-	layout: {
-		type: String,
-		default: defaultLayout
-	},
-	margin: {
-		type: Object,
-		default: () => defaultMargin
-	},
-	maxBarSize: { type: Number },
-	outerRadius: { type: [Number, String] },
-	responsive: {
-		type: Boolean,
-		default: false
-	},
-	reverseStackOrder: {
-		type: Boolean,
-		default: false
-	},
-	role: { type: String },
-	stackOffset: {
-		type: String,
-		default: "none"
-	},
-	startAngle: { type: Number },
-	style: { type: [
-		String,
-		Object,
-		Array
-	] },
-	syncId: { type: [Number, String] },
-	syncMethod: {
-		type: [String, Function],
-		default: "index"
-	},
-	tabIndex: { type: Number },
-	throttleDelay: { type: Number },
-	title: { type: String },
-	width: { type: Number },
-	to: { type: [String, Object] }
-};
-function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltipEventType = "axis", validateTooltipEventTypes = ["axis"], tooltipPayloadSearcher }) {
-	return /* @__PURE__ */ defineComponent({
-		name: chartName,
-		props: applyDefaultProps(CategoricalProps, defaultProps),
-		setup(props, { attrs, slots }) {
-			provideStore({ store: createRechartsStore({ options: {
-				chartName,
-				defaultTooltipEventType,
-				validateTooltipEventTypes,
-				tooltipPayloadSearcher,
-				eventEmitter: void 0
-			} }, props.id ?? chartName) });
-			const clipPathId = provideClipPathId(props);
-			const { effectiveWidth, effectiveHeight, hasValidSize, handleResize } = useResponsiveSize(props);
-			function renderPolarOptions(isPolarChart) {
-				if (!isPolarChart) return null;
-				return createVNode(ReportPolarOptions, {
-					"cx": props.cx ?? "50%",
-					"cy": props.cy ?? "50%",
-					"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
-					"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
-					"innerRadius": props.innerRadius ?? 0,
-					"outerRadius": props.outerRadius ?? "80%"
-				}, null);
-			}
-			return () => {
-				const { compact, width, height, title, desc, responsive, ...rest } = props;
-				const attributes = { ...attrs };
-				const layout = props.layout ?? defaultProps.layout ?? defaultLayout;
-				const isPolarChart = layout === "centric" || layout === "radial";
-				if (compact) {
-					if (!hasValidSize.value) return null;
-					return createVNode(Fragment, null, [
-						createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-						createVNode(ReportMainChartProps, {
-							"width": effectiveWidth.value,
-							"height": effectiveHeight.value,
-							"layout": layout,
-							"margin": props.margin
-						}, null),
-						renderPolarOptions(isPolarChart),
-						createVNode(Surface_default, mergeProps(attrs, rest, {
-							"width": effectiveWidth.value,
-							"height": effectiveHeight.value,
-							"title": title,
-							"desc": desc
-						}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
-					]);
-				}
-				if (!responsive && !hasValidSize.value) return null;
-				if (props.accessibilityLayer) {
-					attributes.tabindex = props.tabIndex ?? 0;
-					attributes.role = props.role ?? "application";
-				}
-				const eventHandlerAttrs = {};
-				const svgAttributes = {};
-				for (const [key, value] of Object.entries(attributes)) if (key.startsWith("on") && typeof value === "function") eventHandlerAttrs[key] = value;
-				else svgAttributes[key] = value;
-				return createVNode(Fragment, null, [
-					hasValidSize.value && createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-					hasValidSize.value && createVNode(ReportMainChartProps, {
-						"width": effectiveWidth.value,
-						"height": effectiveHeight.value,
-						"layout": layout,
-						"margin": props.margin ?? defaultMargin
-					}, null),
-					hasValidSize.value && renderPolarOptions(isPolarChart),
-					createVNode(ChartsWrapper, mergeProps({
-						"responsive": responsive,
-						"onResize": handleResize,
-						"style": props.style,
-						"class": props.class,
-						"width": effectiveWidth.value,
-						"height": effectiveHeight.value
-					}, eventHandlerAttrs), { default: () => [hasValidSize.value && createVNode(Surface_default, mergeProps(svgAttributes, {
-						"width": effectiveWidth.value,
-						"height": effectiveHeight.value,
-						"title": title,
-						"desc": desc,
-						"style": FULL_WIDTH_AND_HEIGHT
-					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] }), slots.tooltip?.()] }),
-					hasValidSize.value && createVNode(ReportChartProps_default, props, null)
-				]);
-			};
-		}
-	});
-}
-//#endregion
-export { generateCategoricalChart };

package/dist/es/chart/provideClipPathId.mjs

@@ -1,15 +0,0 @@
-import { uniqueId } from "../utils/data-utils.mjs";
-import { createContext } from "../utils/createContext.mjs";
-//#region src/chart/provideClipPathId.ts
-var [useClipPathId, provideClipPathIdRaw] = createContext("clipPathId");
-/**
-* Provide the clipPathId to child components.
-* @param props - The props object from the chart component
-*/
-function provideClipPathId(props) {
-	const clipPathId = `${props.id ?? uniqueId("v-charts")}-clip`;
-	provideClipPathIdRaw(clipPathId);
-	return clipPathId;
-}
-//#endregion
-export { provideClipPathId, useClipPathId };