@octanejs/visx 0.1.0

package/src/brush/BrushHandle.tsrx.d.ts

@@ -0,0 +1,33 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
+import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
+import type { BrushPageOffset, BrushingType, ResizeTriggerAreas } from './types';
+type HandleProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type BrushHandleProps = {
+    stageWidth: number;
+    stageHeight: number;
+    brush: BrushState;
+    updateBrush: (update: UpdateBrush) => void;
+    onBrushStart?: (brush: DragArgs) => void;
+    onBrushEnd?: (brush: BrushState) => void;
+    type: ResizeTriggerAreas;
+    handle: HandleProps;
+    isControlled?: boolean;
+    isDragInProgress?: boolean;
+    onBrushHandleChange?: (type?: BrushingType, options?: BrushPageOffset) => void;
+    renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+};
+export type BrushHandleRenderProps = HandleProps & {
+    /** if brush extent is not active this prop is set to false */
+    isBrushActive: boolean;
+    className: string;
+};
+/** BrushHandle's are placed along the bounds of the brush and handle Drag events which update the passed brush. */
+export default function BrushHandle(props: BrushHandleProps): import("react").JSX.Element;
+export {};

package/src/brush/BrushOverlay.tsrx

@@ -0,0 +1,18 @@
+import type { CSSProperties, PointerEvent } from 'react';
+import { Bar } from '@octanejs/visx/shape';
+
+type BrushOverlayProps = {
+	width: number;
+	height: number;
+	style?: CSSProperties;
+	onClick?: (event: PointerEvent<SVGRectElement>) => void;
+	onDoubleClick?: (event: PointerEvent<SVGRectElement>) => void;
+	onPointerDown?: (event: PointerEvent<SVGRectElement>) => void;
+	onPointerLeave?: (event: PointerEvent<SVGRectElement>) => void;
+	onPointerMove?: (event: PointerEvent<SVGRectElement>) => void;
+	onPointerUp?: (event: PointerEvent<SVGRectElement>) => void;
+};
+
+export default function BrushOverlay(props: BrushOverlayProps) {
+	return <Bar className="visx-brush-overlay" fill="transparent" x={0} y={0} {...props} />;
+}

package/src/brush/BrushOverlay.tsrx.d.ts

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CSSProperties, PointerEvent } from 'react';
+type BrushOverlayProps = {
+    width: number;
+    height: number;
+    style?: CSSProperties;
+    onClick?: (event: PointerEvent<SVGRectElement>) => void;
+    onDoubleClick?: (event: PointerEvent<SVGRectElement>) => void;
+    onPointerDown?: (event: PointerEvent<SVGRectElement>) => void;
+    onPointerLeave?: (event: PointerEvent<SVGRectElement>) => void;
+    onPointerMove?: (event: PointerEvent<SVGRectElement>) => void;
+    onPointerUp?: (event: PointerEvent<SVGRectElement>) => void;
+};
+export default function BrushOverlay(props: BrushOverlayProps): import("react").JSX.Element;
+export {};

package/src/brush/BrushSelection.tsrx

@@ -0,0 +1,181 @@
+/* eslint react/jsx-handler-names: 0 */
+import type { SVGProps, PointerEvent } from 'react';
+import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
+import { Drag } from '@octanejs/visx/drag';
+
+import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
+import type { BrushPageOffset, BrushingType } from './types';
+import { getPageCoordinates } from './utils';
+
+const DRAGGING_OVERLAY_STYLES = { cursor: 'move' };
+
+type PointerHandler = (event: PointerEvent<SVGRectElement>) => void;
+
+export type BrushSelectionProps = {
+	width: number;
+	height: number;
+	stageWidth: number;
+	stageHeight: number;
+	brush: BrushState;
+	updateBrush: (update: UpdateBrush) => void;
+	onMoveSelectionChange?: (type?: BrushingType, options?: BrushPageOffset) => void;
+	onBrushStart?: (brush: DragArgs) => void;
+	onBrushEnd?: (brush: BrushState) => void;
+	disableDraggingSelection: boolean;
+	onMouseLeave?: PointerHandler;
+	onMouseMove?: PointerHandler;
+	onMouseUp?: PointerHandler;
+	onClick?: PointerHandler;
+	selectedBoxStyle: SVGProps<SVGRectElement>;
+	isControlled?: boolean;
+	isDragInProgress?: boolean;
+};
+
+export default function BrushSelection(props: BrushSelectionProps) {
+	function selectionDragStart(drag: DragArgs) {
+		const { onMoveSelectionChange, onBrushStart } = props;
+
+		if (onMoveSelectionChange) {
+			onMoveSelectionChange('move', getPageCoordinates(drag.event));
+		}
+		if (onBrushStart) {
+			onBrushStart(drag);
+		}
+	}
+
+	function selectionDragMove(drag: DragArgs) {
+		const { updateBrush, isControlled } = props;
+
+		if (isControlled) return;
+
+		updateBrush((prevBrush: BrushState) => {
+			const { x: x0, y: y0 } = prevBrush.start;
+			const { x: x1, y: y1 } = prevBrush.end;
+			const validDx =
+				drag.dx > 0
+					? Math.min(drag.dx, prevBrush.bounds.x1 - x1)
+					: Math.max(drag.dx, prevBrush.bounds.x0 - x0);
+
+			const validDy =
+				drag.dy > 0
+					? Math.min(drag.dy, prevBrush.bounds.y1 - y1)
+					: Math.max(drag.dy, prevBrush.bounds.y0 - y0);
+
+			return {
+				...prevBrush,
+				isBrushing: true,
+				extent: {
+					...prevBrush.extent,
+					x0: x0 + validDx,
+					x1: x1 + validDx,
+					y0: y0 + validDy,
+					y1: y1 + validDy,
+				},
+			};
+		});
+	}
+
+	function selectionDragEnd() {
+		const { updateBrush, onBrushEnd, onMoveSelectionChange, isControlled } = props;
+
+		if (!isControlled) {
+			updateBrush((prevBrush: BrushState) => {
+				const nextBrush = {
+					...prevBrush,
+					isBrushing: false,
+					start: {
+						...prevBrush.start,
+						x: Math.min(prevBrush.extent.x0, prevBrush.extent.x1),
+						y: Math.min(prevBrush.extent.y0, prevBrush.extent.y1),
+					},
+					end: {
+						...prevBrush.end,
+						x: Math.max(prevBrush.extent.x0, prevBrush.extent.x1),
+						y: Math.max(prevBrush.extent.y0, prevBrush.extent.y1),
+					},
+				};
+				if (onBrushEnd) {
+					onBrushEnd(nextBrush);
+				}
+				return nextBrush;
+			});
+		}
+
+		if (onMoveSelectionChange) {
+			onMoveSelectionChange();
+		}
+	}
+
+	const {
+		width,
+		height,
+		stageWidth,
+		stageHeight,
+		brush,
+		disableDraggingSelection,
+		onMouseLeave,
+		onMouseMove,
+		onMouseUp,
+		onClick,
+		selectedBoxStyle,
+		isControlled,
+		isDragInProgress,
+	} = props;
+
+	return (
+		<Drag
+			width={width}
+			height={height}
+			resetOnStart
+			onDragStart={selectionDragStart}
+			onDragMove={selectionDragMove}
+			onDragEnd={selectionDragEnd}
+			isDragging={isControlled ? isDragInProgress : undefined}
+		>
+			{({ isDragging, dragStart, dragEnd, dragMove }) => (
+				<g>
+					{isDragging && (
+						<rect
+							width={stageWidth}
+							height={stageHeight}
+							fill="transparent"
+							onPointerUp={isControlled ? undefined : dragEnd}
+							onPointerMove={dragMove}
+							onPointerLeave={isControlled ? undefined : dragEnd}
+							style={DRAGGING_OVERLAY_STYLES}
+						/>
+					)}
+					<rect
+						x={Math.min(brush.extent.x0, brush.extent.x1)}
+						y={Math.min(brush.extent.y0, brush.extent.y1)}
+						width={width}
+						height={height}
+						className="visx-brush-selection"
+						onPointerDown={disableDraggingSelection ? undefined : dragStart}
+						onPointerLeave={(event) => {
+							if (onMouseLeave) onMouseLeave(event);
+						}}
+						onPointerMove={(event) => {
+							dragMove(event);
+							if (onMouseMove) onMouseMove(event);
+						}}
+						onPointerUp={(event) => {
+							if (!isControlled) {
+								dragEnd(event);
+							}
+							if (onMouseUp) onMouseUp(event);
+						}}
+						onClick={(event) => {
+							if (onClick) onClick(event as PointerEvent<SVGRectElement>);
+						}}
+						style={{
+							pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',
+							cursor: disableDraggingSelection ? undefined : 'move',
+						}}
+						{...selectedBoxStyle}
+					/>
+				</g>
+			)}
+		</Drag>
+	);
+}

package/src/brush/BrushSelection.tsrx.d.ts

@@ -0,0 +1,27 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps, PointerEvent } from 'react';
+import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
+import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
+import type { BrushPageOffset, BrushingType } from './types';
+type PointerHandler = (event: PointerEvent<SVGRectElement>) => void;
+export type BrushSelectionProps = {
+    width: number;
+    height: number;
+    stageWidth: number;
+    stageHeight: number;
+    brush: BrushState;
+    updateBrush: (update: UpdateBrush) => void;
+    onMoveSelectionChange?: (type?: BrushingType, options?: BrushPageOffset) => void;
+    onBrushStart?: (brush: DragArgs) => void;
+    onBrushEnd?: (brush: BrushState) => void;
+    disableDraggingSelection: boolean;
+    onMouseLeave?: PointerHandler;
+    onMouseMove?: PointerHandler;
+    onMouseUp?: PointerHandler;
+    onClick?: PointerHandler;
+    selectedBoxStyle: SVGProps<SVGRectElement>;
+    isControlled?: boolean;
+    isDragInProgress?: boolean;
+};
+export default function BrushSelection(props: BrushSelectionProps): import("react").JSX.Element;
+export {};

package/src/brush/index.ts

@@ -0,0 +1,9 @@
+// @octanejs/visx/brush
+export { default as Brush } from './Brush.tsrx';
+
+export type * from './types';
+export type { BrushProps } from './Brush.tsrx';
+export type { BaseBrushProps, BaseBrushState, UpdateBrush } from './BaseBrush.tsrx';
+export type { BrushCornerProps } from './BrushCorner.tsrx';
+export type { BrushHandleProps, BrushHandleRenderProps } from './BrushHandle.tsrx';
+export type { BrushSelectionProps } from './BrushSelection.tsrx';

package/src/brush/types.ts

@@ -0,0 +1,62 @@
+import type { D3Scale, NumberLike } from '@octanejs/visx/scale';
+
+export type Point = {
+	x: number;
+	y: number;
+};
+
+export type Bounds = {
+	x0: number;
+	x1: number;
+	xValues?: unknown[];
+	y0: number;
+	y1: number;
+	yValues?: unknown[];
+};
+
+export interface MarginShape {
+	top?: number;
+	left?: number;
+	right?: number;
+	bottom?: number;
+}
+
+export interface BrushShape extends BrushStartEnd {
+	extent: Bounds;
+	bounds: Bounds;
+}
+
+export interface BrushStartEnd {
+	start: Point;
+	end: Point;
+}
+
+export interface PartialBrushStartEnd {
+	start: Partial<Point>;
+	end: Partial<Point>;
+}
+
+export type ResizeTriggerAreas =
+	| 'left'
+	| 'right'
+	| 'top'
+	| 'bottom'
+	| 'topLeft'
+	| 'topRight'
+	| 'bottomLeft'
+	| 'bottomRight';
+
+export type BrushingType = 'move' | 'select' | ResizeTriggerAreas;
+export type BrushPageOffset = {
+	pageX?: number;
+	pageY?: number;
+};
+
+// In order to plot values on a brush, output of the scale must be number.
+// Some scales return undefined.
+type BrushScaleOutput = number | NumberLike | undefined;
+
+/** A catch-all type for scales that are compatible with axis */
+export type Scale<Output extends BrushScaleOutput = BrushScaleOutput> =
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	D3Scale<Output, any, any>;

package/src/brush/utils.ts

@@ -0,0 +1,89 @@
+import type { MouseTouchOrPointerEvent } from '@octanejs/visx/drag';
+import type { PointerEvent } from 'react';
+import type { Bounds, Point, Scale } from './types';
+
+export function normalizeBrushStartEnd(start: Point, end: Point, extent: Bounds): void {
+	start.x = Math.min(extent.x0, extent.x1);
+	start.y = Math.min(extent.y0, extent.y1);
+	end.x = Math.max(extent.x0, extent.x1);
+	end.y = Math.max(extent.y0, extent.y1);
+}
+
+export function scaleInvert(scale: Scale, value: number) {
+	// Test if the scale is an ordinalScale or not,
+	// Since an ordinalScale doesn't support invert function.
+	if ('invert' in scale && typeof scale.invert !== 'undefined') {
+		return scale.invert(value).valueOf();
+	}
+	const [start, end] = scale.range() as number[];
+	let i = 0;
+	// ordinal should have step
+	const step = 'step' in scale && typeof scale.step !== 'undefined' ? scale.step() : 1;
+	const width = (step * (end - start)) / Math.abs(end - start);
+	if (width > 0) {
+		while (value > start + width * (i + 1)) {
+			i += 1;
+		}
+	} else {
+		while (value < start + width * (i + 1)) {
+			i += 1;
+		}
+	}
+
+	return i;
+}
+
+export function getDomainFromExtent(
+	scale: Scale,
+	start: number,
+	end: number,
+	tolerentDelta: number,
+) {
+	let domain;
+	const invertedStart = scaleInvert(scale, start + (start < end ? -tolerentDelta : tolerentDelta));
+	const invertedEnd = scaleInvert(scale, end + (end < start ? -tolerentDelta : tolerentDelta));
+	const minValue = Math.min(invertedStart, invertedEnd);
+	const maxValue = Math.max(invertedStart, invertedEnd);
+	if ('invert' in scale && typeof scale.invert !== 'undefined') {
+		domain = {
+			start: minValue,
+			end: maxValue,
+		};
+	} else {
+		const values = [];
+		const scaleDomain = scale.domain();
+		for (let i = minValue; i <= maxValue; i += 1) {
+			values.push(scaleDomain[i]);
+		}
+		domain = {
+			values,
+		};
+	}
+
+	return domain;
+}
+
+export function getPageCoordinates(event: MouseTouchOrPointerEvent) {
+	if (typeof window !== 'undefined' && window.TouchEvent && event instanceof TouchEvent) {
+		return {
+			pageX: event.touches[0].pageX,
+			pageY: event.touches[0].pageY,
+		};
+	}
+	const pointerEvent = event as PointerEvent;
+	return {
+		pageX: pointerEvent.pageX,
+		pageY: pointerEvent.pageY,
+	};
+}
+
+// Tweaked from https://dev.to/cantem/how-to-write-a-debounce-function-1bdf
+export function debounce<T extends Function>(func: T, delay: number): (...args: any[]) => void {
+	let timeoutId: ReturnType<typeof setTimeout>;
+	return function debouncedFn(this: unknown, ...args: unknown[]) {
+		clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => {
+			func.apply(this, args);
+		}, delay);
+	};
+}

package/src/chart/config.ts

@@ -0,0 +1,50 @@
+import type { ComponentType } from 'react';
+
+export type ChartTheme = 'light' | 'dark';
+
+export type ChartConfigItem = {
+	label?: string;
+	color?: string;
+	theme?: Partial<Record<ChartTheme, string>>;
+	icon?: ComponentType<{ className?: string }>;
+};
+
+export type ChartConfig = Record<string, ChartConfigItem>;
+
+export function getChartConfigEntry(config: ChartConfig | undefined, key: string) {
+	return config?.[key];
+}
+
+export function getChartConfigLabel(config: ChartConfig | undefined, key: string, fallback = key) {
+	return getChartConfigEntry(config, key)?.label ?? fallback;
+}
+
+export function getChartConfigColor(
+	config: ChartConfig | undefined,
+	key: string,
+	fallback?: string,
+	theme?: ChartTheme,
+) {
+	const entry = getChartConfigEntry(config, key);
+
+	return (theme ? entry?.theme?.[theme] : undefined) ?? entry?.color ?? fallback;
+}
+
+export function getChartConfigIcon(config: ChartConfig | undefined, key: string) {
+	return getChartConfigEntry(config, key)?.icon;
+}
+
+export function getChartCssVariableName(key: string) {
+	return `--color-${key.replace(/[^\w-]/g, '-')}`;
+}
+
+export function getChartCssVariables(config: ChartConfig | undefined, theme?: ChartTheme) {
+	return Object.fromEntries(
+		Object.keys(config ?? {})
+			.map((key) => [
+				getChartCssVariableName(key),
+				getChartConfigColor(config, key, undefined, theme),
+			])
+			.filter((entry): entry is [string, string] => entry[1] != null),
+	);
+}

package/src/chart/domains.ts

@@ -0,0 +1,47 @@
+export type NumericDomain = [number, number];
+
+export function isFiniteNumber(value: unknown): value is number {
+	return typeof value === 'number' && Number.isFinite(value);
+}
+
+function getFiniteValues(values: readonly number[]) {
+	return values.filter(isFiniteNumber);
+}
+
+export function getZeroBaselineDomain(values: readonly number[]): NumericDomain {
+	const finiteValues = getFiniteValues(values);
+
+	if (finiteValues.length === 0) {
+		return [0, 1];
+	}
+
+	const min = Math.min(0, ...finiteValues);
+	const max = Math.max(0, ...finiteValues);
+
+	return min === max ? [min - 1, max + 1] : [min, max];
+}
+
+export function getPositiveDomain(values: readonly number[]): NumericDomain {
+	const max = Math.max(0, ...getFiniteValues(values));
+
+	return max === 0 ? [0, 1] : [0, max];
+}
+
+export function getPaddedDomain(values: readonly number[], paddingRatio = 0.08): NumericDomain {
+	const finiteValues = getFiniteValues(values);
+
+	if (finiteValues.length === 0) {
+		return [0, 1];
+	}
+
+	const min = Math.min(...finiteValues);
+	const max = Math.max(...finiteValues);
+
+	if (min === max) {
+		return [min - 1, max + 1];
+	}
+
+	const padding = (max - min) * Math.max(0, paddingRatio);
+
+	return [min - padding, max + padding];
+}

package/src/chart/index.ts

@@ -0,0 +1,33 @@
+// @octanejs/visx/chart
+export {
+	getChartConfigColor,
+	getChartConfigEntry,
+	getChartConfigIcon,
+	getChartConfigLabel,
+	getChartCssVariableName,
+	getChartCssVariables,
+} from './config';
+export {
+	getPaddedDomain,
+	getPositiveDomain,
+	getZeroBaselineDomain,
+	isFiniteNumber,
+} from './domains';
+export { getResponsiveWidth } from './responsive';
+export { getAxisTickCount, getVisibleTickValues } from './ticks';
+export { default as useChartDimensions } from './useChartDimensions.tsrx';
+
+export type { ChartConfig, ChartConfigItem, ChartTheme } from './config';
+export type { NumericDomain } from './domains';
+export type {
+	AxisTickFormatter,
+	AxisTickValue,
+	GetAxisTickCountOptions,
+	GetVisibleTickValuesOptions,
+} from './ticks';
+export type {
+	ChartDimensions,
+	MarginShape,
+	RequiredMarginShape,
+	UseChartDimensionsOptions,
+} from './useChartDimensions.tsrx';

package/src/chart/responsive.ts

@@ -0,0 +1,3 @@
+export function getResponsiveWidth(measuredWidth: number, fallbackWidth: number) {
+	return Number.isFinite(measuredWidth) && measuredWidth > 0 ? measuredWidth : fallbackWidth;
+}

package/src/chart/ticks.ts

@@ -0,0 +1,90 @@
+export type AxisTickValue = string | number | Date;
+
+export type AxisTickFormatter<TickValue extends AxisTickValue> = (
+	value: TickValue,
+	index: number,
+) => string;
+
+export type GetAxisTickCountOptions = {
+	axisLength: number;
+	maxTicks?: number;
+	minTicks?: number;
+	minTickSpacing?: number;
+};
+
+export type GetVisibleTickValuesOptions = {
+	axisLength: number;
+	minTickSpacing?: number;
+	preserveEndTicks?: boolean;
+};
+
+const DEFAULT_MIN_TICK_SPACING = 48;
+
+function getFiniteLength(value: number) {
+	return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+
+function getPositiveInteger(value: number | undefined, fallback: number) {
+	if (typeof value !== 'number' || !Number.isFinite(value)) {
+		return fallback;
+	}
+
+	return Math.max(0, Math.floor(value));
+}
+
+export function getAxisTickCount({
+	axisLength,
+	maxTicks = 5,
+	minTicks = 2,
+	minTickSpacing = DEFAULT_MIN_TICK_SPACING,
+}: GetAxisTickCountOptions) {
+	const length = getFiniteLength(axisLength);
+	const spacing = Math.max(1, getFiniteLength(minTickSpacing));
+	const minimum = getPositiveInteger(minTicks, 2);
+	const maximum = Math.max(minimum, getPositiveInteger(maxTicks, 5));
+	const count = length === 0 ? minimum : Math.floor(length / spacing);
+
+	return Math.min(maximum, Math.max(minimum, count));
+}
+
+export function getVisibleTickValues<TickValue extends AxisTickValue>(
+	values: readonly TickValue[],
+	{ axisLength, minTickSpacing, preserveEndTicks = true }: GetVisibleTickValuesOptions,
+) {
+	if (values.length === 0) {
+		return [];
+	}
+
+	const maxVisibleTicks = getAxisTickCount({
+		axisLength,
+		maxTicks: values.length,
+		minTicks: preserveEndTicks && values.length > 1 ? 2 : 1,
+		minTickSpacing,
+	});
+
+	if (values.length <= maxVisibleTicks) {
+		return [...values];
+	}
+
+	if (!preserveEndTicks) {
+		const step = Math.ceil(values.length / maxVisibleTicks);
+
+		return values.filter((_, index) => index % step === 0).slice(0, maxVisibleTicks);
+	}
+
+	if (maxVisibleTicks <= 1) {
+		return [values[0]];
+	}
+
+	const lastIndex = values.length - 1;
+	const step = Math.ceil(lastIndex / (maxVisibleTicks - 1));
+	const indices = new Set<number>();
+
+	for (let index = 0; index < lastIndex && indices.size < maxVisibleTicks - 1; index += step) {
+		indices.add(index);
+	}
+
+	indices.add(lastIndex);
+
+	return [...indices].sort((a, b) => a - b).map((index) => values[index]);
+}