@octanejs/visx 0.1.0

package/src/xychart/components/series/private/BaseAreaStack.tsrx

@@ -0,0 +1,259 @@
+import { Fragment, createElement, useCallback, useContext, useMemo } from 'octane';
+import type { ReactElement, FC, SVGProps } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { SeriesPoint } from 'd3-shape';
+import type { StackPathConfig, AreaProps } from '@octanejs/visx/shape';
+import { LinePath, Area, getFirstItem, getSecondItem } from '@octanejs/visx/shape';
+import { coerceNumber } from '@octanejs/visx/scale';
+
+import type {
+	CombinedStackData,
+	DataContextType,
+	GlyphsProps,
+	NearestDatumArgs,
+	NearestDatumReturnType,
+	SeriesProps,
+} from '../../../types';
+import DataContext from '../../../context/DataContext.tsrx';
+import type { BaseAreaSeriesProps } from './BaseAreaSeries.tsrx';
+import { BaseGlyphSeries } from './BaseGlyphSeries.tsrx';
+import useStackedData from '../../../hooks/useStackedData.tsrx';
+import { getStackValue } from '../../../utils/combineBarStackData';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import findNearestStackDatum from '../../../utils/findNearestStackDatum';
+import { AREASTACK_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+import defaultRenderGlyph from './defaultRenderGlyph.tsrx';
+import getScaleBandwidth from '../../../utils/getScaleBandwidth';
+
+type AreaStackChildProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	Omit<BaseAreaSeriesProps<XScale, YScale, Datum>, 'PathComponent' | 'curve'>;
+
+type AreaStackDatum<XScale extends AxisScale, YScale extends AxisScale> =
+	SeriesPoint<CombinedStackData<XScale, YScale>>;
+
+export type BaseAreaStackProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	{
+		/** `AreaSeries` elements, note we can't strictly enforce this with TS yet. */
+		children: | ReactElement<AreaStackChildProps<XScale, YScale, Datum>>
+		| ReactElement<AreaStackChildProps<XScale, YScale, Datum>>[];
+		/** Rendered component which is passed path props by BaseAreaStack after processing. */
+		PathComponent?: FC<Omit<SVGProps<SVGPathElement>, 'ref'>> | 'path';
+		/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+		curve?: AreaProps<Datum>['curve'];
+		/** Whether to render a Line along value of the Area shape (area is fill only). */
+		renderLine?: boolean;
+	} & Pick<StackPathConfig<Datum, string>, | 'offset'
+	| 'order'> & Pick<SeriesProps<XScale, YScale, Datum>, | 'onPointerMove'
+	| 'onPointerOut'
+	| 'onPointerUp'
+	| 'onPointerDown'
+	| 'onBlur'
+	| 'onFocus'
+	| 'enableEvents'>;
+
+const identity = (_: unknown) => _;
+
+function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	PathComponent = 'path',
+	children,
+	curve,
+	enableEvents = true,
+	offset,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	order,
+	renderLine = true,
+}: BaseAreaStackProps<XScale, YScale, Datum>) {
+	const { colorScale, dataRegistry, horizontal, xScale, yScale, theme } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, AreaStackDatum<XScale, YScale>>;
+
+	const { dataKeys, seriesChildren, stackedData } = useStackedData<
+		XScale,
+		YScale,
+		Datum,
+		BaseAreaSeriesProps<XScale, YScale, Datum>
+	>({
+		children,
+		order,
+		offset,
+	});
+
+	// accessor functions for the stack generator
+	const accessors = useMemo(() => {
+		const xOffset = getScaleBandwidth(xScale) / 2;
+		const yOffset = getScaleBandwidth(yScale) / 2;
+
+		return horizontal
+			? {
+					y: (d: AreaStackDatum<XScale, YScale>) => (coerceNumber(yScale(getStackValue(d.data))) ??
+						0) +
+						yOffset,
+					x0: (d: AreaStackDatum<XScale, YScale>) => (coerceNumber(xScale(getFirstItem(d))) ?? 0) +
+						xOffset,
+					x1: (d: AreaStackDatum<XScale, YScale>) => (coerceNumber(xScale(getSecondItem(d))) ?? 0) +
+						xOffset,
+					defined: (d: AreaStackDatum<XScale, YScale>) =>
+						isValidNumber(yScale(getStackValue(d.data))) && isValidNumber(xScale(getSecondItem(d))),
+				}
+			: {
+					x: (d: AreaStackDatum<XScale, YScale>) => (coerceNumber(xScale(getStackValue(d.data))) ??
+						0) +
+						xOffset,
+					y0: (d: AreaStackDatum<XScale, YScale>) => (coerceNumber(yScale(getFirstItem(d))) ?? 0) +
+						yOffset,
+					y1: (d: AreaStackDatum<XScale, YScale>) => (coerceNumber(yScale(getSecondItem(d))) ?? 0) +
+						yOffset,
+					defined: (d: AreaStackDatum<XScale, YScale>) =>
+						isValidNumber(xScale(getStackValue(d.data))) && isValidNumber(yScale(getSecondItem(d))),
+				};
+	}, [xScale, yScale, horizontal]);
+
+	// pull out all area + line props for each dataKey
+	const stacks = useMemo(
+		() => stackedData.map((stack, stackIndex) => {
+			const areaSeries: ReactElement<BaseAreaSeriesProps<XScale, YScale, Datum>> | undefined =
+				seriesChildren.find((child) => child.props.dataKey === stack.key);
+			const {
+				data,
+				dataKey,
+				xAccessor,
+				yAccessor,
+				curve: _,
+				PathComponent: __,
+				lineProps,
+				renderLine: ___,
+				...svgPathProps
+			} = areaSeries?.props || {};
+
+			const areaProps: SVGProps<SVGPathElement> = {
+				fill: colorScale?.(stack.key) ?? theme?.colors?.[0] ?? '#222',
+				...svgPathProps,
+			};
+
+			return {
+				key: `${stackIndex}-${stack.key}`,
+				accessors,
+				data: stack,
+				areaProps,
+				lineProps,
+			};
+		}),
+		[stackedData, accessors, colorScale, seriesChildren, theme],
+	);
+
+	// custom logic to find the nearest AreaStackDatum (context) and return the original Datum (props)
+	const findNearestDatum = useCallback(
+		(params: NearestDatumArgs<XScale, YScale, AreaStackDatum<XScale, YScale>>): NearestDatumReturnType<Datum> => {
+			const childData = seriesChildren.find(
+				(child) => child.props.dataKey === params.dataKey,
+			)?.props?.data;
+			return childData ? findNearestStackDatum(params, childData, horizontal) : null;
+		},
+		[seriesChildren, horizontal],
+	);
+
+	const ownEventSourceKey = `${AREASTACK_EVENT_SOURCE}-${dataKeys.join('-')}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey: dataKeys,
+		enableEvents,
+		// @ts-expect-error Datum input + return type are expected to be the same type but they differ
+		// for AreaStack (registry data is StackedDatum, return type is user Datum)
+		findNearestDatum,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	// render invisible glyphs for focusing if onFocus/onBlur are defined
+	const captureFocusEvents = Boolean(onFocus || onBlur);
+	const renderGlyphs = useCallback(
+		({ glyphs }: GlyphsProps<XScale, YScale, AreaStackDatum<XScale, YScale>>) => captureFocusEvents
+			? glyphs.map(
+					(glyph) => <Fragment key={glyph.key}>{defaultRenderGlyph({
+						...glyph,
+						color: 'transparent',
+						onFocus: eventEmitters.onFocus,
+						onBlur: eventEmitters.onBlur,
+					})}</Fragment>,
+				)
+			: null,
+		[captureFocusEvents, eventEmitters.onFocus, eventEmitters.onBlur],
+	);
+
+	// if scales and data are not available in the registry, bail
+	if (dataKeys.some((key) => dataRegistry.get(key) == null) || !xScale || !yScale || !colorScale) {
+		return null;
+	}
+	const areaNodes = stacks.map(
+		(stack) => createElement(
+			Area,
+			{ key: stack.key, curve, ...stack.accessors },
+			({ path }: { path: (data: typeof stack.data) => string | null }) => createElement(
+				PathComponent,
+				{
+					className: 'visx-area',
+					stroke: 'transparent',
+					d: path(stack.data) || '',
+					...stack.areaProps,
+					...eventEmitters,
+				},
+			),
+		),
+	);
+
+	return <g className="visx-area-stack">
+		{areaNodes}
+		{renderLine &&
+			stacks.map(
+				(stack) => <LinePath
+					key={`line-${stack.key}`}
+					// note: this currently doesn't work well for offset=wiggle
+					// because it only draws a single line. with two lines you
+					// get overlap across stacks :/
+					x={stack.accessors.x || stack.accessors.x1}
+					y={stack.accessors.y || stack.accessors.y1}
+					defined={stack.accessors.defined}
+					curve={curve}
+					{...stack.lineProps}
+				>
+					{({ path }) =>
+						<PathComponent
+							className="visx-line"
+							fill="transparent"
+							stroke={stack.areaProps.fill}
+							strokeWidth={2}
+							pointerEvents="none"
+							{...stack.lineProps}
+							d={path(stack.data) || ''}
+						/>}
+				</LinePath>,
+			)}
+		{captureFocusEvents && stacks.map((_, i) => {
+				// render in reverse stack order tab to top-values first
+				const stack: (typeof stacks)[number] = stacks[stacks.length - i - 1];
+				return <BaseGlyphSeries
+					key={`glyphs-${stack.key}`}
+					dataKey={stack.key}
+					data={stack.data}
+					xAccessor={stack.accessors.x || stack.accessors.x1}
+					yAccessor={stack.accessors.y || stack.accessors.y1}
+					xScale={identity}
+					yScale={identity}
+					renderGlyphs={renderGlyphs}
+				/>;
+			})}
+	</g>;
+}
+
+export default BaseAreaStack

package/src/xychart/components/series/private/BaseAreaStack.tsrx.d.ts

@@ -0,0 +1,19 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactElement, FC, SVGProps } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { StackPathConfig, AreaProps } from '@octanejs/visx/shape';
+import type { SeriesProps } from '../../../types';
+import type { BaseAreaSeriesProps } from './BaseAreaSeries.tsrx';
+type AreaStackChildProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = Omit<BaseAreaSeriesProps<XScale, YScale, Datum>, 'PathComponent' | 'curve'>;
+export type BaseAreaStackProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = {
+    /** `AreaSeries` elements, note we can't strictly enforce this with TS yet. */
+    children: ReactElement<AreaStackChildProps<XScale, YScale, Datum>> | ReactElement<AreaStackChildProps<XScale, YScale, Datum>>[];
+    /** Rendered component which is passed path props by BaseAreaStack after processing. */
+    PathComponent?: FC<Omit<SVGProps<SVGPathElement>, 'ref'>> | 'path';
+    /** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+    curve?: AreaProps<Datum>['curve'];
+    /** Whether to render a Line along value of the Area shape (area is fill only). */
+    renderLine?: boolean;
+} & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'> & Pick<SeriesProps<XScale, YScale, Datum>, 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'onPointerDown' | 'onBlur' | 'onFocus' | 'enableEvents'>;
+declare function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ PathComponent, children, curve, enableEvents, offset, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, order, renderLine, }: BaseAreaStackProps<XScale, YScale, Datum>): import("react").JSX.Element | null;
+export default BaseAreaStack;

package/src/xychart/components/series/private/BaseBarGroup.tsrx

@@ -0,0 +1,198 @@
+import { useContext, useMemo, useEffect, useCallback } from 'octane';
+import type { ReactElement, ReactNode, FC } from 'react';
+import type { PositionScale } from '@octanejs/visx/shape';
+import { scaleBand } from '@octanejs/visx/scale';
+import type { BaseBarSeriesProps } from './BaseBarSeries.tsrx';
+import type {
+	Bar,
+	BarsProps,
+	DataContextType,
+	NearestDatumArgs,
+	NearestDatumReturnType,
+	SeriesProps,
+} from '../../../types';
+import DataContext from '../../../context/DataContext.tsrx';
+import getScaleBandwidth from '../../../utils/getScaleBandwidth';
+import getScaleBaseline from '../../../utils/getScaleBaseline';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import { BARGROUP_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+import findNearestGroupDatum from '../../../utils/findNearestGroupDatum';
+import getChildrenAndGrandchildrenWithProps from '../../../utils/getChildrenAndGrandchildrenWithProps';
+
+export type BaseBarGroupProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> =
+	{
+		/** `BarSeries` elements */
+		children: ReactNode;
+		/** Group band scale padding, [0, 1] where 0 = no padding, 1 = no bar. */
+		padding?: number;
+		/** Comparator function to sort `dataKeys` within a bar group. By default the DOM rendering order of `BarGroup`s `children` is used. */
+		sortBars?: (dataKeyA: string, dataKeyB: string) => number;
+		/** Rendered component which is passed BarsProps by BaseBarGroup after processing. */
+		BarsComponent: FC<BarsProps<XScale, YScale>>;
+	} & Pick<SeriesProps<XScale, YScale, Datum>, | 'onPointerMove'
+	| 'onPointerOut'
+	| 'onPointerUp'
+	| 'onPointerDown'
+	| 'onBlur'
+	| 'onFocus'
+	| 'enableEvents'>;
+
+export default function BaseBarGroup<XScale extends PositionScale, YScale extends PositionScale, Datum extends object>({
+	children,
+	padding = 0.1,
+	sortBars,
+	BarsComponent,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	enableEvents = true,
+}: BaseBarGroupProps<XScale, YScale, Datum>) {
+	const {
+		colorScale,
+		dataRegistry,
+		horizontal,
+		registerData,
+		unregisterData,
+		xScale,
+		yScale,
+	} = useContext(DataContext) as unknown as DataContextType<XScale, YScale, Datum>;
+
+	const barSeriesChildren = useMemo(
+		() => getChildrenAndGrandchildrenWithProps<BaseBarSeriesProps<XScale, YScale, Datum>>(children),
+		[children],
+	);
+
+	// extract data keys from child series
+	const dataKeys: string[] = useMemo(
+		() => barSeriesChildren.map((child) => child.props.dataKey ?? '').filter((key) => key),
+		[barSeriesChildren],
+	);
+
+	// register all child data
+	useEffect(() => {
+		const dataToRegister = barSeriesChildren.map((child) => {
+			const { dataKey: key, data, xAccessor, yAccessor } = child.props;
+			return { key, data, xAccessor, yAccessor };
+		});
+
+		registerData(dataToRegister);
+		return () => unregisterData(dataKeys);
+	}, [registerData, unregisterData, barSeriesChildren, dataKeys]);
+
+	// create group scale
+	const groupScale = useMemo(
+		() => scaleBand<string>({
+			domain: sortBars ? [...dataKeys].sort(sortBars) : dataKeys,
+			range: [0, getScaleBandwidth(horizontal ? yScale : xScale)],
+			padding,
+		}),
+		[sortBars, dataKeys, xScale, yScale, horizontal, padding],
+	);
+
+	const findNearestDatum = useCallback(
+		(params: NearestDatumArgs<XScale, YScale, Datum>): NearestDatumReturnType<Datum> =>
+			findNearestGroupDatum(params, groupScale, horizontal),
+		[groupScale, horizontal],
+	);
+
+	const ownEventSourceKey = `${BARGROUP_EVENT_SOURCE}-${dataKeys.join('-')}}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey: dataKeys,
+		enableEvents,
+		findNearestDatum,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	const xZeroPosition = useMemo(() => (xScale ? getScaleBaseline(xScale) : 0), [xScale]);
+	const yZeroPosition = useMemo(() => (yScale ? getScaleBaseline(yScale) : 0), [yScale]);
+
+	const registryEntries = dataKeys.map((key) => dataRegistry.get(key));
+
+	// if scales and data are not available in the registry, bail
+	if (registryEntries.some((entry) => entry == null) || !xScale || !yScale || !colorScale) {
+		return null;
+	}
+
+	const barThickness = getScaleBandwidth(groupScale);
+
+	const barSeries = registryEntries.map(({ xAccessor, yAccessor, data, key }) => {
+		const getLength = (d: Datum) => horizontal
+			? (xScale(xAccessor(d)) ?? NaN) - xZeroPosition
+			: (yScale(yAccessor(d)) ?? NaN) - yZeroPosition;
+
+		const getGroupPosition = horizontal
+			? (d: Datum) => yScale(yAccessor(d)) ?? NaN
+			: (d: Datum) => xScale(xAccessor(d)) ?? NaN;
+
+		const withinGroupPosition = groupScale(key) ?? 0;
+
+		const getX = horizontal
+			? (d: Datum) => xZeroPosition + Math.min(0, getLength(d))
+			: (d: Datum) => getGroupPosition(d) + withinGroupPosition;
+
+		const getY = horizontal
+			? (d: Datum) => getGroupPosition(d) + withinGroupPosition
+			: (d: Datum) => yZeroPosition + Math.min(0, getLength(d));
+
+		const getWidth = horizontal ? (d: Datum) => Math.abs(getLength(d)) : () => barThickness;
+		const getHeight = horizontal ? () => barThickness : (d: Datum) => Math.abs(getLength(d));
+		// get props from child BarSeries, if available
+		const childBarSeries: ReactElement<BaseBarSeriesProps<XScale, YScale, Datum>> | undefined =
+			barSeriesChildren.find((child) => child.props.dataKey === key);
+		const { colorAccessor, radius, radiusAll, radiusBottom, radiusLeft, radiusRight, radiusTop } =
+			childBarSeries?.props || {};
+
+		return {
+			key,
+			radius,
+			radiusAll,
+			radiusBottom,
+			radiusLeft,
+			radiusRight,
+			radiusTop,
+			bars: data.map((bar, index) => {
+				const barX = getX(bar);
+				if (!isValidNumber(barX)) return null;
+				const barY = getY(bar);
+				if (!isValidNumber(barY)) return null;
+				const barWidth = getWidth(bar);
+				if (!isValidNumber(barWidth)) return null;
+				const barHeight = getHeight(bar);
+				if (!isValidNumber(barHeight)) return null;
+
+				return {
+					key: `${key}-${index}`,
+					x: barX,
+					y: barY,
+					width: barWidth,
+					height: barHeight,
+					fill: colorAccessor?.(bar, index) ?? colorScale(key),
+				};
+			}).filter((bar) => bar) as Bar[],
+		};
+	});
+
+	return <g className="visx-bar-group">{barSeries.map(
+		(series) =>
+			series &&
+				<BarsComponent
+					horizontal={horizontal}
+					xScale={xScale}
+					yScale={yScale}
+					{...series}
+					{...eventEmitters}
+					key={series.key}
+				/>,
+	)}</g>;
+}

package/src/xychart/components/series/private/BaseBarGroup.tsrx.d.ts

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, FC } from 'react';
+import type { PositionScale } from '@octanejs/visx/shape';
+import type { BarsProps, SeriesProps } from '../../../types';
+export type BaseBarGroupProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> = {
+    /** `BarSeries` elements */
+    children: ReactNode;
+    /** Group band scale padding, [0, 1] where 0 = no padding, 1 = no bar. */
+    padding?: number;
+    /** Comparator function to sort `dataKeys` within a bar group. By default the DOM rendering order of `BarGroup`s `children` is used. */
+    sortBars?: (dataKeyA: string, dataKeyB: string) => number;
+    /** Rendered component which is passed BarsProps by BaseBarGroup after processing. */
+    BarsComponent: FC<BarsProps<XScale, YScale>>;
+} & Pick<SeriesProps<XScale, YScale, Datum>, 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'onPointerDown' | 'onBlur' | 'onFocus' | 'enableEvents'>;
+export default function BaseBarGroup<XScale extends PositionScale, YScale extends PositionScale, Datum extends object>({ children, padding, sortBars, BarsComponent, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, enableEvents, }: BaseBarGroupProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

package/src/xychart/components/series/private/BaseBarSeries.tsrx

@@ -0,0 +1,154 @@
+import { useContext, useEffect, useMemo } from 'octane';
+import type { FC } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import DataContext from '../../../context/DataContext.tsrx';
+import type { Bar, BarsProps, DataContextType, SeriesProps } from '../../../types';
+import getScaledValueFactory from '../../../utils/getScaledValueFactory';
+import getScaleBandwidth from '../../../utils/getScaleBandwidth';
+import getScaleBaseline from '../../../utils/getScaleBaseline';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import { BARSERIES_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+
+export type BaseBarSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	SeriesProps<XScale, YScale, Datum> & {
+		/** Rendered component which is passed BarsProps by BaseBarSeries after processing. */
+		BarsComponent: FC<BarsProps<XScale, YScale>>;
+		/**
+ * Specify bar padding when bar thickness does not come from a `band` scale.
+ * Accepted values are [0, 1], 0 = no padding, 1 = no bar, defaults to 0.1.
+ */
+		barPadding?: number;
+		/** Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+		colorAccessor?: (d: Datum, index: number) => string | null | undefined;
+	} & Pick<BarsProps<XScale, YScale>, | 'radius'
+	| 'radiusAll'
+	| 'radiusTop'
+	| 'radiusRight'
+	| 'radiusBottom'
+	| 'radiusLeft'>;
+
+// Fallback bandwidth estimate assumes no missing data values (divides chart space by # datum)
+const getFallbackBandwidth = (fullBarWidth: number, barPadding: number) =>
+	// clamp padding to [0, 1], bar thickness = (1-padding) * availableSpace
+	fullBarWidth * (1 - Math.min(1, Math.max(0, barPadding)));
+
+function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	BarsComponent,
+	barPadding = 0.1,
+	colorAccessor,
+	data,
+	dataKey,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	enableEvents = true,
+	xAccessor,
+	xScale,
+	yAccessor,
+	yScale,
+	...barComponentProps
+}: BaseBarSeriesProps<XScale, YScale, Datum> & Pick<DataContextType<XScale, YScale, Datum>, | 'xScale'
+| 'yScale'>) {
+	const { colorScale, horizontal, theme, innerWidth = 0, innerHeight = 0 } = useContext(
+		DataContext,
+	);
+	const getScaledX = useMemo(() => getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
+	const getScaledY = useMemo(() => getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
+	const scaleBandwidth = getScaleBandwidth(horizontal ? yScale : xScale);
+	const barThickness =
+		scaleBandwidth ||
+			getFallbackBandwidth((horizontal ? innerHeight : innerWidth) / data.length, barPadding);
+
+	const xZeroPosition = useMemo(() => (xScale ? getScaleBaseline(xScale) : 0), [xScale]);
+	const yZeroPosition = useMemo(() => (yScale ? getScaleBaseline(yScale) : 0), [yScale]);
+
+	const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
+
+	const bars = useMemo(() => {
+		const xOffset = horizontal ? 0 : -barThickness / 2;
+		const yOffset = horizontal ? -barThickness / 2 : 0;
+		return data.map((datum, index) => {
+			const x = getScaledX(datum) + xOffset;
+			if (!isValidNumber(x)) return null;
+			const y = getScaledY(datum) + yOffset;
+			if (!isValidNumber(y)) return null;
+			const barLength = horizontal ? x - xZeroPosition : y - yZeroPosition;
+			if (!isValidNumber(barLength)) return null;
+
+			return {
+				key: `${index}`,
+				x: horizontal ? xZeroPosition + Math.min(0, barLength) : x,
+				y: horizontal ? y : yZeroPosition + Math.min(0, barLength),
+				width: horizontal ? Math.abs(barLength) : barThickness,
+				height: horizontal ? barThickness : Math.abs(barLength),
+				fill: colorAccessor?.(datum, index) ?? color,
+			};
+		}).filter((bar) => bar) as Bar[];
+	}, [
+		barThickness,
+		color,
+		colorAccessor,
+		data,
+		getScaledX,
+		getScaledY,
+		horizontal,
+		xZeroPosition,
+		yZeroPosition,
+	]);
+
+	const ownEventSourceKey = `${BARSERIES_EVENT_SOURCE}-${dataKey}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey,
+		enableEvents,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	return <g className="vx-bar-series">
+		<BarsComponent
+			bars={bars}
+			horizontal={horizontal}
+			xScale={xScale}
+			yScale={yScale}
+			{...eventEmitters}
+			{...barComponentProps}
+		/>
+	</g>;
+}
+
+export default function BaseBarSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseBarSeriesProps<XScale, YScale, Datum>) {
+	const { dataKey, data, xAccessor, yAccessor } = props;
+	const { xScale, yScale, dataRegistry } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, Datum>;
+
+	useEffect(() => {
+		if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
+		return () => dataRegistry?.unregisterData(dataKey);
+	}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
+
+	const registryEntry = dataRegistry?.get(dataKey);
+
+	// Explicit domains let wrapped series render before their registration effect.
+	if (!xScale || !yScale) return null;
+
+	// otherwise pass props + over-write data/accessors
+	return <BaseBarSeries
+		{...props}
+		xScale={xScale}
+		yScale={yScale}
+		data={registryEntry?.data ?? data}
+		xAccessor={registryEntry?.xAccessor ?? xAccessor}
+		yAccessor={registryEntry?.yAccessor ?? yAccessor}
+	/>;
+}

package/src/xychart/components/series/private/BaseBarSeries.tsrx.d.ts

@@ -0,0 +1,16 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FC } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BarsProps, SeriesProps } from '../../../types';
+export type BaseBarSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
+    /** Rendered component which is passed BarsProps by BaseBarSeries after processing. */
+    BarsComponent: FC<BarsProps<XScale, YScale>>;
+    /**
+* Specify bar padding when bar thickness does not come from a `band` scale.
+* Accepted values are [0, 1], 0 = no padding, 1 = no bar, defaults to 0.1.
+*/
+    barPadding?: number;
+    /** Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+    colorAccessor?: (d: Datum, index: number) => string | null | undefined;
+} & Pick<BarsProps<XScale, YScale>, 'radius' | 'radiusAll' | 'radiusTop' | 'radiusRight' | 'radiusBottom' | 'radiusLeft'>;
+export default function BaseBarSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseBarSeriesProps<XScale, YScale, Datum>): import("react").JSX.Element | null;