@octanejs/visx 0.1.0

package/src/annotation/components/LineSubject.tsrx

@@ -0,0 +1,50 @@
+import { useContext } from 'octane';
+import type { SVGProps } from 'react';
+import cx from 'classnames';
+import AnnotationContext from '../context/AnnotationContext.tsrx';
+
+export type LineSubjectProps = {
+	/** Optional className to apply to LineSubject in addition to 'visx-annotation-subject'. */
+	className?: string;
+	/** Color of LineSubject. */
+	stroke?: string;
+	/** strokeWidth of LineSubject. */
+	strokeWidth?: number;
+	/** Orientation of line. */
+	orientation?: 'vertical' | 'horizontal';
+	/** x position of LineSubject (for vertical LineSubjects). */
+	x?: number;
+	/** y position of LineSubject (for horizontal LineSubjects). */
+	y?: number;
+	/** The minimum coordinate of the line. */
+	min: number;
+	/** The maximum coordinate of the line. */
+	max: number;
+};
+
+export default function LineSubject({
+	className,
+	x: propsX,
+	y: propsY,
+	orientation = 'vertical',
+	min,
+	max,
+	stroke = '#222',
+	...restProps
+}: LineSubjectProps & Omit<SVGProps<SVGLineElement>, keyof LineSubjectProps>) {
+	// if props are provided, they take precedence over context
+	const annotationContext = useContext(AnnotationContext);
+	const lineIsVertical = orientation === 'vertical';
+
+	return <line
+		className={cx('visx-annotation-subject', 'visx-annotation-subject-line', className)}
+		x1={lineIsVertical ? propsX || annotationContext.x : min}
+		x2={lineIsVertical ? propsX || annotationContext.x : max}
+		y1={lineIsVertical ? min : propsY || annotationContext.y}
+		y2={lineIsVertical ? max : propsY || annotationContext.y}
+		fill="transparent"
+		pointerEvents="none"
+		stroke={stroke}
+		{...restProps}
+	/>;
+}

package/src/annotation/components/LineSubject.tsrx.d.ts

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+export type LineSubjectProps = {
+    /** Optional className to apply to LineSubject in addition to 'visx-annotation-subject'. */
+    className?: string;
+    /** Color of LineSubject. */
+    stroke?: string;
+    /** strokeWidth of LineSubject. */
+    strokeWidth?: number;
+    /** Orientation of line. */
+    orientation?: 'vertical' | 'horizontal';
+    /** x position of LineSubject (for vertical LineSubjects). */
+    x?: number;
+    /** y position of LineSubject (for horizontal LineSubjects). */
+    y?: number;
+    /** The minimum coordinate of the line. */
+    min: number;
+    /** The maximum coordinate of the line. */
+    max: number;
+};
+export default function LineSubject({ className, x: propsX, y: propsY, orientation, min, max, stroke, ...restProps }: LineSubjectProps & Omit<SVGProps<SVGLineElement>, keyof LineSubjectProps>): import("react").JSX.Element;

package/src/annotation/context/AnnotationContext.tsrx

@@ -0,0 +1,6 @@
+import { createContext } from 'octane';
+import type { AnnotationContextType } from '../types';
+
+const AnnotationContext = createContext<AnnotationContextType>({});
+
+export default AnnotationContext

package/src/annotation/context/AnnotationContext.tsrx.d.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AnnotationContextType } from '../types';
+declare const AnnotationContext: import("octane").Context<AnnotationContextType>;
+export default AnnotationContext;

package/src/annotation/index.ts

@@ -0,0 +1,18 @@
+// @octanejs/visx/annotation
+export { default as Connector } from './components/Connector.tsrx';
+export { default as Label } from './components/Label.tsrx';
+export { default as HtmlLabel } from './components/HtmlLabel.tsrx';
+export { default as CircleSubject } from './components/CircleSubject.tsrx';
+export { default as LineSubject } from './components/LineSubject.tsrx';
+export { default as Annotation } from './components/Annotation.tsrx';
+export { default as EditableAnnotation } from './components/EditableAnnotation.tsrx';
+export { default as AnnotationContext } from './context/AnnotationContext.tsrx';
+
+export type * from './types';
+export type { AnnotationProps } from './components/Annotation.tsrx';
+export type { CircleSubjectProps } from './components/CircleSubject.tsrx';
+export type { ConnectorProps } from './components/Connector.tsrx';
+export type { EditableAnnotationProps } from './components/EditableAnnotation.tsrx';
+export type { HtmlLabelProps } from './components/HtmlLabel.tsrx';
+export type { LabelProps } from './components/Label.tsrx';
+export type { LineSubjectProps } from './components/LineSubject.tsrx';

package/src/annotation/types/index.ts

@@ -0,0 +1,10 @@
+export type AnnotationContextType = {
+	/** x position of the Subject. */
+	x?: number;
+	/** y position of the Subject. */
+	y?: number;
+	/** x delta of the Label from the Subject. */
+	dx?: number;
+	/** y delta of the Label from the Subject. */
+	dy?: number;
+};

package/src/axis/axis/Axis.tsrx

@@ -0,0 +1,54 @@
+import cx from 'classnames';
+import { createElement } from 'octane';
+import { Group } from '@octanejs/visx/group';
+import type { SharedAxisProps, AxisScale } from '../types';
+import AxisRenderer from './AxisRenderer.tsrx';
+import type { OrientationType } from '../constants/orientation';
+import Orientation from '../constants/orientation';
+import useAxis from '../react/useAxis.tsrx';
+
+const renderAxis = (axis: Parameters<typeof AxisRenderer>[0]) => createElement(AxisRenderer, axis);
+
+export type AxisProps<Scale extends AxisScale> = SharedAxisProps<Scale> & {
+		orientation?: OrientationType;
+	};
+
+export default function Axis<Scale extends AxisScale>({
+	children = renderAxis,
+	axisClassName,
+	hideAxisLine = false,
+	hideTicks = false,
+	hideZero = false,
+	innerRef,
+	left = 0,
+	numTicks = 10,
+	orientation = Orientation.bottom,
+	rangePadding = 0,
+	scale,
+	tickFormat,
+	tickLength = 8,
+	tickValues,
+	top = 0,
+	...restProps
+}: AxisProps<Scale>) {
+	const axis = useAxis({
+		...restProps,
+		hideAxisLine,
+		hideTicks,
+		hideZero,
+		numTicks,
+		orientation,
+		rangePadding,
+		scale,
+		tickFormat,
+		tickLength,
+		tickValues,
+	});
+
+	return <Group
+		className={cx('visx-axis', axisClassName)}
+		innerRef={innerRef}
+		top={top}
+		left={left}
+	>{children(axis)}</Group>;
+}

package/src/axis/axis/Axis.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedAxisProps, AxisScale } from '../types';
+import type { OrientationType } from '../constants/orientation';
+export type AxisProps<Scale extends AxisScale> = SharedAxisProps<Scale> & {
+    orientation?: OrientationType;
+};
+export default function Axis<Scale extends AxisScale>({ children, axisClassName, hideAxisLine, hideTicks, hideZero, innerRef, left, numTicks, orientation, rangePadding, scale, tickFormat, tickLength, tickValues, top, ...restProps }: AxisProps<Scale>): import("react").JSX.Element;

package/src/axis/axis/AxisBottom.tsrx

@@ -0,0 +1,37 @@
+import cx from 'classnames';
+import Axis from './Axis.tsrx';
+import Orientation from '../constants/orientation';
+import type { SharedAxisProps, AxisScale } from '../types';
+
+export const bottomTickLabelProps = {
+	dy: '0.25em',
+	fill: '#222',
+	fontFamily: 'Arial',
+	fontSize: 10,
+	textAnchor: 'middle',
+} as const;
+
+export default function AxisBottom<Scale extends AxisScale>({
+	axisClassName,
+	labelOffset = 8,
+	tickLength = 8,
+	tickLabelProps,
+	...restProps
+}: SharedAxisProps<Scale>) {
+	const tickLabelPropsFinal =
+		typeof tickLabelProps === 'function'
+			? tickLabelProps
+			: {
+					...bottomTickLabelProps,
+					...tickLabelProps,
+				};
+
+	return <Axis
+		axisClassName={cx('visx-axis-bottom', axisClassName)}
+		labelOffset={labelOffset}
+		orientation={Orientation.bottom}
+		tickLabelProps={tickLabelPropsFinal}
+		tickLength={tickLength}
+		{...restProps}
+	/>;
+}

package/src/axis/axis/AxisBottom.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedAxisProps, AxisScale } from '../types';
+export declare const bottomTickLabelProps: {
+    readonly dy: "0.25em";
+    readonly fill: "#222";
+    readonly fontFamily: "Arial";
+    readonly fontSize: 10;
+    readonly textAnchor: "middle";
+};
+export default function AxisBottom<Scale extends AxisScale>({ axisClassName, labelOffset, tickLength, tickLabelProps, ...restProps }: SharedAxisProps<Scale>): import("react").JSX.Element;

package/src/axis/axis/AxisLeft.tsrx

@@ -0,0 +1,37 @@
+import cx from 'classnames';
+import Axis from './Axis.tsrx';
+import Orientation from '../constants/orientation';
+import type { SharedAxisProps, AxisScale } from '../types';
+
+export const leftTickLabelProps = {
+	dx: '-0.25em',
+	dy: '0.25em',
+	fill: '#222',
+	fontFamily: 'Arial',
+	fontSize: 10,
+	textAnchor: 'end',
+} as const;
+
+export default function AxisLeft<Scale extends AxisScale>({
+	axisClassName,
+	labelOffset = 36,
+	tickLength = 8,
+	tickLabelProps,
+	...restProps
+}: SharedAxisProps<Scale>) {
+	const tickLabelPropsFinal =
+		typeof tickLabelProps === 'function'
+			? tickLabelProps
+			: {
+					...leftTickLabelProps,
+					...tickLabelProps,
+				};
+	return <Axis
+		axisClassName={cx('visx-axis-left', axisClassName)}
+		labelOffset={labelOffset}
+		orientation={Orientation.left}
+		tickLabelProps={tickLabelPropsFinal}
+		tickLength={tickLength}
+		{...restProps}
+	/>;
+}

package/src/axis/axis/AxisLeft.tsrx.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedAxisProps, AxisScale } from '../types';
+export declare const leftTickLabelProps: {
+    readonly dx: "-0.25em";
+    readonly dy: "0.25em";
+    readonly fill: "#222";
+    readonly fontFamily: "Arial";
+    readonly fontSize: 10;
+    readonly textAnchor: "end";
+};
+export default function AxisLeft<Scale extends AxisScale>({ axisClassName, labelOffset, tickLength, tickLabelProps, ...restProps }: SharedAxisProps<Scale>): import("react").JSX.Element;

package/src/axis/axis/AxisRenderer.tsrx

@@ -0,0 +1,102 @@
+import cx from 'classnames';
+import { Line } from '@octanejs/visx/shape';
+import { Text } from '@octanejs/visx/text';
+
+import type { TextProps } from '@octanejs/visx/text';
+import getLabelTransform from '../utils/getLabelTransform';
+import Orientation from '../constants/orientation';
+import type { AxisRendererProps, AxisScale } from '../types';
+import Ticks from './Ticks.tsrx';
+
+const defaultTextProps: Partial<TextProps> = {
+	textAnchor: 'middle',
+	fontFamily: 'Arial',
+	fontSize: 10,
+	fill: '#222',
+};
+
+export default function AxisRenderer<Scale extends AxisScale>({
+	axisFromPoint,
+	axisLineClassName,
+	axisToPoint,
+	hideAxisLine,
+	hideTicks,
+	horizontal,
+	label = '',
+	labelClassName,
+	labelOffset = 14,
+	labelProps,
+	orientation = Orientation.bottom,
+	scale,
+	stroke = '#222',
+	strokeDasharray,
+	strokeWidth = 1,
+	tickClassName,
+	tickComponent,
+	tickLineProps,
+	tickLabelProps,
+	tickLength = 8,
+	tickStroke = '#222',
+	tickTransform,
+	ticks,
+	ticksComponent = Ticks,
+}: AxisRendererProps<Scale>) {
+	const combinedLabelProps = {
+		...defaultTextProps,
+		...labelProps,
+	};
+	const tickLabelPropsDefault = {
+		...defaultTextProps,
+		...(typeof tickLabelProps === 'object' ? tickLabelProps : null),
+	};
+	// compute the max tick label size to compute label offset
+	const allTickLabelProps = ticks.map(
+		({ value, index }) => typeof tickLabelProps === 'function'
+			? tickLabelProps(value, index, ticks)
+			: tickLabelPropsDefault,
+	);
+	const maxTickLabelFontSize = Math.max(
+		10,
+		...allTickLabelProps.map((props) => (typeof props.fontSize === 'number' ? props.fontSize : 0)),
+	);
+	return <>
+		{ticksComponent({
+			hideTicks,
+			horizontal,
+			orientation,
+			scale,
+			tickClassName,
+			tickComponent,
+			tickLabelProps: allTickLabelProps,
+			tickStroke,
+			tickTransform,
+			ticks,
+			strokeWidth,
+			tickLineProps,
+		})}
+
+		{!hideAxisLine &&
+			<Line
+				className={cx('visx-axis-line', axisLineClassName)}
+				from={axisFromPoint}
+				to={axisToPoint}
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeDasharray={strokeDasharray}
+			/>}
+
+		{label &&
+			<Text
+				className={cx('visx-axis-label', labelClassName)}
+				{...getLabelTransform({
+					labelOffset,
+					labelProps: combinedLabelProps,
+					orientation,
+					range: scale.range(),
+					tickLabelFontSize: maxTickLabelFontSize,
+					tickLength,
+				})}
+				{...combinedLabelProps}
+			>{label}</Text>}
+	</>;
+}

package/src/axis/axis/AxisRenderer.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisRendererProps, AxisScale } from '../types';
+export default function AxisRenderer<Scale extends AxisScale>({ axisFromPoint, axisLineClassName, axisToPoint, hideAxisLine, hideTicks, horizontal, label, labelClassName, labelOffset, labelProps, orientation, scale, stroke, strokeDasharray, strokeWidth, tickClassName, tickComponent, tickLineProps, tickLabelProps, tickLength, tickStroke, tickTransform, ticks, ticksComponent, }: AxisRendererProps<Scale>): import("react").JSX.Element;

package/src/axis/axis/AxisRight.tsrx

@@ -0,0 +1,39 @@
+import cx from 'classnames';
+import Axis from './Axis.tsrx';
+import Orientation from '../constants/orientation';
+import type { SharedAxisProps, AxisScale } from '../types';
+
+export type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
+
+export const rightTickLabelProps = {
+	dx: '0.25em',
+	dy: '0.25em',
+	fill: '#222',
+	fontFamily: 'Arial',
+	fontSize: 10,
+	textAnchor: 'start',
+} as const;
+
+export default function AxisRight<Scale extends AxisScale>({
+	axisClassName,
+	labelOffset = 36,
+	tickLength = 8,
+	tickLabelProps,
+	...restProps
+}: AxisRightProps<Scale>) {
+	const tickLabelPropsFinal =
+		typeof tickLabelProps === 'function'
+			? tickLabelProps
+			: {
+					...rightTickLabelProps,
+					...tickLabelProps,
+				};
+	return <Axis
+		axisClassName={cx('visx-axis-right', axisClassName)}
+		labelOffset={labelOffset}
+		orientation={Orientation.right}
+		tickLabelProps={tickLabelPropsFinal}
+		tickLength={tickLength}
+		{...restProps}
+	/>;
+}

package/src/axis/axis/AxisRight.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedAxisProps, AxisScale } from '../types';
+export type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
+export declare const rightTickLabelProps: {
+    readonly dx: "0.25em";
+    readonly dy: "0.25em";
+    readonly fill: "#222";
+    readonly fontFamily: "Arial";
+    readonly fontSize: 10;
+    readonly textAnchor: "start";
+};
+export default function AxisRight<Scale extends AxisScale>({ axisClassName, labelOffset, tickLength, tickLabelProps, ...restProps }: AxisRightProps<Scale>): import("react").JSX.Element;

package/src/axis/axis/AxisTop.tsrx

@@ -0,0 +1,38 @@
+import cx from 'classnames';
+import Axis from './Axis.tsrx';
+import Orientation from '../constants/orientation';
+import type { SharedAxisProps, AxisScale } from '../types';
+
+export type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
+
+export const topTickLabelProps = {
+	dy: '-0.75em',
+	fill: '#222',
+	fontFamily: 'Arial',
+	fontSize: 10,
+	textAnchor: 'middle',
+} as const;
+
+export default function AxisTop<Scale extends AxisScale>({
+	axisClassName,
+	labelOffset = 8,
+	tickLength = 8,
+	tickLabelProps,
+	...restProps
+}: AxisTopProps<Scale>) {
+	const tickLabelPropsFinal =
+		typeof tickLabelProps === 'function'
+			? tickLabelProps
+			: {
+					...topTickLabelProps,
+					...tickLabelProps,
+				};
+	return <Axis
+		axisClassName={cx('visx-axis-top', axisClassName)}
+		labelOffset={labelOffset}
+		orientation={Orientation.top}
+		tickLabelProps={tickLabelPropsFinal}
+		tickLength={tickLength}
+		{...restProps}
+	/>;
+}

package/src/axis/axis/AxisTop.tsrx.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedAxisProps, AxisScale } from '../types';
+export type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
+export declare const topTickLabelProps: {
+    readonly dy: "-0.75em";
+    readonly fill: "#222";
+    readonly fontFamily: "Arial";
+    readonly fontSize: 10;
+    readonly textAnchor: "middle";
+};
+export default function AxisTop<Scale extends AxisScale>({ axisClassName, labelOffset, tickLength, tickLabelProps, ...restProps }: AxisTopProps<Scale>): import("react").JSX.Element;

package/src/axis/axis/Ticks.tsrx

@@ -0,0 +1,56 @@
+import cx from 'classnames';
+import { Line } from '@octanejs/visx/shape';
+import { Group } from '@octanejs/visx/group';
+import { Text } from '@octanejs/visx/text';
+
+import Orientation from '../constants/orientation';
+import type { TicksRendererProps, AxisScale } from '../types';
+
+export default function Ticks<Scale extends AxisScale>({
+	hideTicks,
+	horizontal,
+	orientation,
+	tickClassName,
+	tickComponent,
+	tickLabelProps: allTickLabelProps,
+	tickStroke = '#222',
+	tickTransform,
+	ticks,
+	strokeWidth,
+	tickLineProps,
+}: TicksRendererProps<Scale>) {
+	return ticks.map(({ value, index, from, to, formattedValue }) => {
+		const tickLabelProps = allTickLabelProps[index] ?? {};
+		const tickLabelFontSize = Math.max(
+			10,
+			typeof tickLabelProps.fontSize === 'number' && tickLabelProps.fontSize || 0,
+		);
+
+		const tickYCoord =
+			to.y + (horizontal && orientation !== Orientation.top ? tickLabelFontSize : 0);
+
+		return <Group
+			key={`visx-tick-${value}-${index}`}
+			className={cx('visx-axis-tick', tickClassName)}
+			transform={tickTransform}
+		>
+			{!hideTicks &&
+				<Line
+					from={from}
+					to={to}
+					stroke={tickStroke}
+					strokeWidth={strokeWidth}
+					strokeLinecap="square"
+					{...tickLineProps}
+				/>}
+			{tickComponent
+				? (tickComponent({
+						...tickLabelProps,
+						x: to.x,
+						y: tickYCoord,
+						formattedValue,
+					}))
+				: <Text x={to.x} y={tickYCoord} {...tickLabelProps}>{formattedValue}</Text>}
+		</Group>;
+	});
+}

package/src/axis/axis/Ticks.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { TicksRendererProps, AxisScale } from '../types';
+export default function Ticks<Scale extends AxisScale>({ hideTicks, horizontal, orientation, tickClassName, tickComponent, tickLabelProps: allTickLabelProps, tickStroke, tickTransform, ticks, strokeWidth, tickLineProps, }: TicksRendererProps<Scale>): import("react").JSX.Element[];

package/src/axis/constants/orientation.ts

@@ -0,0 +1,12 @@
+import type { ValueOf } from '@octanejs/visx/scale';
+
+const Orientation = {
+	top: 'top',
+	left: 'left',
+	right: 'right',
+	bottom: 'bottom',
+} as const;
+
+export type OrientationType = ValueOf<typeof Orientation>;
+
+export default Orientation;

package/src/axis/index.ts

@@ -0,0 +1,10 @@
+// @octanejs/visx/axis
+export { default as Axis } from './axis/Axis.tsrx';
+export type { AxisProps } from './axis/Axis.tsrx';
+export { default as AxisLeft } from './axis/AxisLeft.tsrx';
+export { default as AxisRight } from './axis/AxisRight.tsrx';
+export { default as AxisTop } from './axis/AxisTop.tsrx';
+export { default as AxisBottom } from './axis/AxisBottom.tsrx';
+export { default as Orientation } from './constants/orientation';
+
+export type * from './types';

package/src/axis/react/index.ts

@@ -0,0 +1,5 @@
+'use client';
+
+export { default as useAxis } from './useAxis.tsrx';
+
+export type { UseAxisOptions } from './useAxis.tsrx';

package/src/axis/react/useAxis.tsrx

@@ -0,0 +1,89 @@
+import { getTicks, coerceNumber } from '@octanejs/visx/scale';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { AxisRendererProps, AxisScale, CommonProps } from '../types';
+import getTickPosition from '../utils/getTickPosition';
+import getTickFormatter from '../utils/getTickFormatter';
+import createPoint from '../utils/createPoint';
+import type { OrientationType } from '../constants/orientation';
+import Orientation from '../constants/orientation';
+import getAxisRangePaddingConfig from '../utils/getAxisRangePaddingConfig';
+
+export type UseAxisOptions<Scale extends AxisScale> = CommonProps<Scale> & {
+		/** Placement of the axis. */
+		orientation?: OrientationType;
+		/** A d3 or visx scale function. */
+		scale: Scale;
+		/** Values that determine the number and value of ticks. */
+		tickValues?: ScaleInput<Scale>[];
+	};
+
+export default function useAxis<Scale extends AxisScale>({
+	hideAxisLine = false,
+	hideTicks = false,
+	hideZero = false,
+	numTicks = 10,
+	orientation = Orientation.bottom,
+	rangePadding = 0,
+	scale,
+	tickFormat,
+	tickLength = 8,
+	tickValues,
+	...restProps
+}: UseAxisOptions<Scale>): AxisRendererProps<Scale> {
+	const format = tickFormat ?? getTickFormatter(scale);
+
+	const isLeft = orientation === Orientation.left;
+	const isTop = orientation === Orientation.top;
+	const horizontal = isTop || orientation === Orientation.bottom;
+
+	const tickPosition = getTickPosition(scale);
+	const tickSign =
+		isLeft || isTop ? -1 : 1;
+
+	const range = scale.range();
+	const rangePaddingConfig = getAxisRangePaddingConfig(rangePadding);
+
+	const axisFromPoint = createPoint(
+		{ x: Number(range[0]) + 0.5 - rangePaddingConfig.start, y: 0 },
+		horizontal,
+	);
+	const axisToPoint = createPoint(
+		{ x: Number(range[range.length - 1]) + 0.5 + rangePaddingConfig.end, y: 0 },
+		horizontal,
+	);
+
+	const filteredTickValues = (tickValues ?? getTicks(scale, numTicks)).filter(
+		(value) => !hideZero || value !== 0 && value !== '0',
+	).map((value, index) => ({ value, index }));
+
+	const ticks = filteredTickValues.map(({ value, index }) => {
+		const scaledValue = coerceNumber(tickPosition(value));
+
+		return {
+			value,
+			index,
+			from: createPoint({ x: scaledValue, y: 0 }, horizontal),
+			to: createPoint({ x: scaledValue, y: tickLength * tickSign }, horizontal),
+			formattedValue: format(value, index, filteredTickValues),
+		};
+	});
+
+	return {
+		...restProps,
+		axisFromPoint,
+		axisToPoint,
+		hideAxisLine,
+		hideTicks,
+		hideZero,
+		horizontal,
+		numTicks,
+		orientation,
+		rangePadding,
+		scale,
+		tickFormat: format,
+		tickLength,
+		tickPosition,
+		tickSign,
+		ticks,
+	};
+}