Charts: Add standalone Legend component with Chart Context system

projects/js-packages/charts/changelog/add-charts-50-standalone-legend-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Charts: adds a standalone chart legend component

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

@@ -1,10 +1,12 @@
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';
 import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
 import clsx from 'clsx';
-import { useCallback, useId, useState, useRef, useMemo } from 'react';
+import { useCallback, useContext, useId, useState, useRef } from 'react';
 import { ChartProvider, useChartId, useChartRegistration } from '../../providers/chart-context';
+import { ChartContext } from '../../providers/chart-context/chart-context';
 import { useChartTheme, useXYChartTheme } from '../../providers/theme';
 import { Legend } from '../legend';
+import { useChartLegendData } from '../legend/use-chart-legend-data';
 import { useChartDataTransform } from '../shared/use-chart-data-transform';
 import { useChartMargin } from '../shared/use-chart-margin';
 import { useElementHeight } from '../shared/use-element-height';
@@ -66,10 +68,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	// Generate a unique chart ID to avoid pattern conflicts with multiple charts
 	const internalChartId = useId();
 	const chartId = useChartId( providedChartId );
+	const providerTheme = useChartTheme();
 	const theme = useXYChartTheme( data );
 
 	const dataSorted = useChartDataTransform( data );
 
+	// Create legend items using the reusable hook
+	const legendItems = useChartLegendData( dataSorted, providerTheme );
+
 	const chartOptions = useBarChartOptions( dataSorted, horizontal, options );
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
 	const [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();
@@ -222,20 +228,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const error = validateData( dataSorted );
 	const isDataValid = ! error;
 
-	// Create legend items (hooks must be called in same order every render)
-	const legendItems = useMemo(
-		() =>
-			dataSorted.map( ( group, index ) => ( {
-				label: group.label, // Label for each unique group
-				value: '', // Empty string since we don't want to show a specific value
-				color: getColor( group, index ),
-				shapeStyle: group?.options?.legendShapeStyle,
-			} ) ),
-		[ dataSorted, getColor ]
-	);
-
 	// Register chart with context only if data is valid
-	const providerTheme = useChartTheme();
 	useChartRegistration( chartId, legendItems, providerTheme, 'bar', isDataValid, {
 		orientation,
 		withPatterns,
@@ -339,25 +332,36 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			</XYChart>
 
 			{ showLegend && (
-				<Legend
-					items={ legendItems }
-					orientation={ legendOrientation }
-					alignmentHorizontal={ legendAlignmentHorizontal }
-					alignmentVertical={ legendAlignmentVertical }
-					className={ styles[ 'bar-chart__legend' ] }
-					shape={ legendShape }
-					ref={ legendRef }
-				/>
+				<div ref={ legendRef }>
+					<Legend
+						items={ legendItems }
+						orientation={ legendOrientation }
+						alignmentHorizontal={ legendAlignmentHorizontal }
+						alignmentVertical={ legendAlignmentVertical }
+						className={ styles[ 'bar-chart__legend' ] }
+						shape={ legendShape }
+					/>
+				</div>
 			) }
 		</div>
 	);
 };
 
-const BarChart: FC< BarChartProps > = props => (
-	<ChartProvider>
-		<BarChartInternal { ...props } />
-	</ChartProvider>
-);
+const BarChart: FC< BarChartProps > = props => {
+	const existingContext = useContext( ChartContext );
+
+	// If we're already in a ChartProvider context, don't create a new one
+	if ( existingContext ) {
+		return <BarChartInternal { ...props } />;
+	}
+
+	// Otherwise, create our own ChartProvider
+	return (
+		<ChartProvider>
+			<BarChartInternal { ...props } />
+		</ChartProvider>
+	);
+};
 
 BarChart.displayName = 'BarChart';
 

projects/js-packages/charts/src/components/legend/base-legend.tsx

@@ -6,7 +6,7 @@ import { forwardRef, useCallback } from 'react';
 import { useChartTheme } from '../../providers/theme';
 import styles from './legend.module.scss';
 import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from './utils';
-import type { LegendProps } from './types';
+import type { BaseLegendProps } from './types';
 
 const orientationToFlexDirection = {
 	horizontal: 'row' as const,
@@ -17,7 +17,7 @@ const orientationToFlexDirection = {
  * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.
  * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.
  */
-export const BaseLegend = forwardRef< HTMLDivElement, LegendProps >(
+export const BaseLegend = forwardRef< HTMLDivElement, BaseLegendProps >(
 	(
 		{
 			items,
@@ -133,6 +133,7 @@ export const BaseLegend = forwardRef< HTMLDivElement, LegendProps >(
 									{ label.text }
 									{ items.find( item => item.label === label.text )?.value && (
 										<span className={ styles[ 'legend-item-value' ] }>
+											{ ' ' }
 											{ items.find( item => item.label === label.text )?.value }
 										</span>
 									) }

projects/js-packages/charts/src/components/legend/index.ts

@@ -1,2 +1,5 @@
-export { BaseLegend as Legend } from './base-legend';
-export type { LegendProps } from './types';
+export { Legend } from './legend';
+export { BaseLegend } from './base-legend';
+export { useChartLegendData } from './use-chart-legend-data';
+export type { LegendProps, BaseLegendProps } from './types';
+export type { ChartLegendOptions } from './use-chart-legend-data';

projects/js-packages/charts/src/components/legend/legend.tsx

@@ -0,0 +1,24 @@
+import { useContext, useMemo } from 'react';
+import { ChartContext } from '../../providers/chart-context/chart-context';
+import { BaseLegend } from './base-legend';
+import type { LegendProps } from './types';
+import type { FC } from 'react';
+
+export const Legend: FC< LegendProps > = ( { chartId, items, ...props } ) => {
+	// Get context but don't throw if it doesn't exist
+	const context = useContext( ChartContext );
+
+	// Use useMemo to ensure re-rendering when context changes
+	const contextItems = useMemo( () => {
+		return chartId && context ? context.getChartData( chartId )?.legendItems : undefined;
+	}, [ chartId, context ] );
+
+	// Use context items if available, otherwise fall back to provided items
+	const legendItems = ( contextItems || items ) as typeof items;
+
+	if ( ! legendItems ) {
+		return null;
+	}
+
+	return <BaseLegend items={ legendItems } { ...props } />;
+};