vccs 0.1.0 → 0.2.0

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

@@ -1,47 +1,51 @@
-import { interpolate as e } from "../../utils/data-utils.mjs";
-import { useIsPanorama as t } from "../../context/PanoramaContextProvider.mjs";
-import { useAppSelector as n } from "../../state/hooks.mjs";
-import { Layer as r } from "../../container/Layer.mjs";
-import { Dot as i } from "../../shape/Dot.mjs";
-import { provideCartesianLabelListData as a } from "../../context/cartesianLabelListContext.mjs";
-import { LabelList as o } from "../../components/label/LabelList.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 { useGraphicalLayerRef as d } from "../../context/graphicalLayerContext.mjs";
-import { ActivePoints as f } from "../../cartesian/line/ActivePoints.mjs";
-import { selectRadarPoints as p } from "../../state/selectors/radarSelectors.mjs";
-import { Fragment as m, Teleport as h, computed as g, createVNode as _, defineComponent as v, isVNode as y, mergeProps as b, ref as x } from "vue";
+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 S(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !y(e);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-function C(e, t) {
-	return e && e !== "none" ? e : t;
+function getLegendItemColor(stroke, fill) {
+	return stroke && stroke !== "none" ? stroke : fill;
 }
-function w(e) {
-	return e.length ? `${[...e, e[0]].map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join("")}Z` : "";
+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 T(e, t) {
-	let n = w(e), r = w([...t].reverse());
-	return `${n.endsWith("Z") ? n.slice(0, -1) : n}L${r.slice(1)}`;
+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 E(t, n, r, i, a) {
-	let o = t && t[Math.floor(a * n)];
-	return o ? {
-		...i,
-		x: e(o.x, i.x, r),
-		y: e(o.y, i.y, r)
-	} : {
-		...i,
-		x: e(i.cx ?? 0, i.x, r),
-		y: e(i.cy ?? 0, i.y, r)
+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 D = /* @__PURE__ */ v({
+var Radar = /* @__PURE__ */ defineComponent({
 	name: "Radar",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		dataKey: {
 			type: [
@@ -49,7 +53,7 @@ var D = /* @__PURE__ */ v({
 				Number,
 				Function
 			],
-			required: !0
+			required: true
 		},
 		name: {
 			type: String,
@@ -85,11 +89,11 @@ var D = /* @__PURE__ */ v({
 		},
 		dot: {
 			type: [Boolean, Object],
-			default: !1
+			default: false
 		},
 		hide: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		legendType: {
 			type: String,
@@ -101,148 +105,180 @@ var D = /* @__PURE__ */ v({
 		},
 		connectNulls: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		label: {
 			type: [Boolean, Object],
-			default: !1
+			default: false
 		},
 		isAnimationActive: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		activeDot: {
 			type: [Object, Boolean],
-			default: !0
+			default: true
 		}
 	},
-	setup(e) {
-		let v = t();
-		c(g(() => ({
+	setup(props) {
+		const isPanorama = useIsPanorama();
+		SetPolarGraphicalItem(computed(() => ({
 			type: "radar",
 			data: void 0,
-			dataKey: e.dataKey,
-			hide: e.hide,
-			angleAxisId: e.angleAxisId,
-			radiusAxisId: e.radiusAxisId
-		}))), l(g(() => [{
-			dataKey: e.dataKey,
-			type: e.legendType,
-			color: C(e.stroke, e.fill),
-			value: e.name ?? String(e.dataKey ?? ""),
-			payload: { ...e },
-			inactive: e.hide
-		}])), u({
-			fn: (e) => e,
-			args: g(() => ({
+			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: e.dataKey,
+					dataKey: props.dataKey,
 					nameKey: void 0,
-					name: e.name ?? String(e.dataKey ?? ""),
-					hide: e.hide,
-					type: e.tooltipType,
-					color: C(e.stroke, e.fill),
-					fill: e.fill,
-					stroke: e.stroke,
+					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: ""
 				}
 			}))
 		});
-		let y = n((t) => p(t, e.radiusAxisId, e.angleAxisId, v, e.dataKey)), D = d(), O = x(e.isAnimationActive);
-		a(g(() => {
-			if (e.isAnimationActive && O.value) return;
-			let t = y.value;
-			if (t) return t.points.map((e) => ({
-				x: e.x,
-				y: e.y,
+		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: e.value ?? "",
-				payload: e.payload
+				value: point.value ?? "",
+				payload: point.payload
 			}));
 		}));
-		let k = null, A = null, j = 0, M, N = (t, n, a) => {
-			let o = e.stroke ?? e.fill, s = o && o !== "none", c;
-			c = a && n.length > 0 ? T(t, n) : w(t);
-			let l = c.endsWith("Z");
-			return _(r, { class: "v-charts-radar" }, { default: () => [_("g", { class: "v-charts-radar-polygon" }, [a && n.length > 0 ? _("g", null, [
-				_("path", {
-					d: c,
-					fill: l ? e.fill : "none",
-					"fill-opacity": e.fillOpacity,
-					stroke: "none",
-					"stroke-dasharray": e.strokeDasharray
+		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),
-				s && _("path", {
-					d: w(t),
-					fill: "none",
-					stroke: o,
-					"stroke-width": e.strokeWidth,
-					"stroke-dasharray": e.strokeDasharray
+				hasStroke && createVNode("path", {
+					"d": getSinglePolygonPath(points),
+					"fill": "none",
+					"stroke": stroke,
+					"stroke-width": props.strokeWidth,
+					"stroke-dasharray": props.strokeDasharray
 				}, null),
-				s && _("path", {
-					d: w(n),
-					fill: "none",
-					stroke: o,
-					"stroke-width": e.strokeWidth,
-					"stroke-dasharray": e.strokeDasharray
+				hasStroke && createVNode("path", {
+					"d": getSinglePolygonPath(baseLinePoints),
+					"fill": "none",
+					"stroke": stroke,
+					"stroke-width": props.strokeWidth,
+					"stroke-dasharray": props.strokeDasharray
 				}, null)
-			]) : _("path", {
-				d: c,
-				fill: l ? e.fill : "none",
-				"fill-opacity": e.fillOpacity,
-				stroke: o,
-				"stroke-width": e.strokeWidth,
-				"stroke-dasharray": e.strokeDasharray
-			}, null)]), e.dot && _("g", { class: "v-charts-radar-dots" }, [t.map((t, n) => {
-				let r = typeof e.dot == "object" ? e.dot : {};
-				return _(i, b({
-					key: `dot-${n}`,
-					cx: t.x,
-					cy: t.y,
-					r: 3,
-					fill: e.fill,
-					stroke: o
-				}, r), 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 (e.hide) return null;
-			let t = y.value;
-			if (t == null || t.points.length === 0) return null;
-			let { points: n, baseLinePoints: r, isRange: i } = t, a = _(f, {
-				points: n,
-				mainColor: C(e.stroke, e.fill) ?? e.fill,
-				itemDataKey: e.dataKey,
-				activeDot: e.activeDot
-			}, null), c = D?.value ? _(h, { to: D.value }, S(a) ? a : { default: () => [a] }) : a, l = !O.value && e.label ? _(o, typeof e.label == "object" ? e.label : {}, null) : null;
-			if (!e.isAnimationActive) return k = n, A = r, _(m, null, [
-				N(n, r, i),
-				l,
-				c
-			]);
-			let u = k, d = A, p = u ? u.length / n.length : 1, g = d ? d.length / r.length : 1;
-			return t !== M && (j++, M = t), _(m, null, [
-				_(s, {
-					key: j,
-					isActive: !0,
-					onAnimationStart: () => {
-						O.value = !0;
+			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: () => {
-						O.value = !1;
+					"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;
 					}
-				}, { default: (e) => {
-					let t = e === 1 ? n : n.map((t, n) => E(u, p, e, t, n)), a = e === 1 ? r : r.map((t, n) => E(d, g, e, t, n));
-					return e > 0 && (k = t, A = a), N(t, a, i);
+					return renderPolygon(stepPoints, stepBaseLine, isRange);
 				} }),
-				l,
-				c
+				labelEl,
+				activePoints
 			]);
 		};
 	}
 });
 //#endregion
-export { D as Radar };
+export { Radar };