vccs 0.1.0 → 0.2.0

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

@@ -1,17 +1,18 @@
-import { polarToCartesian as e } from "../../utils/polar.mjs";
-import { selectPolarViewBox as t } from "../../state/selectors/polarAxisSelectors.mjs";
-import { useAppSelector as n } from "../../state/hooks.mjs";
-import { selectPolarGridAngles as r, selectPolarGridRadii as i } from "../../state/selectors/polarGridSelectors.mjs";
-import { computed as a, createVNode as o, defineComponent as s } from "vue";
+import { polarToCartesian } from "../../utils/polar.mjs";
+import { selectPolarViewBox } from "../../state/selectors/polarAxisSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { selectPolarGridAngles, selectPolarGridRadii } from "../../state/selectors/polarGridSelectors.mjs";
+import { computed, createVNode, defineComponent } from "vue";
 //#region src/polar/radar/PolarGrid.tsx
-function c(t, n, r, i) {
-	let a = "";
-	return i.forEach((i, o) => {
-		let s = e(n, r, t, i);
-		a += o === 0 ? `M ${s.x},${s.y}` : `L ${s.x},${s.y}`;
-	}), `${a}Z`;
+function getPolygonPath(radius, cx, cy, polarAngles) {
+	let path = "";
+	polarAngles.forEach((angle, i) => {
+		const point = polarToCartesian(cx, cy, radius, angle);
+		path += i === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`;
+	});
+	return `${path}Z`;
 }
-var l = /* @__PURE__ */ s({
+var PolarGrid = /* @__PURE__ */ defineComponent({
 	name: "PolarGrid",
 	props: {
 		angleAxisId: {
@@ -28,7 +29,7 @@ var l = /* @__PURE__ */ s({
 		},
 		radialLines: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		stroke: {
 			type: String,
@@ -47,56 +48,68 @@ var l = /* @__PURE__ */ s({
 			default: void 0
 		}
 	},
-	inheritAttrs: !1,
-	setup(s, { attrs: l }) {
-		let u = n((e) => t(e)), d = n((e) => r(e, s.angleAxisId)), f = n((e) => i(e, s.radiusAxisId)), p = a(() => Array.isArray(s.polarRadius) ? s.polarRadius : f.value);
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const polarViewBox = useAppSelector((state) => selectPolarViewBox(state));
+		const polarAngles = useAppSelector((state) => selectPolarGridAngles(state, props.angleAxisId));
+		const polarRadiiFromRedux = useAppSelector((state) => selectPolarGridRadii(state, props.radiusAxisId));
+		const polarRadii = computed(() => {
+			if (Array.isArray(props.polarRadius)) return props.polarRadius;
+			return polarRadiiFromRedux.value;
+		});
 		return () => {
-			let t = u.value, n = d.value, r = p.value;
-			if (t == null || n == null || r == null || t.outerRadius <= 0) return null;
-			let { cx: i, cy: a, innerRadius: f } = t, { stroke: m, gridType: h, fill: g, strokeWidth: _ } = s, v = l.class;
-			return o("g", { class: "v-charts-polar-grid" }, [o("g", { class: "v-charts-polar-grid-concentric" }, [g && g !== "none" && (h === "circle" ? o("circle", {
-				class: ["v-charts-polar-grid-concentric-circle", v],
-				cx: i,
-				cy: a,
-				r: Math.max(...r),
-				stroke: m,
-				fill: g,
-				"stroke-width": _
-			}, null) : o("path", {
-				class: ["v-charts-polar-grid-concentric-polygon", v],
-				d: c(Math.max(...r), i, a, n),
-				stroke: m,
-				fill: g,
-				"stroke-width": _
-			}, null)), r.map((e, t) => h === "circle" ? o("circle", {
-				key: `circle-${t}`,
-				class: ["v-charts-polar-grid-concentric-circle", v],
-				cx: i,
-				cy: a,
-				r: e,
-				stroke: m,
-				fill: "none",
-				"stroke-width": _
-			}, null) : o("path", {
-				key: `polygon-${t}`,
-				class: ["v-charts-polar-grid-concentric-polygon", v],
-				d: c(e, i, a, n),
-				stroke: m,
-				fill: "none",
-				"stroke-width": _
-			}, null))]), s.radialLines && n.length > 0 && o("g", { class: "v-charts-polar-grid-angle" }, [n.map((n) => {
-				let r = e(i, a, f, n), s = e(i, a, t.outerRadius, n);
-				return o("line", {
-					key: `line-${n}`,
-					x1: r.x,
-					y1: r.y,
-					x2: s.x,
-					y2: s.y,
-					stroke: m
+			const viewBox = polarViewBox.value;
+			const angles = polarAngles.value;
+			const radii = polarRadii.value;
+			if (viewBox == null || angles == null || radii == null || viewBox.outerRadius <= 0) return null;
+			const { cx, cy, innerRadius } = viewBox;
+			const { stroke, gridType, fill, strokeWidth } = props;
+			const shapeClass = attrs.class;
+			const renderBackground = fill && fill !== "none";
+			return createVNode("g", { "class": "v-charts-polar-grid" }, [createVNode("g", { "class": "v-charts-polar-grid-concentric" }, [renderBackground && (gridType === "circle" ? createVNode("circle", {
+				"class": ["v-charts-polar-grid-concentric-circle", shapeClass],
+				"cx": cx,
+				"cy": cy,
+				"r": Math.max(...radii),
+				"stroke": stroke,
+				"fill": fill,
+				"stroke-width": strokeWidth
+			}, null) : createVNode("path", {
+				"class": ["v-charts-polar-grid-concentric-polygon", shapeClass],
+				"d": getPolygonPath(Math.max(...radii), cx, cy, angles),
+				"stroke": stroke,
+				"fill": fill,
+				"stroke-width": strokeWidth
+			}, null)), radii.map((radius, i) => gridType === "circle" ? createVNode("circle", {
+				"key": `circle-${i}`,
+				"class": ["v-charts-polar-grid-concentric-circle", shapeClass],
+				"cx": cx,
+				"cy": cy,
+				"r": radius,
+				"stroke": stroke,
+				"fill": "none",
+				"stroke-width": strokeWidth
+			}, null) : createVNode("path", {
+				"key": `polygon-${i}`,
+				"class": ["v-charts-polar-grid-concentric-polygon", shapeClass],
+				"d": getPolygonPath(radius, cx, cy, angles),
+				"stroke": stroke,
+				"fill": "none",
+				"stroke-width": strokeWidth
+			}, null))]), props.radialLines && angles.length > 0 && createVNode("g", { "class": "v-charts-polar-grid-angle" }, [angles.map((angle) => {
+				const start = polarToCartesian(cx, cy, innerRadius, angle);
+				const end = polarToCartesian(cx, cy, viewBox.outerRadius, angle);
+				return createVNode("line", {
+					"key": `line-${angle}`,
+					"x1": start.x,
+					"y1": start.y,
+					"x2": end.x,
+					"y2": end.y,
+					"stroke": stroke
 				}, null);
 			})])]);
 		};
 	}
 });
 //#endregion
-export { l as PolarGrid };
+export { PolarGrid };

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

@@ -1,18 +1,23 @@
-import { isCategoricalAxis as e } from "../../utils/validate.mjs";
-import { polarToCartesian as t } from "../../utils/polar.mjs";
-import { selectPolarViewBox as n } from "../../state/selectors/polarAxisSelectors.mjs";
-import { useAppDispatch as r, useAppSelector as i } from "../../state/hooks.mjs";
-import { useChartLayout as a } from "../../context/chartLayoutContext.mjs";
-import { POLAR_LABEL_VIEW_BOX_KEY as o } from "../../context/polarLabelViewBoxContext.mjs";
-import s from "../../components/Text.mjs";
-import { addRadiusAxis as c, removeRadiusAxis as l } from "../../state/polarAxisSlice.mjs";
-import { selectPolarAxisTicks as u } from "../../state/selectors/polarScaleSelectors.mjs";
-import { computed as d, createVNode as f, defineComponent as p, onUnmounted as m, provide as h, watchEffect as g } from "vue";
+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
-function _(t, n, r) {
-	return t === "auto" ? e(n, r) ? "category" : "number" : t;
+/**
+* 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 v = /* @__PURE__ */ p({
+var PolarRadiusAxis = /* @__PURE__ */ defineComponent({
 	name: "PolarRadiusAxis",
 	props: {
 		radiusAxisId: {
@@ -33,11 +38,11 @@ var v = /* @__PURE__ */ p({
 		},
 		tick: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		axisLine: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		orientation: {
 			type: String,
@@ -69,69 +74,89 @@ var v = /* @__PURE__ */ p({
 		},
 		allowDecimals: {
 			type: Boolean,
-			default: !1
+			default: false
 		}
 	},
-	setup(e, { slots: p }) {
-		let v = r(), y = a(), b = null;
-		g(() => {
-			let t = _(e.type, y.value, "radiusAxis"), n = {
-				id: e.radiusAxisId,
-				type: t,
-				dataKey: e.dataKey,
+	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: !0,
-				allowDataOverflow: e.domain != null,
-				reversed: !1,
-				includeHidden: !1,
-				domain: e.domain ?? [0, "auto"],
+				allowDuplicatedCategory: true,
+				allowDataOverflow: props.domain != null,
+				reversed: false,
+				includeHidden: false,
+				domain: props.domain ?? [0, "auto"],
 				unit: void 0,
 				name: void 0,
-				allowDecimals: e.allowDecimals,
-				tickCount: e.tickCount,
-				ticks: e.ticks,
-				tick: e.tick
+				allowDecimals: props.allowDecimals,
+				tickCount: props.tickCount,
+				ticks: props.ticks,
+				tick: props.tick
 			};
-			v(c(n)), b = n;
-		}), m(() => {
-			b &&= (v(l(b)), null);
+			dispatch(addRadiusAxis(settings));
+			prevSettings = settings;
 		});
-		let x = i((e) => n(e)), S = i((t) => u(t, "radiusAxis", e.radiusAxisId, !1));
-		return h(o, d(() => x.value)), () => {
-			let n = x.value, r = S.value, i = !!p.default, a = e.tick && r != null && r.length > 0;
-			if (n == null || !a && !e.axisLine && !i) return null;
-			let { cx: o, cy: c } = n, { angle: l, orientation: u, axisLine: d, tickFormatter: m, stroke: h } = e, g = u === "left" ? "end" : u === "right" ? "start" : "middle";
-			return f("g", { class: "v-charts-polar-radius-axis" }, [
-				d && a && (() => {
-					let e = r.map((e) => e.coordinate), n = Math.min(...e), i = Math.max(...e), a = t(o, c, n, l), s = t(o, c, i, l);
-					return f("line", {
-						class: "v-charts-polar-radius-axis-line",
-						x1: a.x,
-						y1: a.y,
-						x2: s.x,
-						y2: s.y,
-						stroke: h,
-						fill: "none"
+		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);
 				})(),
-				a && f("g", { class: "v-charts-polar-radius-axis-ticks" }, [r.map((e, n) => {
-					let r = t(o, c, e.coordinate, l), i = m ? m(e.value, n) : e.value;
-					return f(s, {
-						key: `tick-${e.coordinate}`,
-						class: "v-charts-polar-radius-axis-tick-value",
-						x: r.x,
-						y: r.y,
-						textAnchor: g,
-						verticalAnchor: "middle",
-						fill: h,
-						angle: 90 - l,
-						value: String(i)
+				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);
 				})]),
-				p.default?.()
+				slots.default?.()
 			]);
 		};
 	}
 });
 //#endregion
-export { v as PolarRadiusAxis };
+export { PolarRadiusAxis };