@solidports/recharts 0.1.0

package/src/state/selectors/selectChartOffsetInternal.ts

@@ -0,0 +1,136 @@
+/* eslint-disable import/no-cycle */
+import { selectLegendSettings, selectLegendSize } from "./legendSelectors"
+import type {
+	CartesianViewBoxRequired,
+	ChartOffsetInternal,
+	Margin,
+	OffsetHorizontal,
+	OffsetVertical,
+	Size,
+} from "../../util/types"
+import type { XAxisSettings, YAxisSettings } from "../cartesianAxisSlice"
+import type { LegendSettings } from "../legendSlice"
+import { appendOffsetOfLegend } from "../../util/ChartUtils"
+import { selectChartHeight, selectChartWidth, selectMargin } from "./containerSelectors"
+import { selectAllXAxes, selectAllYAxes } from "./selectAllAxes"
+import { DEFAULT_X_AXIS_HEIGHT, DEFAULT_Y_AXIS_WIDTH } from "../../util/Constants"
+import type { ChartState } from "../store"
+import { chartSelector } from "./chartSelector"
+import { readChartState } from "../chartState"
+
+export const selectBrushHeight = chartSelector((state: ChartState) => {
+	return readChartState(state).brush.height ?? 0
+})
+
+const selectLeftAxesOffset = chartSelector(function selectLeftAxesOffset(state: ChartState): number {
+	const yAxes = selectAllYAxes(state)
+	return yAxes.reduce((result: number, entry: YAxisSettings): number => {
+		if (entry.orientation === "left" && !entry.mirror && !entry.hide) {
+			const width = typeof entry.width === "number" ? entry.width : DEFAULT_Y_AXIS_WIDTH
+			return result + width
+		}
+		return result
+	}, 0)
+})
+
+const selectRightAxesOffset = chartSelector(function selectRightAxesOffset(state: ChartState): number {
+	const yAxes = selectAllYAxes(state)
+	return yAxes.reduce((result: number, entry: YAxisSettings): number => {
+		if (entry.orientation === "right" && !entry.mirror && !entry.hide) {
+			const width = typeof entry.width === "number" ? entry.width : DEFAULT_Y_AXIS_WIDTH
+			return result + width
+		}
+		return result
+	}, 0)
+})
+
+const selectTopAxesOffset = chartSelector(function selectTopAxesOffset(state: ChartState): number {
+	const xAxes = selectAllXAxes(state)
+	return xAxes.reduce((result: number, entry: XAxisSettings): number => {
+		if (entry.orientation === "top" && !entry.mirror && !entry.hide) {
+			const height = typeof entry.height === "number" ? entry.height : DEFAULT_X_AXIS_HEIGHT
+			return result + height
+		}
+		return result
+	}, 0)
+})
+
+const selectBottomAxesOffset = chartSelector(function selectBottomAxesOffset(state: ChartState): number {
+	const xAxes = selectAllXAxes(state)
+	return xAxes.reduce((result: number, entry: XAxisSettings): number => {
+		if (entry.orientation === "bottom" && !entry.mirror && !entry.hide) {
+			const height = typeof entry.height === "number" ? entry.height : DEFAULT_X_AXIS_HEIGHT
+			return result + height
+		}
+		return result
+	}, 0)
+})
+
+/**
+ * For internal use only.
+ *
+ * @param state root state
+ * @return ChartOffsetInternal
+ */
+export const selectChartOffsetInternal = chartSelector(function selectChartOffsetInternal(state: ChartState): ChartOffsetInternal {
+	const chartWidth: number = selectChartWidth(state)
+	const chartHeight: number = selectChartHeight(state)
+	const margin: Margin = selectMargin(state)
+	const brushHeight: number = selectBrushHeight(state)
+	const leftAxesOffset: number = selectLeftAxesOffset(state)
+	const rightAxesOffset: number = selectRightAxesOffset(state)
+	const topAxesOffset: number = selectTopAxesOffset(state)
+	const bottomAxesOffset: number = selectBottomAxesOffset(state)
+	const legendSettings: LegendSettings = selectLegendSettings(state)
+	const legendSize: Size = selectLegendSize(state)
+
+	const offsetH: OffsetHorizontal = {
+		left: (margin.left || 0) + leftAxesOffset,
+		right: (margin.right || 0) + rightAxesOffset,
+	}
+
+	const offsetV: OffsetVertical = {
+		bottom: (margin.bottom || 0) + bottomAxesOffset,
+		top: (margin.top || 0) + topAxesOffset,
+	}
+
+	let offset = { ...offsetV, ...offsetH }
+
+	const brushBottom = offset.bottom
+
+	offset.bottom += brushHeight
+
+	offset = appendOffsetOfLegend(offset, legendSettings, legendSize)
+
+	const offsetWidth = chartWidth - offset.left - offset.right
+	const offsetHeight = chartHeight - offset.top - offset.bottom
+
+	return {
+		brushBottom,
+		...offset,
+		/* never return negative values for height and width */
+		height: Math.max(offsetHeight, 0),
+		width: Math.max(offsetWidth, 0),
+	}
+})
+
+export const selectChartViewBox = chartSelector(function selectChartViewBox(state: ChartState): CartesianViewBoxRequired {
+	const offset = selectChartOffsetInternal(state)
+	return {
+		height: offset.height,
+		width: offset.width,
+		x: offset.left,
+		y: offset.top,
+	}
+})
+
+export const selectAxisViewBox = chartSelector(function selectAxisViewBox(state: ChartState): CartesianViewBoxRequired {
+	const width = selectChartWidth(state)
+	const height = selectChartHeight(state)
+	return {
+		height,
+		width,
+		x: 0,
+		y: 0,
+	}
+})

package/src/state/selectors/selectLegendArea.ts

@@ -0,0 +1,20 @@
+import type { CartesianViewBoxRequired, Margin } from "../../util/types"
+import type { ChartState } from "../store"
+import { selectChartHeight, selectChartWidth, selectMargin } from "./containerSelectors"
+import { chartSelector } from "./chartSelector"
+
+/**
+ * Margin-inset chart area. Outside Legend positions (`top`/`bottom`/`left`/`right`)
+ * use this instead of the plot-area viewBox so the legend sits beyond any axes.
+ */
+export const selectLegendArea = chartSelector(function selectLegendArea(state: ChartState): CartesianViewBoxRequired {
+	const chartWidth: number = selectChartWidth(state)
+	const chartHeight: number = selectChartHeight(state)
+	const margin: Margin = selectMargin(state)
+	return {
+		height: Math.max(chartHeight - (margin.top || 0) - (margin.bottom || 0), 0),
+		width: Math.max(chartWidth - (margin.left || 0) - (margin.right || 0), 0),
+		x: margin.left || 0,
+		y: margin.top || 0,
+	}
+})

package/src/state/selectors/selectPlotArea.ts

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-cycle */
+import { selectChartOffset } from "./selectChartOffset"
+import { selectChartHeight, selectChartWidth } from "./containerSelectors"
+import { chartSelector } from "./chartSelector"
+import type { ChartState } from "../store"
+
+export const selectPlotArea = chartSelector(function selectPlotArea(state: ChartState) {
+	const offset = selectChartOffset(state)
+	const chartWidth = selectChartWidth(state)
+	const chartHeight = selectChartHeight(state)
+
+	if (!offset || chartWidth == null || chartHeight == null) {
+		return undefined
+	}
+
+	return {
+		height: Math.max(0, chartHeight - offset.top - offset.bottom),
+		width: Math.max(0, chartWidth - offset.left - offset.right),
+		x: offset.left,
+		y: offset.top,
+	}
+})

package/src/state/selectors/selectTooltipAxisId.ts

@@ -0,0 +1,7 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { AxisId } from "../cartesianAxisSlice"
+import { selectTooltipSettings } from "./selectTooltipSettings"
+
+export const selectTooltipAxisId = (state: ChartState): AxisId =>
+	selectTooltipSettings(state).axisId

package/src/state/selectors/selectTooltipAxisType.ts

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { chartSelector } from "./chartSelector"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+
+/**
+ * angle, radius, X, Y, and Z axes all have domain and range and scale and associated settings
+ */
+export type AllAxisTypes = "xAxis" | "yAxis" | "zAxis" | "radiusAxis" | "angleAxis"
+
+/**
+ * Z axis is never displayed and so it lacks ticks and tick settings.
+ */
+export type RenderableAxisType = "xAxis" | "yAxis" | "angleAxis" | "radiusAxis"
+
+export const selectTooltipAxisType = chartSelector((state: ChartState): RenderableAxisType => {
+	const layout = selectChartLayout(state)
+
+	if (layout === "horizontal") {
+		return "xAxis"
+	}
+
+	if (layout === "vertical") {
+		return "yAxis"
+	}
+
+	if (layout === "centric") {
+		return "angleAxis"
+	}
+
+	return "radiusAxis"
+})

package/src/state/selectors/selectTooltipEventType.ts

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { TooltipEventType } from "../../util/types"
+import { useChartStore } from "../RechartsStoreContext"
+import { chartSelector } from "./chartSelector"
+import { SharedTooltipSettings } from "../tooltipSlice"
+
+export const selectDefaultTooltipEventType = (state: ChartState): TooltipEventType =>
+	state.options.defaultTooltipEventType
+
+export const selectValidateTooltipEventTypes = (
+	state: ChartState,
+): ReadonlyArray<TooltipEventType> | undefined => state.options.validateTooltipEventTypes
+
+export function combineTooltipEventType(
+	shared: SharedTooltipSettings,
+	defaultTooltipEventType: TooltipEventType,
+	validateTooltipEventTypes: ReadonlyArray<TooltipEventType> | undefined,
+): TooltipEventType {
+	if (shared == null) {
+		return defaultTooltipEventType
+	}
+	const eventType = shared ? "axis" : "item"
+	if (validateTooltipEventTypes == null) {
+		return defaultTooltipEventType
+	}
+	return validateTooltipEventTypes.includes(eventType) ? eventType : defaultTooltipEventType
+}
+
+export const selectTooltipEventType = chartSelector(function selectTooltipEventType(state: ChartState, shared: SharedTooltipSettings): TooltipEventType {
+	const defaultTooltipEventType = selectDefaultTooltipEventType(state)
+	const validateTooltipEventTypes = selectValidateTooltipEventTypes(state)
+	return combineTooltipEventType(shared, defaultTooltipEventType, validateTooltipEventTypes)
+})
+
+/* 1:1 port of upstream useTooltipEventType. Returns bare T per GOTCHA-011;
+   reads via useChartStore so panorama/standalone usage returns undefined
+   instead of throwing. Caller is expected to live in a tracked scope
+   (createMemo/createEffect/JSX) for reactivity. */
+export function useTooltipEventType(
+	shared: SharedTooltipSettings,
+): TooltipEventType | undefined {
+	const ctx = useChartStore()
+	if (!ctx) {
+		return undefined
+	}
+	return selectTooltipEventType(ctx.store, shared)
+}

package/src/state/selectors/selectTooltipPayloadSearcher.ts

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-cycle */
+import { ChartState } from "../store"
+import { TooltipPayloadSearcher } from "../tooltipSlice"
+
+export const selectTooltipPayloadSearcher = (state: ChartState): TooltipPayloadSearcher =>
+	state.options.tooltipPayloadSearcher

package/src/state/selectors/selectTooltipSettings.ts

@@ -0,0 +1,39 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { TooltipSettingsState } from "../tooltipSlice"
+import { chartSelector } from "./chartSelector"
+import { readChartState } from "../chartState"
+
+const normalizeIndex = (index: unknown): unknown => (typeof index === "number" ? String(index) : index)
+
+/**
+ * Live view over the settings store node that reports a numeric `defaultIndex` as a string.
+ * Reads go through to the store, so the view never goes stale and keeps fine-grained tracking.
+ */
+const indexViewHandler: ProxyHandler<TooltipSettingsState> = {
+	get(target, key) {
+		const value = Reflect.get(target, key)
+		return key === "defaultIndex" ? normalizeIndex(value) : value
+	},
+	getOwnPropertyDescriptor(target, key) {
+		const descriptor = Reflect.getOwnPropertyDescriptor(target, key)
+		return key === "defaultIndex" && descriptor != null
+			? { ...descriptor, value: normalizeIndex(descriptor.value) }
+			: descriptor
+	},
+}
+
+const indexViews = new WeakMap<TooltipSettingsState, TooltipSettingsState>()
+
+export const selectTooltipSettings = chartSelector((state: ChartState): TooltipSettingsState => {
+	const settings = readChartState(state).tooltip.settings
+	if (typeof settings.defaultIndex !== "number") {
+		return settings
+	}
+	let view = indexViews.get(settings)
+	if (view == null) {
+		view = new Proxy(settings, indexViewHandler)
+		indexViews.set(settings, view)
+	}
+	return view
+})

package/src/state/selectors/selectTooltipState.ts

@@ -0,0 +1,8 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { TooltipState } from "../tooltipSlice"
+import { readChartState } from "../chartState"
+
+export const selectTooltipState = (state: ChartState): TooltipState => {
+	return readChartState(state).tooltip
+}

package/src/state/selectors/selectors.ts

@@ -0,0 +1,271 @@
+/* eslint-disable import/no-cycle */
+import sortBy from "es-toolkit/compat/sortBy"
+import type { ChartState } from "../store"
+import { selectChartName } from "./rootPropsSelectors"
+
+/**
+ * Compatibility wrapper: returns chart name from the store.
+ * In Solid, this reads reactively when called inside a tracking scope.
+ */
+export { selectChartName as useChartName }
+import type {
+	ActiveTooltipProps,
+	TooltipIndex,
+	TooltipInteractionState,
+	TooltipPayload,
+	TooltipPayloadConfiguration,
+} from "../tooltipSlice"
+import { calculateCartesianTooltipPos, calculatePolarTooltipPos } from "../../util/ChartUtils"
+import type {
+	AxisType,
+	CartesianLayout,
+	ChartOffsetInternal,
+	RelativePointer,
+	Coordinate,
+	DataKey,
+	PolarCoordinate,
+	PolarLayout,
+	PolarViewBoxRequired,
+	TickItem,
+	TooltipEventType,
+} from "../../util/types"
+import type { TooltipTrigger } from "../../chart/types"
+import { selectChartDataWithIndexes } from "./dataSelectors"
+import {
+	selectTooltipAxisDomain,
+	selectTooltipAxisTicks,
+	selectTooltipDisplayedData,
+} from "./tooltipSelectors"
+import { type AxisRange, selectTooltipAxisDataKey } from "./axisSelectors"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import { selectChartHeight, selectChartWidth } from "./containerSelectors"
+import { combineActiveLabel } from "./combiners/combineActiveLabel"
+import { combineTooltipInteractionState } from "./combiners/combineTooltipInteractionState"
+import { combineActiveTooltipIndex } from "./combiners/combineActiveTooltipIndex"
+import { combineCoordinateForDefaultIndex } from "./combiners/combineCoordinateForDefaultIndex"
+import { combineTooltipPayloadConfigurations } from "./combiners/combineTooltipPayloadConfigurations"
+import { selectTooltipPayloadSearcher } from "./selectTooltipPayloadSearcher"
+import { selectTooltipState } from "./selectTooltipState"
+import { combineTooltipPayload } from "./combiners/combineTooltipPayload"
+import { chartSelector } from "./chartSelector"
+import {
+	calculateActiveTickIndex,
+	getActiveCartesianCoordinate,
+	getActivePolarCoordinate,
+	isInCartesianRange,
+} from "../../util/getActiveCoordinate"
+import { inRangeOfSector } from "../../util/PolarUtils"
+
+export const selectOrderedTooltipTicks = chartSelector(function selectOrderedTooltipTicks(state: ChartState) {
+	const ticks = selectTooltipAxisTicks(state)
+	return sortBy(ticks, (o) => o.coordinate)
+})
+
+export const selectTooltipInteractionState = chartSelector(function selectTooltipInteractionState(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): TooltipInteractionState {
+	return combineTooltipInteractionState(
+		selectTooltipState(state),
+		tooltipEventType,
+		trigger,
+		defaultIndex,
+	)
+})
+
+export const selectActiveIndex = chartSelector(function selectActiveIndex(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): TooltipIndex | null {
+	return combineActiveTooltipIndex(
+		selectTooltipInteractionState(state, tooltipEventType, trigger, defaultIndex),
+		selectTooltipDisplayedData(state),
+		selectTooltipAxisDataKey(state),
+		selectTooltipAxisDomain(state),
+	)
+})
+
+export const selectTooltipDataKey = chartSelector(function selectTooltipDataKey(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger): DataKey<unknown> | undefined {
+	if (tooltipEventType == null) {
+		return undefined
+	}
+	const tooltipState = selectTooltipState(state)
+	if (tooltipEventType === "axis") {
+		if (trigger === "hover") {
+			return tooltipState.axisInteraction.hover.dataKey
+		}
+		return tooltipState.axisInteraction.click.dataKey
+	}
+	if (trigger === "hover") {
+		return tooltipState.itemInteraction.hover.dataKey
+	}
+	return tooltipState.itemInteraction.click.dataKey
+})
+
+export const selectTooltipPayloadConfigurations = chartSelector(function selectTooltipPayloadConfigurations(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): ReadonlyArray<TooltipPayloadConfiguration> {
+	return combineTooltipPayloadConfigurations(
+		selectTooltipState(state),
+		tooltipEventType,
+		trigger,
+		defaultIndex,
+	)
+})
+
+export const selectCoordinateForDefaultIndex = chartSelector(function selectCoordinateForDefaultIndex(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): Coordinate | undefined {
+	return combineCoordinateForDefaultIndex(
+		selectChartWidth(state),
+		selectChartHeight(state),
+		selectChartLayout(state),
+		selectChartOffsetInternal(state),
+		selectTooltipAxisTicks(state),
+		defaultIndex,
+		selectTooltipPayloadConfigurations(state, tooltipEventType, trigger, defaultIndex),
+	)
+})
+
+export const selectActiveCoordinate = chartSelector(function selectActiveCoordinate(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): Coordinate | undefined {
+	const tooltipInteractionState = selectTooltipInteractionState(
+		state,
+		tooltipEventType,
+		trigger,
+		defaultIndex,
+	)
+	const defaultIndexCoordinate = selectCoordinateForDefaultIndex(
+		state,
+		tooltipEventType,
+		trigger,
+		defaultIndex,
+	)
+	return tooltipInteractionState.coordinate ?? defaultIndexCoordinate
+})
+
+export const selectActiveLabel = chartSelector(function selectActiveLabel(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): string | number | undefined {
+	return combineActiveLabel(
+		selectTooltipAxisTicks(state),
+		selectActiveIndex(state, tooltipEventType, trigger, defaultIndex),
+	)
+})
+
+export const selectTooltipPayload = chartSelector(function selectTooltipPayload(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): TooltipPayload | undefined {
+	return combineTooltipPayload(
+		selectTooltipPayloadConfigurations(state, tooltipEventType, trigger, defaultIndex),
+		selectActiveIndex(state, tooltipEventType, trigger, defaultIndex),
+		selectChartDataWithIndexes(state),
+		selectTooltipAxisDataKey(state),
+		selectActiveLabel(state, tooltipEventType, trigger, defaultIndex),
+		selectTooltipPayloadSearcher(state),
+		tooltipEventType,
+	)
+})
+
+export const selectIsTooltipActive = chartSelector(function selectIsTooltipActive(state: ChartState, tooltipEventType: TooltipEventType | undefined, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined): { isActive: boolean; activeIndex: TooltipIndex | null } {
+	const tooltipInteractionState = selectTooltipInteractionState(
+		state,
+		tooltipEventType,
+		trigger,
+		defaultIndex,
+	)
+	const activeIndex = selectActiveIndex(state, tooltipEventType, trigger, defaultIndex)
+	return { activeIndex, isActive: tooltipInteractionState.active && activeIndex != null }
+})
+
+const combineActiveCartesianProps = (
+	chartEvent: RelativePointer | undefined,
+	layout: CartesianLayout,
+	tooltipAxisType: AxisType | undefined,
+	tooltipAxisRange: AxisRange | undefined,
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	orderedTooltipTicks: ReadonlyArray<TickItem> | undefined,
+	offset: ChartOffsetInternal,
+): ActiveTooltipProps | undefined => {
+	if (!chartEvent || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) {
+		return undefined
+	}
+	if (!isInCartesianRange(chartEvent, offset)) {
+		return undefined
+	}
+	const pos: number | undefined = calculateCartesianTooltipPos(chartEvent, layout)
+
+	const activeIndex = calculateActiveTickIndex(
+		pos,
+		orderedTooltipTicks,
+		tooltipTicks,
+		tooltipAxisType,
+		tooltipAxisRange,
+	)
+
+	const activeCoordinate = getActiveCartesianCoordinate(
+		layout,
+		tooltipTicks,
+		activeIndex,
+		chartEvent,
+	)
+
+	return { activeCoordinate, activeIndex: String(activeIndex) }
+}
+
+const combineActivePolarProps = (
+	chartEvent: RelativePointer | undefined,
+	layout: PolarLayout,
+	polarViewBox: PolarViewBoxRequired | undefined,
+	tooltipAxisType: AxisType | undefined,
+	tooltipAxisRange: AxisRange | undefined,
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	orderedTooltipTicks: ReadonlyArray<TickItem> | undefined,
+): ActiveTooltipProps | undefined => {
+	if (!chartEvent || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks || !polarViewBox) {
+		return undefined
+	}
+	const rangeObj = inRangeOfSector(chartEvent, polarViewBox)
+	if (!rangeObj) {
+		return undefined
+	}
+	const pos: number | undefined = calculatePolarTooltipPos(rangeObj, layout)
+
+	const activeIndex = calculateActiveTickIndex(
+		pos,
+		orderedTooltipTicks,
+		tooltipTicks,
+		tooltipAxisType,
+		tooltipAxisRange,
+	)
+
+	const activeCoordinate: PolarCoordinate = getActivePolarCoordinate(
+		layout,
+		tooltipTicks,
+		activeIndex,
+		rangeObj,
+	)
+
+	return { activeCoordinate, activeIndex: String(activeIndex) }
+}
+
+export const combineActiveProps = (
+	chartEvent: RelativePointer | undefined,
+	layout: CartesianLayout | PolarLayout | undefined,
+	polarViewBox: PolarViewBoxRequired | undefined,
+	tooltipAxisType: AxisType | undefined,
+	tooltipAxisRange: AxisRange | undefined,
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	orderedTooltipTicks: ReadonlyArray<TickItem> | undefined,
+	offset: ChartOffsetInternal,
+): ActiveTooltipProps | undefined => {
+	if (!chartEvent || !layout || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) {
+		return undefined
+	}
+	if (layout === "horizontal" || layout === "vertical") {
+		return combineActiveCartesianProps(
+			chartEvent,
+			layout,
+			tooltipAxisType,
+			tooltipAxisRange,
+			tooltipTicks,
+			orderedTooltipTicks,
+			offset,
+		)
+	}
+	return combineActivePolarProps(
+		chartEvent,
+		layout,
+		polarViewBox,
+		tooltipAxisType,
+		tooltipAxisRange,
+		tooltipTicks,
+		orderedTooltipTicks,
+	)
+}