@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

package/dist/esm/components/chart/use-polar-chart.js

@@ -0,0 +1,707 @@
+"use client";
+
+import { utils_exports } from "../../utils/index.js";
+import { useChartContext } from "./use-chart.js";
+import { isValidElement, useCallback, useMemo } from "react";
+
+//#region src/components/chart/use-polar-chart.ts
+const useChartPie = ({ activeShape, animationBegin, animationDuration, animationEasing, cornerRadius, cx, cy, data, dataKey: dataKeyProp, endAngle = -270, hide, inactiveShape, innerRadius = "0%", isAnimationActive = false, label, labelLine = false, legendType, maxRadius, minAngle, nameKey, outerRadius = !label ? "100%" : void 0, paddingAngle, rootTabIndex, shape, startAngle = 90, tooltipType, zIndex, onAnimationEnd, onAnimationStart, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, ...rest } = {}) => {
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getPieProps: useCallback(({ dataKey = dataKeyProp, ...props } = {}) => ({
+			activeShape,
+			animationBegin,
+			animationDuration,
+			animationEasing,
+			cornerRadius,
+			cx,
+			cy,
+			data,
+			dataKey,
+			endAngle,
+			fill: "",
+			hide,
+			inactiveShape,
+			innerRadius,
+			isAnimationActive,
+			label,
+			labelLine,
+			legendType,
+			maxRadius,
+			minAngle,
+			nameKey,
+			outerRadius,
+			paddingAngle,
+			rootTabIndex,
+			shape,
+			startAngle,
+			stroke: "",
+			tooltipType,
+			zIndex,
+			onAnimationEnd,
+			onAnimationStart,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			...props
+		}), [
+			activeShape,
+			animationBegin,
+			animationDuration,
+			animationEasing,
+			cornerRadius,
+			cx,
+			cy,
+			data,
+			dataKeyProp,
+			endAngle,
+			hide,
+			inactiveShape,
+			innerRadius,
+			isAnimationActive,
+			label,
+			labelLine,
+			legendType,
+			maxRadius,
+			minAngle,
+			nameKey,
+			onAnimationEnd,
+			onAnimationStart,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			outerRadius,
+			paddingAngle,
+			rootTabIndex,
+			shape,
+			startAngle,
+			tooltipType,
+			zIndex
+		]),
+		getRootProps
+	};
+};
+const useChartSector = ({ name: nameProp, cornerIsExternal, cornerRadius, cx, cy, endAngle, forceCornerRadius, innerRadius, outerRadius, startAngle, ...rest } = {}) => {
+	const { highlightedDataKey } = useChartContext();
+	return {
+		getRootProps: useCallback((props) => ({
+			...rest,
+			...props
+		}), [rest]),
+		getSectorProps: useCallback(({ name = nameProp, ...props } = {}) => ({
+			name,
+			"data-active": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey === name),
+			"data-inactive": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey !== name),
+			cornerIsExternal,
+			cornerRadius,
+			cx,
+			cy,
+			endAngle,
+			forceCornerRadius,
+			innerRadius,
+			outerRadius,
+			startAngle,
+			...props
+		}), [
+			cornerIsExternal,
+			cornerRadius,
+			cx,
+			cy,
+			endAngle,
+			forceCornerRadius,
+			highlightedDataKey,
+			innerRadius,
+			nameProp,
+			outerRadius,
+			startAngle
+		])
+	};
+};
+const useChartPieLabel = ({ name: nameProp, cornerRadius, cx, cy, dataKey, endAngle, formatter, index, innerRadius, maxRadius, midAngle = 0, middleRadius = 0, offset: offsetProp = 24, outerRadius, paddingAngle, payload, percent = 0, startAngle, textAnchor: _textAnchor, tooltipPayload, tooltipPosition, value, x: _x, y: _y, ...rest }) => {
+	const { highlightedDataKey } = useChartContext();
+	const offset = (outerRadius - innerRadius) * .5 + offsetProp;
+	const radian = Math.PI / 180;
+	const x = cx + (middleRadius + offset) * Math.cos(-midAngle * radian);
+	const y = cy + (middleRadius + offset) * Math.sin(-midAngle * radian);
+	return {
+		getRootProps: useCallback((props) => ({
+			...rest,
+			...props
+		}), [rest]),
+		getTextProps: useCallback(({ name = nameProp, ...props } = {}) => ({
+			name,
+			"data-active": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey === name),
+			"data-inactive": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey !== name),
+			alignmentBaseline: "middle",
+			children: formatter?.(value, percent) ?? value,
+			cornerRadius,
+			cx,
+			cy,
+			dataKey,
+			endAngle,
+			index,
+			innerRadius,
+			maxRadius,
+			midAngle,
+			middleRadius,
+			outerRadius,
+			paddingAngle,
+			payload,
+			percent,
+			startAngle,
+			textAnchor: x > cx ? "start" : x < cx ? "end" : "middle",
+			tooltipPayload,
+			tooltipPosition,
+			value,
+			x,
+			y,
+			...props
+		}), [
+			cornerRadius,
+			cx,
+			cy,
+			dataKey,
+			endAngle,
+			formatter,
+			highlightedDataKey,
+			index,
+			innerRadius,
+			maxRadius,
+			midAngle,
+			middleRadius,
+			nameProp,
+			outerRadius,
+			paddingAngle,
+			payload,
+			percent,
+			startAngle,
+			tooltipPayload,
+			tooltipPosition,
+			value,
+			x,
+			y
+		])
+	};
+};
+const useChartPieLabelLine = ({ name: nameProp, cornerRadius, dataKey, endAngle, index, innerRadius, maxRadius, midAngle, middleRadius, outerRadius, paddingAngle, payload, percent, points, startAngle, tooltipPayload, tooltipPosition, value, ...rest }) => {
+	const { highlightedDataKey } = useChartContext();
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getCurveProps: useCallback(({ name = nameProp, ...props } = {}) => ({
+			name,
+			"data-active": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey === name),
+			"data-inactive": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey !== name),
+			cornerRadius,
+			dataKey,
+			endAngle,
+			index,
+			innerRadius,
+			maxRadius,
+			midAngle,
+			middleRadius,
+			outerRadius,
+			paddingAngle,
+			payload,
+			percent,
+			points,
+			startAngle,
+			tooltipPayload,
+			tooltipPosition,
+			value,
+			...props
+		}), [
+			highlightedDataKey,
+			nameProp,
+			cornerRadius,
+			dataKey,
+			endAngle,
+			index,
+			innerRadius,
+			maxRadius,
+			midAngle,
+			middleRadius,
+			outerRadius,
+			paddingAngle,
+			payload,
+			percent,
+			points,
+			startAngle,
+			tooltipPayload,
+			tooltipPosition,
+			value
+		]),
+		getRootProps
+	};
+};
+const useChartRadar = ({ activeDot: activeDotProp, angleAxisId, animationBegin, animationDuration, animationEasing, baseLinePoints, connectNulls, dataKey: dataKeyProp, dot: dotProp, hide, isAnimationActive = false, isRange, label: labelProp, legendType, points, radiusAxisId, shape, tooltipType, zIndex, onAnimationEnd, onAnimationStart, onMouseEnter, onMouseLeave, ...rest }) => {
+	const { highlightedDataKey } = useChartContext();
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		if ((0, utils_exports.isFunction)(labelProp) || isValidElement(labelProp)) return labelProp;
+		return {
+			fill: "",
+			offset: 12,
+			position: "top",
+			...(0, utils_exports.isObject)(labelProp) ? labelProp : {}
+		};
+	}, [labelProp]);
+	const dot = useMemo(() => {
+		if (!dotProp) return dotProp;
+		if ((0, utils_exports.isFunction)(dotProp) || isValidElement(dotProp)) return dotProp;
+		return {
+			fill: "",
+			stroke: "",
+			...(0, utils_exports.isObject)(dotProp) ? dotProp : {}
+		};
+	}, [dotProp]);
+	const activeDot = useMemo(() => {
+		if (!activeDotProp) return activeDotProp;
+		if ((0, utils_exports.isFunction)(activeDotProp) || isValidElement(activeDotProp)) return activeDotProp;
+		return {
+			fill: "",
+			stroke: "",
+			...(0, utils_exports.isObject)(activeDotProp) ? activeDotProp : {}
+		};
+	}, [activeDotProp]);
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getRadarProps: useCallback(({ dataKey = dataKeyProp, ...props } = {}) => ({
+			"data-active": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey === dataKey),
+			"data-inactive": (0, utils_exports.dataAttr)(!(0, utils_exports.isUndefined)(highlightedDataKey) && highlightedDataKey !== dataKey),
+			activeDot,
+			angleAxisId,
+			animationBegin,
+			animationDuration,
+			animationEasing,
+			baseLinePoints,
+			connectNulls,
+			dataKey,
+			dot,
+			hide,
+			isAnimationActive,
+			isRange,
+			label,
+			legendType,
+			points,
+			radiusAxisId,
+			shape,
+			tooltipType,
+			zIndex,
+			onAnimationEnd,
+			onAnimationStart,
+			onMouseEnter,
+			onMouseLeave,
+			...props
+		}), [
+			dataKeyProp,
+			highlightedDataKey,
+			activeDot,
+			angleAxisId,
+			animationBegin,
+			animationDuration,
+			animationEasing,
+			baseLinePoints,
+			connectNulls,
+			dot,
+			hide,
+			isAnimationActive,
+			isRange,
+			label,
+			legendType,
+			points,
+			radiusAxisId,
+			shape,
+			tooltipType,
+			zIndex,
+			onAnimationEnd,
+			onAnimationStart,
+			onMouseEnter,
+			onMouseLeave
+		]),
+		getRootProps
+	};
+};
+const useAngleAxis = ({ type, name, allowDataOverflow, allowDecimals, allowDuplicatedCategory, angle, angleAxisId, axisLine: axisLineProp, axisLineType, cx, cy, dataKey, domain, hide, includeHidden, label: labelProp, orientation, radius, range, reversed, scale, tick: tickProp, tickCount, tickFormatter, tickLine: tickLineProp, ticks, tickSize, unit, zIndex, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, ...rest }) => {
+	const tick = useMemo(() => {
+		if (!tickProp) return tickProp;
+		if ((0, utils_exports.isFunction)(tickProp) || isValidElement(tickProp)) return tickProp;
+		return {
+			fill: "",
+			...(0, utils_exports.isObject)(tickProp) ? tickProp : {}
+		};
+	}, [tickProp]);
+	const tickLine = useMemo(() => {
+		if (!tickLineProp) return tickLineProp;
+		return {
+			fill: "",
+			stroke: "",
+			...(0, utils_exports.isObject)(tickLineProp) ? tickLineProp : {}
+		};
+	}, [tickLineProp]);
+	const axisLine = useMemo(() => {
+		if (!axisLineProp) return axisLineProp;
+		return {
+			fill: "",
+			stroke: "",
+			...(0, utils_exports.isObject)(axisLineProp) ? axisLineProp : {}
+		};
+	}, [axisLineProp]);
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		if ((0, utils_exports.isFunction)(labelProp) || isValidElement(labelProp)) return labelProp;
+		return {
+			fill: "",
+			...(0, utils_exports.isObject)(labelProp) ? labelProp : {}
+		};
+	}, [labelProp]);
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getAngleAxisProps: useCallback((props) => ({
+			type,
+			name,
+			allowDataOverflow,
+			allowDecimals,
+			allowDuplicatedCategory,
+			angle,
+			angleAxisId,
+			axisLine,
+			axisLineType,
+			cx,
+			cy,
+			dataKey,
+			domain,
+			hide,
+			includeHidden,
+			label,
+			orientation,
+			radius,
+			range,
+			reversed,
+			scale,
+			tick,
+			tickCount,
+			tickFormatter,
+			tickLine,
+			ticks,
+			tickSize,
+			unit,
+			zIndex,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			...props
+		}), [
+			allowDataOverflow,
+			allowDecimals,
+			allowDuplicatedCategory,
+			angle,
+			angleAxisId,
+			axisLine,
+			axisLineType,
+			cx,
+			cy,
+			dataKey,
+			domain,
+			hide,
+			includeHidden,
+			label,
+			name,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			orientation,
+			radius,
+			range,
+			reversed,
+			scale,
+			tick,
+			tickCount,
+			tickFormatter,
+			tickLine,
+			ticks,
+			tickSize,
+			type,
+			unit,
+			zIndex
+		]),
+		getRootProps
+	};
+};
+const useRadiusAxis = ({ type, name, allowDataOverflow, allowDecimals, allowDuplicatedCategory, angle = 90, axisLine: axisLineProp = true, dataKey, domain, hide, includeHidden, label: labelProp, orientation, radius, radiusAxisId, range, reversed, scale, tick: tickProp, tickCount, tickFormatter, tickLine: tickLineProp, ticks, unit, zIndex, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, ...rest }) => {
+	const tick = useMemo(() => {
+		if (!tickProp) return tickProp;
+		if ((0, utils_exports.isFunction)(tickProp) || isValidElement(tickProp)) return tickProp;
+		return {
+			fill: "",
+			...(0, utils_exports.isObject)(tickProp) ? tickProp : {}
+		};
+	}, [tickProp]);
+	const tickLine = useMemo(() => {
+		if (!tickLineProp) return tickLineProp;
+		return {
+			fill: "",
+			stroke: "",
+			...(0, utils_exports.isObject)(tickLineProp) ? tickLineProp : {}
+		};
+	}, [tickLineProp]);
+	const axisLine = useMemo(() => {
+		if (!axisLineProp) return axisLineProp;
+		return {
+			fill: "",
+			stroke: "",
+			...(0, utils_exports.isObject)(axisLineProp) ? axisLineProp : {}
+		};
+	}, [axisLineProp]);
+	const label = useMemo(() => {
+		if (!labelProp) return labelProp;
+		if ((0, utils_exports.isFunction)(labelProp) || isValidElement(labelProp)) return labelProp;
+		return {
+			fill: "",
+			...(0, utils_exports.isObject)(labelProp) ? labelProp : {}
+		};
+	}, [labelProp]);
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getRadiusAxisProps: useCallback((props) => ({
+			type,
+			name,
+			allowDataOverflow,
+			allowDecimals,
+			allowDuplicatedCategory,
+			angle,
+			axisLine,
+			dataKey,
+			domain,
+			hide,
+			includeHidden,
+			label,
+			orientation,
+			radius,
+			radiusAxisId,
+			range,
+			reversed,
+			scale,
+			tick,
+			tickCount,
+			tickFormatter,
+			tickLine,
+			ticks,
+			unit,
+			zIndex,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			...props
+		}), [
+			type,
+			name,
+			allowDataOverflow,
+			allowDecimals,
+			allowDuplicatedCategory,
+			angle,
+			axisLine,
+			dataKey,
+			domain,
+			hide,
+			includeHidden,
+			label,
+			orientation,
+			radius,
+			radiusAxisId,
+			range,
+			reversed,
+			scale,
+			tick,
+			tickCount,
+			tickFormatter,
+			tickLine,
+			ticks,
+			unit,
+			zIndex,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp
+		]),
+		getRootProps
+	};
+};
+const usePolarGrid = ({ angleAxisId, cx, cy, gridType, innerRadius, outerRadius, polarAngles, polarRadius, radialLines, radiusAxisId, zIndex, ...rest }) => {
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getPolarGridProps: useCallback((props) => ({
+			angleAxisId,
+			cx,
+			cy,
+			gridType,
+			innerRadius,
+			outerRadius,
+			polarAngles,
+			polarRadius,
+			radialLines,
+			radiusAxisId,
+			zIndex,
+			...props
+		}), [
+			angleAxisId,
+			cx,
+			cy,
+			gridType,
+			innerRadius,
+			outerRadius,
+			polarAngles,
+			polarRadius,
+			radialLines,
+			radiusAxisId,
+			zIndex
+		]),
+		getRootProps
+	};
+};
+const useChartRadial = ({ activeShape, angleAxisId, animationBegin, animationDuration, animationEasing, background: backgroundProp, barSize, cornerIsExternal, stackId, cornerRadius = !stackId ? 4 : void 0, dataKey, forceCornerRadius, hide, isAnimationActive = false, label, legendType, maxBarSize, nameKey, radius, radiusAxisId, shape: shapeProp, tooltipType, zIndex, onAnimationEnd, onAnimationStart, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, ...rest }) => {
+	const shape = useMemo(() => {
+		if ((0, utils_exports.isFunction)(shapeProp)) return (props) => {
+			props.className = props.className?.replace(/\s*\bundefined\b/g, "");
+			const name = props.payload?.[nameKey];
+			return shapeProp({
+				name,
+				...props
+			});
+		};
+		else return shapeProp;
+	}, [nameKey, shapeProp]);
+	const background = useMemo(() => {
+		if (!backgroundProp) return backgroundProp;
+		if ((0, utils_exports.isFunction)(backgroundProp) || isValidElement(backgroundProp)) return backgroundProp;
+		return {
+			fill: "",
+			...backgroundProp !== true ? backgroundProp : {}
+		};
+	}, [backgroundProp]);
+	const getRootProps = useCallback((props) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		getRadialProps: useCallback((props) => ({
+			activeShape,
+			angleAxisId,
+			animationBegin,
+			animationDuration,
+			animationEasing,
+			background,
+			barSize,
+			cornerIsExternal,
+			cornerRadius,
+			dataKey,
+			forceCornerRadius,
+			hide,
+			isAnimationActive,
+			label,
+			legendType,
+			maxBarSize,
+			radius,
+			radiusAxisId,
+			shape,
+			stackId,
+			tooltipType,
+			zIndex,
+			onAnimationEnd,
+			onAnimationStart,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			...props
+		}), [
+			activeShape,
+			angleAxisId,
+			animationBegin,
+			animationDuration,
+			animationEasing,
+			background,
+			barSize,
+			cornerIsExternal,
+			cornerRadius,
+			dataKey,
+			forceCornerRadius,
+			hide,
+			isAnimationActive,
+			label,
+			legendType,
+			maxBarSize,
+			onAnimationEnd,
+			onAnimationStart,
+			onClick,
+			onMouseDown,
+			onMouseEnter,
+			onMouseLeave,
+			onMouseMove,
+			onMouseOut,
+			onMouseOver,
+			onMouseUp,
+			radius,
+			radiusAxisId,
+			shape,
+			stackId,
+			tooltipType,
+			zIndex
+		]),
+		getRootProps
+	};
+};
+
+//#endregion
+export { useAngleAxis, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartRadar, useChartRadial, useChartSector, usePolarGrid, useRadiusAxis };
+//# sourceMappingURL=use-polar-chart.js.map