vccs 0.1.0 → 0.3.0

package/dist/es/polar/pie/Pie.mjs

@@ -1,145 +1,161 @@
-import { selectChartOffset as e } from "../../state/selectors/selectChartOffset.mjs";
-import { polarToCartesian as t } from "../../utils/polar.mjs";
-import { mouseLeaveItem as n, setActiveMouseOverItemIndex as r } from "../../state/tooltipSlice.mjs";
-import { useAppDispatch as i, useAppSelector as a } from "../../state/hooks.mjs";
-import { Layer as o } from "../../container/Layer.mjs";
-import { Animate as s } from "../../animation/Animate.mjs";
-import { SetPolarGraphicalItem as c } from "../../state/SetGraphicalItem.mjs";
-import { SetLegendPayload as l } from "../../state/SetLegendPayload.mjs";
-import { SetTooltipEntrySettings as u } from "../../state/SetTooltipEntrySettings.mjs";
-import { Sector as d } from "../../shape/Sector.mjs";
-import { computePieSectors as f, selectDisplayedData as p, selectPieLegend as m, selectSynchronisedPieSettings as h } from "../../state/selectors/pieSelectors.mjs";
-import { PieVueProps as g } from "./type.mjs";
-import { computed as _, createVNode as v, defineComponent as y, mergeProps as b, ref as x, watch as S } from "vue";
+import { selectChartOffset } from "../../state/selectors/selectChartOffset.mjs";
+import { polarToCartesian } from "../../utils/polar.mjs";
+import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.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 { computePieSectors, selectDisplayedData, selectPieLegend, selectSynchronisedPieSettings } from "../../state/selectors/pieSelectors.mjs";
+import { PieVueProps } from "./type.mjs";
+import { computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
 //#region src/polar/pie/Pie.tsx
-var C = 20, w = /* @__PURE__ */ y({
+var LABEL_OFFSET = 20;
+var Pie = /* @__PURE__ */ defineComponent({
 	name: "Pie",
-	props: g,
-	inheritAttrs: !1,
+	props: PieVueProps,
+	inheritAttrs: false,
 	slots: Object,
-	setup(g, { attrs: y, slots: w }) {
-		let T = i(), E = _(() => g.activeIndex !== -1), D = x(g.activeIndex);
-		S(() => g.activeIndex, (e) => {
-			D.value = e;
+	setup(props, { attrs, slots }) {
+		const dispatch = useAppDispatch();
+		const isControlled = computed(() => props.activeIndex !== -1);
+		const activeIndex = ref(props.activeIndex);
+		watch(() => props.activeIndex, (val) => {
+			activeIndex.value = val;
 		});
-		let O = _(() => ({
-			data: g.data,
-			dataKey: g.dataKey,
-			nameKey: g.nameKey,
-			cx: g.cx,
-			cy: g.cy,
-			innerRadius: g.innerRadius,
-			outerRadius: g.outerRadius,
-			startAngle: g.startAngle,
-			endAngle: g.endAngle,
-			paddingAngle: g.paddingAngle,
-			minAngle: g.minAngle,
-			fill: g.fill,
-			legendType: g.legendType,
-			tooltipType: g.tooltipType,
+		const pieSettings = computed(() => ({
+			data: props.data,
+			dataKey: props.dataKey,
+			nameKey: props.nameKey,
+			cx: props.cx,
+			cy: props.cy,
+			innerRadius: props.innerRadius,
+			outerRadius: props.outerRadius,
+			startAngle: props.startAngle,
+			endAngle: props.endAngle,
+			paddingAngle: props.paddingAngle,
+			minAngle: props.minAngle,
+			fill: props.fill,
+			legendType: props.legendType,
+			tooltipType: props.tooltipType,
 			presentationProps: {}
 		}));
-		c(_(() => ({
+		SetPolarGraphicalItem(computed(() => ({
 			type: "pie",
-			data: g.data ?? [],
-			dataKey: g.dataKey,
-			hide: g.hide,
+			data: props.data ?? [],
+			dataKey: props.dataKey,
+			hide: props.hide,
 			angleAxisId: 0,
 			radiusAxisId: 0
 		})));
-		let k = a((e) => p(e, O.value)), A = a((e) => h(e, O.value)), j = a((t) => e(t)), M = a((e) => m(e, O.value));
-		l(_(() => M.value ?? []));
-		let N = _(() => {
-			if (!(A.value == null || k.value == null)) return f({
-				offset: j.value,
-				pieSettings: O.value,
-				displayedData: k.value
+		const displayedData = useAppSelector((state) => selectDisplayedData(state, pieSettings.value));
+		const synchronisedSettings = useAppSelector((state) => selectSynchronisedPieSettings(state, pieSettings.value));
+		const offset = useAppSelector((state) => selectChartOffset(state));
+		const legendPayload = useAppSelector((state) => selectPieLegend(state, pieSettings.value));
+		SetLegendPayload(computed(() => legendPayload.value ?? []));
+		const sectors = computed(() => {
+			if (synchronisedSettings.value == null || displayedData.value == null) return;
+			return computePieSectors({
+				offset: offset.value,
+				pieSettings: pieSettings.value,
+				displayedData: displayedData.value
 			});
 		});
-		u({
-			fn: (e) => e,
-			args: _(() => ({
-				dataDefinedOnItem: k.value ?? [],
-				positions: N.value?.map((e) => e.tooltipPosition),
+		SetTooltipEntrySettings({
+			fn: (v) => v,
+			args: computed(() => ({
+				dataDefinedOnItem: displayedData.value ?? [],
+				positions: sectors.value?.map((s) => s.tooltipPosition),
 				settings: {
-					dataKey: g.dataKey,
-					nameKey: g.nameKey,
-					name: String(g.dataKey ?? ""),
-					hide: g.hide,
-					type: g.tooltipType,
-					color: g.fill,
-					fill: g.fill,
-					stroke: g.stroke,
+					dataKey: props.dataKey,
+					nameKey: props.nameKey,
+					name: String(props.dataKey ?? ""),
+					hide: props.hide,
+					type: props.tooltipType,
+					color: props.fill,
+					fill: props.fill,
+					stroke: props.stroke,
 					unit: ""
 				}
 			}))
 		});
-		function P(e, t) {
-			E.value || (D.value = t), T(r({
-				activeIndex: String(t),
-				activeDataKey: g.dataKey,
-				activeCoordinate: e.tooltipPosition
+		function handleSectorEnter(sector, index) {
+			if (!isControlled.value) activeIndex.value = index;
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: String(index),
+				activeDataKey: props.dataKey,
+				activeCoordinate: sector.tooltipPosition
 			}));
 		}
-		function F() {
-			E.value || (D.value = -1), T(n());
+		function handleSectorLeave() {
+			if (!isControlled.value) activeIndex.value = -1;
+			dispatch(mouseLeaveItem());
 		}
-		function I(e, n) {
-			let r = t(e.cx, e.cy, e.outerRadius, e.midAngle), i = t(e.cx, e.cy, e.outerRadius + C, e.midAngle), a = i.x > e.cx ? "start" : i.x < e.cx ? "end" : "middle";
-			return v("g", { key: `label-${n}` }, [v("line", {
-				x1: r.x,
-				y1: r.y,
-				x2: i.x,
-				y2: i.y,
-				stroke: e.fill,
-				fill: "none"
-			}, null), v("text", {
-				x: i.x,
-				y: i.y,
-				"text-anchor": a,
+		function renderLabel(sector, index) {
+			const edgePoint = polarToCartesian(sector.cx, sector.cy, sector.outerRadius, sector.midAngle);
+			const pos = polarToCartesian(sector.cx, sector.cy, sector.outerRadius + LABEL_OFFSET, sector.midAngle);
+			const anchor = pos.x > sector.cx ? "start" : pos.x < sector.cx ? "end" : "middle";
+			return createVNode("g", { "key": `label-${index}` }, [createVNode("line", {
+				"x1": edgePoint.x,
+				"y1": edgePoint.y,
+				"x2": pos.x,
+				"y2": pos.y,
+				"stroke": sector.fill,
+				"fill": "none"
+			}, null), createVNode("text", {
+				"x": pos.x,
+				"y": pos.y,
+				"text-anchor": anchor,
 				"dominant-baseline": "middle",
-				fill: e.fill
-			}, [String(e.value)])]);
+				"fill": sector.fill
+			}, [String(sector.value)])]);
 		}
 		return () => {
-			let e = N.value;
-			if (!e || e.length === 0) return null;
-			let t = y.stroke ?? g.stroke;
-			return v(o, { class: ["v-charts-pie", g.className] }, { default: () => [v(s, {
-				isActive: g.isAnimationActive,
-				from: 0,
-				to: 1,
-				transition: { duration: 1.5 }
-			}, { default: (n) => {
-				let r = e[0]?.startAngle ?? 0, i = e.map((e, i) => {
-					let a = i > 0 ? e.paddingAngle : 0, o = (e.endAngle - e.startAngle) * n, s = r + a, c = r + o + a;
-					r = c;
-					let l = w.shape ? w.shape({
-						...e,
-						startAngle: s,
-						endAngle: c,
-						stroke: t,
-						isActive: D.value === i
-					}) : v(d, b(y, {
-						cx: e.cx,
-						cy: e.cy,
-						innerRadius: e.innerRadius,
-						outerRadius: e.outerRadius,
-						startAngle: s,
-						endAngle: c,
-						fill: e.fill,
-						stroke: t
+			const sectorList = sectors.value;
+			if (!sectorList || sectorList.length === 0) return null;
+			const stroke = attrs.stroke ?? props.stroke;
+			return createVNode(Layer, { "class": ["v-charts-pie", props.class] }, { default: () => [createVNode(Animate, {
+				"isActive": props.isAnimationActive,
+				"from": 0,
+				"to": 1,
+				"transition": { duration: 1.5 }
+			}, { default: (progress) => {
+				let curAngle = sectorList[0]?.startAngle ?? 0;
+				const sectorNodes = sectorList.map((sector, i) => {
+					const paddingAngle = i > 0 ? sector.paddingAngle : 0;
+					const deltaAngle = (sector.endAngle - sector.startAngle) * progress;
+					const animatedStartAngle = curAngle + paddingAngle;
+					const animatedEndAngle = curAngle + deltaAngle + paddingAngle;
+					curAngle = animatedEndAngle;
+					const content = slots.shape ? slots.shape({
+						...sector,
+						startAngle: animatedStartAngle,
+						endAngle: animatedEndAngle,
+						stroke,
+						isActive: activeIndex.value === i
+					}) : createVNode(Sector, mergeProps(attrs, {
+						"cx": sector.cx,
+						"cy": sector.cy,
+						"innerRadius": sector.innerRadius,
+						"outerRadius": sector.outerRadius,
+						"startAngle": animatedStartAngle,
+						"endAngle": animatedEndAngle,
+						"fill": sector.fill,
+						"stroke": stroke
 					}), null);
-					return v("g", {
-						key: `sector-${i}`,
-						onMouseenter: () => P(e, i),
-						onMouseleave: F
-					}, [l]);
+					return createVNode("g", {
+						"key": `sector-${i}`,
+						"onMouseenter": () => handleSectorEnter(sector, i),
+						"onMouseleave": handleSectorLeave
+					}, [content]);
 				});
-				return n >= 1 && g.label && i.push(...e.map(I)), i;
+				if (progress >= 1 && props.label) sectorNodes.push(...sectorList.map(renderLabel));
+				return sectorNodes;
 			} })] });
 		};
 	}
 });
 //#endregion
-export { w as Pie };
+export { Pie };

package/dist/es/polar/pie/type.mjs

@@ -1,5 +1,6 @@
+import { classProp } from "../../types/common.mjs";
 //#region src/polar/pie/type.ts
-var e = {
+var PieVueProps = {
 	data: {
 		type: Array,
 		default: void 0
@@ -10,7 +11,7 @@ var e = {
 			Number,
 			Function
 		],
-		required: !0
+		required: true
 	},
 	nameKey: {
 		type: [
@@ -74,7 +75,7 @@ var e = {
 	},
 	hide: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	activeIndex: {
 		type: Number,
@@ -82,16 +83,13 @@ var e = {
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	label: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
-	className: {
-		type: String,
-		default: void 0
-	}
+	class: classProp
 };
 //#endregion
-export { e as PieVueProps };
+export { PieVueProps };

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

@@ -1,21 +1,26 @@
-import { RADIAN as e, 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 a from "../../components/Text.mjs";
-import { addAngleAxis as o, removeAngleAxis as s } from "../../state/polarAxisSlice.mjs";
-import { selectPolarAxisTicks as c } from "../../state/selectors/polarScaleSelectors.mjs";
-import { createVNode as l, defineComponent as u, onUnmounted as d, watchEffect as f } from "vue";
+import { RADIAN, polarToCartesian } from "../../utils/polar.mjs";
+import { selectPolarViewBox } from "../../state/selectors/polarAxisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import Text_default from "../../components/Text.mjs";
+import { addAngleAxis, removeAngleAxis } from "../../state/polarAxisSlice.mjs";
+import { selectPolarAxisTicks } from "../../state/selectors/polarScaleSelectors.mjs";
+import { createVNode, defineComponent, onUnmounted, watchEffect } from "vue";
 //#region src/polar/radar/PolarAngleAxis.tsx
-var p = 1e-5, m = Math.cos(45 * e);
-function h(t, n) {
-	let r = Math.cos(-t * e);
-	return r > p ? n === "outer" ? "start" : "end" : r < -p ? n === "outer" ? "end" : "start" : "middle";
+var eps = 1e-5;
+var COS_45 = Math.cos(45 * RADIAN);
+function getTickTextAnchor(coordinate, orientation) {
+	const cos = Math.cos(-coordinate * RADIAN);
+	if (cos > eps) return orientation === "outer" ? "start" : "end";
+	if (cos < -eps) return orientation === "outer" ? "end" : "start";
+	return "middle";
 }
-function g(t) {
-	let n = Math.cos(-t * e), r = Math.sin(-t * e);
-	return Math.abs(n) <= m ? r > 0 ? "start" : "end" : "middle";
+function getTickVerticalAnchor(coordinate) {
+	const cos = Math.cos(-coordinate * RADIAN);
+	const sin = Math.sin(-coordinate * RADIAN);
+	if (Math.abs(cos) <= COS_45) return sin > 0 ? "start" : "end";
+	return "middle";
 }
-var _ = /* @__PURE__ */ u({
+var PolarAngleAxis = /* @__PURE__ */ defineComponent({
 	name: "PolarAngleAxis",
 	props: {
 		angleAxisId: {
@@ -32,11 +37,11 @@ var _ = /* @__PURE__ */ u({
 		},
 		tick: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		tickLine: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		tickSize: {
 			type: Number,
@@ -44,7 +49,7 @@ var _ = /* @__PURE__ */ u({
 		},
 		axisLine: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		axisLineType: {
 			type: String,
@@ -80,82 +85,96 @@ var _ = /* @__PURE__ */ u({
 		}
 	},
 	slots: Object,
-	setup(e, { slots: u }) {
-		let p = r(), m = null;
-		f(() => {
-			let t = {
-				id: e.angleAxisId,
-				type: e.type,
-				dataKey: e.dataKey,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		let prevSettings = null;
+		watchEffect(() => {
+			const settings = {
+				id: props.angleAxisId,
+				type: props.type,
+				dataKey: props.dataKey,
 				scale: "auto",
-				allowDuplicatedCategory: !0,
-				allowDataOverflow: !1,
-				reversed: !1,
-				includeHidden: !1,
-				domain: e.domain,
+				allowDuplicatedCategory: true,
+				allowDataOverflow: false,
+				reversed: false,
+				includeHidden: false,
+				domain: props.domain,
 				unit: void 0,
 				name: void 0,
-				allowDecimals: !1,
-				tickCount: e.tickCount,
-				ticks: e.ticks,
-				tick: e.tick
+				allowDecimals: false,
+				tickCount: props.tickCount,
+				ticks: props.ticks,
+				tick: props.tick
 			};
-			p(o(t)), m = t;
-		}), d(() => {
-			m &&= (p(s(m)), null);
+			dispatch(addAngleAxis(settings));
+			prevSettings = settings;
 		});
-		let _ = i((e) => n(e)), v = i((t) => c(t, "angleAxis", e.angleAxisId, !1));
+		onUnmounted(() => {
+			if (prevSettings) {
+				dispatch(removeAngleAxis(prevSettings));
+				prevSettings = null;
+			}
+		});
+		const polarViewBox = useAppSelector((state) => selectPolarViewBox(state));
+		const ticks = useAppSelector((state) => selectPolarAxisTicks(state, "angleAxis", props.angleAxisId, false));
 		return () => {
-			let n = _.value, r = v.value;
-			if (n == null || r == null || r.length === 0) return null;
-			let { cx: i, cy: o, outerRadius: s, startAngle: c, endAngle: d } = n, { orientation: f, tickSize: p, axisLine: m, axisLineType: y, tickLine: b, tick: x, tickFormatter: S, stroke: C } = e, w = Math.abs((d ?? 0) - (c ?? 0)) === 360 && r.length > 1 && Math.abs(r[r.length - 1].coordinate - r[0].coordinate) % 360 == 0 ? r.slice(0, -1) : r;
-			return l("g", { class: "v-charts-polar-angle-axis" }, [m && (y === "circle" ? l("circle", {
-				cx: i,
-				cy: o,
-				r: s,
-				fill: "none",
-				stroke: C
-			}, null) : l("polygon", {
-				points: w.map((e) => {
-					let n = t(i, o, s, e.coordinate);
-					return `${n.x},${n.y}`;
+			const viewBox = polarViewBox.value;
+			const tickItems = ticks.value;
+			if (viewBox == null || tickItems == null || tickItems.length === 0) return null;
+			const { cx, cy, outerRadius: radius, startAngle: vbStart, endAngle: vbEnd } = viewBox;
+			const { orientation, tickSize, axisLine, axisLineType, tickLine, tick, tickFormatter, stroke } = props;
+			const filteredTicks = Math.abs((vbEnd ?? 0) - (vbStart ?? 0)) === 360 && tickItems.length > 1 && Math.abs(tickItems[tickItems.length - 1].coordinate - tickItems[0].coordinate) % 360 === 0 ? tickItems.slice(0, -1) : tickItems;
+			return createVNode("g", { "class": "v-charts-polar-angle-axis" }, [axisLine && (axisLineType === "circle" ? createVNode("circle", {
+				"cx": cx,
+				"cy": cy,
+				"r": radius,
+				"fill": "none",
+				"stroke": stroke
+			}, null) : createVNode("polygon", {
+				"points": filteredTicks.map((t) => {
+					const p = polarToCartesian(cx, cy, radius, t.coordinate);
+					return `${p.x},${p.y}`;
 				}).join(" "),
-				fill: "none",
-				stroke: C
-			}, null)), l("g", { class: "v-charts-polar-angle-axis-ticks" }, [w.map((e, n) => {
-				let r = t(i, o, s, e.coordinate), c = t(i, o, s + (f === "inner" ? -1 : 1) * p, e.coordinate), d = h(e.coordinate, f), m = g(e.coordinate), _ = S ? S(e.value, n) : e.value;
-				return l("g", {
-					key: `tick-${e.coordinate}`,
-					class: "v-charts-polar-angle-axis-tick"
-				}, [b && l("line", {
-					class: "v-charts-polar-angle-axis-tick-line",
-					x1: r.x,
-					y1: r.y,
-					x2: c.x,
-					y2: c.y,
-					stroke: C,
-					fill: "none"
-				}, null), x && (u.tick ? u.tick({
-					x: c.x,
-					y: c.y,
-					value: _,
-					index: n,
-					textAnchor: d,
-					payload: e,
-					cx: i,
-					cy: o
-				}) : l(a, {
-					class: "v-charts-polar-angle-axis-tick-value",
-					x: c.x,
-					y: c.y,
-					textAnchor: d,
-					verticalAnchor: m,
-					fill: C,
-					value: String(_)
+				"fill": "none",
+				"stroke": stroke
+			}, null)), createVNode("g", { "class": "v-charts-polar-angle-axis-ticks" }, [filteredTicks.map((entry, i) => {
+				const p1 = polarToCartesian(cx, cy, radius, entry.coordinate);
+				const p2 = polarToCartesian(cx, cy, radius + (orientation === "inner" ? -1 : 1) * tickSize, entry.coordinate);
+				const textAnchor = getTickTextAnchor(entry.coordinate, orientation);
+				const verticalAnchor = getTickVerticalAnchor(entry.coordinate);
+				const value = tickFormatter ? tickFormatter(entry.value, i) : entry.value;
+				return createVNode("g", {
+					"key": `tick-${entry.coordinate}`,
+					"class": "v-charts-polar-angle-axis-tick"
+				}, [tickLine && createVNode("line", {
+					"class": "v-charts-polar-angle-axis-tick-line",
+					"x1": p1.x,
+					"y1": p1.y,
+					"x2": p2.x,
+					"y2": p2.y,
+					"stroke": stroke,
+					"fill": "none"
+				}, null), tick && (slots.tick ? slots.tick({
+					x: p2.x,
+					y: p2.y,
+					value,
+					index: i,
+					textAnchor,
+					payload: entry,
+					cx,
+					cy
+				}) : createVNode(Text_default, {
+					"class": "v-charts-polar-angle-axis-tick-value",
+					"x": p2.x,
+					"y": p2.y,
+					"textAnchor": textAnchor,
+					"verticalAnchor": verticalAnchor,
+					"fill": stroke,
+					"value": String(value)
 				}, null))]);
 			})])]);
 		};
 	}
 });
 //#endregion
-export { _ as PolarAngleAxis };
+export { PolarAngleAxis };