@solidports/recharts 0.1.0

package/src/cartesian/YAxis.tsx

@@ -0,0 +1,443 @@
+/* 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

@@ -0,0 +1,155 @@
+/* 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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,21 @@
+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,
+	}
+}