vccs 0.0.1 → 0.2.0

package/dist/es/polar/radar/PolarRadiusAxis.mjs

@@ -0,0 +1,162 @@
+import { isCategoricalAxis } from "../../utils/validate.mjs";
+import { polarToCartesian } from "../../utils/polar.mjs";
+import { selectPolarViewBox } from "../../state/selectors/polarAxisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useChartLayout } from "../../context/chartLayoutContext.mjs";
+import { POLAR_LABEL_VIEW_BOX_KEY } from "../../context/polarLabelViewBoxContext.mjs";
+import Text_default from "../../components/Text.mjs";
+import { addRadiusAxis, removeRadiusAxis } from "../../state/polarAxisSlice.mjs";
+import { selectPolarAxisTicks } from "../../state/selectors/polarScaleSelectors.mjs";
+import { computed, createVNode, defineComponent, onUnmounted, provide, watchEffect } from "vue";
+//#region src/polar/radar/PolarRadiusAxis.tsx
+/**
+* Resolve 'auto' type based on chart layout, matching Recharts behavior.
+* In a radial layout, radiusAxis is categorical; in centric, it's numerical.
+*/
+function resolveAxisType(type, layout, axisType) {
+	if (type !== "auto") return type;
+	return isCategoricalAxis(layout, axisType) ? "category" : "number";
+}
+var PolarRadiusAxis = /* @__PURE__ */ defineComponent({
+	name: "PolarRadiusAxis",
+	props: {
+		radiusAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		angle: {
+			type: Number,
+			default: 0
+		},
+		tick: {
+			type: Boolean,
+			default: true
+		},
+		axisLine: {
+			type: Boolean,
+			default: true
+		},
+		orientation: {
+			type: String,
+			default: "right"
+		},
+		tickFormatter: {
+			type: Function,
+			default: void 0
+		},
+		ticks: {
+			type: Array,
+			default: void 0
+		},
+		tickCount: {
+			type: Number,
+			default: 5
+		},
+		domain: {
+			type: Array,
+			default: void 0
+		},
+		type: {
+			type: String,
+			default: "auto"
+		},
+		stroke: {
+			type: String,
+			default: "#ccc"
+		},
+		allowDecimals: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const layout = useChartLayout();
+		let prevSettings = null;
+		watchEffect(() => {
+			const resolvedType = resolveAxisType(props.type, layout.value, "radiusAxis");
+			const settings = {
+				id: props.radiusAxisId,
+				type: resolvedType,
+				dataKey: props.dataKey,
+				scale: "auto",
+				allowDuplicatedCategory: true,
+				allowDataOverflow: props.domain != null,
+				reversed: false,
+				includeHidden: false,
+				domain: props.domain ?? [0, "auto"],
+				unit: void 0,
+				name: void 0,
+				allowDecimals: props.allowDecimals,
+				tickCount: props.tickCount,
+				ticks: props.ticks,
+				tick: props.tick
+			};
+			dispatch(addRadiusAxis(settings));
+			prevSettings = settings;
+		});
+		onUnmounted(() => {
+			if (prevSettings) {
+				dispatch(removeRadiusAxis(prevSettings));
+				prevSettings = null;
+			}
+		});
+		const polarViewBox = useAppSelector((state) => selectPolarViewBox(state));
+		const ticks = useAppSelector((state) => selectPolarAxisTicks(state, "radiusAxis", props.radiusAxisId, false));
+		provide(POLAR_LABEL_VIEW_BOX_KEY, computed(() => polarViewBox.value));
+		return () => {
+			const viewBox = polarViewBox.value;
+			const tickItems = ticks.value;
+			const hasChildren = !!slots.default;
+			const showTicks = props.tick && tickItems != null && tickItems.length > 0;
+			if (viewBox == null || !showTicks && !props.axisLine && !hasChildren) return null;
+			const { cx, cy } = viewBox;
+			const { angle, orientation, axisLine, tickFormatter, stroke } = props;
+			const textAnchor = orientation === "left" ? "end" : orientation === "right" ? "start" : "middle";
+			return createVNode("g", { "class": "v-charts-polar-radius-axis" }, [
+				axisLine && showTicks && (() => {
+					const coords = tickItems.map((t) => t.coordinate);
+					const minR = Math.min(...coords);
+					const maxR = Math.max(...coords);
+					const p0 = polarToCartesian(cx, cy, minR, angle);
+					const p1 = polarToCartesian(cx, cy, maxR, angle);
+					return createVNode("line", {
+						"class": "v-charts-polar-radius-axis-line",
+						"x1": p0.x,
+						"y1": p0.y,
+						"x2": p1.x,
+						"y2": p1.y,
+						"stroke": stroke,
+						"fill": "none"
+					}, null);
+				})(),
+				showTicks && createVNode("g", { "class": "v-charts-polar-radius-axis-ticks" }, [tickItems.map((entry, i) => {
+					const coord = polarToCartesian(cx, cy, entry.coordinate, angle);
+					const value = tickFormatter ? tickFormatter(entry.value, i) : entry.value;
+					return createVNode(Text_default, {
+						"key": `tick-${entry.coordinate}`,
+						"class": "v-charts-polar-radius-axis-tick-value",
+						"x": coord.x,
+						"y": coord.y,
+						"textAnchor": textAnchor,
+						"verticalAnchor": "middle",
+						"fill": stroke,
+						"angle": 90 - angle,
+						"value": String(value)
+					}, null);
+				})]),
+				slots.default?.()
+			]);
+		};
+	}
+});
+//#endregion
+export { PolarRadiusAxis };

package/dist/es/polar/radar/Radar.mjs

@@ -0,0 +1,284 @@
+import { interpolate } from "../../utils/data-utils.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { useIsAnimating } from "../../hooks/useIsAnimating.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Dot } from "../../shape/Dot.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { SetPolarGraphicalItem } from "../../state/SetGraphicalItem.mjs";
+import { SetLegendPayload } from "../../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { ActivePoints } from "../../cartesian/line/ActivePoints.mjs";
+import { selectRadarPoints } from "../../state/selectors/radarSelectors.mjs";
+import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+//#region src/polar/radar/Radar.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getLegendItemColor(stroke, fill) {
+	return stroke && stroke !== "none" ? stroke : fill;
+}
+function getSinglePolygonPath(points) {
+	if (!points.length) return "";
+	return `${[...points, points[0]].map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join("")}Z`;
+}
+function getRangePath(points, baseLinePoints) {
+	const outerPath = getSinglePolygonPath(points);
+	const inner = getSinglePolygonPath([...baseLinePoints].reverse());
+	return `${outerPath.endsWith("Z") ? outerPath.slice(0, -1) : outerPath}L${inner.slice(1)}`;
+}
+function interpolatePolarPoint(prevPoints, prevPointsDiffFactor, t, entry, index) {
+	const prev = prevPoints && prevPoints[Math.floor(index * prevPointsDiffFactor)];
+	if (prev) return {
+		...entry,
+		x: interpolate(prev.x, entry.x, t),
+		y: interpolate(prev.y, entry.y, t)
+	};
+	return {
+		...entry,
+		x: interpolate(entry.cx ?? 0, entry.x, t),
+		y: interpolate(entry.cy ?? 0, entry.y, t)
+	};
+}
+var Radar = /* @__PURE__ */ defineComponent({
+	name: "Radar",
+	inheritAttrs: false,
+	props: {
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: true
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		angleAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		radiusAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		fill: {
+			type: String,
+			default: "#808080"
+		},
+		stroke: {
+			type: String,
+			default: void 0
+		},
+		fillOpacity: {
+			type: Number,
+			default: .6
+		},
+		strokeWidth: {
+			type: Number,
+			default: void 0
+		},
+		strokeDasharray: {
+			type: String,
+			default: void 0
+		},
+		dot: {
+			type: [Boolean, Object],
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: false
+		},
+		legendType: {
+			type: String,
+			default: "rect"
+		},
+		tooltipType: {
+			type: String,
+			default: void 0
+		},
+		connectNulls: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: [Boolean, Object],
+			default: false
+		},
+		isAnimationActive: {
+			type: Boolean,
+			default: true
+		},
+		activeDot: {
+			type: [Object, Boolean],
+			default: true
+		}
+	},
+	setup(props) {
+		const isPanorama = useIsPanorama();
+		SetPolarGraphicalItem(computed(() => ({
+			type: "radar",
+			data: void 0,
+			dataKey: props.dataKey,
+			hide: props.hide,
+			angleAxisId: props.angleAxisId,
+			radiusAxisId: props.radiusAxisId
+		})));
+		SetLegendPayload(computed(() => [{
+			dataKey: props.dataKey,
+			type: props.legendType,
+			color: getLegendItemColor(props.stroke, props.fill),
+			value: props.name ?? String(props.dataKey ?? ""),
+			payload: { ...props },
+			inactive: props.hide
+		}]));
+		SetTooltipEntrySettings({
+			fn: (v) => v,
+			args: computed(() => ({
+				dataDefinedOnItem: void 0,
+				positions: void 0,
+				settings: {
+					dataKey: props.dataKey,
+					nameKey: void 0,
+					name: props.name ?? String(props.dataKey ?? ""),
+					hide: props.hide,
+					type: props.tooltipType,
+					color: getLegendItemColor(props.stroke, props.fill),
+					fill: props.fill,
+					stroke: props.stroke,
+					unit: ""
+				}
+			}))
+		});
+		const radarPoints = useAppSelector((state) => selectRadarPoints(state, props.radiusAxisId, props.angleAxisId, isPanorama, props.dataKey));
+		const graphicalLayerRef = useGraphicalLayerRef();
+		const isAnimating = useIsAnimating(() => props.isAnimationActive);
+		provideCartesianLabelListData(computed(() => {
+			if (props.isAnimationActive && isAnimating.value) return void 0;
+			const data = radarPoints.value;
+			if (!data) return void 0;
+			return data.points.map((point) => ({
+				x: point.x,
+				y: point.y,
+				width: 0,
+				height: 0,
+				value: point.value ?? "",
+				payload: point.payload
+			}));
+		}));
+		let prevPoints = null;
+		let prevBaseLinePoints = null;
+		let animationId = 0;
+		let lastData = void 0;
+		const renderPolygon = (points, baseLinePoints, isRange) => {
+			const stroke = props.stroke ?? props.fill;
+			const hasStroke = stroke && stroke !== "none";
+			let pathD;
+			if (isRange && baseLinePoints.length > 0) pathD = getRangePath(points, baseLinePoints);
+			else pathD = getSinglePolygonPath(points);
+			const isClosed = pathD.endsWith("Z");
+			return createVNode(Layer, { "class": "v-charts-radar" }, { default: () => [createVNode("g", { "class": "v-charts-radar-polygon" }, [isRange && baseLinePoints.length > 0 ? createVNode("g", null, [
+				createVNode("path", {
+					"d": pathD,
+					"fill": isClosed ? props.fill : "none",
+					"fill-opacity": props.fillOpacity,
+					"stroke": "none",
+					"stroke-dasharray": props.strokeDasharray
+				}, null),
+				hasStroke && createVNode("path", {
+					"d": getSinglePolygonPath(points),
+					"fill": "none",
+					"stroke": stroke,
+					"stroke-width": props.strokeWidth,
+					"stroke-dasharray": props.strokeDasharray
+				}, null),
+				hasStroke && createVNode("path", {
+					"d": getSinglePolygonPath(baseLinePoints),
+					"fill": "none",
+					"stroke": stroke,
+					"stroke-width": props.strokeWidth,
+					"stroke-dasharray": props.strokeDasharray
+				}, null)
+			]) : createVNode("path", {
+				"d": pathD,
+				"fill": isClosed ? props.fill : "none",
+				"fill-opacity": props.fillOpacity,
+				"stroke": stroke,
+				"stroke-width": props.strokeWidth,
+				"stroke-dasharray": props.strokeDasharray
+			}, null)]), props.dot && createVNode("g", { "class": "v-charts-radar-dots" }, [points.map((point, i) => {
+				const dotProps = typeof props.dot === "object" ? props.dot : {};
+				return createVNode(Dot, mergeProps({
+					"key": `dot-${i}`,
+					"cx": point.x,
+					"cy": point.y,
+					"r": 3,
+					"fill": props.fill,
+					"stroke": stroke
+				}, dotProps), null);
+			})])] });
+		};
+		return () => {
+			if (props.hide) return null;
+			const data = radarPoints.value;
+			if (data == null || data.points.length === 0) return null;
+			const { points, baseLinePoints, isRange } = data;
+			const mainColor = getLegendItemColor(props.stroke, props.fill) ?? props.fill;
+			const activePointsEl = createVNode(ActivePoints, {
+				"points": points,
+				"mainColor": mainColor,
+				"itemDataKey": props.dataKey,
+				"activeDot": props.activeDot
+			}, null);
+			const activePoints = graphicalLayerRef?.value ? createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(activePointsEl) ? activePointsEl : { default: () => [activePointsEl] }) : activePointsEl;
+			const labelEl = !isAnimating.value && props.label ? createVNode(LabelList, typeof props.label === "object" ? props.label : {}, null) : null;
+			if (!props.isAnimationActive) {
+				prevPoints = points;
+				prevBaseLinePoints = baseLinePoints;
+				return createVNode(Fragment, null, [
+					renderPolygon(points, baseLinePoints, isRange),
+					labelEl,
+					activePoints
+				]);
+			}
+			const prevPts = prevPoints;
+			const prevBasePts = prevBaseLinePoints;
+			const prevPointsDiffFactor = prevPts ? prevPts.length / points.length : 1;
+			const prevBaseDiffFactor = prevBasePts ? prevBasePts.length / baseLinePoints.length : 1;
+			if (data !== lastData) {
+				animationId++;
+				lastData = data;
+			}
+			return createVNode(Fragment, null, [
+				createVNode(Animate, {
+					"key": animationId,
+					"isActive": true,
+					"onAnimationStart": () => {
+						isAnimating.value = true;
+					},
+					"onAnimationEnd": () => {
+						isAnimating.value = false;
+					}
+				}, { default: (t) => {
+					const stepPoints = t === 1 ? points : points.map((entry, i) => interpolatePolarPoint(prevPts, prevPointsDiffFactor, t, entry, i));
+					const stepBaseLine = t === 1 ? baseLinePoints : baseLinePoints.map((entry, i) => interpolatePolarPoint(prevBasePts, prevBaseDiffFactor, t, entry, i));
+					if (t > 0) {
+						prevPoints = stepPoints;
+						prevBaseLinePoints = stepBaseLine;
+					}
+					return renderPolygon(stepPoints, stepBaseLine, isRange);
+				} }),
+				labelEl,
+				activePoints
+			]);
+		};
+	}
+});
+//#endregion
+export { Radar };

package/dist/es/polar/radial-bar/RadialBar.mjs

@@ -0,0 +1,197 @@
+import { interpolate } from "../../utils/data-utils.mjs";
+import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useIsAnimating } from "../../hooks/useIsAnimating.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { SetPolarGraphicalItem } from "../../state/SetGraphicalItem.mjs";
+import { SetLegendPayload } from "../../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { Sector } from "../../shape/Sector.mjs";
+import { selectRadialBarLegendPayload, selectRadialBarSectors } from "../../state/selectors/radialBarSelectors.mjs";
+import { RadialBarVueProps } from "./type.mjs";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+//#region src/polar/radial-bar/RadialBar.tsx
+function getLegendItemColor(stroke, fill) {
+	return fill;
+}
+var RadialBar = /* @__PURE__ */ defineComponent({
+	name: "RadialBar",
+	props: RadialBarVueProps,
+	inheritAttrs: false,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const radialBarSettings = computed(() => ({
+			dataKey: props.dataKey,
+			minPointSize: props.minPointSize,
+			stackId: props.stackId,
+			maxBarSize: props.maxBarSize,
+			barSize: props.barSize
+		}));
+		SetPolarGraphicalItem(computed(() => ({
+			type: "radialBar",
+			data: void 0,
+			dataKey: props.dataKey,
+			hide: props.hide,
+			angleAxisId: props.angleAxisId,
+			radiusAxisId: props.radiusAxisId,
+			barSize: props.barSize,
+			stackId: props.stackId,
+			minPointSize: props.minPointSize,
+			maxBarSize: props.maxBarSize
+		})));
+		const legendPayload = useAppSelector((state) => selectRadialBarLegendPayload(state, props.legendType));
+		SetLegendPayload(computed(() => legendPayload.value ?? []));
+		const sectors = useAppSelector((state) => selectRadialBarSectors(state, props.radiusAxisId, props.angleAxisId, radialBarSettings.value));
+		SetTooltipEntrySettings({
+			fn: (v) => v,
+			args: computed(() => ({
+				dataDefinedOnItem: void 0,
+				positions: void 0,
+				settings: {
+					dataKey: props.dataKey,
+					nameKey: void 0,
+					name: props.name ?? String(props.dataKey ?? ""),
+					hide: props.hide,
+					type: props.tooltipType,
+					color: getLegendItemColor(props.stroke, props.fill),
+					fill: props.fill,
+					stroke: props.stroke,
+					unit: ""
+				}
+			}))
+		});
+		const isAnimating = useIsAnimating(() => props.isAnimationActive);
+		provideCartesianLabelListData(computed(() => {
+			if (props.isAnimationActive && isAnimating.value) return void 0;
+			const data = sectors.value;
+			if (!data) return void 0;
+			const defaultFill = props.fill;
+			return data.map((sector) => ({
+				value: sector.value ?? "",
+				payload: sector.payload,
+				parentViewBox: void 0,
+				fill: sector.fill ?? defaultFill,
+				cx: sector.cx,
+				cy: sector.cy,
+				innerRadius: sector.innerRadius,
+				outerRadius: sector.outerRadius,
+				startAngle: sector.startAngle,
+				endAngle: sector.endAngle,
+				clockWise: false
+			}));
+		}));
+		let prevSectors = null;
+		let animationId = 0;
+		let lastSectors;
+		const renderSectors = (sectorData) => {
+			const defaultFill = props.fill;
+			const defaultStroke = props.stroke;
+			const showBackground = !!props.background;
+			const backgroundProps = typeof props.background === "object" ? props.background : {};
+			return createVNode(Layer, { "class": "v-charts-radial-bar" }, { default: () => [showBackground && sectorData.map((sector, i) => {
+				if (!sector.background) return null;
+				const bg = sector.background;
+				return createVNode(Sector, mergeProps({
+					"key": `bg-${i}`,
+					"cx": bg.cx,
+					"cy": bg.cy,
+					"innerRadius": bg.innerRadius,
+					"outerRadius": bg.outerRadius,
+					"startAngle": bg.startAngle,
+					"endAngle": bg.endAngle,
+					"cornerRadius": props.cornerRadius,
+					"forceCornerRadius": props.forceCornerRadius,
+					"cornerIsExternal": props.cornerIsExternal,
+					"fill": "#eee",
+					"fill-opacity": .5
+				}, backgroundProps), null);
+			}), sectorData.map((sector, i) => {
+				if (sector.innerRadius == null || sector.outerRadius == null || sector.startAngle == null || sector.endAngle == null) return null;
+				const sectorFill = sector.fill ?? defaultFill;
+				const onMouseenter = () => {
+					dispatch(setActiveMouseOverItemIndex({
+						activeIndex: String(i),
+						activeDataKey: props.dataKey
+					}));
+				};
+				const onMouseleave = () => {
+					dispatch(mouseLeaveItem());
+				};
+				return createVNode(Sector, {
+					"key": `sector-${i}`,
+					"cx": sector.cx,
+					"cy": sector.cy,
+					"innerRadius": sector.innerRadius,
+					"outerRadius": sector.outerRadius,
+					"startAngle": sector.startAngle,
+					"endAngle": sector.endAngle,
+					"cornerRadius": props.cornerRadius,
+					"forceCornerRadius": props.forceCornerRadius,
+					"cornerIsExternal": props.cornerIsExternal,
+					"fill": sectorFill,
+					"fill-opacity": props.fillOpacity,
+					"stroke": defaultStroke ?? sectorFill,
+					"stroke-width": props.strokeWidth,
+					"stroke-dasharray": props.strokeDasharray,
+					"onMouseenter": onMouseenter,
+					"onMouseleave": onMouseleave
+				}, null);
+			})] });
+		};
+		return () => {
+			if (props.hide) return null;
+			const data = sectors.value;
+			if (data == null || data.length === 0) return null;
+			const sectorData = data;
+			const labelEl = !isAnimating.value && props.label ? createVNode(LabelList, typeof props.label === "object" ? props.label : {}, null) : null;
+			const slotChildren = !isAnimating.value ? slots.default?.() : null;
+			if (!props.isAnimationActive) {
+				prevSectors = sectorData;
+				return createVNode(Fragment, null, [
+					renderSectors(sectorData),
+					labelEl,
+					slotChildren
+				]);
+			}
+			const prevSects = prevSectors;
+			if (data !== lastSectors) {
+				animationId++;
+				lastSectors = data;
+			}
+			return createVNode(Fragment, null, [
+				createVNode(Animate, {
+					"key": animationId,
+					"isActive": true,
+					"onAnimationStart": () => {
+						isAnimating.value = true;
+					},
+					"onAnimationEnd": () => {
+						isAnimating.value = false;
+					}
+				}, { default: (t) => {
+					const stepSectors = t === 1 ? sectorData : sectorData.map((sector, i) => {
+						const prev = prevSects && prevSects[i];
+						if (!prev) return {
+							...sector,
+							endAngle: interpolate(sector.startAngle ?? 0, sector.endAngle, t)
+						};
+						return {
+							...sector,
+							startAngle: prev.startAngle != null && sector.startAngle != null ? interpolate(prev.startAngle, sector.startAngle, t) : sector.startAngle,
+							endAngle: interpolate(prev.endAngle ?? 0, sector.endAngle, t)
+						};
+					});
+					if (t > 0) prevSectors = stepSectors;
+					return renderSectors(stepSectors);
+				} }),
+				labelEl,
+				slotChildren
+			]);
+		};
+	}
+});
+//#endregion
+export { RadialBar };