vccs 0.6.0 → 1.0.0-beta.2

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

@@ -1,188 +1,211 @@
+import { isCategoricalAxis } from "../../utils/validate.mjs";
+import { getBandSizeOfAxis } from "../../core/axis/scale.mjs";
+import { getTooltipNameProp } from "../../core/tooltip.mjs";
+import { provideTooltipEntry } from "../../model/tooltip.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { getSeriesId, useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { usePointEvents, useSeriesPointEvents } from "../../events/usePointEvents.mjs";
+import { radarEvents } from "../../events/itemEvents.mjs";
+import { useLayerTeleport } from "../../hooks/useLayerTeleport.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
+import { classProp } from "../../types/common.mjs";
 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 { useAnimationCallbacks } from "../../animation/useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "../../animation/useKeyedTransition.mjs";
+import { labelOpacity } from "../../animation/ridingLabels.mjs";
 import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.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";
+import { ActivePoints } from "../../cartesian/ActivePoints.mjs";
+import { mainColor } from "../../core/color.mjs";
+import { useSetupPolarItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { computeRadarPoints, getRangePath, getSinglePolygonPath } from "../../core/radar.mjs";
+import { Fragment, computed, createVNode, defineComponent, h, 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",
+var RadarViewProps = {
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	name: {
+		type: [String, Number],
+		default: void 0
+	},
+	angleAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	radiusAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	fill: {
+		type: String,
+		default: void 0
+	},
+	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: void 0
+	},
+	transition: {
+		type: Object,
+		default: void 0
+	},
+	activeDot: {
+		type: [Boolean, Object],
+		default: true
+	},
+	class: classProp
+};
+var RadarView = /* @__PURE__ */ defineComponent({
+	name: "RadarView",
+	slots: Object,
 	inheritAttrs: false,
 	props: {
-		dataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
+		item: {
+			type: Object,
 			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
-		},
-		transition: {
+		svgAttrs: {
 			type: Object,
-			default: () => ({
-				duration: .8,
-				ease: "easeOut"
-			})
-		},
-		activeDot: {
-			type: [Object, Boolean],
-			default: true
+			required: 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: ""
-				}
-			}))
+	setup(view, { slots }) {
+		const emit = radarEvents.use();
+		const props = view.item;
+		const listeners = usePointEvents(emit);
+		const attrs = view.svgAttrs;
+		const chart = useChart();
+		const radiusAxis = computed(() => chart.axis("radiusAxis", props.radiusAxisId));
+		const angleAxis = computed(() => chart.axis("angleAxis", props.angleAxisId));
+		const bandSize = computed(() => {
+			const axis = isCategoricalAxis(chart.inputs.layout(), "radiusAxis") ? radiusAxis.value : angleAxis.value;
+			return getBandSizeOfAxis(axis.withScale.value, axis.ticks.value ?? void 0);
+		});
+		const radarPoints = computed(() => {
+			const radiusScale = radiusAxis.value.scale.value;
+			const angleScale = angleAxis.value.scale.value;
+			const viewport = chart.polarLayout.viewBox.value;
+			const displayedData = chart.data.value;
+			const band = bandSize.value;
+			if (!radiusScale || !angleScale || !viewport || !displayedData || band == null || props.dataKey == null) return void 0;
+			const settings = angleAxis.value.settings.value;
+			return computeRadarPoints({
+				radiusAxis: { scale: radiusScale },
+				angleAxis: {
+					scale: angleScale,
+					type: settings.type,
+					dataKey: settings.dataKey,
+					cx: viewport.cx,
+					cy: viewport.cy
+				},
+				displayedData,
+				dataKey: props.dataKey,
+				bandSize: band
+			});
+		});
+		const teleport = useLayerTeleport();
+		const graphicalLayerRef = useChartLayer("graphical");
+		const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+		const mix = (from, to, t) => ({
+			...to,
+			x: interpolate(from.x, to.x, t),
+			y: interpolate(from.y, to.y, t)
+		});
+		const centre = (point) => ({
+			...point,
+			x: point.cx ?? 0,
+			y: point.cy ?? 0
+		});
+		const { items } = useKeyedTransition(() => radarPoints.value?.points.map((point, index) => ({
+			point,
+			baseline: radarPoints.value?.baseLinePoints[index]
+		})), {
+			key: ({ point }, index) => point.name ?? index,
+			interpolate: (from, to, t) => ({
+				point: mix(from.point, to.point, t),
+				baseline: from.baseline && to.baseline ? mix(from.baseline, to.baseline, t) : to.baseline
+			}),
+			enterFrom: (to) => ({
+				point: centre(to.point),
+				baseline: to.baseline && centre(to.baseline)
+			}),
+			exitTo: (from) => ({
+				point: centre(from.point),
+				baseline: from.baseline && centre(from.baseline)
+			}),
+			connected: true,
+			isActive: () => props.isAnimationActive !== false,
+			transition: () => props.transition,
+			onEnd: callbacks.onEnd,
+			onStart: callbacks.onStart
 		});
-		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
-			}));
+			if (items.value.length === 0) return void 0;
+			return items.value.map((item) => {
+				const point = item.value.point;
+				const opacity = labelOpacity(item);
+				return {
+					x: point.x,
+					y: point.y,
+					width: 0,
+					height: 0,
+					value: point.value ?? "",
+					payload: point.payload,
+					key: item.key,
+					...opacity != null ? { opacity } : {}
+				};
+			});
 		}));
-		let prevPoints = null;
-		let prevBaseLinePoints = null;
-		let animationId = 0;
-		let lastData;
+		const seriesListeners = useSeriesPointEvents(emit, () => radarPoints.value?.points ?? []);
 		const renderPolygon = (points, baseLinePoints, isRange) => {
 			const stroke = props.stroke ?? props.fill;
 			const hasStroke = stroke && stroke !== "none";
@@ -190,7 +213,19 @@ var Radar = /* @__PURE__ */ defineComponent({
 			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, [
+			return createVNode(Layer, mergeProps(attrs, {
+				"data-slot": "series",
+				"class": ["v-charts-radar", props.class]
+			}), { default: () => [createVNode("g", mergeProps({ "class": "v-charts-radar-polygon" }, seriesListeners), [slots.shape ? slots.shape({
+				points,
+				baseLinePoints,
+				isRange,
+				fill: props.fill,
+				stroke,
+				fillOpacity: props.fillOpacity,
+				strokeWidth: props.strokeWidth,
+				strokeDasharray: props.strokeDasharray
+			}) : isRange && baseLinePoints.length > 0 ? createVNode("g", null, [
 				createVNode("path", {
 					"d": pathD,
 					"fill": isClosed ? props.fill : "none",
@@ -219,74 +254,92 @@ var Radar = /* @__PURE__ */ defineComponent({
 				"stroke": stroke,
 				"stroke-width": props.strokeWidth,
 				"stroke-dasharray": props.strokeDasharray
-			}, null)]), props.dot && createVNode("g", { "class": "v-charts-radar-dots" }, [points.map((point, i) => {
+			}, null)]), (props.dot || slots.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}`,
+				return createVNode("g", mergeProps({ "key": items.value[i].key }, listeners(point, i)), [slots.dot ? slots.dot({
+					cx: point.x,
+					cy: point.y,
+					index: i,
+					value: point.value,
+					payload: point.payload
+				}) : createVNode(Dot, mergeProps({
 					"cx": point.x,
 					"cy": point.y,
 					"r": 3,
 					"fill": props.fill,
 					"stroke": stroke
-				}, dotProps), null);
+				}, 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, {
+			if (items.value.length === 0) return null;
+			const points = data?.points ?? [];
+			const isRange = data?.isRange ?? false;
+			const activePointsEl = createVNode(Layer, seriesListeners, { default: () => [createVNode(ActivePoints, {
 				"points": points,
-				"mainColor": mainColor,
+				"mainColor": mainColor("radar", props),
 				"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;
-			}
+				"activeDot": props.activeDot,
+				"isAnimationActive": props.isAnimationActive
+			}, { activeDot: slots.activeDot })] });
+			const activePoints = teleport(activePointsEl, graphicalLayerRef);
+			const labelProps = typeof props.label === "object" ? props.label : {};
+			const labelEl = slots.label ? createVNode(LabelList, labelProps, { label: slots.label }) : props.label ? createVNode(LabelList, labelProps, null) : null;
 			return createVNode(Fragment, null, [
-				createVNode(Animate, {
-					"key": animationId,
-					"isActive": true,
-					"transition": props.transition,
-					"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);
-				} }),
+				renderPolygon(items.value.map((item) => item.value.point), items.value.flatMap((item) => item.value.baseline ? [item.value.baseline] : []), isRange),
 				labelEl,
 				activePoints
 			]);
 		};
 	}
 });
+var Radar = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	slots: Object,
+	name: "Radar",
+	emits: radarEvents.emits,
+	inheritAttrs: false,
+	props: RadarViewProps,
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps, ["fill"]);
+		radarEvents.provide(emit);
+		useSetupPolarItem(props, "radar", {
+			settings: () => ({
+				seriesId: getSeriesId(props),
+				angleAxisId: props.angleAxisId,
+				radiusAxisId: props.radiusAxisId
+			}),
+			legend: () => [{
+				type: props.legendType,
+				color: mainColor("radar", props),
+				value: getTooltipNameProp(props.name, props.dataKey) ?? "",
+				payload: { ...props }
+			}]
+		});
+		const tooltipEntry = computed(() => ({
+			dataDefinedOnItem: void 0,
+			positions: void 0,
+			settings: {
+				dataKey: props.dataKey,
+				nameKey: void 0,
+				name: getTooltipNameProp(props.name, props.dataKey),
+				hide: props.hide,
+				type: props.tooltipType,
+				color: mainColor("radar", props),
+				fill: props.fill,
+				stroke: props.stroke,
+				unit: ""
+			}
+		}));
+		useChart().tooltip.entries.register(tooltipEntry);
+		provideTooltipEntry(tooltipEntry);
+		const View = useDeferredView(RadarView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs
+		}, slots);
+	}
+}));
 //#endregion
 export { Radar };