vccs 0.6.0 → 1.0.0-beta.2

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

@@ -1,161 +1,309 @@
-import { selectChartOffset } from "../../state/selectors/selectChartOffset.mjs";
+import { getTooltipNameProp } from "../../core/tooltip.mjs";
 import { polarToCartesian } from "../../utils/polar.mjs";
-import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
-import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useTrackedData } from "../../hooks/useTrackedData.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useSeriesProps } from "../../hooks/useSeriesProps.mjs";
+import { pieEvents } from "../../events/itemEvents.mjs";
+import { useDeferredView } from "../../hooks/deferredView.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 { useAnimationCallbacks } from "../../animation/useAnimationCallbacks.mjs";
+import { useKeyedTransition } from "../../animation/useKeyedTransition.mjs";
+import { labelOpacity } from "../../animation/ridingLabels.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { entryColor } from "../../core/color.mjs";
+import { useSetupPolarItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { delegateItemEvents } from "../../events/delegateItemEvents.mjs";
+import { assignCells, extractCellProps, filterOutCells } from "../../utils/cell.mjs";
 import { Sector } from "../../shape/Sector.mjs";
-import { computePieSectors, selectDisplayedData, selectPieLegend, selectSynchronisedPieSettings } from "../../state/selectors/pieSelectors.mjs";
+import { computePieSectors, pieLegend } from "../../core/pie.mjs";
 import { PieVueProps } from "./type.mjs";
-import { computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
+import { computed, createVNode, defineComponent, h, mergeProps, shallowRef } from "vue";
 //#region src/polar/pie/Pie.tsx
 var LABEL_OFFSET = 20;
-var Pie = /* @__PURE__ */ defineComponent({
-	name: "Pie",
-	props: PieVueProps,
+var PieView = /* @__PURE__ */ defineComponent({
+	name: "PieView",
 	inheritAttrs: false,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		pieSettings: {
+			type: Object,
+			required: true
+		},
+		cells: {
+			type: Object,
+			required: true
+		}
+	},
 	slots: Object,
-	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;
-		});
-		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: {}
+	setup(view, { slots }) {
+		const emit = pieEvents.use();
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const data = view.data;
+		const pieSettings = view.pieSettings;
+		const cells = view.cells;
+		const tooltip = useChart().tooltip;
+		const chart = useChart();
+		const displayedData = computed(() => data.value?.length ? data.value : chart.data.value);
+		const sectors = computed(() => displayedData.value == null ? void 0 : computePieSectors({
+			offset: chart.offset.value,
+			pieSettings: pieSettings.value,
+			displayedData: displayedData.value
 		}));
-		SetPolarGraphicalItem(computed(() => ({
-			type: "pie",
-			data: props.data ?? [],
-			dataKey: props.dataKey,
-			hide: props.hide,
-			angleAxisId: 0,
-			radiusAxisId: 0
-		})));
-		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
-			});
-		});
-		SetTooltipEntrySettings({
-			fn: (v) => v,
-			args: computed(() => ({
-				dataDefinedOnItem: displayedData.value ?? [],
-				positions: sectors.value?.map((s) => s.tooltipPosition),
-				settings: {
-					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: ""
-				}
-			}))
+		const callbacks = useAnimationCallbacks(() => emit("animation-start"), () => emit("animation-end"));
+		let appeared = false;
+		const { items } = useKeyedTransition(() => sectors.value?.map((sector, index) => ({
+			...sector,
+			index
+		})), {
+			key: (sector, index) => sector.name ?? index,
+			connected: true,
+			interpolate: (from, to, t) => ({
+				...to,
+				startAngle: from.startAngle + (to.startAngle - from.startAngle) * t,
+				endAngle: from.endAngle + (to.endAngle - from.endAngle) * t,
+				innerRadius: from.innerRadius + (to.innerRadius - from.innerRadius) * t,
+				outerRadius: from.outerRadius + (to.outerRadius - from.outerRadius) * t,
+				paddingAngle: from.paddingAngle + (to.paddingAngle - from.paddingAngle) * t
+			}),
+			enterFrom: (to, { previous, next }) => {
+				const angle = appeared ? previous?.endAngle ?? next?.startAngle ?? to.startAngle : sectors.value?.[0]?.startAngle ?? to.startAngle;
+				return {
+					...to,
+					startAngle: angle,
+					endAngle: angle,
+					paddingAngle: 0
+				};
+			},
+			exitTo: (from, { previous, next }) => {
+				const angle = previous?.endAngle ?? next?.startAngle ?? from.startAngle;
+				return {
+					...from,
+					startAngle: angle,
+					endAngle: angle,
+					paddingAngle: 0
+				};
+			},
+			isActive: () => props.isAnimationActive ?? true,
+			transition: () => props.transition,
+			onEnd: callbacks.onEnd,
+			onStart: () => {
+				callbacks.onStart();
+				if (sectors.value?.length) appeared = true;
+			}
 		});
+		const tooltipConfiguration = computed(() => ({
+			model: {
+				index: () => props.activeIndex,
+				request: (index) => emit("update:activeIndex", index)
+			},
+			dataDefinedOnItem: displayedData.value ?? [],
+			positions: sectors.value?.map((s) => s.tooltipPosition),
+			colors: sectors.value?.map((sector, index) => entryColor({
+				cell: cells.value[index],
+				row: sector.payload,
+				seriesFill: props.fill,
+				index
+			})),
+			settings: {
+				dataKey: props.dataKey,
+				nameKey: props.nameKey,
+				name: getTooltipNameProp(props.name, props.dataKey),
+				hide: props.hide,
+				type: props.tooltipType,
+				color: props.fill,
+				fill: props.fill,
+				stroke: props.stroke,
+				unit: ""
+			}
+		}));
+		tooltip.entries.register(tooltipConfiguration);
+		const activeIndex = tooltip.activeIndexFor(tooltipConfiguration);
 		function handleSectorEnter(sector, index) {
-			if (!isControlled.value) activeIndex.value = index;
-			dispatch(setActiveMouseOverItemIndex({
-				activeIndex: String(index),
-				activeDataKey: props.dataKey,
-				activeCoordinate: sector.tooltipPosition
-			}));
+			tooltip.activate("hover", {
+				type: "item",
+				configuration: tooltipConfiguration.value,
+				index,
+				coordinate: sector.tooltipPosition
+			});
 		}
 		function handleSectorLeave() {
-			if (!isControlled.value) activeIndex.value = -1;
-			dispatch(mouseLeaveItem());
+			tooltip.clear("hover", "item");
 		}
-		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", {
+		let sectorList = items.value;
+		const listeners = delegateItemEvents((position) => sectorList[position]?.value, {
+			click: (sector, _position, event) => {
+				tooltip.activate("click", {
+					type: "item",
+					configuration: tooltipConfiguration.value,
+					index: sector.index,
+					coordinate: sector.tooltipPosition
+				});
+				emit("click", sector, sector.index, event);
+			},
+			mouseenter: (sector, _position, event) => {
+				handleSectorEnter(sector, sector.index);
+				emit("mouseenter", sector, sector.index, event);
+			},
+			mouseleave: (sector, _position, event) => {
+				handleSectorLeave();
+				emit("mouseleave", sector, sector.index, event);
+			}
+		});
+		function renderLabel(sector, index, key, opacity) {
+			const midAngle = (sector.startAngle + sector.endAngle) / 2;
+			const edgePoint = rounded(polarToCartesian(sector.cx, sector.cy, sector.outerRadius, midAngle));
+			const pos = rounded(polarToCartesian(sector.cx, sector.cy, sector.outerRadius + LABEL_OFFSET, midAngle));
+			const towardEnd = Math.min(1, Math.max(0, .5 - (pos.x - sector.cx) / 16));
+			const anchor = towardEnd === 0 ? "start" : towardEnd === 1 ? "end" : towardEnd === .5 ? "middle" : "start";
+			const slide = anchor === "start" && towardEnd > 0 ? {
+				transformBox: "fill-box",
+				transform: `translateX(${-Math.round(towardEnd * 1e3) / 10}%)`
+			} : void 0;
+			return createVNode("g", {
+				"key": `label-${String(key)}`,
+				"opacity": opacity
+			}, [props.labelLine && createVNode("line", {
 				"x1": edgePoint.x,
 				"y1": edgePoint.y,
 				"x2": pos.x,
 				"y2": pos.y,
 				"stroke": sector.fill,
 				"fill": "none"
-			}, null), createVNode("text", {
+			}, null), slots.label ? slots.label({
+				...sector,
+				midAngle,
+				index
+			}) : createVNode("text", {
 				"x": pos.x,
 				"y": pos.y,
 				"text-anchor": anchor,
+				"style": slide,
 				"dominant-baseline": "middle",
 				"fill": sector.fill
 			}, [String(sector.value)])]);
 		}
 		return () => {
-			const sectorList = sectors.value;
+			if (props.hide) return null;
+			const children = slots.default?.() ?? [];
+			assignCells(cells, extractCellProps(children));
+			sectorList = cells.value.length ? items.value.map((item) => ({
+				...item,
+				value: {
+					...item.value,
+					fill: entryColor({
+						cell: cells.value[item.value.index],
+						row: item.value.payload,
+						seriesFill: props.fill,
+						index: item.value.index
+					})
+				}
+			})) : items.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": props.transition
-			}, { 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({
+			const stroke = props.stroke;
+			return createVNode(Layer, mergeProps({
+				"data-slot": "series",
+				"class": ["v-charts-pie", props.class]
+			}, listeners), { default: () => [
+				sectorList.map(({ key, value: sector }, position) => {
+					const animatedStartAngle = sector.startAngle;
+					const animatedEndAngle = sector.endAngle;
+					const shapeProps = {
 						...sector,
 						startAngle: animatedStartAngle,
 						endAngle: animatedEndAngle,
 						stroke,
-						isActive: activeIndex.value === i
-					}) : createVNode(Sector, mergeProps(attrs, {
+						isActive: activeIndex.value === sector.index
+					};
+					const shapeSlot = shapeProps.isActive && slots.activeShape ? slots.activeShape : slots.shape;
+					const content = shapeSlot ? shapeSlot(shapeProps) : createVNode(Sector, mergeProps(attrs, {
 						"cx": sector.cx,
 						"cy": sector.cy,
 						"innerRadius": sector.innerRadius,
 						"outerRadius": sector.outerRadius,
 						"startAngle": animatedStartAngle,
 						"endAngle": animatedEndAngle,
+						"cornerRadius": sector.cornerRadius,
 						"fill": sector.fill,
 						"stroke": stroke
 					}), null);
 					return createVNode("g", {
-						"key": `sector-${i}`,
-						"onMouseenter": () => handleSectorEnter(sector, i),
-						"onMouseleave": handleSectorLeave
+						"key": key,
+						"data-v-charts-item-index": position
 					}, [content]);
-				});
-				if (progress >= 1 && props.label) sectorNodes.push(...sectorList.map(renderLabel));
-				return sectorNodes;
-			} })] });
+				}),
+				filterOutCells(children),
+				(props.label || slots.label) && sectorList.map((item, index) => renderLabel(item.value, index, item.key, labelOpacity(item)))
+			] });
 		};
 	}
 });
+/**
+* Node and browsers can differ in the last digit of sin/cos; rounding to 1/1000 px keeps the
+* server's label positions identical to the client's, so hydration matches.
+*/
+function rounded({ x, y }) {
+	return {
+		x: Math.round(x * 1e3) / 1e3,
+		y: Math.round(y * 1e3) / 1e3
+	};
+}
+var Pie = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "Pie",
+	emits: pieEvents.emits,
+	props: PieVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(inputProps, { attrs, slots, emit }) {
+		const props = useSeriesProps(inputProps);
+		pieEvents.provide(emit);
+		const data = useTrackedData(() => props.data);
+		const pieSettings = computed(() => ({
+			data: data.value,
+			dataKey: props.dataKey,
+			nameKey: props.nameKey,
+			name: props.name,
+			cx: props.cx,
+			cy: props.cy,
+			innerRadius: props.innerRadius,
+			outerRadius: props.outerRadius,
+			startAngle: props.startAngle,
+			endAngle: props.endAngle,
+			paddingAngle: props.paddingAngle,
+			cornerRadius: props.cornerRadius,
+			minAngle: props.minAngle,
+			fill: props.fill,
+			legendType: props.legendType,
+			tooltipType: props.tooltipType,
+			presentationProps: {}
+		}));
+		const chart = useChart();
+		const cells = shallowRef([]);
+		const legendPayload = computed(() => pieLegend(data.value?.length ? data.value : chart.data.value, pieSettings.value, cells.value));
+		useSetupPolarItem(props, "pie", {
+			settings: () => ({ data: data.value ?? [] }),
+			legend: () => legendPayload.value ?? []
+		});
+		const View = useDeferredView(PieView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs,
+			data,
+			pieSettings,
+			cells
+		}, slots);
+	}
+}));
 //#endregion
 export { Pie };

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

@@ -21,6 +21,11 @@ var PieVueProps = {
 		],
 		default: "name"
 	},
+	/** Series name for the tooltip and the legend fallback; defaults to a string `dataKey`. */
+	name: {
+		type: [String, Number],
+		default: void 0
+	},
 	cx: {
 		type: [Number, String],
 		default: "50%"
@@ -53,17 +58,22 @@ var PieVueProps = {
 		type: Number,
 		default: 0
 	},
+	/** Rounds the corners of every sector, in px. */
+	cornerRadius: {
+		type: [Number, String],
+		default: void 0
+	},
 	minAngle: {
 		type: Number,
 		default: 0
 	},
 	fill: {
 		type: String,
-		default: "#808080"
+		default: void 0
 	},
 	stroke: {
 		type: String,
-		default: "#fff"
+		default: "var(--v-charts-background, #fff)"
 	},
 	legendType: {
 		type: String,
@@ -79,23 +89,24 @@ var PieVueProps = {
 	},
 	activeIndex: {
 		type: Number,
-		default: -1
+		default: void 0
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: true
+		default: void 0
 	},
 	transition: {
 		type: Object,
-		default: () => ({
-			duration: 1.2,
-			ease: "easeOut"
-		})
+		default: void 0
 	},
 	label: {
 		type: Boolean,
 		default: false
 	},
+	labelLine: {
+		type: Boolean,
+		default: true
+	},
 	class: classProp
 };
 //#endregion