@automattic/charts 4.11.1 → 4.13.0

package/src/components/tooltip/private/keyboard-stops.ts

@@ -0,0 +1,67 @@
+import type { DataPointDate, SeriesData } from '../../../types';
+
+/** A series' point at a keyboard stop. */
+export type StopMember = { series: SeriesData; datum: DataPointDate; index: number };
+
+export type KeyboardStops = {
+	count: number;
+	membersAt: ( stop: number ) => StopMember[];
+};
+
+const timeOf = ( point: unknown ): number | undefined =>
+	( point as DataPointDate | undefined )?.date?.getTime();
+
+const getXPositions = ( series: SeriesData[] ): number[] => {
+	const positions = new Set< number >();
+
+	for ( const { data } of series ) {
+		for ( const point of data ) {
+			const time = timeOf( point );
+			if ( time !== undefined ) {
+				positions.add( time );
+			}
+		}
+	}
+
+	return [ ...positions ].sort( ( a, b ) => a - b );
+};
+
+/**
+ * Keyboard stops over the series: the sorted union of their dates, or array indexes when no point has a date.
+ *
+ * Once any point has a date, a series of undated points has no stop.
+ *
+ * @param series - The series to step through.
+ * @return The stop count, and each series' point at a stop.
+ */
+export const getKeyboardStops = ( series: SeriesData[] ): KeyboardStops => {
+	const positions = getXPositions( series );
+
+	if ( positions.length === 0 ) {
+		return {
+			count: Math.max( 0, ...series.map( ( { data } ) => data.length ) ),
+			membersAt: stop =>
+				series.flatMap( s =>
+					stop < s.data.length
+						? [ { series: s, datum: s.data[ stop ] as DataPointDate, index: stop } ]
+						: []
+				),
+		};
+	}
+
+	return {
+		count: positions.length,
+		membersAt: stop => {
+			const time = positions[ stop ];
+			if ( time === undefined ) {
+				return [];
+			}
+			return series.flatMap( s => {
+				const index = s.data.findIndex( point => timeOf( point ) === time );
+				return index === -1
+					? []
+					: [ { series: s, datum: s.data[ index ] as DataPointDate, index } ];
+			} );
+		},
+	};
+};

package/src/components/tooltip/private/xy-chart-tooltip-overlay.tsx

@@ -2,13 +2,15 @@ import { DataContext, TooltipContext } from '@visx/xychart';
 import { useCallback, useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { TooltipBox } from '../tooltip-box';
+import { atNearestDate } from './at-nearest-date';
 import { BoundedTooltip, TOOLTIP_Z_INDEX } from './bounded-tooltip';
 import type {
 	CrosshairStyle,
 	RenderTooltipGlyphProps,
 	XyChartTooltipProps,
 } from '../../../visx/types';
-import type { TooltipContextType } from '@visx/xychart';
+import type { AxisScale } from '@visx/axis';
+import type { DataContextType, TooltipContextType } from '@visx/xychart';
 import type { CSSProperties, ReactNode } from 'react';
 
 const CROSSHAIR_STROKE_WIDTH = 1.5;
@@ -314,6 +316,9 @@ export const XyChartTooltipOverlay = < Datum extends object >(
 	props: XyChartTooltipProps< Datum >
 ) => {
 	const tooltipContext = useContext( TooltipContext ) as TooltipContextType< Datum > | null;
+	const dataRegistry = (
+		useContext( DataContext ) as DataContextType< AxisScale, AxisScale, Datum >
+	 )?.dataRegistry;
 	const [ container, setContainer ] = useState< HTMLElement | null >( null );
 
 	// Children of XYChart render inside its SVG, and the box needs an HTML parent.
@@ -327,7 +332,10 @@ export const XyChartTooltipOverlay = < Datum extends object >(
 			{ tooltipContext?.tooltipOpen && (
 				<XyChartTooltipContent
 					{ ...props }
-					tooltipContext={ tooltipContext }
+					tooltipContext={ {
+						...tooltipContext,
+						tooltipData: atNearestDate( tooltipContext.tooltipData, dataRegistry ),
+					} }
 					container={ container }
 				/>
 			) }

package/src/components/tooltip/test/keyboard-stops.test.ts

@@ -0,0 +1,36 @@
+import { getKeyboardStops } from '../private/keyboard-stops';
+
+describe( 'getKeyboardStops', () => {
+	it( 'gives a stop past the last date no members, even for undated points', () => {
+		const stops = getKeyboardStops( [
+			{ label: 'Dated', data: [ { date: new Date( '2025-04-01T00:00:00Z' ), value: 1 } ] },
+			{ label: 'Undated', data: [ { label: 'Apr', value: 2 } ] },
+		] );
+
+		expect( stops.count ).toBe( 1 );
+		expect( stops.membersAt( 1 ) ).toEqual( [] );
+	} );
+
+	it( 'steps through array indexes when no point has a date', () => {
+		const first = {
+			label: 'First',
+			data: [
+				{ label: 'Jan', value: 1 },
+				{ label: 'Feb', value: 2 },
+			],
+		};
+		const second = { label: 'Second', data: [ { label: 'Jan', value: 3 } ] };
+		const stops = getKeyboardStops( [ first, second ] );
+
+		expect( stops.count ).toBe( 2 );
+		expect( stops.membersAt( 0 ).map( ( { series, index } ) => [ series.label, index ] ) ).toEqual(
+			[
+				[ 'First', 0 ],
+				[ 'Second', 0 ],
+			]
+		);
+		expect( stops.membersAt( 1 ).map( ( { series, index } ) => [ series.label, index ] ) ).toEqual(
+			[ [ 'First', 1 ] ]
+		);
+	} );
+} );

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -1,10 +1,13 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useCallback, useRef, useState } from 'react';
+import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { LineChartUnresponsive } from '../../../charts/line-chart/line-chart';
 import { GlobalChartsProvider } from '../../../providers';
 import { ChartScopeContext } from '../../../providers/chart-scope';
 import { AccessibleTooltip, XYChartTooltip, useKeyboardNavigation } from '../xy-chart-tooltip';
+import type { DataPointDate } from '../../../types';
+import type { RenderTooltipParams } from '../../../visx/types';
 import type { ReactNode } from 'react';
 
 // A real chart is the harness rather than the subject: the crosshairs render only once visx has a data context and an open tooltip. The unresponsive export is what lets the test own the scope element — `withResponsive` otherwise provides its own wrapper as the scope.
@@ -48,6 +51,46 @@ const openTooltip = async () => {
 	return screen.getByTestId( 'xy-chart-tooltip-crosshair-vertical' );
 };
 
+const individualItems = [ 'First', 'Second' ].map( label => ( {
+	label,
+	data: [ { label: 'Jan', value: 10 } ],
+	options: {},
+} ) );
+const xAccessor = ( d: DataPointDate ) => d.label;
+const yAccessor = ( d: DataPointDate ) => d.value;
+const xScale = { type: 'band' } as const;
+const yScale = { type: 'linear' } as const;
+const renderKeys = ( { tooltipData }: RenderTooltipParams< DataPointDate > ) => (
+	<div data-testid="keys">{ Object.keys( tooltipData?.datumByKey ?? {} ).join( ',' ) }</div>
+);
+
+const IndividualHarness = () => {
+	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
+	const selectSecond = useCallback( () => setSelectedIndex( 1 ), [] );
+	return (
+		<GlobalChartsProvider>
+			<button onClick={ selectSecond }>next</button>
+			<XYChart width={ 300 } height={ 200 } xScale={ xScale } yScale={ yScale }>
+				{ individualItems.map( item => (
+					<BarSeries
+						key={ item.label }
+						dataKey={ item.label }
+						data={ item.data }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+					/>
+				) ) }
+				<XYChartTooltip
+					mode="individual"
+					series={ individualItems }
+					selectedIndex={ selectedIndex }
+					renderTooltip={ renderKeys }
+				/>
+			</XYChart>
+		</GlobalChartsProvider>
+	);
+};
+
 describe( 'XYChartTooltip', () => {
 	it( 'keeps AccessibleTooltip as an alias', () => {
 		expect( AccessibleTooltip ).toBe( XYChartTooltip );
@@ -129,8 +172,99 @@ describe( 'XYChartTooltip', () => {
 
 		await expect( openTooltip() ).resolves.toHaveAttribute( 'stroke', '#dbdbdb' );
 	} );
+
+	it( 'lists only the selected item in individual mode as the selection moves', async () => {
+		const user = userEvent.setup();
+
+		render( <IndividualHarness /> );
+		await expect( screen.findByTestId( 'keys' ) ).resolves.toHaveTextContent( /^First$/ );
+
+		await user.click( screen.getByRole( 'button', { name: 'next' } ) );
+
+		await expect( screen.findByTestId( 'keys' ) ).resolves.toHaveTextContent( /^Second$/ );
+	} );
+
+	// Between April and May, visx hands Views its April point and Previous period, which has no April, its May point.
+	it.each( [
+		[ 'leaves out a series with no point at the nearest date', 0, 90, 'Views=10', false ],
+		[
+			'reads every series at the nearest date, not at its own nearest point',
+			90,
+			0,
+			'Views=40,Previous period=30',
+			true,
+		],
+	] )( '%s', async ( _name, viewsDistance, previousDistance, rows, previousGlyph ) => {
+		render(
+			<PointerHarness viewsDistance={ viewsDistance } previousDistance={ previousDistance } />
+		);
+
+		await expect( screen.findByTestId( 'rows' ) ).resolves.toHaveTextContent( rows );
+		expect( screen.getByTestId( 'xy-chart-tooltip-glyph-Views' ) ).toBeInTheDocument();
+		expect( !! screen.queryByTestId( 'xy-chart-tooltip-glyph-Previous period' ) ).toBe(
+			previousGlyph
+		);
+	} );
 } );
 
+const april = { date: new Date( '2025-04-01' ), value: 10 };
+const may = { date: new Date( '2025-05-01' ), value: 40 };
+const previousMay = { date: new Date( '2025-05-01' ), value: 30 };
+const dateAccessor = ( d: DataPointDate ) => d.date;
+const timeScale = { type: 'time' } as const;
+const renderRows = ( { tooltipData }: RenderTooltipParams< DataPointDate > ) => (
+	<div data-testid="rows">
+		{ Object.entries( tooltipData?.datumByKey ?? {} )
+			.map( ( [ key, { datum } ] ) => `${ key }=${ datum.value }` )
+			.join( ',' ) }
+	</div>
+);
+
+type PointerDistances = { viewsDistance: number; previousDistance: number };
+
+const ReportPointer = ( { viewsDistance, previousDistance }: PointerDistances ) => {
+	const tooltipContext = useContext( TooltipContext );
+	useEffect( () => {
+		tooltipContext?.showTooltip( {
+			key: 'Views',
+			datum: april,
+			index: 0,
+			distanceX: viewsDistance,
+			distanceY: 0,
+		} );
+		tooltipContext?.showTooltip( {
+			key: 'Previous period',
+			datum: previousMay,
+			index: 0,
+			distanceX: previousDistance,
+			distanceY: 0,
+		} );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+	return null;
+};
+
+const PointerHarness = ( distances: PointerDistances ) => (
+	<GlobalChartsProvider>
+		<XYChart width={ 300 } height={ 200 } xScale={ timeScale } yScale={ yScale }>
+			<LineSeries
+				dataKey="Views"
+				data={ [ april, may ] }
+				xAccessor={ dateAccessor }
+				yAccessor={ yAccessor }
+			/>
+			<LineSeries
+				dataKey="Previous period"
+				data={ [ previousMay ] }
+				xAccessor={ dateAccessor }
+				yAccessor={ yAccessor }
+			/>
+			<ReportPointer { ...distances } />
+			<XYChartTooltip renderTooltip={ renderRows } showSeriesGlyphs />
+		</XYChart>
+	</GlobalChartsProvider>
+);
+
 // Mirrors the charts' markup: the focusable chart container wraps the element `chartRef` points at.
 const NavigationHarness = ( {
 	totalPoints,

package/src/components/tooltip/xy-chart-tooltip.tsx

@@ -6,6 +6,7 @@ import { useGlobalChartsContext } from '../../providers/chart-context/hooks/use-
 import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { useChartScopeElement, useStandaloneScopeClass } from '../../providers/chart-scope';
 import { resolveCssVariable } from '../../utils';
+import { getKeyboardStops } from './private/keyboard-stops';
 import { XyChartTooltipOverlay } from './private/xy-chart-tooltip-overlay';
 import type { SeriesData, DataPointDate } from '../../types';
 import type { RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
@@ -34,7 +35,7 @@ interface XYChartTooltipProps extends Omit<
 	 */
 	tooltipData?: FlattenedTooltipData[];
 	/**
-	 * For line charts: series data to show all series at selected data point
+	 * For line charts: series data to show every series at the selected date
 	 * When provided, shows all series instead of individual tooltips
 	 */
 	series?: SeriesData[];
@@ -99,6 +100,8 @@ export const XYChartTooltip: React.FC< XYChartTooltipProps > = ( {
 		return flattened;
 	}, [ series, mode ] );
 
+	const stops = useMemo( () => getKeyboardStops( series ), [ series ] );
+
 	// Tracks whether this effect opened a tooltip, so it only closes its own.
 	const hasKeyboardSelection = useRef( false );
 
@@ -152,23 +155,17 @@ export const XYChartTooltip: React.FC< XYChartTooltipProps > = ( {
 		hasKeyboardSelection.current = true;
 
 		if ( mode === 'group' ) {
-			// Show all series at the selected data point index in single tooltip.
-			series.forEach( ( s, index ) => {
-				if ( selectedIndex < s.data.length ) {
-					const datum = s.data[ selectedIndex ];
-
-					tooltipContext?.showTooltip( {
-						datum,
-						key: s.label,
-						index,
-					} );
-				}
+			// visx merges each shown datum into the previous tooltip data, so start empty or a series dropped from `series` keeps its row.
+			closeTooltipNow();
+			stops.membersAt( selectedIndex ).forEach( ( { series: member, datum, index } ) => {
+				tooltipContext?.showTooltip( { datum, key: member.label, index } );
 			} );
 		} else if ( mode === 'individual' ) {
 			// Show individual tooltips for each datapoint from each series.
 			if ( selectedIndex < tooltipData.length ) {
 				const tooltipItem = tooltipData[ selectedIndex ];
 
+				tooltipContext?.updateTooltip( state => ( { ...state, tooltipData: undefined } ) );
 				tooltipContext?.showTooltip( {
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
@@ -179,7 +176,7 @@ export const XYChartTooltip: React.FC< XYChartTooltipProps > = ( {
 
 		// Don't include tooltipContext in the dependency array to avoid loop.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ selectedIndex, tooltipData, series ] );
+	}, [ selectedIndex, tooltipData, stops ] );
 
 	// Create a focusable renderTooltip that includes accessibility features
 	const focusableRenderTooltip = useMemo( () => {
@@ -292,7 +289,7 @@ export const useKeyboardNavigation = ( {
 	const previousTotalPoints = useRef( totalPoints );
 	const previousVisibleSeriesKey = useRef( visibleSeriesKey );
 
-	// Hiding or showing a series moves every index onto a different bar. The count alone misses a
+	// Hiding or showing a series re-points every index. The count alone misses a
 	// swap that keeps it the same, such as hiding one series while revealing another of equal length.
 	// Clear rather than clamp once focus has left the chart: a new tooltip would pull focus back.
 	useEffect( () => {

package/src/index.ts

@@ -1,6 +1,11 @@
 // Charts
 export { AreaChart, AreaChartUnresponsive } from './charts/area-chart';
-export { BarChart, BarChartUnresponsive } from './charts/bar-chart';
+export {
+	BarChart,
+	BarChartUnresponsive,
+	useBarColors,
+	useBarLegendItems,
+} from './charts/bar-chart';
 export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart';
 export { ConversionFunnelChart } from './charts/conversion-funnel-chart';
 export { GeoChart, GeoChartUnresponsive } from './charts/geo-chart';
@@ -76,6 +81,7 @@ export type {
 	LegendShape,
 	LegendShapeLabel,
 	LegendShapeRenderProps,
+	BarChartLayout,
 } from './types';
 export type * from './visx/types';
 export type { PieChartProps, PieChartRenderTooltipParams } from './charts/pie-chart';
@@ -109,7 +115,7 @@ export type { LegendProps, BaseLegendProps, ChartLegendOptions } from './compone
 
 // Previously available via '@automattic/charts/bar-chart', '@automattic/charts/line-chart', etc.
 export type { AreaChartProps } from './charts/area-chart';
-export type { BarChartProps, BandHighlightSelection } from './charts/bar-chart';
+export type { BarChartProps, BandHighlightSelection, BarLegendOptions } from './charts/bar-chart';
 export type {
 	BarListChartProps,
 	RenderLabelProps,
@@ -118,6 +124,8 @@ export type {
 export type {
 	ConversionFunnelChartProps,
 	FunnelStep,
+	FunnelTooltipContent,
+	FunnelTooltipRow,
 	StepLabelRenderProps,
 	StepRateRenderProps,
 	MainMetricRenderProps,

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

@@ -371,6 +371,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			theme: providerTheme,
 			formatting,
 			getElementStyles,
+			backgroundColor: colorCache.background,
 			toggleSeriesVisibility,
 			setSeriesVisibility,
 			setChartHiddenSeries,
@@ -388,6 +389,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			providerTheme,
 			formatting,
 			getElementStyles,
+			colorCache.background,
 			toggleSeriesVisibility,
 			setSeriesVisibility,
 			setChartHiddenSeries,

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -5,7 +5,6 @@ import { useChartId } from '../hooks/use-chart-id';
 import { useChartRegistration } from '../hooks/use-chart-registration';
 import { useGlobalChartsContext } from '../hooks/use-global-charts-context';
 import { createPaletteGenerator } from '../private/palette-generator';
-import { defaultTheme } from '../themes';
 import type { BaseLegendItem } from '../../../components/legend';
 import type { SeriesData } from '../../../types';
 import type { GlobalChartsContextValue } from '../types';
@@ -1168,12 +1167,9 @@ describe( 'ChartContext', () => {
 				legendShape: 'rect',
 			} );
 
-			// Should get theme legend shape styles (not line styles), with the comparison bar
-			// opacity layered on so the swatch matches the translucent comparison bar.
 			expect( styles.shapeStyles ).toEqual( {
 				fill: '#LEGEND1',
 				stroke: '#BORDER1',
-				opacity: 0.5,
 			} );
 		} );
 	} );
@@ -2144,13 +2140,4 @@ describe( 'ChartContext', () => {
 			} );
 		} );
 	} );
-
-	describe( 'defaultTheme', () => {
-		it( 'exposes default barChart comparison styles', () => {
-			expect( defaultTheme.barChart.barStyles.comparison ).toEqual( {
-				widthFactor: 1.5,
-				opacity: 0.5,
-			} );
-		} );
-	} );
 } );

package/src/providers/chart-context/themes.ts

@@ -49,7 +49,6 @@ const defaultTheme: CompleteChartTheme = {
 		barStyles: {
 			comparison: {
 				widthFactor: 1.5,
-				opacity: 0.5,
 			},
 		},
 	},

package/src/providers/chart-context/types.ts

@@ -41,6 +41,8 @@ export interface GlobalChartsContextValue {
 	/** Locale and time zone every date the charts print is rendered in. */
 	formatting: ChartFormatting;
 	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles;
+	/** The chart background as an opaque hex, for colors that must keep contrast against it. Optional so a hand-built context value still type-checks. */
+	backgroundColor?: string;
 	// Series visibility management shared by charts, legends, and programmatic controls.
 	toggleSeriesVisibility: ( chartId: string, seriesLabel: string ) => void;
 	setSeriesVisibility: ( chartId: string, seriesLabel: string, visible: boolean ) => void;

package/src/test-utils/selected-bar-ring.ts

@@ -0,0 +1,14 @@
+import { screen } from '@testing-library/react';
+
+const NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+
+/**
+ * The box the bar chart's selected ring outlines, read from its path.
+ *
+ * @return The ring's x, y, width and height.
+ */
+export const selectedBarRingBounds = () => {
+	const d = screen.getByTestId( 'bar-chart-selected-ring' ).getAttribute( 'd' ) ?? '';
+	const [ x, y, width, height ] = ( d.match( NUMBER ) ?? [] ).map( Number );
+	return { x, y, width, height };
+};

package/src/types.ts

@@ -214,13 +214,14 @@ type LeaderboardEntryFields = {
 	previousValue?: number;
 
 	/**
-	 * Width of current bar, as % of the current value
+	 * Width of current bar, as % of the largest absolute value across rows. A negative share
+	 * extends the bar from a shared zero point toward the inline start, for every row.
 	 */
 	currentShare: number;
 
 	/**
-	 * Width of previous bar, as % of the current value. Omit when this row has
-	 * no matching comparison-period value.
+	 * Width of previous bar, as % of the largest absolute value across rows. Omit when this
+	 * row has no matching comparison-period value.
 	 */
 	previousShare?: number;
 
@@ -306,14 +307,22 @@ export type SeriesData = {
 
 /**
  * Visual styling for a bar series of a given semantic type (e.g. 'comparison').
- * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%);
- * `opacity` sets the shadow translucency.
+ * `widthFactor` is the bar width relative to the primary bar slot (1.5 = 150%).
  */
 export type BarStyles = {
 	widthFactor?: number;
+	/**
+	 * Draws the comparison bar translucent, in its primary's color, instead of the opaque tones the chart picks.
+	 * @deprecated Comparison bars are opaque. Leave this unset; set the comparison series' `options.stroke` for a color of its own.
+	 */
 	opacity?: number;
 };
 
+/**
+ * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot.
+ */
+export type BarChartLayout = 'grouped' | 'overlap';
+
 export type MultipleDataPointsDate = {
 	label: string;
 	data: DataPointDate[];

package/src/charts/private/pie-keyboard-navigation/selected-segment-ring.tsx

@@ -1,47 +0,0 @@
-import styles from './pie-keyboard-navigation.module.scss';
-
-interface SelectedSegmentRingProps {
-	/** The chart's id, which keeps the clip path unique on a page with several charts. */
-	chartId: string;
-	/** The selected segment's path, from the same arc generator that draws the segment. */
-	d: string;
-}
-
-/**
- * Encodes `value` for an SVG id, losslessly so distinct chart ids never share a clip path.
- *
- * @param value - Any string.
- * @return `value` with each character outside `[A-Za-z0-9-]` written as `_<hex code point>_`.
- */
-export const toSvgId = ( value: string ) =>
-	Array.from( value, character =>
-		/[A-Za-z0-9-]/.test( character )
-			? character
-			: `_${ character.codePointAt( 0 )?.toString( 16 ) }_`
-	).join( '' );
-
-/**
- * Marks the selected segment with a two-tone ring drawn inside its edge, so the SVG edge cannot cut it off.
- *
- * @param {SelectedSegmentRingProps} props - Component props
- * @return {JSX.Element} The ring
- */
-export const SelectedSegmentRing = ( { chartId, d }: SelectedSegmentRingProps ) => {
-	const clipId = `pie-selected-ring-clip-${ toSvgId( chartId ) }`;
-	const clipPath = `url(#${ clipId })`;
-
-	return (
-		<g pointerEvents="none" aria-hidden="true">
-			<clipPath id={ clipId }>
-				<path d={ d } />
-			</clipPath>
-			<path d={ d } clipPath={ clipPath } className={ styles[ 'selected-ring__contrast' ] } />
-			<path
-				d={ d }
-				clipPath={ clipPath }
-				className={ styles[ 'selected-ring__focus' ] }
-				data-testid="pie-selected-ring"
-			/>
-		</g>
-	);
-};