@octanejs/visx 0.1.0

package/src/axis/react/useAxis.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { AxisRendererProps, AxisScale, CommonProps } from '../types';
+import type { OrientationType } from '../constants/orientation';
+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, hideTicks, hideZero, numTicks, orientation, rangePadding, scale, tickFormat, tickLength, tickValues, ...restProps }: UseAxisOptions<Scale>): AxisRendererProps<Scale>;

package/src/axis/types.ts

@@ -0,0 +1,145 @@
+import type { D3Scale, NumberLike, ScaleInput, ValueOf } from '@octanejs/visx/scale';
+import type { TextProps } from '@octanejs/visx/text';
+import type { ReactNode, Ref, SVGProps } from 'react';
+import type Orientation from './constants/orientation';
+
+// In order to plot values on an axis, output of the scale must be number.
+// Some scales return undefined.
+export type AxisScaleOutput = number | NumberLike | undefined;
+
+/** A catch-all type for scales that are compatible with axis */
+export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> =
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	D3Scale<Output, any, any>;
+type LineProps = Omit<SVGProps<SVGLineElement>, 'to' | 'from' | 'ref'>;
+
+type FormattedValue = string | undefined;
+
+export type TickFormatter<T> = (
+	value: T,
+	index: number,
+	values: { value: T; index: number }[],
+) => FormattedValue;
+
+export type TickLabelProps<T> =
+	| Partial<TextProps>
+	| ((value: T, index: number, values: { value: T; index: number }[]) => Partial<TextProps>);
+
+export type TickRendererProps = Partial<TextProps> & {
+	x: number;
+	y: number;
+	formattedValue: FormattedValue;
+};
+
+export type TicksRendererProps<Scale extends AxisScale> = {
+	tickLabelProps: Partial<TextProps>[];
+} & Pick<
+	AxisRendererProps<Scale>,
+	| 'hideTicks'
+	| 'horizontal'
+	| 'orientation'
+	| 'scale'
+	| 'tickClassName'
+	| 'tickComponent'
+	| 'tickStroke'
+	| 'tickTransform'
+	| 'ticks'
+	| 'strokeWidth'
+	| 'tickLineProps'
+>;
+
+export type CommonProps<Scale extends AxisScale> = {
+	/** The class name applied to the axis line element. */
+	axisLineClassName?: string;
+	/**  If true, will hide the axis line. */
+	hideAxisLine?: boolean;
+	/** If true, will hide the ticks (but not the tick labels). */
+	hideTicks?: boolean;
+	/** If true, will hide the '0' value tick and tick label. */
+	hideZero?: boolean;
+	/** The text for the axis label. */
+	label?: string;
+	/** The class name applied to the axis label text element. */
+	labelClassName?: string;
+	/** Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)  */
+	labelOffset?: number;
+	/** Props applied to the axis label component. */
+	labelProps?: Partial<TextProps>;
+	/** The number of ticks wanted for the axis (note this is approximate)  */
+	numTicks?: number;
+	/** Placement of the axis */
+	orientation?: ValueOf<typeof Orientation>;
+	/** Pixel padding to apply to axis sides. */
+	rangePadding?: number | { start?: number; end?: number };
+	/** The color for the stroke of the lines. */
+	stroke?: string;
+	/** The pixel value for the width of the lines. */
+	strokeWidth?: number | string;
+	/** The pattern of dashes in the stroke. */
+	strokeDasharray?: string;
+	/** Props to be applied to individual tick lines. */
+	tickLineProps?: LineProps;
+	/** The class name applied to each tick group. */
+	tickClassName?: string;
+	/** Override the component used to render tick labels (instead of <Text /> from @octanejs/visx/text). */
+	tickComponent?: (tickRendererProps: TickRendererProps) => ReactNode;
+	/** Override the component used to render all tick lines and labels. */
+	ticksComponent?: (tickRendererProps: TicksRendererProps<Scale>) => ReactNode;
+	/** A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous_tickFormat) for the tick text. */
+	tickFormat?: TickFormatter<ScaleInput<Scale>>;
+	/** Either an object with the props for all tick labels or a function that returns props for a given tick label. */
+	tickLabelProps?: TickLabelProps<ScaleInput<Scale>>;
+	/** The length of the tick lines. */
+	tickLength?: number;
+	/** The color for the tick's stroke value. */
+	tickStroke?: string;
+	/** A custom SVG transform value to be applied to each tick group. */
+	tickTransform?: string;
+};
+
+interface Point {
+	x: number;
+	y: number;
+}
+
+export type ComputedTick<Scale extends AxisScale> = {
+	value: ScaleInput<Scale>;
+	index: number;
+	from: Point;
+	to: Point;
+	formattedValue: FormattedValue;
+};
+
+export type AxisRendererProps<Scale extends AxisScale> = CommonProps<Scale> & {
+	/** Start point of the axis line */
+	axisFromPoint: Point;
+	/** End point of the axis line */
+	axisToPoint: Point;
+	/** Whether this axis is horizontal */
+	horizontal: boolean;
+	/** A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale) scale function. */
+	scale: Scale;
+	/** Function to compute tick position along the axis from tick value */
+	tickPosition: (value: ScaleInput<Scale>) => AxisScaleOutput;
+	/** Axis coordinate sign, -1 for left or top orientation. */
+	tickSign: 1 | -1;
+	/** Computed ticks with positions and formatted value */
+	ticks: ComputedTick<Scale>[];
+};
+
+export type SharedAxisProps<Scale extends AxisScale> = CommonProps<Scale> & {
+	/** The class name applied to the outermost axis group element. */
+	axisClassName?: string;
+	/** A left pixel offset applied to the entire axis. */
+	left?: number;
+	/** The ref to the outermost axis group element. */
+	innerRef?: Ref<SVGGElement>;
+	/** A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale) scale function. */
+	scale: Scale;
+	/** An array of values that determine the number and values of the ticks. Falls back to `scale.ticks()` or `.domain()`. */
+	tickValues?: ScaleInput<Scale>[];
+	/** A top pixel offset applied to the entire axis. */
+	top?: number;
+	/** For more control over rendering or to add event handlers to datum, pass a function as children. */
+	children?: (renderProps: AxisRendererProps<Scale>) => ReactNode;
+};

package/src/axis/utils/createPoint.ts

@@ -0,0 +1,5 @@
+import { Point } from '@octanejs/visx/point';
+
+export default function createPoint({ x, y }: Partial<Point>, horizontal: boolean) {
+	return new Point(horizontal ? { x, y } : { x: y, y: x });
+}

package/src/axis/utils/getAxisRangePaddingConfig.ts

@@ -0,0 +1,11 @@
+import type { SharedAxisProps } from '../types';
+
+export const defaultAxisRangePadding = 0;
+
+export default function getAxisRangePaddingConfig(
+	originalRangePadding: SharedAxisProps<never>['rangePadding'] = defaultAxisRangePadding,
+) {
+	return typeof originalRangePadding === 'number'
+		? { start: originalRangePadding, end: originalRangePadding }
+		: { start: defaultAxisRangePadding, end: defaultAxisRangePadding, ...originalRangePadding };
+}

package/src/axis/utils/getLabelTransform.ts

@@ -0,0 +1,44 @@
+import type { TextProps } from '@octanejs/visx/text';
+import type { OrientationType } from '../constants/orientation';
+import Orientation from '../constants/orientation';
+import type { AxisScaleOutput } from '../types';
+
+export interface TransformArgs {
+	labelOffset: number;
+	labelProps: Partial<TextProps>;
+	orientation: OrientationType;
+	range: AxisScaleOutput[];
+	tickLabelFontSize: number;
+	tickLength: number;
+}
+
+export default function getLabelTransform({
+	labelOffset,
+	labelProps,
+	orientation,
+	range,
+	tickLabelFontSize,
+	tickLength,
+}: TransformArgs) {
+	const sign = orientation === Orientation.left || orientation === Orientation.top ? -1 : 1;
+
+	let x;
+	let y;
+	let transform;
+
+	if (orientation === Orientation.top || orientation === Orientation.bottom) {
+		const yBottomOffset =
+			orientation === Orientation.bottom && typeof labelProps.fontSize === 'number'
+				? labelProps.fontSize
+				: 0;
+
+		x = (Number(range[0]) + Number(range[range.length - 1])) / 2;
+		y = sign * (tickLength + labelOffset + tickLabelFontSize + yBottomOffset);
+	} else {
+		x = sign * ((Number(range[0]) + Number(range[range.length - 1])) / 2);
+		y = -(tickLength + labelOffset);
+		transform = `rotate(${sign * 90})`;
+	}
+
+	return { x, y, transform };
+}

package/src/axis/utils/getTickFormatter.ts

@@ -0,0 +1,19 @@
+import type { ScaleInput } from '@octanejs/visx/scale';
+import { toString } from '@octanejs/visx/scale';
+import type { TickFormatter, AxisScale } from '../types';
+
+/**
+ * Returns a tick position for the given tick value
+ */
+export default function getTickFormatter<Scale extends AxisScale>(scale: Scale) {
+	// Broaden type before using 'xxx' in s as typeguard.
+	const s = scale as AxisScale;
+
+	// For point or band scales,
+	// have to add offset to make the tick centered.
+	if ('tickFormat' in s) {
+		return s.tickFormat() as TickFormatter<ScaleInput<Scale>>;
+	}
+
+	return toString as TickFormatter<ScaleInput<Scale>>;
+}

package/src/axis/utils/getTickPosition.ts

@@ -0,0 +1,28 @@
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { AxisScale, AxisScaleOutput } from '../types';
+
+/**
+ * Create a function that returns a tick position for the given tick value
+ */
+export default function getTickPosition<Scale extends AxisScale>(
+	scale: Scale,
+	align: 'start' | 'center' | 'end' = 'center',
+) {
+	// Broaden type before using 'xxx' in s as typeguard.
+	const s = scale as AxisScale;
+
+	// For point or band scales,
+	// have to add offset to make the tick at center or end.
+	if (align !== 'start' && 'bandwidth' in s) {
+		let offset = s.bandwidth();
+		if (align === 'center') offset /= 2;
+		if (s.round()) offset = Math.round(offset);
+		return (d: ScaleInput<Scale>) => {
+			const scaledValue = s(d);
+
+			return typeof scaledValue === 'number' ? scaledValue + offset : scaledValue;
+		};
+	}
+
+	return scale as (d: ScaleInput<Scale>) => AxisScaleOutput;
+}

package/src/bounds/enhancers/withBoundingRects.tsrx

@@ -0,0 +1,59 @@
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'octane';
+import type { ComponentType, RefObject } from 'react';
+
+const emptyRect = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	width: 0,
+	height: 0,
+};
+
+type rectShape = {
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+	width: number;
+	height: number;
+};
+
+export type WithBoundingRectsProps = {
+	getRects?: () => { rect: rectShape; parentRect: rectShape };
+	rect?: rectShape;
+	parentRect?: rectShape;
+	nodeRef?: RefObject<HTMLElement>;
+};
+
+export default function withBoundingRects<Props extends object = {}>(
+	BaseComponent: ComponentType<Props>,
+): ComponentType<Props> {
+	function WrappedComponent(props: Props) {
+		const nodeRef = useRef<HTMLElement | null>(null);
+		const [rects, setRects, getRectsState] = useState<{
+			rect?: rectShape;
+			parentRect?: rectShape;
+		}>({ rect: undefined, parentRect: undefined });
+
+		const getRects = useCallback(() => {
+			const node = nodeRef.current;
+			if (!node) return getRectsState() as { rect: rectShape; parentRect: rectShape };
+			const parentNode = node.parentNode as HTMLElement | null;
+			const rect = node.getBoundingClientRect ? node.getBoundingClientRect() : emptyRect;
+			const parentRect = parentNode?.getBoundingClientRect
+				? parentNode.getBoundingClientRect()
+				: emptyRect;
+			return { rect, parentRect };
+		}, [getRectsState]);
+
+		useLayoutEffect(() => {
+			setRects(getRects());
+		}, [getRects]);
+
+		return <BaseComponent nodeRef={nodeRef} getRects={getRects} {...rects} {...props} />;
+	}
+
+	WrappedComponent.displayName = `withBoundingRects(${BaseComponent.displayName || ''})`;
+	return memo(WrappedComponent) as unknown as ComponentType<Props>;
+}

package/src/bounds/enhancers/withBoundingRects.tsrx.d.ts

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ComponentType, RefObject } from 'react';
+type rectShape = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type WithBoundingRectsProps = {
+    getRects?: () => {
+        rect: rectShape;
+        parentRect: rectShape;
+    };
+    rect?: rectShape;
+    parentRect?: rectShape;
+    nodeRef?: RefObject<HTMLElement>;
+};
+export default function withBoundingRects<Props extends object = {}>(BaseComponent: ComponentType<Props>): ComponentType<Props>;
+export {};

package/src/bounds/index.ts

@@ -0,0 +1,6 @@
+// @octanejs/visx/bounds
+import type { WithBoundingRectsProps as WithBoundingRectsPropsType } from './enhancers/withBoundingRects.tsrx';
+
+export { default as withBoundingRects } from './enhancers/withBoundingRects.tsrx';
+
+export type WithBoundingRectsProps = WithBoundingRectsPropsType;