@automattic/charts 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.0.1",
+	"version": "1.0.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.1.3",
+		"@automattic/number-formatters": "^1.1.4",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -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.1",
-		"@storybook/react": "10.3.1",
+		"@storybook/addon-docs": "10.3.3",
+		"@storybook/react": "10.3.3",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -114,7 +114,7 @@
 		"@wordpress/element": "6.42.0",
 		"babel-jest": "30.3.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
-		"esbuild": "0.25.9",
+		"esbuild": "0.27.4",
 		"esbuild-plugin-babel": "^0.2.3",
 		"esbuild-sass-plugin": "^3.1.0",
 		"identity-obj-proxy": "^3.0.0",
@@ -125,7 +125,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.1",
+		"storybook": "10.3.3",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -1,7 +1,7 @@
-.conversionFunnelChart {
+.conversion-funnel-chart {
 	font-family: var(--funnel-font-family, "SF Pro Text");
 
-	&.loading {
+	&--loading {
 		opacity: 0.6;
 		pointer-events: none;
 	}
@@ -53,9 +53,12 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	transition: all 0.3s ease;
 
-	&.blurred {
+	&--animated {
+		transition: opacity 0.3s ease;
+	}
+
+	&--blurred {
 		opacity: 0.3;
 	}
 }
@@ -95,24 +98,12 @@
 	border-radius: 4px;
 	position: relative;
 	cursor: pointer;
-	transition: all 0.2s ease;
-
-
-	&.disabled {
-		cursor: pointer;
-	}
 }
 
 .funnel-bar {
 	width: 100%;
 	min-height: 4px;
 	border-radius: 4px 4px 0 0;
-	transition: all 0.3s ease;
-
-	&.selected {
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-		filter: brightness(1.1);
-	}
 
 	&--animated {
 		transform-origin: bottom;

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -52,7 +52,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 } ) => {
 	const chartId = useChartId( providedChartId );
 	const { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
 
@@ -301,7 +301,11 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 			<Stack
 				direction="column"
 				data-testid="conversion-funnel-chart"
-				className={ clsx( styles.conversionFunnelChart, loading && styles.loading, className ) }
+				className={ clsx(
+					styles[ 'conversion-funnel-chart' ],
+					loading && styles[ 'conversion-funnel-chart--loading' ],
+					className
+				) }
 				style={ { ...style, height: resolvedHeight } }
 			>
 				<div className={ styles[ 'empty-state' ] }>
@@ -324,7 +328,11 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 					portalContainerRef( node );
 					chartRef.current = node;
 				} }
-				className={ clsx( styles.conversionFunnelChart, loading && styles.loading, className ) }
+				className={ clsx(
+					styles[ 'conversion-funnel-chart' ],
+					loading && styles[ 'conversion-funnel-chart--loading' ],
+					className
+				) }
 				style={ { ...style, height: resolvedHeight } }
 			>
 				{ /* Main Metric */ }
@@ -348,7 +356,12 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 						return (
 							<div
 								key={ step.id }
-								className={ clsx( styles[ 'funnel-step' ], isBlurred && styles.blurred ) }
+								data-testid="funnel-step"
+								className={ clsx(
+									styles[ 'funnel-step' ],
+									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
+									isBlurred && styles[ 'funnel-step--blurred' ]
+								) }
 							>
 								{ /* Step Label and Rate */ }
 								<div className={ styles[ 'step-header' ] }>
@@ -376,7 +389,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 
 								{ /* Funnel Bar */ }
 								<div
-									className={ clsx( styles[ 'bar-container' ], isBlurred && styles.disabled ) }
+									className={ styles[ 'bar-container' ] }
 									onClick={ stepHandlers.get( step.id )?.onClick }
 									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
 									role="button"

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -461,4 +461,15 @@ describe( 'ConversionFunnelChart', () => {
 			expect( customRenderMainMetric ).toHaveBeenCalled();
 		} );
 	} );
+
+	describe( 'Color palette readiness', () => {
+		it( 'enables transitions once color palette is resolved', () => {
+			render( <ConversionFunnelChart { ...defaultProps } /> );
+
+			// After render, effects have run (via useEffect in GlobalChartsProvider),
+			// so the palette is resolved and the animated class is applied to funnel steps
+			const funnelStep = screen.getAllByTestId( 'funnel-step' )[ 0 ];
+			expect( funnelStep ).toHaveClass( 'funnel-step--animated' );
+		} );
+	} );
 } );

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

@@ -70,11 +70,16 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		maxHue: 0,
 	} ) );
 
+	// Track if the color palette has been resolved from the DOM
+	// Useful for animations that should only run after the color palette is resolved
+	const [ isColorPaletteResolved, setIsColorPaletteResolved ] = useState( false );
+
 	// Compute color cache after DOM is updated (so CSS variables are available)
 	// Resolves CSS variables from the wrapper element's scope to handle scoped variables
 	// Note: Only re-runs when providerTheme changes, not when wrapper element changes.
 	// This is intentional, as wrapperRef is expected to be stable for the lifetime of the provider.
 	useLayoutEffect( () => {
+		setIsColorPaletteResolved( false );
 		const { colors } = providerTheme;
 		const resolvedColors: string[] = [];
 		const hues: number[] = [];
@@ -125,6 +130,12 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		} );
 	}, [ providerTheme ] );
 
+	useEffect( () => {
+		if ( colorCache.colors.length > 0 ) {
+			setIsColorPaletteResolved( true );
+		}
+	}, [ colorCache ] );
+
 	const [ groupToColorMap, setGroupToColorMap ] = useState< Map< string, string > >(
 		() => new Map()
 	);
@@ -271,6 +282,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,
+			isColorPaletteResolved,
 		} ),
 		[
 			charts,
@@ -282,6 +294,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,
+			isColorPaletteResolved,
 		]
 	);
 

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

@@ -47,6 +47,57 @@ describe( 'ChartContext', () => {
 			expect( contextValue.charts ).toBeInstanceOf( Map );
 		} );
 
+		it( 'exposes isColorPaletteResolved as true after render', () => {
+			let contextValue: GlobalChartsContextValue;
+
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			// After render and effects, isColorPaletteResolved should be true
+			expect( contextValue.isColorPaletteResolved ).toBe( true );
+		} );
+
+		it( 'resolves palette again after theme change', () => {
+			let contextValue: GlobalChartsContextValue;
+
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			const theme1: Partial< ChartTheme > = {
+				colors: [ '#006DAB', '#1F9828' ],
+			};
+			const theme2: Partial< ChartTheme > = {
+				colors: [ '#FF0000', '#00FF00' ],
+			};
+
+			const { rerender } = render(
+				<GlobalChartsProvider theme={ theme1 }>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			expect( contextValue.isColorPaletteResolved ).toBe( true );
+
+			rerender(
+				<GlobalChartsProvider theme={ theme2 }>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			// After theme change, palette should re-resolve to true
+			expect( contextValue.isColorPaletteResolved ).toBe( true );
+		} );
+
 		it( 'throws error when useGlobalChartsContext is used outside provider', () => {
 			const TestComponent = () => {
 				useGlobalChartsContext();

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

@@ -35,4 +35,5 @@ export interface GlobalChartsContextValue {
 	toggleSeriesVisibility: ( chartId: string, seriesLabel: string ) => void;
 	isSeriesVisible: ( chartId: string, seriesLabel: string ) => boolean;
 	getHiddenSeries: ( chartId: string ) => Set< string >;
+	isColorPaletteResolved: boolean;
 }