@octanejs/visx 0.1.0

package/src/scale/utils/inferScaleType.ts

@@ -0,0 +1,60 @@
+import type { ScaleTime } from 'd3-scale';
+import type { StringLike } from '../types/Base';
+import type { DefaultThresholdInput, D3Scale } from '../types/Scale';
+import type { ScaleType } from '../types/ScaleConfig';
+import isUtcScale from './isUtcScale';
+
+export default function inferScaleType<
+	Output,
+	DiscreteInput extends StringLike,
+	ThresholdInput extends DefaultThresholdInput,
+>(scale: D3Scale<Output, DiscreteInput, ThresholdInput>): ScaleType {
+	// Try a sequence of typeguards to figure out the scale type
+
+	if ('paddingInner' in scale) {
+		return 'band';
+	}
+
+	if ('padding' in scale) {
+		return 'point';
+	}
+
+	if ('quantiles' in scale) {
+		return 'quantile';
+	}
+
+	if ('base' in scale) {
+		return 'log';
+	}
+
+	if ('exponent' in scale) {
+		return scale.exponent() === 0.5 ? 'sqrt' : 'pow';
+	}
+
+	if ('constant' in scale) {
+		return 'symlog';
+	}
+
+	if ('clamp' in scale) {
+		// Radial scales don't have interpolate method (unlike linear/time/utc)
+		if (!('interpolate' in scale)) {
+			return 'radial';
+		}
+		// Linear, Time or Utc scales
+		const ticks = (scale as any).ticks?.();
+		if (ticks?.[0] instanceof Date) {
+			return isUtcScale(scale as ScaleTime<Output, Output>) ? 'utc' : 'time';
+		}
+		return 'linear';
+	}
+
+	if ('nice' in scale) {
+		return 'quantize';
+	}
+
+	if ('invertExtent' in scale) {
+		return 'threshold';
+	}
+
+	return 'ordinal';
+}

package/src/scale/utils/isUtcScale.ts

@@ -0,0 +1,16 @@
+import type { ScaleTime } from 'd3-scale';
+
+const TEST_TIME = new Date(Date.UTC(2020, 1, 2, 3, 4, 5));
+const TEST_FORMAT = '%Y-%m-%d %H:%M';
+
+/**
+ * Check if the scale is UTC or Time scale
+ * When local time is equal to UTC, always return true
+ * @param scale time or utc scale
+ */
+export default function isUtcScale<Output>(scale: ScaleTime<Output, Output>) {
+	// The only difference between time and utc scale is
+	// whether the tick format function is utcFormat or timeFormat
+	const output = scale.tickFormat(1, TEST_FORMAT)(TEST_TIME);
+	return output === '2020-02-02 03:04';
+}

package/src/scale/utils/scaleCanBeZeroed.ts

@@ -0,0 +1,25 @@
+import type { DefaultOutput } from '../types/Base';
+import type {
+	LinearScaleConfig,
+	PowScaleConfig,
+	QuantizeScaleConfig,
+	ScaleConfig,
+	ScaleType,
+	SqrtScaleConfig,
+	SymlogScaleConfig,
+} from '../types/ScaleConfig';
+
+type ZeroableScaleConfigs<Output = DefaultOutput> =
+	| LinearScaleConfig<Output>
+	| PowScaleConfig<Output>
+	| SqrtScaleConfig<Output>
+	| SymlogScaleConfig<Output>
+	| QuantizeScaleConfig<Output>;
+
+const zeroableScaleTypes = new Set<ScaleType>(['linear', 'pow', 'quantize', 'sqrt', 'symlog']);
+
+export default function scaleCanBeZeroed<Output = DefaultOutput>(
+	scaleConfig: ScaleConfig<Output>,
+): scaleConfig is ZeroableScaleConfigs<Output> {
+	return zeroableScaleTypes.has(scaleConfig.type);
+}

package/src/scale/utils/toString.ts

@@ -0,0 +1,5 @@
+import type { StringLike } from '../types/Base';
+
+export default function toString<T extends StringLike>(x?: T) {
+	return x?.toString();
+}

package/src/shape/index.ts

@@ -0,0 +1,96 @@
+// @octanejs/visx/shape
+export { default as Arc } from './shapes/Arc.tsrx';
+export { default as Pie } from './shapes/Pie.tsrx';
+export { default as Line } from './shapes/Line.tsrx';
+export { default as LinePath } from './shapes/LinePath.tsrx';
+export { default as LineRadial } from './shapes/LineRadial.tsrx';
+export { default as Area } from './shapes/Area.tsrx';
+export { default as AreaClosed } from './shapes/AreaClosed.tsrx';
+export { default as AreaStack } from './shapes/AreaStack.tsrx';
+export { default as Bar } from './shapes/Bar.tsrx';
+export { default as BarRounded } from './shapes/BarRounded.tsrx';
+export { default as BarGroup } from './shapes/BarGroup.tsrx';
+export { default as BarGroupHorizontal } from './shapes/BarGroupHorizontal.tsrx';
+export { default as BarStack } from './shapes/BarStack.tsrx';
+export { default as BarStackHorizontal } from './shapes/BarStackHorizontal.tsrx';
+export { default as Stack } from './shapes/Stack.tsrx';
+export { default as stackOffset, STACK_OFFSETS, STACK_OFFSET_NAMES } from './util/stackOffset';
+export { default as stackOrder, STACK_ORDERS, STACK_ORDER_NAMES } from './util/stackOrder';
+export { degreesToRadians } from './util/trigonometry';
+export { getX, getY, getSource, getTarget, getFirstItem, getSecondItem } from './util/accessors';
+export { default as getBandwidth } from './util/getBandwidth';
+export {
+	default as LinkHorizontal,
+	pathHorizontalDiagonal,
+} from './shapes/link/diagonal/LinkHorizontal.tsrx';
+export {
+	default as LinkVertical,
+	pathVerticalDiagonal,
+} from './shapes/link/diagonal/LinkVertical.tsrx';
+export { default as LinkRadial, pathRadialDiagonal } from './shapes/link/diagonal/LinkRadial.tsrx';
+export {
+	default as LinkHorizontalCurve,
+	pathHorizontalCurve,
+} from './shapes/link/curve/LinkHorizontalCurve.tsrx';
+export {
+	default as LinkVerticalCurve,
+	pathVerticalCurve,
+} from './shapes/link/curve/LinkVerticalCurve.tsrx';
+export {
+	default as LinkRadialCurve,
+	pathRadialCurve,
+} from './shapes/link/curve/LinkRadialCurve.tsrx';
+export {
+	default as LinkHorizontalLine,
+	pathHorizontalLine,
+} from './shapes/link/line/LinkHorizontalLine.tsrx';
+export {
+	default as LinkVerticalLine,
+	pathVerticalLine,
+} from './shapes/link/line/LinkVerticalLine.tsrx';
+export { default as LinkRadialLine, pathRadialLine } from './shapes/link/line/LinkRadialLine.tsrx';
+export {
+	default as LinkHorizontalStep,
+	pathHorizontalStep,
+} from './shapes/link/step/LinkHorizontalStep.tsrx';
+export {
+	default as LinkVerticalStep,
+	pathVerticalStep,
+} from './shapes/link/step/LinkVerticalStep.tsrx';
+export { default as LinkRadialStep, pathRadialStep } from './shapes/link/step/LinkRadialStep.tsrx';
+export { default as Polygon, getPoints, getPoint } from './shapes/Polygon.tsrx';
+export { default as Circle } from './shapes/Circle.tsrx';
+export { default as SplitLinePath } from './shapes/SplitLinePath.tsrx';
+
+// Export factory functions
+export * from './util/D3ShapeFactories';
+export { arc as arcPath, area as areaPath, line as linePath } from './util/D3ShapeFactories';
+
+export type * from './types';
+export type { StackOffset } from './util/stackOffset';
+export type { StackOrder } from './util/stackOrder';
+export type { ArcProps } from './shapes/Arc.tsrx';
+export type { AreaProps } from './shapes/Area.tsrx';
+export type { AreaClosedProps } from './shapes/AreaClosed.tsrx';
+export type { AreaStackProps } from './shapes/AreaStack.tsrx';
+export type { BarProps } from './shapes/Bar.tsrx';
+export type { BarGroupProps } from './shapes/BarGroup.tsrx';
+export type { BarGroupHorizontalProps } from './shapes/BarGroupHorizontal.tsrx';
+export type { BarRoundedProps } from './shapes/BarRounded.tsrx';
+export type { BarStackProps } from './shapes/BarStack.tsrx';
+export type { BarStackHorizontalProps } from './shapes/BarStackHorizontal.tsrx';
+export type { CircleProps } from './shapes/Circle.tsrx';
+export type { LineProps } from './shapes/Line.tsrx';
+export type { LinePathProps } from './shapes/LinePath.tsrx';
+export type { LineRadialProps } from './shapes/LineRadial.tsrx';
+export type { PieProps, ProvidedProps as PieProvidedProps } from './shapes/Pie.tsrx';
+export type { PolygonProps } from './shapes/Polygon.tsrx';
+export type { SplitLinePathProps } from './shapes/SplitLinePath.tsrx';
+export type { StackProps } from './shapes/Stack.tsrx';
+export type { LinkHorizontalCurveProps } from './shapes/link/curve/LinkHorizontalCurve.tsrx';
+export type { LinkRadialCurveProps } from './shapes/link/curve/LinkRadialCurve.tsrx';
+export type { LinkVerticalCurveProps } from './shapes/link/curve/LinkVerticalCurve.tsrx';
+export type { LinkHorizontalDiagonalProps } from './shapes/link/diagonal/LinkHorizontal.tsrx';
+export type { LinkHorizontalLineProps } from './shapes/link/line/LinkHorizontalLine.tsrx';
+export type { LinkRadialLineProps } from './shapes/link/line/LinkRadialLine.tsrx';
+export type { LinkVerticalLineProps } from './shapes/link/line/LinkVerticalLine.tsrx';

package/src/shape/react/index.ts

@@ -0,0 +1,5 @@
+'use client';
+
+export { default as usePie } from './usePie.tsrx';
+
+export type { PieArcDatum, UsePieOptions, UsePieResult } from './usePie.tsrx';

package/src/shape/react/usePie.tsrx

@@ -0,0 +1,60 @@
+import type { Arc as ArcType, PieArcDatum as PieArcDatumType, Pie as PieType } from 'd3-shape';
+import type { $TSFIXME, ArcPathConfig, PiePathConfig } from '../types';
+import { arc as arcPath, pie as piePath } from '../util/D3ShapeFactories';
+
+const emptyData: never[] = [];
+
+export type PieArcDatum<Datum> = PieArcDatumType<Datum>;
+
+export type UsePieOptions<Datum> = {
+		/** Array of data to generate a pie for. */
+		data?: Datum[];
+		/** Invoked for each datum, returns the value for a pie segment. */
+		pieValue?: PiePathConfig<Datum>['value'];
+		/** Comparator function to sort arcs, overridden by pieSortValues if defined. */
+		pieSort?: PiePathConfig<Datum>['sort'];
+		/** Comparator function to sort arc values, overrides pieSort if defined. */
+		pieSortValues?: PiePathConfig<Datum>['sortValues'];
+	} & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> & Pick<ArcPathConfig<PieArcDatum<Datum>>, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'padRadius'>;
+
+export type UsePieResult<Datum> = {
+	path: ArcType<$TSFIXME, PieArcDatum<Datum>>;
+	arcs: PieArcDatum<Datum>[];
+	pie: PieType<$TSFIXME, Datum>;
+};
+
+export default function usePie<Datum>(
+	{
+		data = emptyData,
+		innerRadius = 0,
+		outerRadius,
+		cornerRadius,
+		startAngle,
+		endAngle,
+		padAngle,
+		padRadius,
+		pieSort,
+		pieSortValues,
+		pieValue,
+	}: UsePieOptions<Datum> = {},
+): UsePieResult<Datum> {
+	const path = arcPath<PieArcDatum<Datum>>({
+		innerRadius,
+		outerRadius,
+		cornerRadius,
+		padRadius,
+	});
+
+	const pie = piePath<Datum>({
+		startAngle,
+		endAngle,
+		padAngle,
+		value: pieValue,
+		sort: pieSort,
+		sortValues: pieSortValues,
+	});
+
+	const arcs = pie(data);
+
+	return { arcs, path, pie };
+}

package/src/shape/react/usePie.tsrx.d.ts

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { Arc as ArcType, PieArcDatum as PieArcDatumType, Pie as PieType } from 'd3-shape';
+import type { $TSFIXME, ArcPathConfig, PiePathConfig } from '../types';
+export type PieArcDatum<Datum> = PieArcDatumType<Datum>;
+export type UsePieOptions<Datum> = {
+    /** Array of data to generate a pie for. */
+    data?: Datum[];
+    /** Invoked for each datum, returns the value for a pie segment. */
+    pieValue?: PiePathConfig<Datum>['value'];
+    /** Comparator function to sort arcs, overridden by pieSortValues if defined. */
+    pieSort?: PiePathConfig<Datum>['sort'];
+    /** Comparator function to sort arc values, overrides pieSort if defined. */
+    pieSortValues?: PiePathConfig<Datum>['sortValues'];
+} & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> & Pick<ArcPathConfig<PieArcDatum<Datum>>, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'padRadius'>;
+export type UsePieResult<Datum> = {
+    path: ArcType<$TSFIXME, PieArcDatum<Datum>>;
+    arcs: PieArcDatum<Datum>[];
+    pie: PieType<$TSFIXME, Datum>;
+};
+export default function usePie<Datum>({ data, innerRadius, outerRadius, cornerRadius, startAngle, endAngle, padAngle, padRadius, pieSort, pieSortValues, pieValue, }?: UsePieOptions<Datum>): UsePieResult<Datum>;

package/src/shape/shapes/Arc.tsrx

@@ -0,0 +1,60 @@
+import type { ReactNode, Ref } from 'react';
+import cx from 'classnames';
+import type { Arc as ArcType } from 'd3-shape';
+import type { $TSFIXME, AddSVGProps, ArcPathConfig } from '../types';
+import { arc } from '../util/D3ShapeFactories';
+
+export type ArcProps<Datum> = {
+		/** className applied to path element. */
+		className?: string;
+		/** A Datum for which to generate an arc. */
+		data?: Datum;
+		/** Override render function which is passed the configured arc generator as input. */
+		children?: (args: { path: ArcType<$TSFIXME, Datum> }) => ReactNode;
+		/** React ref to the path element. */
+		innerRef?: Ref<SVGPathElement>;
+	} & ArcPathConfig<Datum>;
+
+export default function Arc<Datum>({
+	className,
+	data,
+	innerRadius,
+	outerRadius,
+	cornerRadius,
+	startAngle,
+	endAngle,
+	padAngle,
+	padRadius,
+	children,
+	innerRef,
+	...restProps
+}: AddSVGProps<ArcProps<Datum>, SVGPathElement>) {
+	const path = arc({
+		innerRadius,
+		outerRadius,
+		cornerRadius,
+		startAngle,
+		endAngle,
+		padAngle,
+		padRadius,
+	});
+
+	if (children) return <>
+		{children({ path })}
+	</>;
+	if (
+		!data && (startAngle == null || endAngle == null || innerRadius == null || outerRadius == null)
+	) {
+		console.warn(
+			'[@octanejs/visx/shape/Arc]: expected data because one of startAngle, endAngle, innerRadius, outerRadius is undefined. Bailing.',
+		);
+		return null;
+	}
+
+	return <path
+		ref={innerRef}
+		className={cx('visx-arc', className)}
+		d={path(data as Datum) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/Arc.tsrx.d.ts

@@ -0,0 +1,17 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, Ref } from 'react';
+import type { Arc as ArcType } from 'd3-shape';
+import type { $TSFIXME, AddSVGProps, ArcPathConfig } from '../types';
+export type ArcProps<Datum> = {
+    /** className applied to path element. */
+    className?: string;
+    /** A Datum for which to generate an arc. */
+    data?: Datum;
+    /** Override render function which is passed the configured arc generator as input. */
+    children?: (args: {
+        path: ArcType<$TSFIXME, Datum>;
+    }) => ReactNode;
+    /** React ref to the path element. */
+    innerRef?: Ref<SVGPathElement>;
+} & ArcPathConfig<Datum>;
+export default function Arc<Datum>({ className, data, innerRadius, outerRadius, cornerRadius, startAngle, endAngle, padAngle, padRadius, children, innerRef, ...restProps }: AddSVGProps<ArcProps<Datum>, SVGPathElement>): import("react").JSX.Element | null;

package/src/shape/shapes/Area.tsrx

@@ -0,0 +1,32 @@
+import cx from 'classnames';
+import type { AddSVGProps, BaseAreaProps } from '../types';
+import { area } from '../util/D3ShapeFactories';
+
+export type AreaProps<Datum> = BaseAreaProps<Datum>;
+
+export default function Area<Datum>({
+	children,
+	x,
+	x0,
+	x1,
+	y,
+	y0,
+	y1,
+	data = [],
+	defined = () => true,
+	className,
+	curve,
+	innerRef,
+	...restProps
+}: AddSVGProps<AreaProps<Datum>, SVGPathElement>) {
+	const path = area<Datum>({ x, x0, x1, y, y0, y1, defined, curve });
+	if (children) return <>
+		{children({ path })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-area', className)}
+		d={path(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/Area.tsrx.d.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AddSVGProps, BaseAreaProps } from '../types';
+export type AreaProps<Datum> = BaseAreaProps<Datum>;
+export default function Area<Datum>({ children, x, x0, x1, y, y0, y1, data, defined, className, curve, innerRef, ...restProps }: AddSVGProps<AreaProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/AreaClosed.tsrx

@@ -0,0 +1,47 @@
+import cx from 'classnames';
+import type { PositionScale, AddSVGProps, BaseAreaProps } from '../types';
+import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
+import { area } from '../util/D3ShapeFactories';
+
+export type AreaClosedProps<Datum> = BaseAreaProps<Datum> & {
+		yScale: PositionScale;
+	};
+
+export default function AreaClosed<Datum>({
+	x,
+	x0,
+	x1,
+	y,
+	y1,
+	y0,
+	yScale,
+	data = [],
+	defined = () => true,
+	className,
+	curve,
+	innerRef,
+	children,
+	...restProps
+}: AddSVGProps<AreaClosedProps<Datum>, SVGPathElement>) {
+	const path = area<Datum>({ x, x0, x1, defined, curve });
+	if (y0 == null) {
+		/**
+ * by default set the baseline to the first element of the yRange
+ * @TODO take the minimum instead?
+ */
+		path.y0(yScale.range()[0]);
+	} else {
+		setNumOrAccessor(path.y0, y0);
+	}
+	if (y && !y1) setNumOrAccessor(path.y1, y);
+	if (y1 && !y) setNumOrAccessor(path.y1, y1);
+	if (children) return <>
+		{children({ path })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-area-closed', className)}
+		d={path(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/AreaClosed.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PositionScale, AddSVGProps, BaseAreaProps } from '../types';
+export type AreaClosedProps<Datum> = BaseAreaProps<Datum> & {
+    yScale: PositionScale;
+};
+export default function AreaClosed<Datum>({ x, x0, x1, y, y1, y0, yScale, data, defined, className, curve, innerRef, children, ...restProps }: AddSVGProps<AreaClosedProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/AreaStack.tsrx

@@ -0,0 +1,78 @@
+import cx from 'classnames';
+import type { StackProps } from './Stack.tsrx';
+import Stack from './Stack.tsrx';
+import type { AddSVGProps, StackKey } from '../types';
+
+type PickProps =
+	| 'className'
+	| 'top'
+	| 'left'
+	| 'keys'
+	| 'data'
+	| 'curve'
+	| 'defined'
+	| 'x'
+	| 'x0'
+	| 'x1'
+	| 'y0'
+	| 'y1'
+	| 'value'
+	| 'order'
+	| 'offset'
+	| 'color'
+	| 'children';
+
+export type AreaStackProps<Datum, Key> = Pick<StackProps<Datum, Key>, PickProps>;
+
+export default function AreaStack<Datum, Key extends StackKey = StackKey>({
+	className,
+	top,
+	left,
+	keys,
+	data,
+	curve,
+	defined,
+	x,
+	x0,
+	x1,
+	y0,
+	y1,
+	value,
+	order,
+	offset,
+	color,
+	children,
+	...restProps
+}: AddSVGProps<AreaStackProps<Datum, Key>, SVGPathElement>) {
+	return <Stack
+		className={className}
+		top={top}
+		left={left}
+		keys={keys}
+		data={data}
+		curve={curve}
+		defined={defined}
+		x={x}
+		x0={x0}
+		x1={x1}
+		y0={y0}
+		y1={y1}
+		value={value}
+		order={order}
+		offset={offset}
+		color={color}
+		{...restProps}
+	>
+		{children ||
+			(({ stacks, path }) => stacks.map(
+				(series, i) =>
+					<path
+						className={cx('visx-area-stack', className)}
+						key={`area-stack-${i}-${series.key || ''}`}
+						d={path(series) || ''}
+						fill={color?.(series.key, i)}
+						{...restProps}
+					/>,
+			))}
+	</Stack>;
+}

package/src/shape/shapes/AreaStack.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { StackProps } from './Stack.tsrx';
+import type { AddSVGProps, StackKey } from '../types';
+type PickProps = 'className' | 'top' | 'left' | 'keys' | 'data' | 'curve' | 'defined' | 'x' | 'x0' | 'x1' | 'y0' | 'y1' | 'value' | 'order' | 'offset' | 'color' | 'children';
+export type AreaStackProps<Datum, Key> = Pick<StackProps<Datum, Key>, PickProps>;
+export default function AreaStack<Datum, Key extends StackKey = StackKey>({ className, top, left, keys, data, curve, defined, x, x0, x1, y0, y1, value, order, offset, color, children, ...restProps }: AddSVGProps<AreaStackProps<Datum, Key>, SVGPathElement>): import("react").JSX.Element;
+export {};

package/src/shape/shapes/Bar.tsrx

@@ -0,0 +1,18 @@
+import type { Ref } from 'react';
+import cx from 'classnames';
+import type { AddSVGProps } from '../types';
+
+export type BarProps = {
+	/** className to apply to rect element. */
+	className?: string;
+	/** reference to rect element. */
+	innerRef?: Ref<SVGRectElement>;
+};
+
+export default function Bar({
+	className,
+	innerRef,
+	...restProps
+}: AddSVGProps<BarProps, SVGRectElement>) {
+	return <rect ref={innerRef} className={cx('visx-bar', className)} {...restProps} />;
+}

package/src/shape/shapes/Bar.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { Ref } from 'react';
+import type { AddSVGProps } from '../types';
+export type BarProps = {
+    /** className to apply to rect element. */
+    className?: string;
+    /** reference to rect element. */
+    innerRef?: Ref<SVGRectElement>;
+};
+export default function Bar({ className, innerRef, ...restProps }: AddSVGProps<BarProps, SVGRectElement>): import("react").JSX.Element;