@octanejs/visx 0.1.0

package/src/legend/legends/Legend/index.tsrx.d.ts

@@ -0,0 +1,50 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, CSSProperties } from 'react';
+import type { AnyD3Scale, ScaleInput } from '@octanejs/visx/scale';
+import type { LegendLabelProps } from './LegendLabel.tsrx';
+import type { FlexDirection, FormattedLabel, LabelFormatter, LabelFormatterFactory, LegendShape as LegendShapeType } from '../../types';
+export type LegendProps<Scale extends AnyD3Scale> = {
+    /** Optional render function override. */
+    children?: (labels: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>[]) => ReactNode;
+    /** Classname to be applied to legend container. */
+    className?: string;
+    /** Styles to be applied to the legend container. */
+    style?: CSSProperties;
+    /** Legend domain. */
+    domain?: ScaleInput<Scale>[];
+    /** Width of the legend shape. */
+    shapeWidth?: string | number;
+    /** Height of the legend shape. */
+    shapeHeight?: string | number;
+    /** Margin of the legend shape. */
+    shapeMargin?: string | number;
+    /** Flex-box alignment of legend item labels. */
+    labelAlign?: string;
+    /** `@octanejs/visx/scale` or `d3-scale` object used to generate the legend items. */
+    scale: Scale;
+    /** Flex-box flex of legend item labels. */
+    labelFlex?: string | number;
+    /** Margin of legend item labels. */
+    labelMargin?: string | number;
+    /** Margin of legend items. */
+    itemMargin?: string | number;
+    /** Flex direction of the legend itself. */
+    direction?: FlexDirection;
+    /** Flex direction of legend items. */
+    itemDirection?: FlexDirection;
+    /** Legend item fill accessor function. */
+    fill?: (label: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>) => string | undefined;
+    /** Legend item size accessor function. */
+    size?: (label: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>) => string | number | undefined;
+    /** Legend shape string preset or Element or Component. */
+    shape?: LegendShapeType<ScaleInput<Scale>, ReturnType<Scale>>;
+    /** Styles applied to legend shapes. */
+    shapeStyle?: (label: FormattedLabel<ScaleInput<Scale>, ReturnType<Scale>>) => CSSProperties;
+    /** Given a legend item and its index, returns an item label. */
+    labelFormat?: LabelFormatter<ScaleInput<Scale>>;
+    /** Given the legend scale and labelFormatter, returns a label with datum, index, value, and label. */
+    labelTransform?: LabelFormatterFactory<Scale>;
+    /** Additional props to be set on LegendLabel. */
+    legendLabelProps?: Partial<LegendLabelProps>;
+};
+export default function Legend<Scale extends AnyD3Scale>({ className, style, scale, shape, domain: inputDomain, fill, size, labelFormat, labelTransform, shapeWidth, shapeHeight, shapeMargin, shapeStyle, labelAlign, labelFlex, labelMargin, itemMargin, direction, itemDirection, legendLabelProps, children, ...legendItemProps }: LegendProps<Scale>): import("react").JSX.Element;

package/src/legend/legends/Linear.tsrx

@@ -0,0 +1,23 @@
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+import Legend from './Legend/index.tsrx';
+import defaultDomain from '../util/defaultDomain';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyLinearScale = PickD3Scale<'linear', any>;
+
+export type LegendLinearProps<Scale extends AnyLinearScale> = {
+		/** Number of discrete steps to show in the legend. The scale domain is divided into this many intervals. */
+		steps?: number;
+	} & LegendProps<Scale>;
+
+/** Linear scales map from continuous inputs to continuous outputs. */
+export default function Linear<Scale extends AnyLinearScale>({
+	scale,
+	domain: inputDomain,
+	steps = 5,
+	...restProps
+}: LegendLinearProps<Scale>) {
+	const domain = inputDomain || defaultDomain({ steps, scale });
+	return <Legend scale={scale} domain={domain} {...restProps} />;
+}

package/src/legend/legends/Linear.tsrx.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+type AnyLinearScale = PickD3Scale<'linear', any>;
+export type LegendLinearProps<Scale extends AnyLinearScale> = {
+    /** Number of discrete steps to show in the legend. The scale domain is divided into this many intervals. */
+    steps?: number;
+} & LegendProps<Scale>;
+/** Linear scales map from continuous inputs to continuous outputs. */
+export default function Linear<Scale extends AnyLinearScale>({ scale, domain: inputDomain, steps, ...restProps }: LegendLinearProps<Scale>): import("react").JSX.Element;
+export {};

package/src/legend/legends/Ordinal.tsrx

@@ -0,0 +1,13 @@
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+import Legend from './Legend/index.tsrx';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyOrdinalScale = PickD3Scale<'ordinal', any, any>;
+
+export type LegendOrdinalProps<Scale extends AnyOrdinalScale> = LegendProps<Scale>;
+
+/** Ordinal scales map from strings to an Output type. */
+export default function Ordinal<Scale extends AnyOrdinalScale>(props: LegendOrdinalProps<Scale>) {
+	return <Legend {...props} />;
+}

package/src/legend/legends/Ordinal.tsrx.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+type AnyOrdinalScale = PickD3Scale<'ordinal', any, any>;
+export type LegendOrdinalProps<Scale extends AnyOrdinalScale> = LegendProps<Scale>;
+/** Ordinal scales map from strings to an Output type. */
+export default function Ordinal<Scale extends AnyOrdinalScale>(props: LegendOrdinalProps<Scale>): import("react").JSX.Element;
+export {};

package/src/legend/legends/Quantile.tsrx

@@ -0,0 +1,53 @@
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+import Legend from './Legend/index.tsrx';
+import type { LabelFormatterFactory } from '../types';
+import identity from '../util/identity';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyQuantileScale = PickD3Scale<'quantile', any>;
+
+type FactoryProps = {
+	/** The delimiter string to use between the min and max values in the label (e.g., '-' renders as '0 - 10'). */
+	labelDelimiter?: string;
+};
+
+export type LegendQuantileProps<Scale extends AnyQuantileScale> = LegendProps<Scale> & FactoryProps;
+
+function labelFormatterFactoryFactory<Scale extends AnyQuantileScale>({
+	labelDelimiter,
+}: FactoryProps): LabelFormatterFactory<Scale> {
+	return ({ scale, labelFormat }) => (datum, index) => {
+		const [x0, x1] = scale.invertExtent(scale(datum));
+		return {
+			extent: [x0, x1],
+			text: `${labelFormat(x0, index)} ${labelDelimiter} ${labelFormat(x1, index)}`,
+			value: scale(x0),
+			datum,
+			index,
+		};
+	};
+}
+
+/** A Quantile scale takes a number input and returns an Output. */
+export default function Quantile<Scale extends AnyQuantileScale>({
+	domain: inputDomain,
+	scale,
+	labelFormat = identity,
+	labelTransform: inputLabelTransform,
+	labelDelimiter = '-',
+	...restProps
+}: LegendQuantileProps<Scale>) {
+	// transform range into input values because it may contain more elements
+	const domain = inputDomain || scale.range().map((output) => scale.invertExtent(output)[0]);
+	const labelTransform =
+		inputLabelTransform || labelFormatterFactoryFactory<Scale>({ labelDelimiter });
+
+	return <Legend
+		scale={scale}
+		domain={domain}
+		labelFormat={labelFormat}
+		labelTransform={labelTransform}
+		{...restProps}
+	/>;
+}

package/src/legend/legends/Quantile.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+type AnyQuantileScale = PickD3Scale<'quantile', any>;
+type FactoryProps = {
+    /** The delimiter string to use between the min and max values in the label (e.g., '-' renders as '0 - 10'). */
+    labelDelimiter?: string;
+};
+export type LegendQuantileProps<Scale extends AnyQuantileScale> = LegendProps<Scale> & FactoryProps;
+/** A Quantile scale takes a number input and returns an Output. */
+export default function Quantile<Scale extends AnyQuantileScale>({ domain: inputDomain, scale, labelFormat, labelTransform: inputLabelTransform, labelDelimiter, ...restProps }: LegendQuantileProps<Scale>): import("react").JSX.Element;
+export {};

package/src/legend/legends/Size.tsrx

@@ -0,0 +1,37 @@
+import type { D3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+import Legend from './Legend/index.tsrx';
+import labelTransformFactory from '../util/labelTransformFactory';
+import defaultDomain from '../util/defaultDomain';
+import identity from '../util/identity';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnySizeScale = D3Scale<number, any, any>;
+
+export type LegendSizeProps<Scale extends AnySizeScale> = {
+		/** Number of discrete steps to show in the legend. The scale domain is divided into this many intervals. */
+		steps?: number;
+	} & LegendProps<Scale>;
+
+/**
+ * A Size legend component that creates a legend with discrete size intervals.
+ * Useful for visualizing continuous numeric data with size-based scales.
+ */
+export default function Size<Scale extends AnySizeScale>({
+	scale,
+	domain: inputDomain,
+	steps = 5,
+	labelFormat = identity,
+	labelTransform = labelTransformFactory,
+	...restProps
+}: LegendSizeProps<Scale>) {
+	const domain = inputDomain || defaultDomain({ steps, scale });
+
+	return <Legend
+		scale={scale}
+		domain={domain}
+		labelFormat={labelFormat}
+		labelTransform={labelTransform}
+		{...restProps}
+	/>;
+}

package/src/legend/legends/Size.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { D3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+type AnySizeScale = D3Scale<number, any, any>;
+export type LegendSizeProps<Scale extends AnySizeScale> = {
+    /** Number of discrete steps to show in the legend. The scale domain is divided into this many intervals. */
+    steps?: number;
+} & LegendProps<Scale>;
+/**
+ * A Size legend component that creates a legend with discrete size intervals.
+ * Useful for visualizing continuous numeric data with size-based scales.
+ */
+export default function Size<Scale extends AnySizeScale>({ scale, domain: inputDomain, steps, labelFormat, labelTransform, ...restProps }: LegendSizeProps<Scale>): import("react").JSX.Element;
+export {};

package/src/legend/legends/Threshold.tsrx

@@ -0,0 +1,108 @@
+import type { PickD3Scale, ScaleInput } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+import Legend from './Legend/index.tsrx';
+import type { LabelFormatterFactory } from '../types';
+import identity from '../util/identity';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyThresholdScale = PickD3Scale<'threshold', any, any, any>;
+
+const formatZero = (label: unknown) => (label === 0 ? '0' : label || '');
+
+type TransformProps = {
+	/** The delimiter string to use between threshold values (e.g., '-' renders as '0 - 10'). */
+	labelDelimiter?: string;
+	/** The prefix to use for the lower threshold label (e.g., '<' renders as '< 10'). */
+	labelLower?: string;
+	/** The prefix to use for the upper threshold label (e.g., '>' renders as '> 100'). */
+	labelUpper?: string;
+};
+
+export type LegendThresholdProps<Scale extends AnyThresholdScale> =
+	LegendProps<Scale> & TransformProps & {
+		labelTransform?: LabelFormatterFactory<Scale>;
+	};
+
+/** Default transform implicitly assumes that Datum is of type number. */
+function defaultTransform<Scale extends AnyThresholdScale>({
+	labelDelimiter,
+	labelLower,
+	labelUpper,
+}: TransformProps): LabelFormatterFactory<Scale> {
+	return ({ scale, labelFormat }) => {
+		const scaleRange = scale.range();
+
+		return (d, i) => {
+			const [d0, d1] =
+				scaleRange.length >= i ? scale.invertExtent(scaleRange[i]) : [undefined, undefined];
+
+			let delimiter = ` ${labelDelimiter} `;
+			let text = '';
+			let value: number | ScaleInput<Scale> | undefined;
+
+			if (d0 == null && typeof d1 === 'number') {
+				// lower threshold e.g., [undefined, number]
+				delimiter = labelLower || delimiter;
+				value = d1 - Math.abs(2 * d1 - 1); // guarantees a value smaller than the lower threshold
+				text = `${delimiter}${formatZero(labelFormat(d1, i))}`;
+			} else if (d0 != null && d1 != null) {
+				// threshold step
+				value = d;
+				text = `${formatZero(labelFormat(d0, i))}${delimiter}${formatZero(labelFormat(d1, i))}`;
+			} else if (typeof d0 === 'number' && d1 == null) {
+				// upper threshold e.g., [number, undefined]
+				delimiter = labelUpper || delimiter;
+				value = d0 + Math.abs(2 * d0 + 1); // // guarantees a value larger than the upper threshold
+				text = `${delimiter}${formatZero(labelFormat(d0, i))}`;
+			}
+
+			return {
+				extent: [d0, d1],
+				value: scale(value),
+				text,
+				datum: d,
+				index: i,
+			};
+		};
+	};
+}
+
+/**
+ * A Threshold legend component for threshold scales.
+ * Threshold scales map continuous input values to discrete output values based on threshold boundaries.
+ * This component displays the threshold ranges with customizable delimiters and labels.
+ */
+export default function Threshold<Scale extends AnyThresholdScale>({
+	scale,
+	domain: inputDomain,
+	labelFormat = identity,
+	labelTransform: inputLabelTransform,
+	labelDelimiter = 'to',
+	labelLower = 'Less than ',
+	labelUpper = 'More than ',
+	...restProps
+}: LegendThresholdProps<Scale>) {
+	// d3 docs specify that for n values in a domain, there should be n+1 values in the range
+	// https://github.com/d3/d3-scale#threshold_domain
+	// therefore if a domain is not specified we transform the range into input values
+	// because it should contain more elements
+
+	const domain =
+		inputDomain || scale.range().map((output) => scale.invertExtent(output)[0] as Range);
+
+	const labelTransform =
+		inputLabelTransform ||
+			defaultTransform<Scale>({
+				labelDelimiter,
+				labelLower,
+				labelUpper,
+			});
+
+	return <Legend
+		scale={scale}
+		domain={domain}
+		labelFormat={labelFormat}
+		labelTransform={labelTransform}
+		{...restProps}
+	/>;
+}

package/src/legend/legends/Threshold.tsrx.d.ts

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { LegendProps } from './Legend/index.tsrx';
+import type { LabelFormatterFactory } from '../types';
+type AnyThresholdScale = PickD3Scale<'threshold', any, any, any>;
+type TransformProps = {
+    /** The delimiter string to use between threshold values (e.g., '-' renders as '0 - 10'). */
+    labelDelimiter?: string;
+    /** The prefix to use for the lower threshold label (e.g., '<' renders as '< 10'). */
+    labelLower?: string;
+    /** The prefix to use for the upper threshold label (e.g., '>' renders as '> 100'). */
+    labelUpper?: string;
+};
+export type LegendThresholdProps<Scale extends AnyThresholdScale> = LegendProps<Scale> & TransformProps & {
+    labelTransform?: LabelFormatterFactory<Scale>;
+};
+/**
+ * A Threshold legend component for threshold scales.
+ * Threshold scales map continuous input values to discrete output values based on threshold boundaries.
+ * This component displays the threshold ranges with customizable delimiters and labels.
+ */
+export default function Threshold<Scale extends AnyThresholdScale>({ scale, domain: inputDomain, labelFormat, labelTransform: inputLabelTransform, labelDelimiter, labelLower, labelUpper, ...restProps }: LegendThresholdProps<Scale>): import("react").JSX.Element;
+export {};

package/src/legend/shapes/Circle.tsrx

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'react';
+import { Group } from '@octanejs/visx/group';
+
+export type ShapeCircleProps = {
+	/** The fill color for the circle. */
+	fill?: string;
+	/** Width of the container. The circle radius is derived from max(width, height). */
+	width?: string | number;
+	/** Height of the container. The circle radius is derived from max(width, height). */
+	height?: string | number;
+	/** Additional CSS styles to apply to the circle. */
+	style?: CSSProperties;
+};
+
+export default function ShapeCircle({ fill, width, height, style }: ShapeCircleProps) {
+	const cleanWidth =
+		typeof width === 'string' || typeof width === 'undefined' ? 0 : width;
+	const cleanHeight =
+		typeof height === 'string' || typeof height === 'undefined' ? 0 : height;
+	const size = Math.max(cleanWidth, cleanHeight);
+	const radius = size / 2;
+	return <svg width={size} height={size}>
+		<Group top={radius} left={radius}>
+			<circle r={radius} fill={fill} style={style} />
+		</Group>
+	</svg>;
+}

package/src/legend/shapes/Circle.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CSSProperties } from 'react';
+export type ShapeCircleProps = {
+    /** The fill color for the circle. */
+    fill?: string;
+    /** Width of the container. The circle radius is derived from max(width, height). */
+    width?: string | number;
+    /** Height of the container. The circle radius is derived from max(width, height). */
+    height?: string | number;
+    /** Additional CSS styles to apply to the circle. */
+    style?: CSSProperties;
+};
+export default function ShapeCircle({ fill, width, height, style }: ShapeCircleProps): import("react").JSX.Element;

package/src/legend/shapes/Line.tsrx

@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'react';
+import { Group } from '@octanejs/visx/group';
+
+export type ShapeShapeLineProps = {
+	/** The stroke color for the line. Note: Despite the name, this is used as the stroke, not fill. */
+	fill?: string;
+	/** Width of the line. */
+	width?: string | number;
+	/** Height of the container. The line is vertically centered. */
+	height?: string | number;
+	/** Additional CSS styles to apply to the line. The strokeWidth from style is used for line thickness. */
+	style?: CSSProperties;
+};
+
+export default function ShapeLine({ fill, width, height, style }: ShapeShapeLineProps) {
+	const cleanHeight =
+		typeof height === 'string' || typeof height === 'undefined' ? 0 : height;
+	const lineThickness =
+		typeof style?.strokeWidth === 'number' ? style?.strokeWidth : 2;
+	return <svg width={width} height={height}>
+		<Group top={cleanHeight / 2 - lineThickness / 2}>
+			<line
+				x1={0}
+				x2={width}
+				y1={0}
+				y2={0}
+				stroke={fill}
+				strokeWidth={lineThickness}
+				style={style}
+			/>
+		</Group>
+	</svg>;
+}

package/src/legend/shapes/Line.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CSSProperties } from 'react';
+export type ShapeShapeLineProps = {
+    /** The stroke color for the line. Note: Despite the name, this is used as the stroke, not fill. */
+    fill?: string;
+    /** Width of the line. */
+    width?: string | number;
+    /** Height of the container. The line is vertically centered. */
+    height?: string | number;
+    /** Additional CSS styles to apply to the line. The strokeWidth from style is used for line thickness. */
+    style?: CSSProperties;
+};
+export default function ShapeLine({ fill, width, height, style }: ShapeShapeLineProps): import("react").JSX.Element;

package/src/legend/shapes/Rect.tsrx

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+
+export type ShapeRectProps = {
+	/** The fill color for the rectangle. */
+	fill?: string;
+	/** Width of the rectangle. */
+	width?: string | number;
+	/** Height of the rectangle. */
+	height?: string | number;
+	/** Additional CSS styles to apply to the rectangle. */
+	style?: CSSProperties;
+};
+
+export default function ShapeRect({ fill, width, height, style }: ShapeRectProps) {
+	return <div
+		style={{
+			width,
+			height,
+			background: fill,
+			...style,
+		}}
+	/>;
+}

package/src/legend/shapes/Rect.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CSSProperties } from 'react';
+export type ShapeRectProps = {
+    /** The fill color for the rectangle. */
+    fill?: string;
+    /** Width of the rectangle. */
+    width?: string | number;
+    /** Height of the rectangle. */
+    height?: string | number;
+    /** Additional CSS styles to apply to the rectangle. */
+    style?: CSSProperties;
+};
+export default function ShapeRect({ fill, width, height, style }: ShapeRectProps): import("react").JSX.Element;

package/src/legend/types/index.ts

@@ -0,0 +1,64 @@
+import type { AnyD3Scale, ScaleInput } from '@octanejs/visx/scale';
+import type { ComponentClass, CSSProperties, FC } from 'react';
+
+export type LabelFormatterFactory<Scale extends AnyD3Scale> = (args: {
+	scale: Scale;
+	labelFormat: LabelFormatter<ScaleInput<Scale>>;
+}) => ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>>;
+
+export type LabelFormatter<Datum> = (
+	item: Datum,
+	itemIndex: number,
+) => Datum | string | number | undefined;
+
+export type FormattedLabel<Datum, Output, ExtraAttributes = {}> = {
+	datum: Datum;
+	index: number;
+	text: string;
+	value?: Output;
+} & ExtraAttributes;
+
+export type ItemTransformer<Datum, Output> = (
+	item: Datum,
+	itemIndex: number,
+) => FormattedLabel<Datum, Output>;
+
+export type RenderShapeProvidedProps<Data, Output> = {
+	width?: string | number;
+	height?: string | number;
+	label: FormattedLabel<Data, Output>;
+	item: Data;
+	itemIndex: number;
+	fill?: string;
+	size?: string | number;
+	style?: CSSProperties;
+};
+
+export type LegendShape<Data, Output> =
+	| 'rect'
+	| 'circle'
+	| 'line'
+	| FC<RenderShapeProvidedProps<Data, Output>>
+	| ComponentClass<RenderShapeProvidedProps<Data, Output>>;
+
+export type FillAccessor<Datum, Output> = (
+	label: FormattedLabel<Datum, Output>,
+) => string | undefined;
+
+export type SizeAccessor<Datum, Output> = (
+	label: FormattedLabel<Datum, Output>,
+) => string | number | undefined;
+
+export type ShapeStyleAccessor<Datum, Output> = (
+	label: FormattedLabel<Datum, Output>,
+) => CSSProperties | undefined; // TODO: ideally this would support SVGProps, but this is invalid for Rect/Circle shapes
+
+export type FlexDirection =
+	| 'inherit'
+	| 'initial'
+	| 'revert'
+	| 'unset'
+	| 'column'
+	| 'column-reverse'
+	| 'row'
+	| 'row-reverse';

package/src/legend/util/defaultDomain.ts

@@ -0,0 +1,21 @@
+import type { D3Scale } from '@octanejs/visx/scale';
+
+export default function defaultDomain<Scale extends D3Scale<number>>({
+	steps = 5,
+	scale,
+}: {
+	steps: number;
+	scale: Scale;
+}) {
+	const domain = scale.domain();
+	const start = domain[0];
+	const end = domain[domain.length - 1];
+	if (typeof start === 'number' && typeof end === 'number') {
+		const step = (end - start) / (steps - 1);
+		return new Array(steps).fill(1).reduce((acc, cur, i) => {
+			acc.push(start + i * step);
+			return acc;
+		}, []);
+	}
+	return [];
+}

package/src/legend/util/identity.ts

@@ -0,0 +1,3 @@
+export default function identity<T>(x: T) {
+	return x;
+}

package/src/legend/util/labelTransformFactory.ts

@@ -0,0 +1,18 @@
+import type { AnyD3Scale, ScaleInput } from '@octanejs/visx/scale';
+import type { LabelFormatter, ItemTransformer } from '../types';
+
+/** Returns a function which takes a Datum and index as input, and returns a formatted label object. */
+export default function labelTransformFactory<Scale extends AnyD3Scale>({
+	scale,
+	labelFormat,
+}: {
+	scale: Scale;
+	labelFormat: LabelFormatter<ScaleInput<Scale>>;
+}): ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>> {
+	return (d, i) => ({
+		datum: d,
+		index: i,
+		text: `${labelFormat(d, i)}`,
+		value: scale(d),
+	});
+}