@solidports/recharts 0.1.0 → 0.1.1

package/src/chart/Treemap.tsx

@@ -1,1223 +0,0 @@
-/* eslint-disable import/no-cycle, sort-keys */
-import { createMemo, createSignal, For, Show, untrack } from 'solid-js';
-import type { JSX } from '@solidjs/web';
-import omit from "es-toolkit/compat/omit"
-import get from "es-toolkit/compat/get"
-
-import { Layer } from "../container/Layer"
-import { Surface } from "../container/Surface"
-import { Polygon } from "../shape/Polygon"
-import { Rectangle } from "../shape/Rectangle"
-import { getValueByDataKey } from "../util/ChartUtils"
-import { COLOR_PANEL } from "../util/Constants"
-import { isNan, noop } from "../util/DataUtils"
-import { getStringSize } from "../util/DOMUtils"
-import type {
-	AnimationDuration,
-	AnimationTiming,
-	Coordinate,
-	DataConsumer,
-	DataKey,
-	EventThrottlingProps,
-	Margin,
-	Percent,
-	RectanglePosition,
-} from "../util/types"
-import { ReportChartMargin, useChartHeight, useChartWidth } from "../context/chartLayoutContext"
-import { RechartsWrapper } from "./RechartsWrapper"
-import type {
-	TooltipIndex,
-	TooltipPayloadConfiguration,
-	TooltipPayloadSearcher,
-} from "../state/tooltipSlice"
-import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings"
-import type { ChartOptions } from "../state/optionsSlice"
-import { RechartsStateProvider } from "../state/RechartsStateProvider"
-import { createInitialLayoutState } from "../state/chartState"
-import { ReportEventSettings } from "../state/ReportEventSettings"
-import { useOptionalChartState } from "../state/useChartState"
-import { isPositiveNumber } from "../util/isWellBehavedNumber"
-import { svgPropertiesNoEvents } from "../util/svgPropertiesNoEvents"
-import { CSSTransitionAnimate, extractCssEasing } from "../animation/CSSTransitionAnimate"
-import type { RequiresDefaultProps } from "../util/resolveDefaultProps"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import { RegisterGraphicalItemId } from "../context/RegisterGraphicalItemId"
-import type { GraphicalItemId } from "../state/graphicalItemsSlice"
-import { initialEventSettingsState } from "../state/eventSettingsSlice"
-
-import { splitProps } from '../util/solid-1-compat';
-import { setTooltipInteraction } from "../state/tooltipInteraction"
-const NODE_VALUE_KEY = "value"
-
-/**
- * This is what end users defines as `data` on Treemap.
- */
-export interface TreemapDataType {
-	children?: ReadonlyArray<TreemapDataType>
-
-	[key: string]: unknown
-}
-
-/**
- * This is what is returned from `squarify`, the final treemap data structure
- * that gets rendered and is stored in
- */
-export interface TreemapNode {
-	children: ReadonlyArray<TreemapNode> | null
-	value: number
-	depth: number
-	index: number
-	x: number
-	y: number
-	width: number
-	height: number
-	name: string
-	tooltipIndex: TooltipIndex
-	root?: TreemapNode
-
-	[k: string]: unknown
-}
-
-function isTreemapNode(value: unknown): value is TreemapNode {
-	return (
-		value != null &&
-		typeof value === "object" &&
-		"x" in value &&
-		"y" in value &&
-		"width" in value &&
-		"height" in value &&
-		typeof value.x === "number" &&
-		typeof value.y === "number" &&
-		typeof value.width === "number" &&
-		typeof value.height === "number"
-	)
-}
-
-export const treemapPayloadSearcher: TooltipPayloadSearcher = (
-	data: unknown,
-	activeIndex: TooltipIndex,
-): TreemapNode | undefined => {
-	if (data == null || activeIndex == null) {
-		return undefined
-	}
-	return get(data, activeIndex)
-}
-
-export const addToTreemapNodeIndex = (
-	indexInChildrenArr: number,
-	activeTooltipIndexSoFar: TooltipIndex | undefined = "",
-): TooltipIndex => {
-	return `${activeTooltipIndexSoFar}children[${indexInChildrenArr}]`
-}
-
-const chartOptions: ChartOptions = {
-	chartName: "Treemap",
-	defaultTooltipEventType: "item",
-	eventEmitter: undefined,
-	tooltipPayloadSearcher: treemapPayloadSearcher,
-	validateTooltipEventTypes: ["item"],
-}
-
-export const computeNode = <DataPointType extends TreemapDataType, DataValueType>({
-	depth,
-	node,
-	index,
-	dataKey,
-	nameKey,
-	nestedActiveTooltipIndex,
-}: {
-	depth: number
-	node: TreemapNode
-	index: number
-	dataKey: DataKey<DataPointType, DataValueType>
-	nameKey: DataKey<DataPointType, DataValueType>
-	nestedActiveTooltipIndex?: TooltipIndex | undefined
-}): TreemapNode => {
-	const currentTooltipIndex =
-		depth === 0 ? "" : addToTreemapNodeIndex(index, nestedActiveTooltipIndex)
-	const { children } = node
-	const childDepth = depth + 1
-	const computedChildren =
-		children && children.length
-			? children.map((child: TreemapNode, i: number) =>
-					computeNode({
-						dataKey,
-						depth: childDepth,
-						index: i,
-						nameKey,
-						nestedActiveTooltipIndex: currentTooltipIndex,
-						node: child,
-					}),
-				)
-			: null
-	let nodeValue: number
-
-	if (computedChildren && computedChildren.length) {
-		nodeValue = computedChildren.reduce(
-			(result: number, child: TreemapNode) => result + child.value,
-			0,
-		)
-	} else {
-		/* TODO need to verify dataKey */
-		const rawNodeValue = node[dataKey as string]
-		const numericValue = typeof rawNodeValue === "number" ? rawNodeValue : 0
-		nodeValue = isNan(numericValue) || numericValue <= 0 ? 0 : numericValue
-	}
-
-	return {
-		...node,
-		children: computedChildren,
-		name: getValueByDataKey(
-			node as Record<string, unknown>,
-			nameKey as DataKey<unknown>,
-			"",
-		) as string,
-		[NODE_VALUE_KEY]: nodeValue,
-		depth,
-		index,
-		tooltipIndex: currentTooltipIndex,
-	}
-}
-
-const filterRect = (node: TreemapNode): RectanglePosition => ({
-	height: node.height,
-	width: node.width,
-	x: node.x,
-	y: node.y,
-})
-
-const NEST_INDEX_HEIGHT = 30
-
-const getTreemapRenderHeight = (height: number, type: Props["type"]) => {
-	if (type === "nest") {
-		return height - NEST_INDEX_HEIGHT
-	}
-	return height
-}
-
-const insetRect = (rect: RectanglePosition, nodeInset: number): RectanglePosition => {
-	if (!Number.isFinite(nodeInset) || nodeInset <= 0) {
-		return rect
-	}
-
-	const clampedPadding = Math.min(nodeInset, rect.width / 2, rect.height / 2)
-
-	return {
-		x: rect.x + clampedPadding,
-		y: rect.y + clampedPadding,
-		width: Math.max(rect.width - clampedPadding * 2, 0),
-		height: Math.max(rect.height - clampedPadding * 2, 0),
-	}
-}
-
-const applyGapToChildren = (
-	children: ReadonlyArray<TreemapNodeWithArea>,
-	parentRect: RectanglePosition,
-	nodeGap: number,
-): ReadonlyArray<TreemapNodeWithArea> => {
-	if (!Number.isFinite(nodeGap) || nodeGap <= 0) {
-		return children
-	}
-
-	const halfGap = nodeGap / 2
-	const parentRight = parentRect.x + parentRect.width
-	const parentBottom = parentRect.y + parentRect.height
-
-	return children.map((child) => {
-		const childRight = child.x + child.width
-		const childBottom = child.y + child.height
-		const leftInset = child.x > parentRect.x ? halfGap : 0
-		const rightInset = childRight < parentRight ? halfGap : 0
-		const topInset = child.y > parentRect.y ? halfGap : 0
-		const bottomInset = childBottom < parentBottom ? halfGap : 0
-
-		return {
-			...child,
-			x: child.x + leftInset,
-			y: child.y + topInset,
-			width: Math.max(child.width - leftInset - rightInset, 0),
-			height: Math.max(child.height - topInset - bottomInset, 0),
-		}
-	})
-}
-
-type TreemapNodeWithArea = TreemapNode & { area: number }
-
-/* Compute the area for each child based on value & scale. */
-const getAreaOfChildren = (
-	children: ReadonlyArray<TreemapNode>,
-	areaValueRatio: number,
-): ReadonlyArray<TreemapNodeWithArea> => {
-	const ratio = areaValueRatio < 0 ? 0 : areaValueRatio
-
-	return children.map((child: TreemapNode) => {
-		const area = child[NODE_VALUE_KEY] * ratio
-
-		return {
-			...child,
-			area: isNan(area) || area <= 0 ? 0 : area,
-		}
-	})
-}
-
-/* Computes the score for the specified row, as the worst aspect ratio. */
-const getWorstScore = (
-	row: AreaArray<TreemapNodeWithArea>,
-	parentSize: number,
-	aspectRatio: number,
-): number => {
-	const parentArea = parentSize * parentSize
-	const rowArea = row.area * row.area
-	const { min, max } = row.reduce(
-		(result: { min: number; max: number }, child: TreemapNodeWithArea) => ({
-			max: Math.max(result.max, child.area),
-			min: Math.min(result.min, child.area),
-		}),
-		{ max: 0, min: Infinity },
-	)
-
-	return rowArea
-		? Math.max(
-				(parentArea * max * aspectRatio) / rowArea,
-				rowArea / (parentArea * min * aspectRatio),
-			)
-		: Infinity
-}
-
-const horizontalPosition = (
-	row: AreaArray<TreemapNodeWithArea>,
-	parentSize: number,
-	parentRect: RectanglePosition,
-	isFlush: boolean,
-): RectanglePosition => {
-	let rowHeight = parentSize ? Math.round(row.area / parentSize) : 0
-
-	if (isFlush || rowHeight > parentRect.height) {
-		rowHeight = parentRect.height
-	}
-
-	let curX = parentRect.x
-	let child
-	for (let i = 0, len = row.length; i < len; i++) {
-		child = row[i]
-		if (child == null) {
-			continue
-		}
-		child.x = curX
-		child.y = parentRect.y
-		child.height = rowHeight
-		child.width = Math.min(
-			rowHeight ? Math.round(child.area / rowHeight) : 0,
-			parentRect.x + parentRect.width - curX,
-		)
-		curX += child.width
-	}
-	/* add the remain x to the last one of row */
-	if (child != null) {
-		child.width += parentRect.x + parentRect.width - curX
-	}
-
-	return {
-		...parentRect,
-		height: parentRect.height - rowHeight,
-		y: parentRect.y + rowHeight,
-	}
-}
-
-const verticalPosition = (
-	row: AreaArray<TreemapNodeWithArea>,
-	parentSize: number,
-	parentRect: RectanglePosition,
-	isFlush: boolean,
-): RectanglePosition => {
-	let rowWidth = parentSize ? Math.round(row.area / parentSize) : 0
-
-	if (isFlush || rowWidth > parentRect.width) {
-		rowWidth = parentRect.width
-	}
-
-	let curY = parentRect.y
-	let child
-	for (let i = 0, len = row.length; i < len; i++) {
-		child = row[i]
-		if (child == null) {
-			continue
-		}
-		child.x = parentRect.x
-		child.y = curY
-		child.width = rowWidth
-		child.height = Math.min(
-			rowWidth ? Math.round(child.area / rowWidth) : 0,
-			parentRect.y + parentRect.height - curY,
-		)
-		curY += child.height
-	}
-	if (child) {
-		child.height += parentRect.y + parentRect.height - curY
-	}
-
-	return {
-		...parentRect,
-		width: parentRect.width - rowWidth,
-		x: parentRect.x + rowWidth,
-	}
-}
-
-const position = (
-	row: AreaArray<TreemapNodeWithArea>,
-	parentSize: number,
-	parentRect: RectanglePosition,
-	isFlush: boolean,
-): RectanglePosition => {
-	if (parentSize === parentRect.width) {
-		return horizontalPosition(row, parentSize, parentRect, isFlush)
-	}
-
-	return verticalPosition(row, parentSize, parentRect, isFlush)
-}
-
-type AreaArray<T> = Array<T> & { area: number }
-
-/* Recursively arranges the specified node's children into squarified rows. */
-const squarify = (
-	node: TreemapNode,
-	aspectRatio: number,
-	nodeInset: number,
-	nodeGap: number,
-): TreemapNode => {
-	const { children } = node
-
-	if (children && children.length) {
-		const layoutRect: RectanglePosition = insetRect(filterRect(node), nodeInset)
-		let rect: RectanglePosition = layoutRect
-		const row = [] as unknown as AreaArray<TreemapNodeWithArea>
-		let best = Infinity
-		let child, score
-		let size = Math.min(rect.width, rect.height)
-		const scaleChildren = getAreaOfChildren(
-			children,
-			(rect.width * rect.height) / node[NODE_VALUE_KEY],
-		)
-		const tempChildren = scaleChildren.slice()
-
-		/* why are we setting static properties on an array? */
-		row.area = 0
-
-		while (tempChildren.length > 0) {
-			;[child] = tempChildren
-			if (child == null) {
-				continue
-			}
-			/* row first */
-			row.push(child)
-			row.area += child.area
-
-			score = getWorstScore(row, size, aspectRatio)
-			if (score <= best) {
-				/* continue with this orientation */
-				tempChildren.shift()
-				best = score
-			} else {
-				/* abort, and try a different orientation */
-				row.area -= row.pop()?.area ?? 0
-				rect = position(row, size, rect, false)
-				size = Math.min(rect.width, rect.height)
-				row.length = row.area = 0
-				best = Infinity
-			}
-		}
-
-		if (row.length) {
-			rect = position(row, size, rect, true)
-			row.length = row.area = 0
-		}
-
-		const childrenWithGaps = applyGapToChildren(scaleChildren, layoutRect, nodeGap)
-
-		return {
-			...node,
-			children: childrenWithGaps.map((c) => squarify(c, aspectRatio, nodeInset, nodeGap)),
-		}
-	}
-
-	return node
-}
-
-export type TreemapContentType = JSX.Element | ((props: TreemapNode) => JSX.Element)
-
-export interface Props<
-	DataPointType extends TreemapDataType = TreemapDataType,
-	DataValueType = unknown,
->
-	extends DataConsumer<DataPointType, DataValueType>, EventThrottlingProps {
-	/**
-	 * The width of chart container.
-	 * Can be a number or a percent string like "100%".
-	 */
-	width?: number | Percent
-
-	/**
-	 * The height of chart container.
-	 * Can be a number or a percent string like "100%".
-	 */
-	height?: number | Percent
-
-	/**
-	 * The source data. Each element should be an object.
-	 * The properties of each object represent the values of different data dimensions.
-	 *
-	 * Use the `dataKey` prop to specify which properties to use.
-	 *
-	 * If the `children` property is present on an element, it will be treated as a nested treemap.
-	 */
-	data?: ReadonlyArray<DataPointType>
-
-	/**
-	 * @deprecated unused prop, doesn't do anything, use `key` instead
-	 */
-	animationId?: number
-
-	style?: JSX.CSSProperties
-
-	/**
-	 * The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given.
-	 * @default 1.618033988749895
-	 */
-	aspectRatio?: number
-
-	/**
-	 * The inset between a parent node and its child nodes.
-	 *
-	 * Insets a parent node's available area before laying out its children.
-	 * This creates space between a parent boundary and its child nodes.
-	 * @default 0
-	 */
-	nodeInset?: number
-
-	/**
-	 * The gap between the nodes.
-	 *
-	 * Adds spacing between sibling nodes at the same depth level.
-	 * This does not inset children from their parent boundary.
-	 * @default 0
-	 */
-	nodeGap?: number
-
-	/**
-	 * If set to a function, the function will be called to render the content.
-	 */
-	content?: TreemapContentType
-
-	fill?: string
-
-	stroke?: string
-
-	class?: string
-
-	/**
-	 * Name represents each sector in the tooltip.
-	 * This allows you to extract the name from the data:
-	 *
-	 * - `string`: the name of the field in the data object;
-	 * - `number`: the index of the field in the data;
-	 * - `function`: a function that receives the data object and returns the name.
-	 *
-	 * @defaultValue 'name'
-	 */
-	nameKey?: DataKey<DataPointType, DataValueType>
-
-	/**
-	 * Decides how to extract the value of this Treemap from the data:
-	 * - `string`: the name of the field in the data object;
-	 * - `number`: the index of the field in the data;
-	 * - `function`: a function that receives the data object and returns the value of this Treemap.
-	 *
-	 * @defaultValue 'value'
-	 */
-	dataKey?: DataKey<DataPointType, DataValueType>
-
-	children?: JSX.Element
-
-	/**
-	 * The type of treemap to render.
-	 *
-	 * - 'flat': Renders the entire treemap at once, with all leaf nodes visible.
-	 * - 'nest': Renders an interactive, nested treemap. Clicking on a parent node will "zoom in" to show its children,
-	 *   and a breadcrumb navigation will be displayed to allow navigating back up the hierarchy.
-	 *
-	 * @default 'flat'
-	 */
-	type?: "flat" | "nest"
-
-	colorPanel?: ReadonlyArray<string>
-
-	/* customize nest index content */
-	nestIndexContent?: (item: TreemapNode, i: number) => JSX.Element
-
-	/**
-	 * The customized event handler of animation start
-	 */
-	onAnimationStart?: () => void
-
-	/**
-	 * The customized event handler of animation end
-	 */
-	onAnimationEnd?: () => void
-
-	onMouseEnter?: (node: TreemapNode, e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-
-	onMouseLeave?: (node: TreemapNode, e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-
-	onClick?: (node: TreemapNode) => void
-
-	/**
-	 * If set false, animation of treemap will be disabled.
-	 * If set "auto", animation is disabled during SSR and when the user prefers reduced motion.
-	 * @default 'auto'
-	 */
-	isAnimationActive?: boolean | "auto"
-
-	isUpdateAnimationActive?: boolean | "auto"
-
-	/**
-	 * Specifies when the animation should begin, the unit of this option is ms.
-	 * @default 0
-	 */
-	animationBegin?: number
-
-	/**
-	 * Specifies the duration of animation, the unit of this option is ms.
-	 * @default 1500
-	 */
-	animationDuration?: AnimationDuration
-
-	/**
-	 * The type of easing function.
-	 * @default 'linear'
-	 */
-	animationEasing?: AnimationTiming
-
-	id?: string
-}
-
-type ContentItemProps = {
-	id: GraphicalItemId
-	content: TreemapContentType | undefined
-	nodeProps: TreemapNode
-	type: string
-	colorPanel: ReadonlyArray<string> | undefined
-	dataKey: DataKey<unknown>
-	onClick?: (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-	onMouseEnter?: (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-	onMouseLeave?: (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-	onMouseOver?: (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-	onMouseOut?: (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => void
-}
-
-/* eslint-disable solid/reactivity -- ContentItem reads are structural checks at setup; props are stable per render since component is created fresh per node */
-function ContentItem(props: ContentItemProps): JSX.Element {
-	if (typeof props.content === "function") {
-		return (
-			<Layer
-				onMouseEnter={props.onMouseEnter}
-				onMouseOver={props.onMouseOver}
-				onMouseLeave={props.onMouseLeave}
-				onMouseOut={props.onMouseOut}
-				onClick={props.onClick}
-			>
-				{(props.content as (p: TreemapNode) => JSX.Element)(props.nodeProps)}
-			</Layer>
-		)
-	}
-	/* optimize default shape */
-	const { x, y, width, height, index } = untrack(() => ({
-		height: props.nodeProps.height,
-		index: props.nodeProps.index,
-		width: props.nodeProps.width,
-		x: props.nodeProps.x,
-		y: props.nodeProps.y,
-	}))
-	let arrow: JSX.Element | null = null
-	if (
-		width > 10 &&
-		height > 10 &&
-		props.nodeProps.children &&
-		props.type === "nest" &&
-		props.nodeProps.depth > 0
-	) {
-		arrow = (
-			<Polygon
-				points={[
-					{ x: x + 2, y: y + height / 2 },
-					{ x: x + 6, y: y + height / 2 + 3 },
-					{ x: x + 2, y: y + height / 2 + 6 },
-				]}
-			/>
-		)
-	}
-	let text: JSX.Element | null = null
-	const nameSize = getStringSize(props.nodeProps.name)
-	if (width > 20 && height > 20 && nameSize.width < width && nameSize.height < height) {
-		text = (
-			<text x={x + 8} y={y + height / 2 + 7} font-size={String(14)}>
-				{props.nodeProps.name}
-			</text>
-		)
-	}
-
-	const colors = props.colorPanel || COLOR_PANEL
-	const rectProps = untrack(() => omit(props.nodeProps, ["children"]))
-	return (
-		<g>
-			<Rectangle
-				fill={untrack(() =>
-					props.nodeProps.depth < 2 ? colors[index % colors.length] : "rgba(255,255,255,0)",
-				)}
-				stroke="#fff"
-				{...rectProps}
-				onMouseEnter={props.onMouseEnter}
-				onMouseOver={props.onMouseOver}
-				onMouseLeave={props.onMouseLeave}
-				onMouseOut={props.onMouseOut}
-				onClick={props.onClick}
-				data-recharts-item-index={props.nodeProps.tooltipIndex}
-			/>
-			{arrow}
-			{text}
-		</g>
-	)
-}
-/* eslint-enable solid/reactivity */
-
-function ContentItemWithEvents(props: ContentItemProps): JSX.Element {
-	const newCtx = useOptionalChartState()
-	/* GOTCHA-005: createMemo so reactive nodeProps flow into coordinate. */
-	const activeCoordinate = createMemo<Coordinate>(() => ({
-		x: props.nodeProps.x + props.nodeProps.width / 2,
-		y: props.nodeProps.y + props.nodeProps.height / 2,
-	}))
-
-	/* GOTCHA-016-C: dedupe enter/over so user.hover only fires dispatch once. */
-	let entered = false
-	const fireEnter = () => {
-		if (entered) return
-		entered = true
-		const hoverPayload = {
-			active: true,
-			coordinate: activeCoordinate(),
-			dataKey: props.dataKey,
-			graphicalItemId: props.id,
-			index: props.nodeProps.tooltipIndex,
-		}
-		if (newCtx != null) setTooltipInteraction(newCtx.setState, "itemInteraction", "hover", hoverPayload)
-	}
-	const fireLeave = () => {
-		if (!entered) return
-		entered = false
-		/*
-		 * clearing state on mouseLeaveItem causes re-rendering issues
-		 * we don't actually want to do this for TreeMap - we clear state when we leave the entire chart instead
-		 */
-	}
-	const onClick = () => {
-		const clickPayload = {
-			active: true,
-			coordinate: activeCoordinate(),
-			dataKey: props.dataKey,
-			graphicalItemId: props.id,
-			index: props.nodeProps.tooltipIndex,
-		}
-		if (newCtx != null) setTooltipInteraction(newCtx.setState, "itemInteraction", "click", clickPayload)
-	}
-	return (
-		<ContentItem
-			{...props}
-			onMouseEnter={fireEnter}
-			onMouseOver={fireEnter}
-			onMouseLeave={fireLeave}
-			onMouseOut={fireLeave}
-			onClick={onClick}
-		/>
-	)
-}
-
-function SetTreemapTooltipEntrySettings(props: {
-	dataKey: DataKey<unknown>
-	nameKey: DataKey<unknown>
-	stroke: string | undefined
-	fill: string | undefined
-	currentRoot: TreemapNode | undefined
-	id: GraphicalItemId
-}): JSX.Element {
-	/* GOTCHA-005: createMemo so reactive props flow into the settings object. */
-	const tooltipEntrySettings = createMemo<TooltipPayloadConfiguration>(() => ({
-		dataDefinedOnItem: props.currentRoot,
-		getPosition: noop,
-		settings: {
-			color: props.fill,
-			dataKey: props.dataKey,
-			fill: props.fill,
-			graphicalItemId: props.id,
-			hide: false,
-			name: undefined,
-			nameKey: props.nameKey,
-			stroke: props.stroke,
-			strokeWidth: undefined,
-			type: undefined,
-			unit: "",
-		},
-	}))
-	return <SetTooltipEntrySettings tooltipEntrySettings={tooltipEntrySettings()} />
-}
-
-/* Why is margin not a treemap prop? No clue. Probably it should be */
-const defaultTreemapMargin: Margin = {
-	bottom: 0,
-	left: 0,
-	right: 0,
-	top: 0,
-}
-
-export const defaultTreeMapProps = {
-	animationBegin: 0,
-	animationDuration: 1500,
-	animationEasing: "linear",
-	aspectRatio: 0.5 * (1 + Math.sqrt(5)),
-	dataKey: "value",
-	isAnimationActive: "auto",
-	isUpdateAnimationActive: "auto",
-	nameKey: "name",
-	nodeGap: 0,
-	nodeInset: 0,
-	type: "flat",
-	...initialEventSettingsState,
-} as const satisfies Partial<Props>
-
-type InternalTreemapProps = RequiresDefaultProps<Props, typeof defaultTreeMapProps> & {
-	width: number
-	height: number
-	id: GraphicalItemId
-}
-
-/* eslint-disable solid/reactivity -- itemProps.nodeProps destructure and treemapProps reads are stable at component setup; TreemapItem is created fresh per node */
-function TreemapItem(itemProps: {
-	content: TreemapContentType | undefined
-	nodeProps: TreemapNode
-	isLeaf: boolean
-	treemapProps: InternalTreemapProps
-	onNestClick: (node: TreemapNode) => void
-}): JSX.Element {
-	const { width, height, x, y } = itemProps.nodeProps
-	const translateX = -x - width
-	const translateY = 0
-
-	const onMouseEnter = (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => {
-		if (
-			(itemProps.isLeaf || itemProps.treemapProps.type === "nest") &&
-			typeof itemProps.treemapProps.onMouseEnter === "function"
-		) {
-			itemProps.treemapProps.onMouseEnter(itemProps.nodeProps, e)
-		}
-	}
-
-	const onMouseLeave = (e: MouseEvent & { currentTarget: SVGGraphicsElement }) => {
-		if (
-			(itemProps.isLeaf || itemProps.treemapProps.type === "nest") &&
-			typeof itemProps.treemapProps.onMouseLeave === "function"
-		) {
-			itemProps.treemapProps.onMouseLeave(itemProps.nodeProps, e)
-		}
-	}
-
-	const onClick = () => {
-		if (itemProps.treemapProps.type === "nest" && itemProps.nodeProps.depth > 0) {
-			itemProps.onNestClick(itemProps.nodeProps)
-		}
-		if (
-			(itemProps.isLeaf || itemProps.treemapProps.type === "nest") &&
-			typeof itemProps.treemapProps.onClick === "function"
-		) {
-			itemProps.treemapProps.onClick(itemProps.nodeProps)
-		}
-	}
-
-	/* One object per item: an inline JSX object literal is a getter that re-spreads on every
-	   `props.nodeProps` read downstream. ContentItem snapshots node props at setup, and
-	   x/y/width/height above are setup constants, so a setup snapshot reads the same. */
-	const contentNodeProps = untrack(() => ({
-		...itemProps.nodeProps,
-		height,
-		isAnimationActive: itemProps.treemapProps.isAnimationActive,
-		isUpdateAnimationActive: !itemProps.treemapProps.isUpdateAnimationActive,
-		width,
-		x,
-		y,
-	}))
-
-	function handleAnimationEnd() {
-		if (typeof itemProps.treemapProps.onAnimationEnd === "function") {
-			itemProps.treemapProps.onAnimationEnd()
-		}
-	}
-
-	function handleAnimationStart() {
-		if (typeof itemProps.treemapProps.onAnimationStart === "function") {
-			itemProps.treemapProps.onAnimationStart()
-		}
-	}
-
-	return (
-		<CSSTransitionAnimate
-			animationId={`treemap-${itemProps.nodeProps.tooltipIndex}`}
-			from={`translate(${translateX}px, ${translateY}px)`}
-			to="translate(0, 0)"
-			attributeName="transform"
-			begin={itemProps.treemapProps.animationBegin}
-			easing={extractCssEasing(itemProps.treemapProps.animationEasing)}
-			isActive={itemProps.treemapProps.isAnimationActive}
-			duration={itemProps.treemapProps.animationDuration}
-			onAnimationStart={handleAnimationStart}
-			onAnimationEnd={handleAnimationEnd}
-		>
-			{(style) => (
-				<Layer
-					onMouseEnter={onMouseEnter}
-					onMouseLeave={onMouseLeave}
-					onClick={onClick}
-					style={{ ...style(), "transform-origin": `${x} ${y}` }}
-				>
-					<ContentItemWithEvents
-						id={itemProps.treemapProps.id}
-						content={itemProps.content}
-						dataKey={itemProps.treemapProps.dataKey as DataKey<unknown>}
-						nodeProps={contentNodeProps}
-						type={itemProps.treemapProps.type}
-						colorPanel={itemProps.treemapProps.colorPanel}
-					/>
-				</Layer>
-			)}
-		</CSSTransitionAnimate>
-	)
-}
-/* eslint-enable solid/reactivity */
-
-function TreemapWithState(props: InternalTreemapProps): JSX.Element {
-	const newCtx = useOptionalChartState()
-
-	const derivedTree = createMemo(() => {
-		const root: TreemapNode = computeNode({
-			dataKey: props.dataKey,
-			depth: 0,
-			index: 0,
-			nameKey: props.nameKey,
-			node: {
-				children: props.data,
-				height: getTreemapRenderHeight(props.height, props.type),
-				width: props.width,
-				x: 0,
-				y: 0,
-			} as unknown as TreemapNode,
-		})
-		const fRoot: TreemapNode = squarify(
-			root,
-			props.aspectRatio,
-			props.nodeInset,
-			props.nodeGap,
-		)
-		return { currentRoot: root, formatRoot: fRoot }
-	})
-
-	const [nest, setNest] = createSignal<{
-		currentRoot: TreemapNode
-		formatRoot: TreemapNode
-		nestIndex: Array<TreemapNode>
-	} | null>(null)
-
-	const formatRoot = createMemo(
-		() => nest()?.formatRoot ?? derivedTree().formatRoot,
-	)
-	const currentRoot = createMemo(
-		() => nest()?.currentRoot ?? derivedTree().currentRoot,
-	)
-	const nestIndex = createMemo(
-		() => nest()?.nestIndex ?? [derivedTree().currentRoot],
-	)
-
-	function handleClick(node: TreemapNode) {
-		if (props.type === "nest" && node.children) {
-			const root = computeNode({
-				depth: 0,
-				node: {
-					...node,
-					height: getTreemapRenderHeight(props.height, props.type),
-					width: props.width,
-					x: 0,
-					y: 0,
-				},
-				index: 0,
-				dataKey: props.dataKey,
-				nameKey: props.nameKey,
-				/* with Treemap nesting, should this continue nesting the index or start from empty string? */
-				nestedActiveTooltipIndex: node.tooltipIndex,
-			})
-
-			const fRoot = squarify(root, props.aspectRatio, props.nodeInset, props.nodeGap)
-			setNest({
-				currentRoot: root,
-				formatRoot: fRoot,
-				nestIndex: [...nestIndex(), node],
-			})
-		}
-		if (props.onClick) {
-			props.onClick(node)
-		}
-	}
-
-	function handleNestIndex(node: TreemapNode, i: number) {
-		const root = computeNode({
-			depth: 0,
-			node: {
-				...node,
-				height: getTreemapRenderHeight(props.height, props.type),
-				width: props.width,
-				x: 0,
-				y: 0,
-			},
-			index: 0,
-			dataKey: props.dataKey,
-			nameKey: props.nameKey,
-			/* with Treemap nesting, should this continue nesting the index or start from empty string? */
-			nestedActiveTooltipIndex: node.tooltipIndex,
-		})
-
-		const fRoot = squarify(root, props.aspectRatio, props.nodeInset, props.nodeGap)
-		setNest({
-			currentRoot: node,
-			formatRoot: fRoot,
-			nestIndex: nestIndex().slice(0, i + 1),
-		})
-	}
-
-	/* The chart's SVG props are the same for every node; filter the props view once. */
-	const chartSvgProps = createMemo(() => svgPropertiesNoEvents(props))
-
-	function renderNode(root: TreemapNode, node: TreemapNode): JSX.Element | null {
-		const nodeProps = untrack(() => ({ ...chartSvgProps(), ...node, root }))
-		const isLeaf = node.children == null || node.children.length === 0
-
-		const curRoot = untrack(() => currentRoot())
-		const isCurrentRootChild = (curRoot?.children || []).filter(
-			(item: TreemapNode) => item.depth === node.depth && item.name === node.name,
-		)
-
-		if (isCurrentRootChild.length === 0 && root.depth && props.type === "nest") {
-			return null
-		}
-
-		return (
-			<Layer class={`recharts-treemap-depth-${node.depth}`}>
-				<TreemapItem
-					isLeaf={isLeaf}
-					content={props.content}
-					nodeProps={nodeProps}
-					treemapProps={props}
-					onNestClick={handleClick}
-				/>
-				<Show when={node.children && node.children.length}>
-					<For each={node.children as TreemapNode[]}>
-						{(child: TreemapNode) => renderNode(node, child)}
-					</For>
-				</Show>
-			</Layer>
-		)
-	}
-
-	function renderAllNodes(): JSX.Element | null {
-		const fRoot = formatRoot()
-
-		if (fRoot == null) {
-			return null
-		}
-
-		return renderNode(fRoot, fRoot)
-	}
-
-	function renderNestIndexContent(item: TreemapNode, i: number): JSX.Element | string {
-		if (typeof props.nestIndexContent === "function") {
-			return props.nestIndexContent(item, i)
-		}
-		/* TODO need to verify nameKey type */
-		const rawName = get(item, props.nameKey as string, "root")
-		return typeof rawName === "string" ? rawName : "root"
-	}
-
-	/* render nest treemap */
-	function renderNestIndex(): JSX.Element {
-		return (
-			<div
-				class="recharts-treemap-nest-index-wrapper"
-				style={{ "margin-top": "8px", "text-align": "center" }}
-			>
-				<For each={nestIndex()}>
-					{(item: TreemapNode, i) => (
-						<div
-							onClick={() => handleNestIndex(item, i())}
-							class="recharts-treemap-nest-index-box"
-							style={{
-								background: "#000",
-								color: "#fff",
-								cursor: "pointer",
-								display: "inline-block",
-								"margin-right": "3px",
-								padding: "0 7px",
-							}}
-						>
-							{renderNestIndexContent(item, i())}
-						</div>
-					)}
-				</For>
-			</div>
-		)
-	}
-
-	function handleTouchMove(e: TouchEvent) {
-		const touchEvent = e.touches[0]
-		if (touchEvent == null) {
-			return
-		}
-		const target = document.elementFromPoint(touchEvent.clientX, touchEvent.clientY)
-		if (target == null || typeof target.getAttribute !== "function" || formatRoot() == null) {
-			return
-		}
-		const itemIndex = target.getAttribute("data-recharts-item-index")
-		const activeNode: unknown = treemapPayloadSearcher(formatRoot(), itemIndex)
-		if (isTreemapNode(activeNode) === false) {
-			return
-		}
-		const treemapNode = activeNode as TreemapNode
-
-		const activeCoordinate = {
-			x: treemapNode.x + treemapNode.width / 2,
-			y: treemapNode.y + treemapNode.height / 2,
-		}
-
-		const itemPayload = {
-			active: true,
-			coordinate: activeCoordinate,
-			dataKey: props.dataKey as DataKey<unknown>,
-			graphicalItemId: props.id,
-			index: itemIndex,
-		}
-		if (newCtx != null) setTooltipInteraction(newCtx.setState, "itemInteraction", "hover", itemPayload)
-	}
-
-	const attrs = () => svgPropertiesNoEvents(props)
-
-	return (
-		<>
-			<SetTreemapTooltipEntrySettings
-				dataKey={props.dataKey as DataKey<unknown>}
-				nameKey={props.nameKey as DataKey<unknown>}
-				stroke={props.stroke}
-				fill={props.fill}
-				currentRoot={currentRoot()}
-				id={props.id}
-			/>
-			<Surface
-				{...attrs()}
-				width={props.width}
-				height={getTreemapRenderHeight(props.height, props.type)}
-				onTouchMove={handleTouchMove}
-			>
-				{renderAllNodes()}
-				{props.children}
-			</Surface>
-			<Show when={props.type === "nest"}>{renderNestIndex()}</Show>
-		</>
-	)
-}
-
-function TreemapDispatchInject(
-	props: RequiresDefaultProps<Props, typeof defaultTreeMapProps> & { children?: JSX.Element },
-): JSX.Element | null {
-	/* width/height arrive after layout dispatch; gate on Show so the body
-	   re-evaluates once dimensions populate. See GOTCHA-011. */
-	const width = createMemo(() => useChartWidth())
-	const height = createMemo(() => useChartHeight())
-	const hasSize = createMemo(
-		() => isPositiveNumber(width()) && isPositiveNumber(height()),
-	)
-	const [childrenSplit, restProps] = splitProps(props, ["children"])
-	return (
-		<Show when={hasSize()}>
-			<RegisterGraphicalItemId id={restProps.id} type="treemap">
-				{(id) => (
-					<TreemapWithState
-						{...restProps}
-						id={id}
-						width={width() as number}
-						height={height() as number}
-					>
-						{childrenSplit.children}
-					</TreemapWithState>
-				)}
-			</RegisterGraphicalItemId>
-		</Show>
-	)
-}
-
-/**
- * The Treemap chart is used to visualize hierarchical data using nested rectangles.
- *
- * @consumes ResponsiveContainerContext
- * @provides TooltipEntrySettings
- */
-export function Treemap(outsideProps: Props): JSX.Element {
-	/* GOTCHA-005-B: split children to avoid spread-induced enumeration that would
-	   instantiate user JSX (Tooltip, etc.) under outer owner. */
-	const [childrenSplit, restProps] = splitProps(outsideProps, ["children"])
-	const props = resolveDefaultProps(restProps, defaultTreeMapProps)
-
-	return (
-		<RechartsStateProvider
-			preloadedState={{
-				layout: untrack(() =>
-					createInitialLayoutState({ height: props.height, margin: defaultTreemapMargin, width: props.width }),
-				),
-				options: chartOptions,
-			}}
-		>
-			<ReportChartMargin margin={defaultTreemapMargin} />
-			<ReportEventSettings
-				throttleDelay={props.throttleDelay}
-				throttledEvents={props.throttledEvents}
-			/>
-			<RechartsWrapper
-				dispatchTouchEvents={false}
-				class={props.class}
-				style={props.style}
-				width={props.width}
-				height={props.height}
-				/*
-				 * Treemap has a bug where it doesn't include strokeWidth in its dimension calculation
-				 * which makes the actual chart exactly {strokeWidth} larger than asked for.
-				 * It's not a huge deal usually, but it makes the responsive option cycle infinitely.
-				 */
-				responsive={false}
-				onMouseEnter={undefined}
-				onMouseLeave={undefined}
-				onClick={undefined}
-				onMouseMove={undefined}
-				onMouseDown={undefined}
-				onMouseUp={undefined}
-				onContextMenu={undefined}
-				onDoubleClick={undefined}
-				onTouchStart={undefined}
-				onTouchMove={undefined}
-				onTouchEnd={undefined}
-			>
-				<TreemapDispatchInject {...props}>{childrenSplit.children}</TreemapDispatchInject>
-			</RechartsWrapper>
-		</RechartsStateProvider>
-	)
-}