@automattic/charts 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -99,8 +99,8 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.3.5",
-		"@storybook/react": "10.3.5",
+		"@storybook/addon-docs": "10.3.6",
+		"@storybook/react": "10.3.6",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -121,12 +121,12 @@
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.3.0",
 		"jest-extended": "7.0.0",
-		"postcss": "8.5.10",
+		"postcss": "8.5.14",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.5",
+		"storybook": "10.3.6",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

package/src/hooks/index.ts

@@ -9,4 +9,3 @@ export { useZeroValueDisplay } from './use-zero-value-display';
 export { useDataWithPercentages } from './use-data-with-percentages';
 export { useInteractiveLegendData } from './use-interactive-legend-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';
-export { useTooltipPortalRelocator } from './use-tooltip-portal-relocator';

package/src/hooks/test/use-chart-margin.test.tsx

@@ -89,6 +89,27 @@ describe( 'useChartMargin', () => {
 		expect( result.current.right ).toBe( 48 ); // 40 + 8
 	} );
 
+	it( 'uses explicit y tickValues when provided', () => {
+		const options = {
+			...optionsBase,
+			axis: {
+				...optionsBase.axis,
+				y: {
+					...optionsBase.axis.y,
+					tickValues: [ 0, 1000 ],
+				},
+			},
+		};
+		const height = 300;
+		const theme = baseTheme;
+		renderHook( () => useChartMargin( height, options, data, theme ) );
+		expect( mockGetLongestTickWidth ).toHaveBeenCalledWith(
+			[ 0, 1000 ],
+			options.axis.y.tickFormat,
+			theme.axisStyles.y.left.axisLabel
+		);
+	} );
+
 	it( 'sets top and bottom margin for top x axis', () => {
 		const options = {
 			...optionsBase,

package/src/hooks/use-chart-margin.tsx

@@ -81,6 +81,10 @@ export const useChartMargin = (
 			);
 		}
 
+		if ( options.axis?.y?.tickValues?.length ) {
+			return options.axis.y.tickValues;
+		}
+
 		const minY = Math.min( ...allDataPoints.map( d => d.value ) );
 		const maxY = Math.max( ...allDataPoints.map( d => d.value ) );
 		const yScale = createScale( {

package/src/providers/chart-context/global-charts-provider.tsx

@@ -8,7 +8,6 @@ import {
 	useLayoutEffect,
 	useRef,
 } from 'react';
-import { useTooltipPortalRelocator } from '../../hooks/use-tooltip-portal-relocator';
 import {
 	getItemShapeStyles,
 	getSeriesLineStyles,
@@ -27,22 +26,9 @@ export const GlobalChartsContext = createContext< GlobalChartsContextValue | nul
 export interface GlobalChartsProviderProps {
 	children: ReactNode;
 	theme?: Partial< ChartTheme >;
-	/**
-	 * Optional ref to an element that chart tooltip portals should be relocated into.
-	 * When provided, visx tooltip portals (normally appended to document.body) will be
-	 * moved into this container so they participate in the same effective CSS stacking context.
-	 * The element referenced here, or one of its ancestors, should establish the desired
-	 * stacking context (for example by using `position` and `z-index`) so that tooltips
-	 * appear above the relevant chart content.
-	 */
-	portalContainer?: React.RefObject< HTMLElement | null >;
 }
 
-export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
-	children,
-	theme,
-	portalContainer,
-} ) => {
+export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { children, theme } ) => {
 	const [ charts, setCharts ] = useState< Map< string, ChartRegistration > >( () => new Map() );
 	// Track hidden series per chart: chartId -> Set<seriesLabel>
 	const [ hiddenSeries, setHiddenSeries ] = useState< Map< string, Set< string > > >(
@@ -52,9 +38,6 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 	// Ref to the wrapper element for resolving scoped CSS variables
 	const wrapperRef = useRef< HTMLDivElement >( null );
 
-	// Relocate tooltip portals into the wrapper (or a consumer-provided container) for z-index control.
-	useTooltipPortalRelocator( portalContainer ?? wrapperRef );
-
 	const providerTheme: CompleteChartTheme = useMemo( () => {
 		return theme ? mergeThemes( defaultTheme, theme ) : defaultTheme;
 	}, [ theme ] );

package/src/style.css

@@ -0,0 +1,10 @@
+/*
+ * Placeholder for the `jetpack:src` arm of the `./style.css` package export.
+ *
+ * In-monorepo consumers resolving via source already pull each chart's
+ * `.module.scss` styles through the JS module graph, so no aggregated
+ * stylesheet is needed at this path.
+ *
+ * Published consumers resolve via the `default` condition, which points at
+ * the aggregated `./dist/index.css` produced by tsup.
+ */

package/src/types.ts

@@ -322,6 +322,11 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 export type AxisOptions = {
 	orientation?: OrientationType;
 	numTicks?: number;
+	/**
+	 * Explicit tick values for the axis. When set, takes precedence over `numTicks`
+	 * so callers can force a specific axis (e.g. integer-only steps on a sparse chart).
+	 */
+	tickValues?: ScaleInput< AxisScale >[];
 	axisClassName?: string;
 	axisLineClassName?: string;
 	labelClassName?: string;
@@ -352,6 +357,11 @@ export type AxisOptions = {
 export type ScaleOptions = {
 	type?: ScaleType;
 	zero?: boolean;
+	/**
+	 * Extends the scale's domain to nice round values. Pass `false` together with
+	 * an explicit `domain` to keep the tick values you set exactly.
+	 */
+	nice?: boolean;
 	domain?: [ number, number ];
 	range?: [ number, number ];
 	/**

package/tsup.config.ts

@@ -3,10 +3,11 @@ import { sassPlugin, postcssModules } from 'esbuild-sass-plugin';
 import { defineConfig } from 'tsup';
 import pkg from './package.json';
 
-// Extract entries from package exports
+// Extract JS/TS entries from package exports. Non-JS source paths (e.g. the
+// `./style.css` placeholder) are skipped so tsup doesn't try to bundle them.
 const entry = Object.values( pkg.exports )
 	.map( $export => ( typeof $export === 'object' ? $export[ 'jetpack:src' ] : '' ) )
-	.filter( ( path ): path is string => Boolean( path ) );
+	.filter( ( path ): path is string => Boolean( path ) && /\.[cm]?[jt]sx?$/.test( path ) );
 
 export default defineConfig( {
 	entry,

package/src/hooks/test/use-tooltip-portal-relocator.test.ts

@@ -1,216 +0,0 @@
-/* eslint-disable testing-library/no-node-access */
-import { renderHook } from '@testing-library/react';
-import { useTooltipPortalRelocator } from '../use-tooltip-portal-relocator';
-
-// In the production build, CSS module class names are hashed (e.g. "a8ccharts-abc123").
-// In jest, the SCSS module import is stubbed to a filename string, so
-// styles.relocatedPortal resolves to undefined and classList.add() is a no-op.
-// We mock the module to return a proper class map so we can assert on class names.
-jest.mock( '../use-tooltip-portal-relocator.module.scss', () => ( {
-	__esModule: true,
-	default: { relocatedPortal: 'relocatedPortal' },
-} ) );
-
-/**
- * Create a mock visx tooltip portal node for testing.
- * @return {HTMLDivElement} A div mimicking a visx tooltip portal.
- */
-function createVisxPortalNode(): HTMLDivElement {
-	const portal = document.createElement( 'div' );
-	const child = document.createElement( 'div' );
-	child.className = 'visx-tooltip';
-	portal.appendChild( child );
-	return portal;
-}
-
-/**
- * Sets up a container, ref, and renders the hook.
- * Optionally appends a visx portal node to document.body before rendering.
- * @param options            - Setup options.
- * @param options.withPortal - If true, creates and appends a visx portal before rendering.
- * @return                      Setup result with container, ref, unmount, and optionally the portal node.
- */
-function setupHook( { withPortal = false } = {} ) {
-	const container = document.createElement( 'div' );
-	document.body.appendChild( container );
-
-	let portal: HTMLDivElement | undefined;
-	if ( withPortal ) {
-		portal = createVisxPortalNode();
-		document.body.appendChild( portal );
-	}
-
-	const ref = { current: container };
-	const { unmount } = renderHook( () => useTooltipPortalRelocator( ref ) );
-
-	return { container, ref, unmount, portal };
-}
-
-describe( 'useTooltipPortalRelocator', () => {
-	let nativeRemoveChild: typeof document.body.removeChild;
-
-	beforeAll( () => {
-		nativeRemoveChild = document.body.removeChild;
-	} );
-
-	afterEach( () => {
-		// Restore native removeChild and clear all body children to prevent
-		// leaked portals from interfering with subsequent tests.
-		document.body.removeChild = nativeRemoveChild;
-		while ( document.body.firstChild ) {
-			nativeRemoveChild.call( document.body, document.body.firstChild );
-		}
-	} );
-
-	test( 'does nothing when containerRef is undefined', () => {
-		const { unmount } = renderHook( () => useTooltipPortalRelocator( undefined ) );
-		const portal = createVisxPortalNode();
-		document.body.appendChild( portal );
-		expect( portal.parentNode ).toBe( document.body );
-		unmount();
-	} );
-
-	test( 'does nothing when containerRef.current is null', () => {
-		const nullRef = { current: null };
-		const { unmount } = renderHook( () => useTooltipPortalRelocator( nullRef ) );
-		const portal = createVisxPortalNode();
-		document.body.appendChild( portal );
-		expect( portal.parentNode ).toBe( document.body );
-		unmount();
-	} );
-
-	test( 'relocates existing visx portal nodes into the container', () => {
-		const { container, unmount, portal } = setupHook( { withPortal: true } );
-		expect( portal!.parentNode ).toBe( container );
-		unmount();
-	} );
-
-	test( 'applies relocated-portal class to relocated portals', () => {
-		const { unmount, portal } = setupHook( { withPortal: true } );
-		expect( portal! ).toHaveClass( 'relocatedPortal' );
-		unmount();
-	} );
-
-	test( 'does not relocate newly added non-visx nodes', async () => {
-		const { unmount } = setupHook();
-
-		const regularDiv = document.createElement( 'div' );
-		regularDiv.id = 'some-id';
-		document.body.appendChild( regularDiv );
-
-		// MutationObserver is async — wait for microtask
-		await new Promise( resolve => setTimeout( resolve, 0 ) );
-
-		expect( regularDiv.parentNode ).toBe( document.body );
-		unmount();
-	} );
-
-	test( 'observes and relocates newly added portal nodes', async () => {
-		const { container, unmount } = setupHook();
-
-		const portal = createVisxPortalNode();
-		document.body.appendChild( portal );
-
-		// MutationObserver is async — wait for microtask
-		await new Promise( resolve => setTimeout( resolve, 0 ) );
-
-		expect( portal.parentNode ).toBe( container );
-		unmount();
-	} );
-
-	test( 'patched removeChild handles relocated nodes without throwing', () => {
-		const { unmount, portal } = setupHook( { withPortal: true } );
-
-		// Portal is now in container, but visx will call document.body.removeChild(portal)
-		expect( () => document.body.removeChild( portal! ) ).not.toThrow();
-		expect( portal!.parentNode ).toBeNull();
-		unmount();
-	} );
-
-	test( 'patched removeChild delegates to original for non-relocated nodes', () => {
-		const { unmount } = setupHook();
-
-		const regularDiv = document.createElement( 'div' );
-		document.body.appendChild( regularDiv );
-		expect( () => document.body.removeChild( regularDiv ) ).not.toThrow();
-		expect( regularDiv.parentNode ).toBeNull();
-		unmount();
-	} );
-
-	test( 'cleanup restores removeChild when it has not been wrapped by others', () => {
-		const originalRemoveChild = document.body.removeChild;
-		const { unmount } = setupHook();
-
-		// removeChild should be patched
-		expect( document.body.removeChild ).not.toBe( originalRemoveChild );
-
-		unmount();
-
-		// Should be restored
-		expect( document.body.removeChild ).toBe( originalRemoveChild );
-	} );
-
-	test( 'cleanup leaves removeChild when another wrapper was installed after ours', () => {
-		const { unmount } = setupHook();
-
-		// Simulate another library wrapping removeChild after our patch
-		const ourPatch = document.body.removeChild;
-		const thirdPartyWrapper = function < T extends Node >( child: T ): T {
-			return ourPatch.call( document.body, child );
-		};
-		document.body.removeChild = thirdPartyWrapper;
-
-		unmount();
-
-		// Should NOT restore — third party wrapper is still in place
-		expect( document.body.removeChild ).toBe( thirdPartyWrapper );
-	} );
-
-	test( 'cleanup moves relocated nodes back to document.body', () => {
-		const { container, unmount, portal } = setupHook( { withPortal: true } );
-
-		expect( portal!.parentNode ).toBe( container );
-
-		unmount();
-
-		// Node should be moved back to body on cleanup
-		expect( portal!.parentNode ).toBe( document.body );
-	} );
-
-	test( 'cleanup removes relocated-portal class from nodes', () => {
-		const { unmount, portal } = setupHook( { withPortal: true } );
-
-		expect( portal! ).toHaveClass( 'relocatedPortal' );
-
-		unmount();
-
-		expect( portal! ).not.toHaveClass( 'relocatedPortal' );
-	} );
-
-	test( 'ref-counting allows multiple instances to share the patch', () => {
-		const container1 = document.createElement( 'div' );
-		const container2 = document.createElement( 'div' );
-		document.body.appendChild( container1 );
-		document.body.appendChild( container2 );
-
-		const ref1 = { current: container1 };
-		const ref2 = { current: container2 };
-
-		const originalRemoveChild = document.body.removeChild;
-
-		const { unmount: unmountFirst } = renderHook( () => useTooltipPortalRelocator( ref1 ) );
-		const patchedFn = document.body.removeChild;
-		const { unmount: unmountSecond } = renderHook( () => useTooltipPortalRelocator( ref2 ) );
-
-		// Both should share the same patched removeChild
-		expect( document.body.removeChild ).toBe( patchedFn );
-
-		// Unmounting the first should keep the patch (ref count > 0)
-		unmountFirst();
-		expect( document.body.removeChild ).toBe( patchedFn );
-
-		// Unmounting the second should restore the original
-		unmountSecond();
-		expect( document.body.removeChild ).toBe( originalRemoveChild );
-	} );
-} );

package/src/hooks/use-tooltip-portal-relocator.module.scss

@@ -1,7 +0,0 @@
-.relocatedPortal {
-	position: fixed;
-	inset: 0;
-	overflow: visible;
-	z-index: 1;
-	pointer-events: none;
-}

package/src/hooks/use-tooltip-portal-relocator.ts

@@ -1,188 +0,0 @@
-import { useEffect } from 'react';
-import styles from './use-tooltip-portal-relocator.module.scss';
-import type { RefObject } from 'react';
-
-/**
- * Detects whether a DOM node is a visx chart tooltip portal.
- *
- * visx renders tooltips via `ReactDOM.createPortal` into plain `<div>` elements
- * appended to `document.body`. These portals have no id or className and contain
- * a child element with the class `visx-tooltip`.
- * @param node - The DOM node to check.
- * @return Whether the node is a visx tooltip portal div.
- */
-function isVisxPortalNode( node: Node ): node is HTMLDivElement {
-	return (
-		node instanceof HTMLDivElement &&
-		node.parentElement === document.body &&
-		! node.id &&
-		! node.className &&
-		node.querySelector( '.visx-tooltip' ) !== null
-	);
-}
-
-// Shared state for the document.body.removeChild patch.
-// Reference-counted so multiple hook instances can coexist safely.
-let patchRefCount = 0;
-let origRemoveChild: typeof document.body.removeChild | null = null;
-let patchedRemoveChild: typeof document.body.removeChild | null = null;
-const relocatedNodes = new WeakSet< Node >();
-
-/**
- * Installs (or increments the ref count of) the shared removeChild patch.
- */
-function installRemoveChildPatch() {
-	if ( patchRefCount++ > 0 ) {
-		return;
-	}
-	origRemoveChild = document.body.removeChild;
-	patchedRemoveChild = function < T extends Node >( this: HTMLElement, child: T ): T {
-		if ( relocatedNodes.has( child ) && child.parentNode !== this ) {
-			relocatedNodes.delete( child );
-			child.parentNode?.removeChild( child );
-			return child;
-		}
-		return origRemoveChild!.call( this, child );
-	};
-	document.body.removeChild = patchedRemoveChild;
-}
-
-/**
- * Decrements the ref count and removes the patch when no instances remain.
- * If another library has since wrapped our patch, we leave it in place to
- * avoid breaking their chain — our function becomes a transparent pass-through
- * once all relocated nodes have been cleaned up.
- */
-function uninstallRemoveChildPatch() {
-	if ( --patchRefCount > 0 ) {
-		return;
-	}
-	// Only revert if removeChild is still our function. If something else
-	// has wrapped it, reverting would break their patch.
-	if ( document.body.removeChild === patchedRemoveChild ) {
-		document.body.removeChild = origRemoveChild!;
-	}
-	origRemoveChild = null;
-	patchedRemoveChild = null;
-}
-
-/**
- * Relocates visx chart tooltip portals from `document.body` into a target
- * container element. This allows the tooltips to participate in the same CSS
- * stacking context as other elements in the container (e.g. a sticky header),
- * so z-index ordering works correctly between them.
- *
- * The relocated portal divs use `position: fixed` at the viewport origin to
- * preserve the tooltip coordinate system (visx calculates positions relative
- * to the viewport).
- *
- * Because the visx Portal class calls `document.body.removeChild(node)` during
- * unmount, we patch `document.body.removeChild` to gracefully handle nodes that
- * were moved out of body. Without this, React throws a "not a child of this
- * node" error when tooltips unmount.
- *
- * **Important:** The container and its ancestors must not have CSS `transform`,
- * `perspective`, or `filter` properties set, as these create a new containing
- * block for `position: fixed` children, breaking viewport-relative positioning.
- *
- * @param containerRef - Ref to the element that portals should be relocated into.
- *                     The element referenced here, or one of its ancestors,
- *                     should establish the desired stacking context (for example
- *                     by using position and z-index).
- */
-export function useTooltipPortalRelocator(
-	containerRef: RefObject< HTMLElement | null > | undefined
-) {
-	useEffect( () => {
-		const container = containerRef?.current;
-		if ( ! container ) {
-			return;
-		}
-
-		// Track nodes relocated by this instance so we can move them back on cleanup.
-		const instanceNodes = new Set< Node >();
-
-		const relocateNode = ( node: Node ) => {
-			if ( ! isVisxPortalNode( node ) ) {
-				return;
-			}
-
-			// Hide the portal immediately to prevent the tooltip from
-			// flashing at (0,0) before visx calculates the correct position.
-			node.style.opacity = '0';
-
-			// Position the portal at the viewport origin so visx's
-			// absolute-positioned tooltip coordinates remain correct.
-			// Zero-size with overflow: visible so it doesn't affect layout
-			// but tooltip content still renders. pointerEvents: none on the
-			// wrapper is intentional — tooltip inner elements manage their own.
-			node.classList.add( styles.relocatedPortal );
-
-			// Remember the focused element before moving the node — relocating
-			// a DOM subtree causes the browser to blur any focused descendants.
-			const { activeElement } = node.ownerDocument;
-			const focusedElement =
-				activeElement instanceof HTMLElement && node.contains( activeElement )
-					? activeElement
-					: null;
-
-			// Insert at the start of the container (before header and content).
-			container.insertBefore( node, container.firstChild );
-			relocatedNodes.add( node );
-			instanceNodes.add( node );
-
-			// Restore focus that was lost due to the DOM move.
-			if ( focusedElement ) {
-				focusedElement.focus();
-			}
-
-			// Reveal after two animation frames so visx has positioned the tooltip.
-			requestAnimationFrame( () => {
-				requestAnimationFrame( () => {
-					node.style.opacity = '';
-				} );
-			} );
-		};
-
-		// Patch document.body.removeChild so visx Portal unmount doesn't throw
-		// when it tries to remove a node we already moved out of body.
-		installRemoveChildPatch();
-
-		// Relocate any portals that already exist.
-		for ( const child of Array.from( document.body.children ) ) {
-			relocateNode( child );
-		}
-
-		// Watch for new portals being appended to body.
-		const observer = new MutationObserver( mutations => {
-			for ( const mutation of mutations ) {
-				for ( const node of mutation.addedNodes ) {
-					relocateNode( node );
-				}
-			}
-		} );
-
-		observer.observe( document.body, { childList: true } );
-
-		return () => {
-			// Disconnect first to avoid the observer re-relocating nodes
-			// as we move them back to body.
-			observer.disconnect();
-
-			// Move relocated nodes back to body so visx can clean them up
-			// normally with the original removeChild.
-			for ( const node of instanceNodes ) {
-				if ( node instanceof HTMLElement ) {
-					node.classList.remove( styles.relocatedPortal );
-				}
-				if ( node.parentNode === container ) {
-					document.body.appendChild( node );
-				}
-				relocatedNodes.delete( node );
-			}
-			instanceNodes.clear();
-
-			uninstallRemoveChildPatch();
-		};
-	}, [ containerRef ] );
-}