Charts: Add global context utility for getting styles for any chart component

projects/js-packages/charts/changelog/charts-111-charts-add-hook-to-get-the-styles-for-any-chart-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Charts: Add get element styles utility to global context

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx

@@ -126,24 +126,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		totalPoints,
 	} );
 
-	const { resolveGroupColor } = useGlobalChartsContext();
-
-	const getColor = useCallback(
-		( seriesData: SeriesData, index: number ) =>
-			resolveGroupColor( {
-				group: seriesData.group,
-				index,
-				overrideColor: seriesData.options?.stroke,
-			} ),
-		[ resolveGroupColor ]
-	);
+	const { getElementStyles } = useGlobalChartsContext();
 
 	const getBarBackground = useCallback(
 		( index: number ) => () =>
 			withPatterns
 				? `url(#${ getPatternId( chartId, index ) })`
-				: getColor( dataSorted[ index ], index ),
-		[ withPatterns, getColor, dataSorted, chartId ]
+				: getElementStyles( { data: dataSorted[ index ], index } ).color,
+		[ withPatterns, getElementStyles, dataSorted, chartId ]
 	);
 
 	const renderDefaultTooltip = useCallback(
@@ -341,12 +331,15 @@ const BarChartInternal: FC< BarChartProps > = ( {
 						<>
 							<defs data-testid="bar-chart-patterns">
 								{ dataSorted.map( ( seriesData, index ) =>
-									renderPattern( index, getColor( seriesData, index ) )
+									renderPattern( index, getElementStyles( { data: seriesData, index } ).color )
 								) }
 							</defs>
 							<style>
 								{ dataSorted.map( ( seriesData, index ) =>
-									createPatternBorderStyle( index, getColor( seriesData, index ) )
+									createPatternBorderStyle(
+										index,
+										getElementStyles( { data: seriesData, index } ).color
+									)
 								) }
 							</style>
 						</>

projects/js-packages/charts/src/components/leaderboard-chart/hooks/use-leaderboard-legend-items.ts

@@ -36,7 +36,7 @@ export function useLeaderboardLegendItems( {
 	};
 } ): BaseLegendItem[] {
 	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
-	const { resolveGroupColor } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 
 	return useMemo( () => {
 		if ( ! data || data.length === 0 ) {
@@ -46,7 +46,7 @@ export function useLeaderboardLegendItems( {
 		const items: BaseLegendItem[] = [];
 
 		// Add current period legend item
-		const resolvedPrimaryColor = resolveGroupColor( {
+		const { color: resolvedPrimaryColor } = getElementStyles( {
 			index: 0,
 			overrideColor: primaryColor || leaderboardChartSettings.primaryColor,
 		} );
@@ -55,13 +55,11 @@ export function useLeaderboardLegendItems( {
 			label: legendLabels?.primary || __( 'Current period', 'jetpack-charts' ),
 			value: '',
 			color: resolvedPrimaryColor,
-			index: 0,
-			overrideColor: primaryColor,
 		} );
 
 		// Add comparison period legend item if comparison is enabled and overlay label is not enabled
 		if ( withComparison && ! withOverlayLabel ) {
-			const resolvedSecondaryColor = resolveGroupColor( {
+			const { color: resolvedSecondaryColor } = getElementStyles( {
 				index: 1,
 				overrideColor: secondaryColor || leaderboardChartSettings.secondaryColor,
 			} );
@@ -70,8 +68,6 @@ export function useLeaderboardLegendItems( {
 				label: legendLabels?.comparison || __( 'Previous period', 'jetpack-charts' ),
 				value: '',
 				color: resolvedSecondaryColor,
-				index: 1,
-				overrideColor: secondaryColor,
 			} );
 		}
 
@@ -83,7 +79,7 @@ export function useLeaderboardLegendItems( {
 		withComparison,
 		legendLabels,
 		leaderboardChartSettings,
-		resolveGroupColor,
+		getElementStyles,
 		withOverlayLabel,
 	] );
 }

projects/js-packages/charts/src/components/leaderboard-chart/leaderboard-chart.tsx

@@ -158,12 +158,12 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 		secondaryColor: settingsSecondaryColor,
 		deltaColors,
 	} = leaderboardChartSettings;
-	const { resolveGroupColor } = useGlobalChartsContext();
-	const resolvedPrimaryColor = resolveGroupColor( {
+	const { getElementStyles } = useGlobalChartsContext();
+	const { color: resolvedPrimaryColor } = getElementStyles( {
 		index: 0,
 		overrideColor: primaryColor || settingsPrimaryColor,
 	} );
-	const resolvedSecondaryColor = resolveGroupColor( {
+	const { color: resolvedSecondaryColor } = getElementStyles( {
 		index: 1,
 		overrideColor: secondaryColor || settingsSecondaryColor,
 	} );

projects/js-packages/charts/src/components/leaderboard-chart/test/use-leaderboard-legend-items.test.tsx

@@ -82,8 +82,6 @@ describe( 'useLeaderboardLegendItems', () => {
 				label: 'Current period',
 				value: '',
 				color: expect.any( String ),
-				index: 0,
-				overrideColor: undefined,
 			} );
 		} );
 
@@ -106,17 +104,13 @@ describe( 'useLeaderboardLegendItems', () => {
 				label: 'Current period',
 				value: '',
 				color: expect.any( String ),
-				index: 0,
-				overrideColor: undefined,
 			} );
 
 			// Previous period item
 			expect( result.current[ 1 ] ).toEqual( {
 				label: 'Previous period',
 				value: '',
 				color: expect.any( String ),
-				index: 1,
-				overrideColor: undefined,
 			} );
 		} );
 	} );
@@ -143,8 +137,6 @@ describe( 'useLeaderboardLegendItems', () => {
 			// Note: The actual color will be resolved by the context, but we can check structure
 			expect( result.current[ 0 ].color ).toBeTruthy();
 			expect( result.current[ 1 ].color ).toBeTruthy();
-			expect( result.current[ 0 ].overrideColor ).toBeUndefined();
-			expect( result.current[ 1 ].overrideColor ).toBeUndefined();
 		} );
 
 		it( 'should use custom primary color override', () => {
@@ -161,7 +153,7 @@ describe( 'useLeaderboardLegendItems', () => {
 				{ wrapper }
 			);
 
-			expect( result.current[ 0 ].overrideColor ).toBe( customPrimary );
+			expect( result.current[ 0 ].color ).toBe( customPrimary );
 		} );
 
 		it( 'should use custom secondary color override', () => {
@@ -180,8 +172,8 @@ describe( 'useLeaderboardLegendItems', () => {
 				{ wrapper }
 			);
 
-			expect( result.current[ 0 ].overrideColor ).toBe( customPrimary );
-			expect( result.current[ 1 ].overrideColor ).toBe( customSecondary );
+			expect( result.current[ 0 ].color ).toBe( customPrimary );
+			expect( result.current[ 1 ].color ).toBe( customSecondary );
 		} );
 
 		it( 'should use both custom colors with comparison', () => {
@@ -201,8 +193,8 @@ describe( 'useLeaderboardLegendItems', () => {
 			);
 
 			expect( result.current ).toHaveLength( 2 );
-			expect( result.current[ 0 ].overrideColor ).toBe( customPrimary );
-			expect( result.current[ 1 ].overrideColor ).toBe( customSecondary );
+			expect( result.current[ 0 ].color ).toBe( customPrimary );
+			expect( result.current[ 1 ].color ).toBe( customSecondary );
 		} );
 	} );
 
@@ -576,7 +568,7 @@ describe( 'useLeaderboardLegendItems', () => {
 	} );
 
 	describe( 'Index and structure validation', () => {
-		it( 'should have correct indices for items', () => {
+		it( 'should have correct number of items with comparison', () => {
 			const wrapper = createWrapper();
 			const { result } = renderHook(
 				() =>
@@ -588,8 +580,9 @@ describe( 'useLeaderboardLegendItems', () => {
 				{ wrapper }
 			);
 
-			expect( result.current[ 0 ].index ).toBe( 0 );
-			expect( result.current[ 1 ].index ).toBe( 1 );
+			expect( result.current ).toHaveLength( 2 );
+			expect( result.current[ 0 ].label ).toBe( 'Current period' );
+			expect( result.current[ 1 ].label ).toBe( 'Previous period' );
 		} );
 
 		it( 'should have empty value strings for all items', () => {