Revert removal of legend shape styles handling

Author: adamwoodnz

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

@@ -7,8 +7,9 @@ import {
 import { formatPercentage } from '../../../utils';
 import type { SeriesData, DataPointDate, DataPointPercentage } from '../../../types';
 import type { BaseLegendItem } from '../types';
-import type { GlyphProps, LineStyles } from '@visx/xychart';
-import type { ReactNode, CSSProperties } from 'react';
+import type { LegendShape } from '@visx/legend/lib/types';
+import type { GlyphProps } from '@visx/xychart';
+import type { ReactNode } from 'react';
 
 export type LegendValueDisplay = 'percentage' | 'value' | 'valueDisplay' | 'none';
 
@@ -18,6 +19,7 @@ export interface ChartLegendOptions {
 	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
 	showValues?: boolean;
 	legendValueDisplay?: LegendValueDisplay;
+	legendShape?: LegendShape< SeriesData[], number >;
 }
 
 /**
@@ -67,6 +69,7 @@ function formatPointValue(
  * @param withGlyph        - Whether to include glyph rendering
  * @param glyphSize        - Size of the glyph
  * @param renderGlyph      - Component to render the glyph
+ * @param legendShape      - The shape to use for the item
  * @return Array of processed legend items
  */
 function processSeriesData(
@@ -75,19 +78,21 @@ function processSeriesData(
 	showValues: boolean,
 	withGlyph: boolean,
 	glyphSize: number,
-	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode
+	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,
+	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
 	const mapper = ( series: SeriesData, index: number ) => {
-		const { color, lineStyles, glyph } = getElementStyles( {
+		const { color, glyph, shapeStyles } = getElementStyles( {
 			data: series,
 			index,
+			legendShape,
 		} );
 
 		const baseItem: BaseLegendItem = {
 			label: series.label,
 			value: showValues ? series.data?.length?.toString() || '0' : '',
 			color,
-			shapeStyle: lineStyles as CSSProperties & LineStyles,
+			shapeStyles,
 		};
 
 		if ( withGlyph ) {
@@ -116,6 +121,7 @@ function processSeriesData(
  * @param withGlyph          - Whether to include glyph rendering
  * @param glyphSize          - Size of the glyph
  * @param renderGlyph        - Component to render the glyph
+ * @param legendShape        - The shape to use for the item
  * @return Array of processed legend items
  */
 function processPointData(
@@ -125,19 +131,21 @@ function processPointData(
 	legendValueDisplay: LegendValueDisplay,
 	withGlyph: boolean,
 	glyphSize: number,
-	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode
+	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,
+	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
 	const mapper = ( point: DataPointDate | DataPointPercentage, index: number ) => {
-		const { color, lineStyles, glyph } = getElementStyles( {
+		const { color, glyph, shapeStyles } = getElementStyles( {
 			data: point as DataPointPercentage,
 			index,
+			legendShape,
 		} );
 
 		const baseItem: BaseLegendItem = {
 			label: point.label,
 			value: formatPointValue( point, showValues, legendValueDisplay ),
 			color,
-			shapeStyle: lineStyles as CSSProperties & LineStyles,
+			shapeStyles,
 		};
 
 		if ( withGlyph ) {
@@ -159,13 +167,18 @@ function processPointData(
 
 /**
  * Hook to transform chart data into legend items
- * @param data    - The chart data to transform
- * @param options - Configuration options for legend generation
+ * @param data        - The chart data to transform
+ * @param options     - Configuration options for legend generation
+ * @param legendShape - The shape to use for the item
  * @return Array of legend items ready for display
  */
 export function useChartLegendItems<
 	T extends SeriesData[] | DataPointDate[] | DataPointPercentage[],
->( data: T, options: ChartLegendOptions = {} ): BaseLegendItem[] {
+>(
+	data: T,
+	options: ChartLegendOptions = {},
+	legendShape?: LegendShape< SeriesData[], number >
+): BaseLegendItem[] {
 	const {
 		showValues = false,
 		legendValueDisplay = 'percentage',
@@ -188,7 +201,8 @@ export function useChartLegendItems<
 				showValues,
 				withGlyph,
 				glyphSize,
-				renderGlyph
+				renderGlyph,
+				legendShape
 			);
 		}
 
@@ -200,7 +214,8 @@ export function useChartLegendItems<
 			legendValueDisplay,
 			withGlyph,
 			glyphSize,
-			renderGlyph
+			renderGlyph,
+			legendShape
 		);
 	}, [
 		data,
@@ -210,5 +225,6 @@ export function useChartLegendItems<
 		withGlyph,
 		glyphSize,
 		renderGlyph,
+		legendShape,
 	] );
 }

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

@@ -91,7 +91,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const domain = legendScale.domain();
 
 		const getShapeStyle = useCallback(
-			( { index }: { index: number } ) => items[ index ]?.shapeStyle,
+			( { index }: { index: number } ) => items[ index ]?.shapeStyles,
 			[ items ]
 		);
 

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

@@ -37,5 +37,5 @@ export type BaseLegendItem = {
 	color: string;
 	glyphSize?: number;
 	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
-	shapeStyle?: CSSProperties & LineStyles;
+	shapeStyles?: CSSProperties & LineStyles;
 };

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

@@ -332,7 +332,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		);
 
 		// Create legend items using the reusable hook
-		const legendItems = useChartLegendItems( dataSorted, legendOptions );
+		const legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );
 
 		// Memoize metadata to prevent unnecessary re-registration
 		const chartMetadata = useMemo(

projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { getSeriesLineStyles, mergeThemes } from '../../utils';
+import { getItemShapeStyles, getSeriesLineStyles, mergeThemes } from '../../utils';
 import { defaultTheme } from './themes';
 import type { GlobalChartsContextValue, ChartRegistration } from './types';
 import type { ChartTheme, CompleteChartTheme } from '../../types';
@@ -86,7 +86,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 	);
 
 	const getElementStyles = useCallback< GlobalChartsContextValue[ 'getElementStyles' ] >(
-		( { data, index, overrideColor } ) => {
+		( { data, index, overrideColor, legendShape } ) => {
 			const isSeriesData = data && typeof data === 'object' && 'data' in data && 'options' in data;
 			const isPointPercentageData = data && typeof data === 'object' && 'percentage' in data;
 
@@ -101,6 +101,9 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 				} ),
 				lineStyles: isSeriesData ? getSeriesLineStyles( data, index, providerTheme ) : {},
 				glyph: providerTheme.glyphs?.[ index ],
+				shapeStyles: isSeriesData
+					? getItemShapeStyles( data, index, providerTheme, legendShape )
+					: {},
 			};
 		},
 		[ providerTheme, resolveColor ]

projects/js-packages/charts/src/providers/chart-context/types.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import type { BaseLegendItem } from '../../components/legend';
 import type { CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
+import type { LegendShape } from '@visx/legend/lib/types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 
 export interface ChartRegistration {
@@ -13,12 +14,14 @@ export type GetElementStylesParams = {
 	index: number;
 	data?: SeriesData | DataPointPercentage;
 	overrideColor?: string;
+	legendShape?: LegendShape< SeriesData[], number >;
 };
 
 export type ElementStyles = {
 	color: string;
 	lineStyles: LineStyles;
 	glyph: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
+	shapeStyles: CSSProperties & LineStyles;
 };
 
 export interface GlobalChartsContextValue {