@automattic/charts 1.5.0 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.5.0",
+	"version": "1.5.2",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.0",
+		"@automattic/number-formatters": "^1.2.2",
 		"@babel/runtime": "7.29.2",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",

package/src/charts/area-chart/area-chart.tsx

@@ -35,7 +35,7 @@ import { SingleChartContext, type SingleChartRef } from '../private/single-chart
 import { SvgEmptyState } from '../private/svg-empty-state';
 import { getCurveType, getFormatter, guessOptimalNumTicks } from '../private/time-axis';
 import { withResponsive } from '../private/with-responsive';
-import { useXZoom, ZoomResetButton, ZoomSelectionRect } from '../private/x-zoom';
+import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
 import styles from './area-chart.module.scss';
 import { AreaChartScalesRef, HoverGlyphs, validateData } from './private';
 import type { AreaChartProps } from './types';
@@ -423,17 +423,21 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 												</SvgEmptyState>
 											) : null }
 
-											{ ! allSeriesHidden && stacked && (
-												<AnimatedAreaStack
-													curve={ curve }
-													offset={ stackOffset }
-													renderLine={ resolvedWithStroke }
-												>
-													{ seriesWithVisibility.map( renderSeries ) }
-												</AnimatedAreaStack>
-											) }
-
-											{ ! allSeriesHidden && ! stacked && seriesWithVisibility.map( renderSeries ) }
+											{ /* Area is animated, so clip the whole time it is zoomable to keep the zoom-out animation in bounds. */ }
+											<ZoomClip active={ zoomable } chartId={ chartId }>
+												{ ! allSeriesHidden && stacked && (
+													<AnimatedAreaStack
+														curve={ curve }
+														offset={ stackOffset }
+														renderLine={ resolvedWithStroke }
+													>
+														{ seriesWithVisibility.map( renderSeries ) }
+													</AnimatedAreaStack>
+												) }
+												{ ! allSeriesHidden &&
+													! stacked &&
+													seriesWithVisibility.map( renderSeries ) }
+											</ZoomClip>
 
 											{ withTooltips && (
 												<>

package/src/charts/area-chart/test/area-chart.test.tsx

@@ -534,4 +534,14 @@ describe( 'AreaChart', () => {
 			expect( screen.queryByTestId( 'area-chart-hover-glyph-0' ) ).not.toBeInTheDocument();
 		} );
 	} );
+
+	// The area is animated, so it clips whenever zoomable (not just while zoomed).
+	test( 'clips the series to the plot when zoomable', () => {
+		renderUnresponsive( { zoomable: true, chartId: 'zoomtest' } );
+
+		expect( screen.getByTestId( 'chart-series-clip-group' ) ).toHaveAttribute(
+			'clip-path',
+			'url(#chart-zoom-clip-zoomtest)'
+		);
+	} );
 } );

package/src/charts/line-chart/line-chart.tsx

@@ -37,7 +37,7 @@ import { SingleChartContext, type SingleChartRef } from '../private/single-chart
 import { SvgEmptyState } from '../private/svg-empty-state';
 import { getCurveType, getFormatter, guessOptimalNumTicks } from '../private/time-axis';
 import { withResponsive } from '../private/with-responsive';
-import { useXZoom, ZoomResetButton, ZoomSelectionRect } from '../private/x-zoom';
+import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
@@ -458,86 +458,93 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 												</SvgEmptyState>
 											) : null }
 
-											{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
-												// Skip rendering invisible series
-												if ( ! isVisible ) {
-													return null;
-												}
-
-												const { color, lineStyles, glyph } = getElementStyles( {
-													data: seriesData,
-													index,
-												} );
-
-												const lineProps = {
-													stroke: color,
-													...lineStyles,
-												};
-
-												return (
-													<g key={ seriesData?.label || index }>
-														{ withGradientFill && (
-															<LinearGradient
-																id={ `area-gradient-${ chartId }-${ index + 1 }` }
-																from={ color }
-																fromOpacity={ 0.4 }
-																toOpacity={ 0.1 }
-																to={ providerTheme.backgroundColor }
-																{ ...seriesData.options?.gradient }
-																data-testid="line-gradient"
-															>
-																{ seriesData.options?.gradient?.stops?.map( ( stop, stopIndex ) => (
-																	<stop
-																		key={ `${ stop.offset }-${ stop.color || color }` }
-																		offset={ stop.offset }
-																		stopColor={ stop.color || color }
-																		stopOpacity={ stop.opacity ?? 1 }
-																		data-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }
+											{ /* Line is not animated, so clip only while zoomed; its edge glyphs sit on the plot border and must not be clipped. */ }
+											<ZoomClip active={ zoomable && !! zoom.domain } chartId={ chartId }>
+												{ seriesWithVisibility.map(
+													( { series: seriesData, index, isVisible } ) => {
+														// Skip rendering invisible series
+														if ( ! isVisible ) {
+															return null;
+														}
+
+														const { color, lineStyles, glyph } = getElementStyles( {
+															data: seriesData,
+															index,
+														} );
+
+														const lineProps = {
+															stroke: color,
+															...lineStyles,
+														};
+
+														return (
+															<g key={ seriesData?.label || index }>
+																{ withGradientFill && (
+																	<LinearGradient
+																		id={ `area-gradient-${ chartId }-${ index + 1 }` }
+																		from={ color }
+																		fromOpacity={ 0.4 }
+																		toOpacity={ 0.1 }
+																		to={ providerTheme.backgroundColor }
+																		{ ...seriesData.options?.gradient }
+																		data-testid="line-gradient"
+																	>
+																		{ seriesData.options?.gradient?.stops?.map(
+																			( stop, stopIndex ) => (
+																				<stop
+																					key={ `${ stop.offset }-${ stop.color || color }` }
+																					offset={ stop.offset }
+																					stopColor={ stop.color || color }
+																					stopOpacity={ stop.opacity ?? 1 }
+																					data-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }
+																				/>
+																			)
+																		) }
+																	</LinearGradient>
+																) }
+																<AreaSeries
+																	key={ seriesData?.label }
+																	dataKey={ seriesData?.label }
+																	data={ seriesData.data as DataPointDate[] }
+																	{ ...accessors }
+																	fill={
+																		withGradientFill
+																			? `url(#area-gradient-${ chartId }-${ index + 1 })`
+																			: 'transparent'
+																	}
+																	renderLine={ true }
+																	curve={ getCurveType( curveType, smoothing ) }
+																	lineProps={ lineProps }
+																/>
+
+																{ withStartGlyphs && (
+																	<LineChartGlyph
+																		index={ index }
+																		data={ seriesData }
+																		color={ color }
+																		renderGlyph={ glyph ?? renderGlyph }
+																		accessors={ accessors }
+																		glyphStyle={ glyphStyle }
+																		position="start"
 																	/>
-																) ) }
-															</LinearGradient>
-														) }
-														<AreaSeries
-															key={ seriesData?.label }
-															dataKey={ seriesData?.label }
-															data={ seriesData.data as DataPointDate[] }
-															{ ...accessors }
-															fill={
-																withGradientFill
-																	? `url(#area-gradient-${ chartId }-${ index + 1 })`
-																	: 'transparent'
-															}
-															renderLine={ true }
-															curve={ getCurveType( curveType, smoothing ) }
-															lineProps={ lineProps }
-														/>
-
-														{ withStartGlyphs && (
-															<LineChartGlyph
-																index={ index }
-																data={ seriesData }
-																color={ color }
-																renderGlyph={ glyph ?? renderGlyph }
-																accessors={ accessors }
-																glyphStyle={ glyphStyle }
-																position="start"
-															/>
-														) }
-
-														{ withEndGlyphs && (
-															<LineChartGlyph
-																index={ index }
-																data={ seriesData }
-																color={ color }
-																renderGlyph={ glyph ?? renderGlyph }
-																accessors={ accessors }
-																glyphStyle={ glyphStyle }
-																position="end"
-															/>
-														) }
-													</g>
-												);
-											} ) }
+																) }
+
+																{ withEndGlyphs && (
+																	<LineChartGlyph
+																		index={ index }
+																		data={ seriesData }
+																		color={ color }
+																		renderGlyph={ glyph ?? renderGlyph }
+																		accessors={ accessors }
+																		glyphStyle={ glyphStyle }
+																		position="end"
+																	/>
+																) }
+															</g>
+														);
+													}
+												) }
+											</ZoomClip>
 
 											{ withTooltips && (
 												<AccessibleTooltip

package/src/charts/line-chart/test/line-chart.test.tsx

@@ -14,6 +14,31 @@ jest.mock( '../../../hooks/use-element-size', () => ( {
 	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
+// Drive the zoom state directly so we can assert the clip-path behaviour without
+// simulating a pointer drag (svgPoint geometry is unavailable in jsdom). The rest
+// of the x-zoom module (ZoomClipPath, getZoomClipPathId, etc.) stays real.
+const mockUseXZoom = jest.fn();
+jest.mock( '../../private/x-zoom', () => {
+	const actual = jest.requireActual( '../../private/x-zoom' );
+	return {
+		__esModule: true,
+		...actual,
+		useXZoom: ( ...args: unknown[] ) => mockUseXZoom( ...args ),
+	};
+} );
+
+const passthroughZoom = () => ( {
+	domain: null,
+	drag: null,
+	reset: jest.fn(),
+	handlers: { onPointerDown: jest.fn(), onPointerMove: jest.fn(), onPointerUp: jest.fn() },
+} );
+
+beforeEach( () => {
+	mockUseXZoom.mockReset();
+	mockUseXZoom.mockImplementation( passthroughZoom );
+} );
+
 const customTheme = {
 	...defaultTheme,
 	glyphs: [
@@ -1253,4 +1278,20 @@ describe( 'LineChart', () => {
 			} );
 		} );
 	} );
+
+	// The line is not animated, so it clips only while actually zoomed.
+	test( 'clips the series to the plot when zoomed', () => {
+		mockUseXZoom.mockImplementation( () => ( {
+			domain: [ new Date( '2024-01-01' ), new Date( '2024-01-02' ) ],
+			drag: null,
+			reset: jest.fn(),
+			handlers: { onPointerDown: jest.fn(), onPointerMove: jest.fn(), onPointerUp: jest.fn() },
+		} ) );
+		renderUnwrappedWithTheme( { zoomable: true, chartId: 'zoomtest' } );
+
+		expect( screen.getByTestId( 'chart-series-clip-group' ) ).toHaveAttribute(
+			'clip-path',
+			'url(#chart-zoom-clip-zoomtest)'
+		);
+	} );
 } );

package/src/charts/private/x-zoom.tsx

@@ -5,7 +5,7 @@ import styles from './x-zoom.module.scss';
 import type { SingleChartRef } from './single-chart-context';
 import type { AxisScale } from '@visx/axis';
 import type { EventHandlerParams } from '@visx/xychart';
-import type { MutableRefObject } from 'react';
+import type { MutableRefObject, ReactNode } from 'react';
 
 const MIN_DRAG_PIXELS = 6;
 
@@ -122,6 +122,53 @@ export function ZoomSelectionRect( { drag }: { drag: Drag | null } ) {
 	);
 }
 
+/**
+ * Wraps a chart's series in a group that is clipped to the inner plot rectangle
+ * while `active`. Reads the plot geometry from visx's `DataContext` (the same
+ * source as `ZoomSelectionRect`), so the host charts don't compute any margins.
+ * The group is always rendered (only its `clip-path` toggles) so toggling zoom
+ * never remounts or re-animates the series.
+ *
+ * @param props          - Props.
+ * @param props.active   - Whether to clip (e.g. `zoomable`, or `zoomable && zoomed`).
+ * @param props.chartId  - Chart id; used to build a unique clip-path id.
+ * @param props.children - The series to clip.
+ * @return JSX element.
+ */
+export function ZoomClip( {
+	active,
+	chartId,
+	children,
+}: {
+	active: boolean;
+	chartId?: string;
+	children: ReactNode;
+} ) {
+	const { margin, innerWidth, innerHeight } = useContext( DataContext );
+	// Sanitise the chart id to a valid SVG/CSS id, and keep it unique per chart.
+	const id = `chart-zoom-clip-${ String( chartId ?? '' ).replace( /[^A-Za-z0-9_-]/g, '' ) }`;
+	const clip = active && ( innerWidth ?? 0 ) > 0 && ( innerHeight ?? 0 ) > 0;
+	return (
+		<>
+			{ clip && (
+				<defs>
+					<clipPath id={ id } data-testid="chart-zoom-clip">
+						<rect
+							x={ margin?.left ?? 0 }
+							y={ margin?.top ?? 0 }
+							width={ innerWidth }
+							height={ innerHeight }
+						/>
+					</clipPath>
+				</defs>
+			) }
+			<g clipPath={ clip ? `url(#${ id })` : undefined } data-testid="chart-series-clip-group">
+				{ children }
+			</g>
+		</>
+	);
+}
+
 /**
  * Visible icon-only reset button rendered as an HTML overlay on top of
  * the chart container. The host should wrap its SVG in a `position: relative`