@solidports/recharts 0.1.0 → 0.1.1

package/src/cartesian/YAxis.tsx

@@ -1,443 +0,0 @@
-/* eslint-disable import/no-cycle */
-import type { TickItem } from "../util/types"
-import type { JSX } from '@solidjs/web';
-import { createMemo, createSignal, onCleanup, Show, useContext, createEffect, untrack } from "solid-js"
-import { clsx } from "clsx"
-import {
-	AxisDomainTypeInput,
-	AxisInterval,
-	AxisTick,
-	RenderableAxisProps,
-	PresentationAttributesAdaptChildEvent,
-	Size,
-	AxisDomain,
-	ScaleType,
-	EvaluatedAxisDomainType,
-	TickProp,
-	YAxisTickContentProps,
-} from "../util/types"
-import { CartesianAxis, CartesianAxisRef, defaultCartesianAxisProps } from "./CartesianAxis"
-import type {
-	YAxisOrientation,
-	YAxisPadding,
-	YAxisSettings,
-	YAxisWidth,
-} from "../state/cartesianAxisSlice"
-import { useChartStore } from "../state/RechartsStoreContext"
-import { RechartsStateContext } from "../state/RechartsStateContext"
-import {
-	implicitYAxis,
-	selectTicksOfAxis,
-	selectYAxisPosition,
-	selectYAxisSettingsNoDefaults,
-	selectYAxisSize,
-} from "../state/selectors/axisSelectors"
-import { useAxisViewBox } from "../state/hooks/useChartSelectors"
-import { useIsPanorama } from "../context/PanoramaContext"
-import { isLabelContentAFunction } from "../component/Label"
-import { RequiresDefaultProps, resolveDefaultProps } from "../util/resolveDefaultProps"
-import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition"
-import { useCartesianChartLayout } from "../context/chartLayoutContext"
-import { getAxisTypeBasedOnLayout } from "../util/getAxisTypeBasedOnLayout"
-import { teardownWrite } from "../state/teardownWrite"
-
-interface YAxisProps<DataPointType = unknown, DataValueType = unknown> extends Omit<
-	RenderableAxisProps<DataPointType, DataValueType>,
-	"axisLine" | "domain" | "scale" | "tick"
-> {
-	/**
-	 * Determines how the axis line is drawn. Options:
-	 * - `true`: the axis line is drawn with default props;
-	 * - `false`: the axis line is not visible;
-	 * - `object`: passed as props to SVG `<line>` element representing the axis line.
-	 *
-	 * @example <YAxis axisLine={false} />
-	 * @example <YAxis axisLine={{ stroke: 'red', strokeWidth: 2 }} />
-	 * @defaultValue true
-	 */
-	axisLine?: boolean | JSX.LineSVGAttributes<SVGLineElement>
-	/**
-	 * The type of axis.
-	 *
-	 * `category`: Treats data as distinct values.
-	 * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
-	 *
-	 * `number`: Treats data as continuous range.
-	 * Values that are numerically closer are placed closer together on the axis.
-	 *
-	 * `auto`: the type is inferred based on the chart layout.
-	 *
-	 * @defaultValue number
-	 */
-	type?: AxisDomainTypeInput
-	/**
-	 * Specify the domain of axis when the axis is a number axis.
-	 *
-	 * If undefined, then the domain is calculated based on the data and dataKeys.
-	 *
-	 * The length of domain should be 2, and we will validate the values in domain.
-	 *
-	 * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
-	 * or a function that accepts a single argument and returns a number.
-	 *
-	 * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
-	 * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
-	 *
-	 * @example <YAxis type="number" domain={['dataMin', 'dataMax']} />
-	 * @example <YAxis type="number" domain={[0, 'dataMax']} />
-	 * @example <YAxis type="number" domain={['auto', 'auto']} />
-	 * @example <YAxis type="number" domain={[0, 'dataMax + 1000']} />
-	 * @example <YAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
-	 * @example <YAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
-	 * @example <YAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
-	 * @example <YAxis type="number" domain={[0, 100]} allowDataOverflow />
-	 */
-	domain?: AxisDomain
-	/**
-	 * Scale function determines how data values are mapped to visual values.
-	 * In other words, decided the mapping between data domain and coordinate range.
-	 *
-	 * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
-	 *
-	 * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
-	 *
-	 * @defaultValue auto
-	 * @example <YAxis scale="log" />
-	 * @example
-	 * import { scaleLog } from 'd3-scale';
-	 * const scale = scaleLog().base(Math.E);
-	 * <YAxis scale={scale} />
-	 */
-	scale?:
-		| ScaleType
-		| CustomScaleDefinition
-		| CustomScaleDefinition<string>
-		| CustomScaleDefinition<number>
-		| CustomScaleDefinition<Date>
-	/**
-	 * Unique ID that represents this YAxis.
-	 * Required when there are multiple YAxes.
-	 *
-	 * @defaultValue 0
-	 */
-	yAxisId?: string | number
-	/**
-	 * Defines how the individual label text is rendered.
-	 * This controls the settings for individual ticks; on a typical axis, there are multiple ticks, depending on your data.
-	 *
-	 * If you want to customize the overall axis label, use the `label` prop instead.
-	 *
-	 * Options:
-	 * - `false`: Do not render any tick labels.
-	 * - `true`: Render tick labels with default settings.
-	 * - `object`: An object of props to be merged into the internally calculated tick props.
-	 * - `ReactElement`: A custom React element to be used as the tick label.
-	 * - `function`: A function that returns a React element for custom rendering of tick labels.
-	 *
-	 * @defaultValue true
-	 */
-	tick?: TickProp<YAxisTickContentProps>
-	/**
-	 * Ticks can be any type when the axis is the type of category
-	 * Ticks must be numbers when the axis is the type of number
-	 */
-	ticks?: ReadonlyArray<AxisTick>
-	/**
-	 * Width of the axis in pixels.
-	 * `auto` will attempt to resize the axis based on its content.
-	 *
-	 * @defaultValue 60
-	 */
-	width?: YAxisWidth
-	/**
-	 * If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
-	 * @defaultValue false
-	 */
-	mirror?: boolean
-	/**
-	 * The orientation of axis.
-	 * @defaultValue left
-	 */
-	orientation?: YAxisOrientation
-	/**
-	 * Axis padding is the distance between the edge of plot area and the first/last tick.
-	 *
-	 * @defaultValue {"top":0,"bottom":0}
-	 */
-	padding?: YAxisPadding
-	/**
-	 * The minimum gap between two adjacent tick labels
-	 *
-	 * @defaultValue 5
-	 */
-	minTickGap?: number
-	/**
-	 * If set 0, all the ticks will be shown. If set "preserveStart", "preserveEnd" or "preserveStartEnd",
-	 * the ticks which is to be shown or hidden will be calculated automatically.
-	 *
-	 * @defaultValue preserveEnd
-	 */
-	interval?: AxisInterval
-	/**
-	 * The margin between tick line and tick.
-	 */
-	tickMargin?: number
-}
-
-/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
-export type Props<DataPointType = any, DataValueType = any> = Omit<
-	PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
-	"scale" | "ref"
-> &
-	YAxisProps<DataPointType, DataValueType>
-
-function SetYAxisSettings(
-	props: Omit<YAxisSettings, "type"> & { type: AxisDomainTypeInput },
-): null {
-	const stateCtx = useContext(RechartsStateContext)
-	let prevSettings: YAxisSettings | null = null
-	const evaluatedType = (): EvaluatedAxisDomainType | undefined => {
-		/* eslint-disable-next-line solid/reactivity -- called only from inside createMemo below; reads are tracked through the call chain */
-		const { type: typeFromProps, ..._ } = props
-		return getAxisTypeBasedOnLayout(useCartesianChartLayout(), "yAxis", typeFromProps)
-	}
-
-	const settings = createMemo((): YAxisSettings | undefined => {
-		const et = evaluatedType()
-		if (et == null) {
-			return undefined
-		}
-		/* eslint-disable-next-line solid/reactivity -- inside createMemo body; destructure is tracked */
-		const { type: _t, ...restProps } = props
-		return {
-			...restProps,
-			type: et,
-		}
-	})
-
-	createEffect(settings, (s) => {
-		if (s == null) {
-			return
-		}
-		/* upstream replaceYAxis: a changed id drops the previous entry */
-		if (prevSettings != null && String(prevSettings.id) !== String(s.id)) {
-			const prevId = String(prevSettings.id)
-			stateCtx?.setState("cartesianAxes", "yAxis", (axes) => {
-				delete axes[prevId]
-			})
-		}
-		stateCtx?.setState("cartesianAxes", "yAxis", String(s.id), { settings: s })
-		prevSettings = s
-	})
-
-	onCleanup(() => {
-		teardownWrite(() => {
-			if (prevSettings) {
-				const strId = String(prevSettings.id)
-				/* eslint-disable-next-line solid/reactivity -- cleanup runs outside tracking; intentional */
-				stateCtx?.setState("cartesianAxes", "yAxis", (axes) => { delete axes[strId] })
-				prevSettings = null
-			}
-		})
-	})
-
-	return null
-}
-
-function YAxisImpl(props: PropsWithDefaults) {
-	const [cartesianAxisRef, setCartesianAxisRef] = createSignal<CartesianAxisRef | null>(null)
-	let labelRef: SVGTextElement | null = null
-
-	const ctx2 = useChartStore()
-	const stateCtx2 = useContext(RechartsStateContext)
-	const viewBox = useAxisViewBox
-	const isPanorama = useIsPanorama()
-	const axisType = "yAxis"
-	const axisSize = createMemo((): Size | undefined =>
-		ctx2 ? selectYAxisSize(ctx2.store, props.yAxisId) : undefined,
-	)
-	const position = createMemo(() =>
-		ctx2 ? selectYAxisPosition(ctx2.store, props.yAxisId) : undefined,
-	)
-	const cartesianTickItems = createMemo(() =>
-		ctx2 ? selectTicksOfAxis(ctx2.store, axisType, props.yAxisId, isPanorama) : undefined,
-	)
-	/*
-	 * Here we select settings from the store and prefer to use them instead of the actual props
-	 * so that the chart is consistent. If we used the props directly, some components will use axis settings
-	 * from state and some from props and because there is a render step between these two, they might be showing different things.
-	 * https://github.com/recharts/recharts/issues/6257
-	 */
-	const synchronizedSettings = createMemo(() =>
-		ctx2 ? selectYAxisSettingsNoDefaults(ctx2.store, props.yAxisId) : undefined,
-	)
-
-	createEffect(
-		() => {
-			/* Subscribe before the early-return: settings and the axis ref often
-			   become ready in the same flush. Returning before reading the ref
-			   misses that update. */
-			const axisComponent = cartesianAxisRef()
-			cartesianTickItems()
-			const currentSize = axisSize()
-			const synced = synchronizedSettings()
-			/* No dynamic width calculation is done when width !== 'auto'
-			 * or when a function/react element is used for label */
-			if (
-				props.width !== "auto" ||
-				!currentSize ||
-				isLabelContentAFunction(props.label) ||
-				synced == null ||
-				axisComponent == null
-			) {
-				return null
-			}
-			return { axisComponent, currentSize }
-		},
-		(input) => {
-			if (input == null) {
-				return
-			}
-			const { axisComponent, currentSize } = input
-			untrack(() => {
-				const updatedYAxisWidth = axisComponent.getCalculatedWidth()
-
-				/* if the width has changed, update the width (with oscillation guard from legacy actions.updateYAxisWidth) */
-				if (currentSize && Math.round(currentSize.width) !== Math.round(updatedYAxisWidth)) {
-					const axisEntry = stateCtx2?.state.cartesianAxes.yAxis[String(props.yAxisId)]
-					const axis = axisEntry?.settings
-					if (axis != null) {
-						const history = axis.widthHistory ?? []
-						const skip =
-							history.length === 3 &&
-							history[0] === history[2] &&
-							updatedYAxisWidth === history[1] &&
-							updatedYAxisWidth !== axis.width &&
-							Math.abs(updatedYAxisWidth - (history[0] ?? 0)) <= 1
-						if (!skip) {
-							const newHistory = [...history, updatedYAxisWidth].slice(-3)
-							stateCtx2?.setState("cartesianAxes", "yAxis", String(props.yAxisId), "settings", {
-								...axis,
-								width: updatedYAxisWidth,
-								widthHistory: newHistory,
-							})
-						}
-					}
-				}
-			})
-		},
-	)
-
-	/* resolved() drops when any dep is nullish; Show rerenders subtree when
-	   the memo flips from falsy → truthy, matching upstream React semantics. */
-	const resolved = createMemo(() => {
-		const size = axisSize()
-		const pos = position()
-		const synced = synchronizedSettings()
-		if (size == null || pos == null || synced == null) {
-			return null
-		}
-		const { id: _del1, scale: _del2, ...restSynchronizedSettings } = synced
-		return { pos, restSynchronizedSettings, size }
-	})
-
-	return (
-		<Show when={resolved()}>
-			{(v) => (
-				<CartesianAxis
-					{...props}
-					{...v().restSynchronizedSettings}
-					axisRef={setCartesianAxisRef}
-					labelRef={labelRef}
-					x={v().pos.x}
-					y={v().pos.y}
-					tickTextProps={props.width === "auto" ? { width: undefined } : { width: props.width }}
-					width={v().size.width}
-					height={v().size.height}
-					class={clsx(`recharts-${axisType} ${axisType}`, props.class)}
-					viewBox={viewBox()}
-					ticks={cartesianTickItems()}
-					axisType={axisType}
-					axisId={props.yAxisId}
-				/>
-			)}
-		</Show>
-	)
-}
-
-export const yAxisDefaultProps = {
-	allowDataOverflow: implicitYAxis.allowDataOverflow,
-	allowDecimals: implicitYAxis.allowDecimals,
-	allowDuplicatedCategory: implicitYAxis.allowDuplicatedCategory,
-	angle: implicitYAxis.angle,
-	axisLine: defaultCartesianAxisProps.axisLine,
-	hide: false,
-	includeHidden: implicitYAxis.includeHidden,
-	interval: implicitYAxis.interval,
-	label: false,
-	minTickGap: implicitYAxis.minTickGap,
-	mirror: implicitYAxis.mirror,
-	orientation: implicitYAxis.orientation,
-	padding: implicitYAxis.padding,
-	reversed: implicitYAxis.reversed,
-	scale: implicitYAxis.scale,
-	tick: implicitYAxis.tick,
-	tickCount: implicitYAxis.tickCount,
-	niceTicks: implicitYAxis.niceTicks,
-	tickLine: defaultCartesianAxisProps.tickLine,
-	tickSize: defaultCartesianAxisProps.tickSize,
-	type: implicitYAxis.type,
-	width: implicitYAxis.width,
-	yAxisId: 0,
-} as const satisfies Partial<Props>
-
-type PropsWithDefaults = RequiresDefaultProps<Props, typeof yAxisDefaultProps>
-
-/**
- * @consumes CartesianViewBoxContext
- * @provides CartesianLabelContext
- */
-/* eslint-disable-next-line typescript-eslint/no-explicit-any -- upstream contract: untyped axes accept any data */
-export function YAxis<DataPointType = any, DataValueType = any>(
-	outsideProps: Props<DataPointType, DataValueType>,
-) {
-	const props: PropsWithDefaults = resolveDefaultProps(outsideProps, yAxisDefaultProps)
-	return (
-		<>
-			<SetYAxisSettings
-				interval={props.interval}
-				id={props.yAxisId}
-				scale={props.scale}
-				type={props.type}
-				domain={props.domain}
-				allowDataOverflow={props.allowDataOverflow}
-				dataKey={props.dataKey}
-				allowDuplicatedCategory={props.allowDuplicatedCategory}
-				allowDecimals={props.allowDecimals}
-				tickCount={props.tickCount}
-				niceTicks={props.niceTicks}
-				padding={props.padding}
-				includeHidden={props.includeHidden}
-				reversed={props.reversed}
-				ticks={props.ticks}
-				width={props.width}
-				orientation={props.orientation}
-				mirror={props.mirror}
-				hide={props.hide}
-				unit={props.unit}
-				name={props.name}
-				angle={props.angle}
-				minTickGap={props.minTickGap}
-				tick={
-					typeof props.tick === "function"
-						? (props.tick as (p: unknown) => JSX.Element)
-						: props.tick
-				}
-				tickFormatter={props.tickFormatter}
-			/>
-			<YAxisImpl {...props} />
-		</>
-	)
-}
-
-YAxis.displayName = "YAxis"

package/src/cartesian/ZAxis.tsx

@@ -1,155 +0,0 @@
-/* eslint-disable import/no-cycle */
-import { onCleanup, useContext, createEffect } from 'solid-js';
-import { AxisDomain, BaseAxisProps, DataKey, ScaleType } from "../util/types"
-import type { AxisId, ZAxisSettings } from "../state/cartesianAxisSlice"
-import { RechartsStateContext } from "../state/RechartsStateContext"
-import { AxisRange, implicitZAxis } from "../state/selectors/axisSelectors"
-import { resolveDefaultProps } from "../util/resolveDefaultProps"
-import { CustomScaleDefinition } from "../util/scale/CustomScaleDefinition"
-import { teardownWrite } from "../state/teardownWrite"
-
-function SetZAxisSettings(props: ZAxisSettings): null {
-	const stateCtx = useContext(RechartsStateContext)
-	let prevSettings: ZAxisSettings | null = null
-
-	createEffect(
-		() => ({ ...props }),
-		(settings) => {
-			/* upstream replaceZAxis: a changed id drops the previous entry */
-			if (prevSettings != null && String(prevSettings.id) !== String(settings.id)) {
-				const prevId = String(prevSettings.id)
-				stateCtx?.setState("cartesianAxes", "zAxis", (axes) => {
-					delete axes[prevId]
-				})
-			}
-			stateCtx?.setState("cartesianAxes", "zAxis", String(settings.id), { settings })
-			prevSettings = settings
-		},
-	)
-
-	onCleanup(() => {
-		teardownWrite(() => {
-			if (prevSettings) {
-				const strId = String(prevSettings.id)
-				/* eslint-disable-next-line solid/reactivity -- cleanup runs outside tracking; intentional */
-				stateCtx?.setState("cartesianAxes", "zAxis", (axes) => { delete axes[strId] })
-				prevSettings = null
-			}
-		})
-	})
-
-	return null
-}
-
-export interface Props<DataPointType = unknown, DataValueType = unknown> extends Omit<
-	BaseAxisProps<DataPointType, DataValueType>,
-	"domain"
-> {
-	/**
-	 * The type of axis.
-	 *
-	 * `category`: Treats data as distinct values.
-	 * Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
-	 *
-	 * `number`: Treats data as continuous range.
-	 * Values that are numerically closer are placed closer together on the axis.
-	 *
-	 * @defaultValue number
-	 */
-	type?: "number" | "category"
-	/**
-	 * The unique id of z-axis.
-	 *
-	 * @defaultValue 0
-	 */
-	zAxisId?: AxisId
-	/**
-	 * The range of axis.
-	 * Unlike other axes, the range of z-axis is not informed by chart dimensions.
-	 *
-	 * @defaultValue [64,64]
-	 */
-	range?: AxisRange
-	/**
-	 * Specify the domain of axis when the axis is a number axis.
-	 *
-	 * If undefined, then the domain is calculated based on the data and dataKeys.
-	 *
-	 * The length of domain should be 2, and we will validate the values in domain.
-	 *
-	 * Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100',
-	 * or a function that accepts a single argument and returns a number.
-	 *
-	 * If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
-	 * If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
-	 *
-	 * @example <ZAxis type="number" domain={['dataMin', 'dataMax']} />
-	 * @example <ZAxis type="number" domain={[0, 'dataMax']} />
-	 * @example <ZAxis type="number" domain={['auto', 'auto']} />
-	 * @example <ZAxis type="number" domain={[0, 'dataMax + 1000']} />
-	 * @example <ZAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
-	 * @example <ZAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
-	 * @example <ZAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
-	 * @example <ZAxis type="number" domain={[0, 100]} allowDataOverflow />
-	 */
-	domain?: AxisDomain
-	/**
-	 * Scale function determines how data values are mapped to visual values.
-	 * In other words, decided the mapping between data domain and coordinate range.
-	 *
-	 * If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
-	 *
-	 * You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
-	 *
-	 * @defaultValue auto
-	 * @example <ZAxis scale="log" />
-	 * @example
-	 * import { scaleLog } from 'd3-scale';
-	 * const scale = scaleLog().base(Math.E);
-	 * <ZAxis scale={scale} />
-	 */
-	scale?:
-		| ScaleType
-		| CustomScaleDefinition
-		| CustomScaleDefinition<string>
-		| CustomScaleDefinition<number>
-		| CustomScaleDefinition<Date>
-}
-
-export const zAxisDefaultProps = {
-	range: implicitZAxis.range,
-	scale: implicitZAxis.scale,
-	type: implicitZAxis.type,
-	zAxisId: 0,
-} as const satisfies Partial<Props>
-
-/**
- * Virtual axis, does not render anything itself. Has no ticks, grid lines, or labels.
- * Useful for dynamically setting Scatter point size, based on data.
- *
- * @consumes CartesianViewBoxContext
- */
-export function ZAxis<DataPointType = unknown, DataValueType = unknown>(
-	outsideProps: Props<DataPointType, DataValueType>,
-) {
-	const props = resolveDefaultProps(outsideProps, zAxisDefaultProps)
-	return (
-		<SetZAxisSettings
-			domain={props.domain}
-			id={props.zAxisId}
-			/* settings are untyped; the generic only constrains what callers pass */
-			dataKey={props.dataKey as DataKey<unknown>}
-			name={props.name}
-			unit={props.unit}
-			range={props.range}
-			scale={props.scale}
-			type={props.type}
-			allowDuplicatedCategory={implicitZAxis.allowDuplicatedCategory}
-			allowDataOverflow={implicitZAxis.allowDataOverflow}
-			reversed={implicitZAxis.reversed}
-			includeHidden={implicitZAxis.includeHidden}
-		/>
-	)
-}
-
-ZAxis.displayName = "ZAxis"

package/src/cartesian/cartesianPositionToCSSTranslate.tsx

@@ -1,29 +0,0 @@
-import type { TextAnchor, TextVerticalAnchor } from "../component/Text"
-
-/**
- * CalculatedCartesianPosition returns horizontalAnchor and verticalAnchor
- * which work directly with an SVG text element
- * but for use in HTML context we have to translate them into CSS transform(translate)
- * so this is what this function is doing.
- *
- * @param horizontalPosition as returned from {@link getCartesianPosition}
- * @param verticalPosition as returned from {@link getCartesianPosition}
- * @return CSS transform string
- */
-export function cartesianPositionToCSSTranslate(
-	horizontalPosition: TextAnchor,
-	verticalPosition: TextVerticalAnchor,
-): string {
-	/* 'start' / 'start' is the default HTML behavior, no transform needed */
-	if (horizontalPosition === "start" && verticalPosition === "start") {
-		return ""
-	}
-
-	const horizontalValues = { end: "-100%", middle: "-50%", start: "0" }
-	const verticalValues = { end: "-100%", middle: "-50%", start: "0" }
-
-	const x = horizontalPosition === "inherit" ? "0" : horizontalValues[horizontalPosition]
-	const y = verticalValues[verticalPosition] ?? "0"
-
-	return `translate(${x}, ${y})`
-}

package/src/cartesian/cartesianViewBoxToTrapezoid.tsx

@@ -1,21 +0,0 @@
-import type { CartesianViewBoxRequired, TrapezoidViewBox } from "../util/types"
-
-export function cartesianViewBoxToTrapezoid(box: undefined): undefined
-export function cartesianViewBoxToTrapezoid(
-	box: CartesianViewBoxRequired | TrapezoidViewBox,
-): TrapezoidViewBox
-export function cartesianViewBoxToTrapezoid(
-	box: CartesianViewBoxRequired | TrapezoidViewBox | undefined,
-): TrapezoidViewBox | undefined {
-	if (box == null) {
-		return undefined
-	}
-	return {
-		height: box.height,
-		lowerWidth: "lowerWidth" in box ? box.lowerWidth : box.width,
-		upperWidth: "upperWidth" in box ? box.upperWidth : box.width,
-		width: box.width,
-		x: box.x,
-		y: box.y,
-	}
-}