@octanejs/visx 0.1.0

package/src/xychart/hooks/useStackedData.tsrx

@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react';
+import { useContext, useEffect, useMemo } from 'octane';
+import type { SeriesPoint } from 'd3-shape';
+import { stack as d3stack } from 'd3-shape';
+import { stackOffset, stackOrder } from '@octanejs/visx/shape';
+import type { StackPathConfig } from '@octanejs/visx/shape';
+import { extent } from 'd3-array';
+import type { AxisScale } from '@octanejs/visx/axis';
+import DataContext from '../context/DataContext.tsrx';
+import type { CombinedStackData, DataContextType, SeriesProps } from '../types';
+import getBarStackRegistryData from '../utils/getBarStackRegistryData';
+import combineBarStackData from '../utils/combineBarStackData';
+import getChildrenAndGrandchildrenWithProps from '../utils/getChildrenAndGrandchildrenWithProps';
+
+type UseStackedData<Datum extends object> = {
+		children: ReactNode;
+	} & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'>;
+
+export default function useStackedData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object, ChildrenProps extends SeriesProps<XScale, YScale, Datum>>({
+	children,
+	order,
+	offset,
+}: UseStackedData<Datum>) {
+	type StackDatum = SeriesPoint<CombinedStackData<XScale, YScale>>;
+
+	const { horizontal, registerData, unregisterData } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, StackDatum>;
+
+	// find series children
+	// @TODO: memoization doesn't work well if at all for this
+	const seriesChildren = useMemo(
+		() => getChildrenAndGrandchildrenWithProps<ChildrenProps>(children),
+		[children],
+	);
+
+	// extract data keys from child series
+	const dataKeys: string[] = useMemo(
+		() => seriesChildren.filter((child) => child.props.dataKey).map((child) => child.props.dataKey),
+		[seriesChildren],
+	);
+
+	// group all child data by stack value { [x | y]: { [dataKey]: value } }
+	// this format is needed by d3Stack
+	const combinedData = useMemo(
+		() => combineBarStackData<XScale, YScale, Datum>(seriesChildren, horizontal),
+		[horizontal, seriesChildren],
+	);
+
+	// stack data
+	const stackedData = useMemo(() => {
+		// automatically set offset to diverging if it's undefined and negative values are present
+		const hasSomeNegativeValues =
+			offset ? null : combinedData.some((d) => d.negativeSum < 0);
+
+		const stack = d3stack<CombinedStackData<XScale, YScale>, string>();
+		stack.keys(dataKeys);
+		if (order) stack.order(stackOrder(order));
+		if (offset || hasSomeNegativeValues) stack.offset(stackOffset(offset || 'diverging'));
+
+		return stack(combinedData);
+	}, [combinedData, dataKeys, order, offset]);
+
+	// update the domain to account for the (directional) stacked value
+	const comprehensiveDomain = useMemo(
+		() => extent(
+			stackedData.reduce((allDatum: number[], stack) => {
+				stack.forEach(([min, max]) => {
+					allDatum.push(min);
+					allDatum.push(max);
+				});
+				return allDatum;
+			}, []),
+		) as [number, number],
+		[stackedData],
+	);
+
+	// register all child data using the stack-transformed values
+	useEffect(() => {
+		const dataToRegister = getBarStackRegistryData(stackedData, comprehensiveDomain, horizontal);
+		registerData(dataToRegister);
+
+		// unregister data on unmount
+		return () => unregisterData(dataKeys);
+	}, [
+		dataKeys,
+		comprehensiveDomain,
+		horizontal,
+		stackedData,
+		registerData,
+		unregisterData,
+		seriesChildren,
+	]);
+
+	return { seriesChildren, dataKeys, stackedData };
+}

package/src/xychart/hooks/useStackedData.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { StackPathConfig } from '@octanejs/visx/shape';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { CombinedStackData, SeriesProps } from '../types';
+type UseStackedData<Datum extends object> = {
+    children: ReactNode;
+} & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'>;
+export default function useStackedData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object, ChildrenProps extends SeriesProps<XScale, YScale, Datum>>({ children, order, offset, }: UseStackedData<Datum>): {
+    seriesChildren: import("react").ReactElement<ChildrenProps, string | import("react").JSXElementConstructor<any>>[];
+    dataKeys: string[];
+    stackedData: import("d3-shape").Series<CombinedStackData<XScale, YScale>, string>[];
+};
+export {};

package/src/xychart/index.ts

@@ -0,0 +1,56 @@
+// @octanejs/visx/xychart
+// components
+export { default as Annotation } from './components/annotation/Annotation.tsrx';
+export { default as AnimatedAnnotation } from './components/annotation/AnimatedAnnotation.tsrx';
+export { default as AnnotationLabel } from './components/annotation/AnnotationLabel.tsrx';
+export { default as AnnotationConnector } from './components/annotation/AnnotationConnector.tsrx';
+export { default as AnnotationCircleSubject } from './components/annotation/AnnotationCircleSubject.tsrx';
+export { default as AnnotationLineSubject } from './components/annotation/AnnotationLineSubject.tsrx';
+export { default as AnimatedAxis } from './components/axis/AnimatedAxis.tsrx';
+export { default as AnimatedGrid } from './components/grid/AnimatedGrid.tsrx';
+export { default as Axis } from './components/axis/Axis.tsrx';
+export { default as Grid } from './components/grid/Grid.tsrx';
+export { default as Tooltip } from './components/Tooltip.tsrx';
+export { default as XYChart } from './components/XYChart.tsrx';
+
+// series components
+export { default as AreaSeries } from './components/series/AreaSeries.tsrx';
+export { default as AreaStack } from './components/series/AreaStack.tsrx';
+export { default as BarGroup } from './components/series/BarGroup.tsrx';
+export { default as BarSeries } from './components/series/BarSeries.tsrx';
+export { default as BarStack } from './components/series/BarStack.tsrx';
+export { default as GlyphSeries } from './components/series/GlyphSeries.tsrx';
+export { default as LineSeries } from './components/series/LineSeries.tsrx';
+
+// animated series components
+export { default as AnimatedAreaSeries } from './components/series/AnimatedAreaSeries.tsrx';
+export { default as AnimatedAreaStack } from './components/series/AnimatedAreaStack.tsrx';
+export { default as AnimatedBarSeries } from './components/series/AnimatedBarSeries.tsrx';
+export { default as AnimatedBarStack } from './components/series/AnimatedBarStack.tsrx';
+export { default as AnimatedBarGroup } from './components/series/AnimatedBarGroup.tsrx';
+export { default as AnimatedGlyphSeries } from './components/series/AnimatedGlyphSeries.tsrx';
+export { default as AnimatedLineSeries } from './components/series/AnimatedLineSeries.tsrx';
+
+// context
+export { default as DataContext } from './context/DataContext.tsrx';
+export { default as EventEmitterContext } from './context/EventEmitterContext.tsrx';
+export { default as ThemeContext } from './context/ThemeContext.tsrx';
+export { default as TooltipContext } from './context/TooltipContext.tsrx';
+
+// providers
+export { default as DataProvider } from './providers/DataProvider.tsrx';
+export { default as EventEmitterProvider } from './providers/EventEmitterProvider.tsrx';
+export { default as ThemeProvider } from './providers/ThemeProvider.tsrx';
+export { default as TooltipProvider } from './providers/TooltipProvider.tsrx';
+
+// hooks
+export { default as useEventEmitter } from './hooks/useEventEmitter.tsrx';
+
+// themes
+export { default as lightTheme } from './theme/themes/light';
+export { default as darkTheme } from './theme/themes/dark';
+export { default as buildChartTheme } from './theme/buildChartTheme';
+export { allColors, grayColors, defaultColors } from './theme/colors';
+
+// types
+export type * from './types';

package/src/xychart/providers/DataProvider.tsrx

@@ -0,0 +1,141 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ScaleConfig, ScaleConfigToD3Scale } from '@octanejs/visx/scale';
+import { scaleLinear, scaleOrdinal as createOrdinalScale } from '@octanejs/visx/scale';
+import { useContext, useMemo } from 'octane';
+import type { ReactNode } from 'react';
+import type { AxisScaleOutput } from '@octanejs/visx/axis';
+import type { ResizeObserverPolyfill } from '@octanejs/visx/responsive';
+
+import type { AxisScale, DataContextType, XYChartTheme } from '../types';
+import ThemeContext from '../context/ThemeContext.tsrx';
+import DataContext from '../context/DataContext.tsrx';
+import useDataRegistry from '../hooks/useDataRegistry.tsrx';
+import type { Dimensions } from '../hooks/useDimensions.tsrx';
+import useDimensions from '../hooks/useDimensions.tsrx';
+import useScales from '../hooks/useScales.tsrx';
+import isDiscreteScale from '../utils/isDiscreteScale';
+import collectDataRegistryEntries from '../utils/collectDataRegistryEntries';
+
+type ProviderScale<Config extends ScaleConfig<AxisScaleOutput>> =
+	ScaleConfigToD3Scale<Config, AxisScaleOutput, any, any>;
+
+/** Props that can be passed to initialize/update the provider config. */
+export type DataProviderProps<XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>> = {
+	/* Optionally define the initial dimensions. */
+	/* Optionally define the initial dimensions. */
+	/* Optionally define the initial dimensions. */
+	/* Optionally define the initial dimensions. */
+	initialDimensions?: Partial<Dimensions>;
+	/* Optional chart theme provided by DataProvider, overrides any theme already available in context. */
+	theme?: XYChartTheme;
+	/* x-scale configuration whose shape depends on scale type. */
+	xScale: XScaleConfig;
+	/* y-scale configuration whose shape depends on scale type. */
+	yScale: YScaleConfig;
+	/* Any React children. */
+	children: ReactNode;
+	/* Determines whether Series will be plotted horizontally (e.g., horizontal bars). By default this will try to be inferred based on scale types. */
+	horizontal?: boolean | 'auto';
+	/**
+ * Optionally set the resizeObserverPolyfill context, which will be available to
+ * ParentSize, Tooltip, and AnnotationLabel components.
+ */
+	resizeObserverPolyfill?: ResizeObserverPolyfill
+};
+
+export default function DataProvider<XScaleConfig extends ScaleConfig<AxisScaleOutput>, YScaleConfig extends ScaleConfig<AxisScaleOutput>, Datum extends object>({
+	initialDimensions,
+	theme: propsTheme,
+	xScale: xScaleConfig,
+	yScale: yScaleConfig,
+	children,
+	horizontal: initialHorizontal = 'auto',
+	resizeObserverPolyfill,
+}: DataProviderProps<XScaleConfig, YScaleConfig>) {
+	// `DataProvider` provides a theme so that `ThemeProvider` is not strictly needed.
+	// `props.theme` takes precedent over `context.theme`, which has a default even if
+	// a ThemeProvider is not present.
+	const contextTheme = useContext(ThemeContext);
+	const theme = propsTheme || contextTheme;
+	const [{ width, height, margin }, setDimensions] = useDimensions(initialDimensions);
+	const innerWidth = Math.max(0, width - margin.left - margin.right);
+	const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+
+	const horizontal =
+		initialHorizontal === 'auto'
+			? isDiscreteScale(yScaleConfig) || yScaleConfig.type === 'time' || yScaleConfig.type === 'utc'
+			: initialHorizontal;
+	const initialEntries = collectDataRegistryEntries<
+		ProviderScale<XScaleConfig>,
+		ProviderScale<YScaleConfig>,
+		Datum
+	>(children);
+	const dataRegistry = useDataRegistry<
+		ProviderScale<XScaleConfig>,
+		ProviderScale<YScaleConfig>,
+		Datum
+	>(initialEntries);
+
+	const {
+		xScale,
+		yScale,
+	}: {
+		xScale?: ProviderScale<XScaleConfig>;
+		yScale?: ProviderScale<YScaleConfig>;
+	} = useScales({
+		dataRegistry,
+		xScaleConfig,
+		yScaleConfig,
+		xRange: [margin.left, Math.max(0, width - margin.right)],
+		yRange: [Math.max(0, height - margin.bottom), margin.top],
+	});
+
+	const registryKeys = dataRegistry.keys();
+
+	const colorScale = useMemo(
+		() => createOrdinalScale({
+			domain: registryKeys,
+			range: theme.colors,
+		}),
+		[registryKeys, theme.colors],
+	);
+
+	const value: DataContextType<AxisScale, AxisScale, Datum> = useMemo(
+		() => ({
+			dataRegistry,
+			registerData: dataRegistry.registerData,
+			unregisterData: dataRegistry.unregisterData,
+			xScale: xScale || scaleLinear(),
+			yScale: yScale || scaleLinear(),
+			colorScale,
+			theme,
+			width,
+			height,
+			margin,
+			innerWidth,
+			innerHeight,
+			setDimensions,
+			horizontal,
+			resizeObserverPolyfill,
+		}),
+		// everything here should be memoized between renders
+		// to avoid child re-renders
+		[
+			colorScale,
+			dataRegistry,
+			height,
+			horizontal,
+			innerHeight,
+			innerWidth,
+			margin,
+			setDimensions,
+			theme,
+			width,
+			xScale,
+			yScale,
+			resizeObserverPolyfill,
+		],
+	);
+
+	return <DataContext.Provider value={value}>{children}</DataContext.Provider>;
+}

package/src/xychart/providers/DataProvider.tsrx.d.ts

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ScaleConfig } from '@octanejs/visx/scale';
+import type { ReactNode } from 'react';
+import type { AxisScaleOutput } from '@octanejs/visx/axis';
+import type { ResizeObserverPolyfill } from '@octanejs/visx/responsive';
+import type { XYChartTheme } from '../types';
+import type { Dimensions } from '../hooks/useDimensions.tsrx';
+/** Props that can be passed to initialize/update the provider config. */
+export type DataProviderProps<XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>> = {
+    initialDimensions?: Partial<Dimensions>;
+    theme?: XYChartTheme;
+    xScale: XScaleConfig;
+    yScale: YScaleConfig;
+    children: ReactNode;
+    horizontal?: boolean | 'auto';
+    /**
+ * Optionally set the resizeObserverPolyfill context, which will be available to
+ * ParentSize, Tooltip, and AnnotationLabel components.
+ */
+    resizeObserverPolyfill?: ResizeObserverPolyfill;
+};
+export default function DataProvider<XScaleConfig extends ScaleConfig<AxisScaleOutput>, YScaleConfig extends ScaleConfig<AxisScaleOutput>, Datum extends object>({ initialDimensions, theme: propsTheme, xScale: xScaleConfig, yScale: yScaleConfig, children, horizontal: initialHorizontal, resizeObserverPolyfill, }: DataProviderProps<XScaleConfig, YScaleConfig>): import("react").JSX.Element;

package/src/xychart/providers/EventEmitterProvider.tsrx

@@ -0,0 +1,10 @@
+import { useMemo } from 'octane';
+import type { ReactNode } from 'react';
+import mitt from 'mitt';
+import EventEmitterContext from '../context/EventEmitterContext.tsrx';
+
+/** Provider for EventEmitterContext. */
+export default function EventEmitterProvider({ children }: { children: ReactNode }) {
+	const emitter = useMemo(() => mitt(), []);
+	return <EventEmitterContext.Provider value={emitter}>{children}</EventEmitterContext.Provider>;
+}

package/src/xychart/providers/EventEmitterProvider.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+/** Provider for EventEmitterContext. */
+export default function EventEmitterProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/src/xychart/providers/ThemeProvider.tsrx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import ThemeContext from '../context/ThemeContext.tsrx';
+import type { XYChartTheme } from '../types';
+import lightTheme from '../theme/themes/light';
+
+export type ThemeProviderProps = {
+	theme?: XYChartTheme;
+	children: ReactNode;
+};
+
+export default function ThemeProvider({ theme = lightTheme, children }: ThemeProviderProps) {
+	return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}

package/src/xychart/providers/ThemeProvider.tsrx.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { XYChartTheme } from '../types';
+export type ThemeProviderProps = {
+    theme?: XYChartTheme;
+    children: ReactNode;
+};
+export default function ThemeProvider({ theme, children }: ThemeProviderProps): import("react").JSX.Element;

package/src/xychart/providers/TooltipProvider.tsrx

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useMemo, useRef } from 'octane';
+import type { ReactNode } from 'react';
+import { debounce } from '@octanejs/visx/responsive';
+import type { DebouncedFunction } from '@octanejs/visx/responsive';
+import { useTooltip } from '@octanejs/visx/tooltip';
+import TooltipContext from '../context/TooltipContext.tsrx';
+import type { EventHandlerParams, TooltipContextType, TooltipData } from '../types';
+import isValidNumber from '../typeguards/isValidNumber';
+
+type TooltipProviderProps = {
+	/** Debounce time for when `hideTooltip` is invoked. */
+	hideTooltipDebounceMs?: number;
+	children: ReactNode;
+};
+
+/** Simple wrapper around useTooltip, to provide tooltip data via context. */
+export default function TooltipProvider<Datum extends object>({
+	hideTooltipDebounceMs = 400,
+	children,
+}: TooltipProviderProps) {
+	const {
+		tooltipOpen,
+		tooltipLeft,
+		tooltipTop,
+		tooltipData,
+		updateTooltip,
+		hideTooltip: privateHideTooltip,
+	} = useTooltip<TooltipData<Datum>>(undefined);
+
+	const debouncedHideTooltip = useRef<DebouncedFunction<() => void> | null>(null);
+
+	function cancelDeboundedHideTooltip() {
+		if (debouncedHideTooltip.current) {
+			debouncedHideTooltip.current.cancel();
+			debouncedHideTooltip.current = null;
+		}
+	}
+
+	useEffect(() => cancelDeboundedHideTooltip, []);
+
+	const showTooltip = useRef(({
+		svgPoint,
+		index,
+		key,
+		datum,
+		distanceX,
+		distanceY,
+	}: EventHandlerParams<Datum>) => {
+		// cancel any hideTooltip calls so it won't hide after invoking the logic below
+		cancelDeboundedHideTooltip();
+		const cleanDistanceX = isValidNumber(distanceX) ? distanceX : Infinity;
+		const cleanDistanceY = isValidNumber(distanceY) ? distanceY : Infinity;
+		const distance = Math.sqrt(cleanDistanceX ** 2 + cleanDistanceY ** 2);
+
+		updateTooltip(({ tooltipData: currData }) => {
+			const currNearestDatumDistance =
+				currData?.nearestDatum && isValidNumber(currData.nearestDatum.distance)
+					? currData.nearestDatum.distance
+					: Infinity;
+			return {
+				tooltipOpen: true,
+				tooltipLeft: svgPoint?.x,
+				tooltipTop: svgPoint?.y,
+				tooltipData: {
+					nearestDatum: (currData?.nearestDatum?.key ?? '') !== key &&
+					currNearestDatumDistance < distance
+						? currData?.nearestDatum
+						: { key, index, datum, distance },
+					datumByKey: {
+						...currData?.datumByKey,
+						[key]: {
+							datum,
+							index,
+							key,
+						},
+					},
+				},
+			};
+		});
+	});
+
+	const hideTooltip = useCallback(() => {
+		debouncedHideTooltip.current = debounce(privateHideTooltip, hideTooltipDebounceMs);
+		debouncedHideTooltip.current();
+	}, [privateHideTooltip, hideTooltipDebounceMs]);
+
+	const value = useMemo(
+		() => ({
+			tooltipOpen,
+			tooltipLeft,
+			tooltipTop,
+			tooltipData,
+			updateTooltip,
+			showTooltip: showTooltip.current as TooltipContextType<Datum>['showTooltip'],
+			hideTooltip,
+		}),
+		[hideTooltip, tooltipData, tooltipLeft, tooltipOpen, tooltipTop, updateTooltip],
+	);
+
+	return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;
+}

package/src/xychart/providers/TooltipProvider.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+type TooltipProviderProps = {
+    /** Debounce time for when `hideTooltip` is invoked. */
+    hideTooltipDebounceMs?: number;
+    children: ReactNode;
+};
+/** Simple wrapper around useTooltip, to provide tooltip data via context. */
+export default function TooltipProvider<Datum extends object>({ hideTooltipDebounceMs, children, }: TooltipProviderProps): import("react").JSX.Element;
+export {};

package/src/xychart/theme/buildChartTheme.ts

@@ -0,0 +1,178 @@
+import type { CSSProperties } from 'react';
+import type { SVGTextProps, HTMLTextStyles, LineStyles, XYChartTheme } from '../types/theme';
+import { textColor } from './colors';
+
+export type ThemeConfig = {
+	backgroundColor: string;
+
+	// categorical colors, mapped to series `key`s
+	colors: string[];
+
+	// labels
+	svgLabelBig?: SVGTextProps;
+	svgLabelSmall?: SVGTextProps;
+	htmlLabel?: HTMLTextStyles;
+
+	// lines
+	xAxisLineStyles?: LineStyles;
+	yAxisLineStyles?: LineStyles;
+	xTickLineStyles?: LineStyles;
+	yTickLineStyles?: LineStyles;
+	tickLength: number;
+
+	// grid
+	gridColor: string;
+	gridColorDark: string;
+	gridStyles?: CSSProperties;
+};
+
+const defaultLabelStyles = {
+	fontFamily: '-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif',
+	fontWeight: 700,
+	fontSize: 12,
+	textAnchor: 'middle',
+	pointerEvents: 'none',
+	letterSpacing: 0.4,
+} as const;
+
+/** Provides a simplified API to build a full XYChartTheme. */
+export default function buildChartTheme(config: ThemeConfig): XYChartTheme {
+	const baseSvgLabel: SVGTextProps = {
+		...defaultLabelStyles,
+		fill: textColor,
+		stroke: 'none',
+		...config.svgLabelBig,
+	} as const;
+
+	const baseTickLabel: SVGTextProps = {
+		...defaultLabelStyles,
+		fontWeight: 200,
+		fontSize: 11,
+		fill: textColor,
+		stroke: 'none',
+		...config.svgLabelSmall,
+	} as const;
+
+	const baseHtmlLabel: HTMLTextStyles = {
+		color:
+			config.htmlLabel?.color ??
+			config.svgLabelBig?.fill ??
+			config.svgLabelSmall?.fill ??
+			textColor,
+		...defaultLabelStyles,
+		...config.htmlLabel,
+	};
+
+	return {
+		backgroundColor: config.backgroundColor,
+		colors: [...config.colors],
+		htmlLabel: {
+			...baseHtmlLabel,
+		},
+		svgLabelSmall: {
+			...baseTickLabel,
+		},
+		svgLabelBig: {
+			...baseSvgLabel,
+		},
+		gridStyles: {
+			stroke: config.gridColor,
+			strokeWidth: 1,
+			...config.gridStyles,
+		},
+		axisStyles: {
+			x: {
+				top: {
+					axisLabel: {
+						...baseSvgLabel,
+						dy: '-0.25em', // needs to include font-size
+					},
+					axisLine: {
+						stroke: config.gridColorDark,
+						strokeWidth: 2,
+						...config.xAxisLineStyles,
+					},
+					tickLabel: {
+						...baseTickLabel,
+						dy: '-0.25em', // needs to include font-size
+					},
+					tickLength: config.tickLength,
+					tickLine: {
+						strokeWidth: 1,
+						stroke: config.gridColor,
+						...config.xTickLineStyles,
+					},
+				},
+				bottom: {
+					axisLabel: {
+						...baseSvgLabel,
+						dy: '-0.25em',
+					},
+					axisLine: {
+						stroke: config.gridColorDark,
+						strokeWidth: 2,
+						...config.xAxisLineStyles,
+					},
+					tickLabel: {
+						...baseTickLabel,
+						dy: '0.125em',
+					},
+					tickLength: config.tickLength,
+					tickLine: {
+						strokeWidth: 1,
+						stroke: config.gridColor,
+						...config.xTickLineStyles,
+					},
+				},
+			},
+			y: {
+				left: {
+					axisLabel: {
+						...baseSvgLabel,
+						dx: '-1.25em',
+					},
+					axisLine: {
+						stroke: config.gridColor,
+						strokeWidth: 1,
+						...config.yAxisLineStyles,
+					},
+					tickLabel: {
+						...baseTickLabel,
+						textAnchor: 'end',
+						dx: '-0.25em',
+						dy: '0.25em',
+					},
+					tickLength: config.tickLength,
+					tickLine: {
+						strokeWidth: 1,
+						stroke: config.gridColor,
+						...config.yTickLineStyles,
+					},
+				},
+				right: {
+					axisLabel: {
+						...baseSvgLabel,
+						dx: '1.25em',
+					},
+					axisLine: {
+						stroke: config.gridColor,
+						strokeWidth: 1,
+						...config.yAxisLineStyles,
+					},
+					tickLabel: {
+						...baseTickLabel,
+						textAnchor: 'start',
+						dx: '0.25em',
+						dy: '0.25em',
+					},
+					tickLength: config.tickLength,
+					tickLine: {
+						strokeWidth: 1,
+						stroke: config.gridColor,
+						...config.yTickLineStyles,
+					},
+				},
+			},
+		},
+	};
+}