Rename globals charts things for consistency

adamwoodnz · adamwoodnz · commit 271320e026f1 · 2025-08-28T15:03:20.000+12:00
diff --git a/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx b/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx
@@ -14,7 +14,7 @@ import {
 	GlobalChartsProvider,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartContext,
+	useGlobalChartsContext,
 } from '../../providers/chart-context';
 import { GlobalChartsContext } from '../../providers/chart-context/global-charts-provider';
 import { attachSubComponents } from '../../utils';
@@ -125,7 +125,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		totalPoints,
 	} );
 
-	const { resolveGroupColor } = useGlobalChartContext();
+	const { resolveGroupColor } = useGlobalChartsContext();
 
 	const getColor = useCallback(
 		( seriesData: SeriesData, index: number ) =>
diff --git a/projects/js-packages/charts/src/components/conversion-funnel-chart/conversion-funnel-chart.tsx b/projects/js-packages/charts/src/components/conversion-funnel-chart/conversion-funnel-chart.tsx
@@ -1,7 +1,7 @@
 import { __experimentalText as Text } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import clsx from 'clsx';
 import { type FC, useRef, useMemo, useEffect, useCallback } from 'react';
-import { useGlobalChartTheme } from '../../providers/chart-context';
+import { useGlobalChartsTheme } from '../../providers/chart-context';
 import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './hooks/use-funnel-selection';
 import { hexToRgba } from './utils/color-utils';
@@ -68,7 +68,7 @@ export const ConversionFunnelChart: FC< ConversionFunnelChartProps > = ( {
 	className,
 	style,
 } ) => {
-	const theme = useGlobalChartTheme();
+	const theme = useGlobalChartsTheme();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
 
diff --git a/projects/js-packages/charts/src/components/leaderboard-chart/leaderboard-chart.tsx b/projects/js-packages/charts/src/components/leaderboard-chart/leaderboard-chart.tsx
@@ -8,7 +8,7 @@ import {
 import { Fragment } from '@wordpress/element';
 import clsx from 'clsx';
 import { type FC } from 'react';
-import { useGlobalChartTheme } from '../../providers/chart-context';
+import { useGlobalChartsTheme } from '../../providers/chart-context';
 import { formatMetricValue } from '../../utils';
 import styles from './leaderboard-chart.module.scss';
 
@@ -214,7 +214,7 @@ export const LeaderboardChart: FC< LeaderboardChartProps > = ( {
 	className,
 	style,
 } ) => {
-	const theme = useGlobalChartTheme();
+	const theme = useGlobalChartsTheme();
 
 	// Get component settings from theme with fallbacks
 	const leaderboardSettings = theme.leaderboardChart;
diff --git a/projects/js-packages/charts/src/components/legend/base-legend.tsx b/projects/js-packages/charts/src/components/legend/base-legend.tsx
@@ -3,7 +3,7 @@ import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legen
 import { scaleOrdinal } from '@visx/scale';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useMemo, useContext } from 'react';
-import { useGlobalChartTheme, GlobalChartsContext } from '../../providers/chart-context';
+import { useGlobalChartsTheme, GlobalChartsContext } from '../../providers/chart-context';
 import styles from './legend.module.scss';
 import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from './utils';
 import type { BaseLegendProps } from './types';
@@ -43,7 +43,7 @@ export const BaseLegend = forwardRef< HTMLDivElement, BaseLegendProps >(
 		},
 		ref
 	) => {
-		const theme = useGlobalChartTheme();
+		const theme = useGlobalChartsTheme();
 		const context = useContext( GlobalChartsContext );
 		const resolveGroupColor = context?.resolveGroupColor;
 
diff --git a/projects/js-packages/charts/src/components/legend/use-chart-legend-items.ts b/projects/js-packages/charts/src/components/legend/use-chart-legend-items.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useGlobalChartTheme } from '../../providers/chart-context';
+import { useGlobalChartsTheme } from '../../providers/chart-context';
 import { getItemShapeStyles, getSeriesStroke } from '../../utils';
 import type { BaseLegendItem } from './types';
 import type { ChartTheme, SeriesData, DataPointDate, DataPointPercentage } from '../../types';
@@ -142,7 +142,7 @@ export function useChartLegendItems<
 	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
 	const { showValues = false, withGlyph = false, glyphSize = 8, renderGlyph } = options;
-	const theme = useGlobalChartTheme();
+	const theme = useGlobalChartsTheme();
 
 	return useMemo( () => {
 		if ( ! data || ! Array.isArray( data ) || data.length === 0 ) {
diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart-annotation.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart-annotation.tsx
@@ -9,7 +9,7 @@ import {
 import { DataContext } from '@visx/xychart';
 import merge from 'deepmerge';
 import { useContext, useRef, useEffect, useState, useMemo } from 'react';
-import { useGlobalChartTheme } from '../../providers/chart-context';
+import { useGlobalChartsTheme } from '../../providers/chart-context';
 import { isSafari } from '../../utils';
 import LineChartAnnotationLabelWithPopover, {
 	POPOVER_BUTTON_SIZE,
@@ -175,7 +175,7 @@ const LineChartAnnotation: FC< LineChartAnnotationProps > = ( {
 	renderLabel,
 	renderLabelPopover,
 } ) => {
-	const providerTheme = useGlobalChartTheme();
+	const providerTheme = useGlobalChartsTheme();
 	const { xScale, yScale } = useContext( DataContext ) || {};
 	const labelRef = useRef< SVGGElement >( null );
 	const [ height, setHeight ] = useState< number | null >( null );
diff --git a/projects/js-packages/charts/src/components/line-chart/line-chart.tsx b/projects/js-packages/charts/src/components/line-chart/line-chart.tsx
@@ -16,8 +16,8 @@ import {
 	GlobalChartsContext,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartContext,
-	useGlobalChartTheme,
+	useGlobalChartsContext,
+	useGlobalChartsTheme,
 } from '../../providers/chart-context';
 import { attachSubComponents, getSeriesLineStyles } from '../../utils';
 import { DefaultGlyph } from '../default-glyph';
@@ -257,7 +257,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		},
 		ref
 	) => {
-		const providerTheme = useGlobalChartTheme();
+		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
 		const [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();
@@ -278,7 +278,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		);
 
 		const dataSorted = useChartDataTransform( data );
-		const { resolveGroupColor } = useGlobalChartContext();
+		const { resolveGroupColor } = useGlobalChartsContext();
 
 		// Use the keyboard navigation hook
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
diff --git a/projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx b/projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx
@@ -1,5 +1,5 @@
 import { GlyphStar } from '@visx/glyph';
-import { useGlobalChartTheme } from '../../../providers/chart-context';
+import { useGlobalChartsTheme } from '../../../providers/chart-context';
 import { GlobalChartsProvider } from '../../../providers/chart-context/global-charts-provider';
 import { CHART_THEME_MAP, themeArgTypes } from '../../../stories/theme-config';
 import LineChart from '../line-chart';
@@ -118,7 +118,7 @@ CustomSvg.args = {
 };
 
 const ToolTipWithGlyph = ( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {
-	const providerTheme = useGlobalChartTheme();
+	const providerTheme = useGlobalChartsTheme();
 
 	return (
 		<div>
diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx
@@ -7,8 +7,8 @@ import {
 	GlobalChartsProvider,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartContext,
-	useGlobalChartTheme,
+	useGlobalChartsContext,
+	useGlobalChartsTheme,
 } from '../../providers/chart-context';
 import { GlobalChartsContext } from '../../providers/chart-context/global-charts-provider';
 import { attachSubComponents } from '../../utils';
@@ -118,7 +118,7 @@ const PieChartInternal = ( {
 	cornerScale = 0,
 	children = null,
 }: PieChartProps ) => {
-	const providerTheme = useGlobalChartTheme();
+	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId( providedChartId );
 	const [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();
 	const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =
@@ -156,7 +156,7 @@ const PieChartInternal = ( {
 		metadata: chartMetadata,
 	} );
 
-	const { resolveGroupColor } = useGlobalChartContext();
+	const { resolveGroupColor } = useGlobalChartsContext();
 
 	if ( ! isValid ) {
 		return (
diff --git a/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx b/projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx
@@ -10,7 +10,7 @@ import {
 	GlobalChartsProvider,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartContext,
+	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers/chart-context';
 import { attachSubComponents } from '../../utils';
@@ -148,7 +148,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Validate data first to get validation result
 	const { isValid, message } = validateData( data );
 
-	const { resolveGroupColor } = useGlobalChartContext();
+	const { resolveGroupColor } = useGlobalChartsContext();
 
 	// Define accessors with useMemo to avoid changing dependencies
 	const accessors = useMemo(
diff --git a/projects/js-packages/charts/src/hooks/use-xychart-theme.ts b/projects/js-packages/charts/src/hooks/use-xychart-theme.ts
@@ -1,10 +1,10 @@
 import { buildChartTheme } from '@visx/xychart';
 import { useMemo } from 'react';
-import { useGlobalChartTheme } from '../providers/chart-context';
+import { useGlobalChartsTheme } from '../providers/chart-context';
 import { SeriesData } from '../types';
 
 export const useXYChartTheme = ( data: SeriesData[] ) => {
-	const theme = useGlobalChartTheme();
+	const theme = useGlobalChartsTheme();
 
 	return useMemo( () => {
 		const seriesColors = ( data ?? [] )
diff --git a/projects/js-packages/charts/src/index.ts b/projects/js-packages/charts/src/index.ts
@@ -18,7 +18,7 @@ export { LineShape, CircleShape, RectShape } from './visx/legend';
 // Themes
 export { ThemeProvider } from './providers/theme';
 export { defaultTheme, jetpackTheme, wooTheme } from './providers/theme/themes';
-export { useGlobalChartTheme } from './providers/chart-context';
+export { useGlobalChartsTheme } from './providers/chart-context';
 
 // Utilities
 export { mergeThemes } from './utils';
diff --git a/projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx b/projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx
@@ -1,10 +1,10 @@
 import { createContext, useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { defaultTheme } from '../theme/themes';
-import type { ChartContextValue, ChartRegistration } from './types';
+import type { GlobalChartsContextValue, ChartRegistration } from './types';
 import type { ChartTheme } from '../../types';
 import type { FC, ReactNode } from 'react';
 
-export const GlobalChartsContext = createContext< ChartContextValue | null >( null );
+export const GlobalChartsContext = createContext< GlobalChartsContextValue | null >( null );
 
 export interface GlobalChartsProviderProps {
 	children: ReactNode;
@@ -47,7 +47,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		[ charts ]
 	);
 
-	const resolveGroupColor = useCallback< ChartContextValue[ 'resolveGroupColor' ] >(
+	const resolveGroupColor = useCallback< GlobalChartsContextValue[ 'resolveGroupColor' ] >(
 		( { group, index, overrideColor } ) => {
 			// Highest precedence: explicit series stroke
 			if ( overrideColor ) {
@@ -75,7 +75,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		[ providerTheme.colors ]
 	);
 
-	const value: ChartContextValue = useMemo(
+	const value: GlobalChartsContextValue = useMemo(
 		() => ( {
 			charts,
 			registerChart,
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-chart-registration.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-chart-registration.ts
@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import { useDeepMemo } from '../../../hooks';
-import { useGlobalChartContext } from './use-global-chart-context';
+import { useGlobalChartsContext } from './use-global-charts-context';
 import type { BaseLegendItem } from '../../../components/legend/types';
 
 export const useChartRegistration = ( {
@@ -16,7 +16,7 @@ export const useChartRegistration = ( {
 	isDataValid: boolean;
 	metadata?: Record< string, unknown >;
 } ): void => {
-	const { registerChart, unregisterChart } = useGlobalChartContext();
+	const { registerChart, unregisterChart } = useGlobalChartsContext();
 
 	// Memoize legendItems with deep comparison to prevent infinite loops
 	const stableLegendItems = useDeepMemo( legendItems );
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-chart-context.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-chart-context.ts
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-charts-context.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-charts-context.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { GlobalChartsContext } from '../global-charts-provider';
+import type { GlobalChartsContextValue } from '../types';
+
+export const useGlobalChartsContext = (): GlobalChartsContextValue => {
+	const context = useContext( GlobalChartsContext );
+	if ( ! context ) {
+		throw new Error( 'useGlobalChartsContext must be used within a GlobalChartsProvider' );
+	}
+	return context;
+};
diff --git a/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-charts-theme.ts b/projects/js-packages/charts/src/providers/chart-context/hooks/use-global-charts-theme.ts
@@ -14,7 +14,7 @@ import type { ChartTheme } from '../../../types';
  *
  * @return The effective chart theme to use
  */
-export const useGlobalChartTheme = (): ChartTheme => {
+export const useGlobalChartsTheme = (): ChartTheme => {
 	// Get context but don't throw if it doesn't exist (for testing or standalone usage)
 	const context = useContext( GlobalChartsContext );
 	const globalTheme = context?.theme;
diff --git a/projects/js-packages/charts/src/providers/chart-context/index.ts b/projects/js-packages/charts/src/providers/chart-context/index.ts
@@ -1,6 +1,6 @@
 export { GlobalChartsProvider, GlobalChartsContext } from './global-charts-provider';
-export { useGlobalChartContext } from './hooks/use-global-chart-context';
+export { useGlobalChartsContext } from './hooks/use-global-charts-context';
 export { useChartId } from './hooks/use-chart-id';
 export { useChartRegistration } from './hooks/use-chart-registration';
-export { useGlobalChartTheme } from './hooks/use-global-chart-theme';
-export type { ChartContextValue, ChartRegistration } from './types';
+export { useGlobalChartsTheme } from './hooks/use-global-charts-theme';
+export type { GlobalChartsContextValue, ChartRegistration } from './types';
diff --git a/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx b/projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx
diff --git a/projects/js-packages/charts/src/providers/chart-context/test/use-global-charts-theme.test.tsx b/projects/js-packages/charts/src/providers/chart-context/test/use-global-charts-theme.test.tsx
diff --git a/projects/js-packages/charts/src/providers/chart-context/types.ts b/projects/js-packages/charts/src/providers/chart-context/types.ts
