@automattic/charts 0.57.0 → 0.59.0

package/src/charts/bar-chart/test/bar-chart.test.tsx

@@ -26,10 +26,12 @@ describe( 'BarChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {} ) => {
+	const renderWithTheme = ( props = {}, children = undefined ) => {
 		return render(
 			<GlobalChartsProvider>
-				<BarChart { ...defaultProps } { ...props } />
+				<BarChart { ...defaultProps } { ...props }>
+					{ children }
+				</BarChart>
 			</GlobalChartsProvider>
 		);
 	};
@@ -123,39 +125,54 @@ describe( 'BarChart', () => {
 	} );
 
 	describe( 'Legend', () => {
+		const multiSeriesData = [
+			{
+				label: 'Series A',
+				data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+				options: {},
+			},
+			{
+				label: 'Series B',
+				data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+				options: {},
+			},
+		];
+
 		test( 'shows legend when showLegend is true', () => {
-			renderWithTheme( {
-				showLegend: true,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-						options: {},
-					},
-					{
-						label: 'Series B',
-						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
-						options: {},
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: true, data: multiSeriesData } );
 			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
 		} );
 
 		test( 'hides legend when showLegend is false', () => {
-			renderWithTheme( {
-				showLegend: false,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-						options: {},
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: false, data: multiSeriesData } );
 			expect( screen.queryByText( 'Series A' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'renders composition legend as child component', () => {
+			renderWithTheme( { data: multiSeriesData }, <BarChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithTheme( { data: multiSeriesData, showLegend: false }, <BarChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithTheme( { data: multiSeriesData }, <BarChart.Legend position="top" /> );
+
+			// Legend should appear before the chart content in DOM order
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'role="grid"' )
+			);
+		} );
 	} );
 
 	describe( 'Grid Visibility', () => {
@@ -743,7 +760,7 @@ describe( 'BarChart', () => {
 
 			renderWithTheme( {
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-interactive-bar-chart',
 				data: [
 					{
@@ -771,7 +788,7 @@ describe( 'BarChart', () => {
 		it( 'does not filter series when legendInteractive is false', () => {
 			renderWithTheme( {
 				showLegend: true,
-				legendInteractive: false,
+				legend: { interactive: false },
 				chartId: 'test-non-interactive-bar-chart',
 				data: [
 					{
@@ -795,7 +812,7 @@ describe( 'BarChart', () => {
 		it( 'shows all series when chartId is missing even if legendInteractive is true', () => {
 			renderWithTheme( {
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				// No chartId provided
 				data: [
 					{
@@ -823,7 +840,7 @@ describe( 'BarChart', () => {
 
 			renderWithTheme( {
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-all-hidden-bar-chart',
 				data: [
 					{

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../providers';
 import { formatMetricValue, attachSubComponents } from '../../utils';
 import { useChartChildren } from '../private/chart-composition';
+import { ChartLayout } from '../private/chart-layout';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
 import { useLeaderboardLegendItems } from './hooks';
@@ -110,31 +111,26 @@ const BarWithLabel = ( {
  * LeaderboardChart component displays a ranked list of data with progress bars
  * and optional comparison values.
  *
- * @param props                   - Component props
- * @param props.data              - Array of leaderboard entries to display
- * @param props.chartId           - Optional unique identifier for the chart
- * @param props.width             - Optional width of the chart container in pixels
- * @param props.height            - Optional height of the chart container in pixels
- * @param props.withComparison    - Whether to show comparison data
- * @param props.withOverlayLabel  - Whether to overlay the label on top of the bar
- * @param props.primaryColor      - Primary color for current period bars
- * @param props.secondaryColor    - Secondary color for comparison period bars
- * @param props.valueFormatter    - Custom formatter for values
- * @param props.deltaFormatter    - Custom formatter for delta values
- * @param props.loading           - Whether the chart is in loading state
- * @param props.animation         - Whether the chart should animate on load
- * @param props.showLegend        - Whether to show legend
- * @param props.legendOrientation - Legend orientation
- * @param props.legendPosition    - Legend position
- * @param props.legendAlignment   - Legend alignment
- * @param props.legendShape       - Legend shape
- * @param props.legendShapeStyles - Styles for legend shapes (width, height, margin)
- * @param props.legendLabels      - Custom labels for legend items
- * @param props.legendInteractive - Whether legend items are interactive (clickable to toggle series visibility)
- * @param props.gap               - Spacing between legend and chart content
- * @param props.children          - Child components for composition API
- * @param props.className         - Additional CSS class name
- * @param props.style             - Custom styling for the chart container
+ * @param props                  - Component props
+ * @param props.data             - Array of leaderboard entries to display
+ * @param props.chartId          - Optional unique identifier for the chart
+ * @param props.width            - Optional width of the chart container in pixels
+ * @param props.height           - Optional height of the chart container in pixels
+ * @param props.withComparison   - Whether to show comparison data
+ * @param props.withOverlayLabel - Whether to overlay the label on top of the bar
+ * @param props.primaryColor     - Primary color for current period bars
+ * @param props.secondaryColor   - Secondary color for comparison period bars
+ * @param props.valueFormatter   - Custom formatter for values
+ * @param props.deltaFormatter   - Custom formatter for delta values
+ * @param props.loading          - Whether the chart is in loading state
+ * @param props.animation        - Whether the chart should animate on load
+ * @param props.showLegend       - Whether to show legend
+ * @param props.legend           - Legend configuration (orientation, position, alignment, shape, shapeStyles, interactive)
+ * @param props.legendLabels     - Custom labels for legend items
+ * @param props.gap              - Spacing between legend and chart content
+ * @param props.children         - Child components for composition API
+ * @param props.className        - Additional CSS class name
+ * @param props.style            - Custom styling for the chart container
  * @return JSX element representing the leaderboard chart
  */
 const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
@@ -151,24 +147,22 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	animation,
 	loading = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendShape = 'circle',
-	legendShapeStyles: legendShapeStylesProp,
+	legend = {},
 	legendLabels,
-	legendInteractive = false,
 	gap = 'md',
 	className,
 	style,
 	children,
 } ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const chartId = useChartId( providedChartId );
 	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
-	const legendShapeStyles = { width: 8, height: 8, ...legendShapeStylesProp };
+	const legendShapeStyles = { width: 8, height: 8, ...legend.shapeStyles };
 
 	// Process children to extract compound components
-	const { otherChildren } = useChartChildren( children, 'LeaderboardChart' );
+	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LeaderboardChart' );
 	const {
 		labelSpacing,
 		rowGap,
@@ -253,47 +247,43 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	// Handle empty or undefined data
 	if ( ! data || data.length === 0 ) {
 		return (
-			<SingleChartContext.Provider
-				value={ {
-					chartId,
-					chartWidth: 0, // LeaderboardChart doesn't need specific dimensions
-					chartHeight: 0,
-				} }
-			>
-				<Stack
-					direction="column"
-					data-testid="leaderboard-chart-container"
+			<SingleChartContext.Provider value={ { chartId } }>
+				<ChartLayout
+					legendPosition={ legendPosition }
+					legendElement={ false }
+					legendChildren={ legendChildren }
 					className={ clsx(
 						styles.leaderboardChart,
-						{ [ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight },
-						{ [ styles[ 'leaderboardChart--loading' ] ]: loading },
+						{
+							[ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight,
+							[ styles[ 'leaderboardChart--loading' ] ]: loading,
+						},
 						className
 					) }
 					gap={ gap }
-					style={ {
-						...style,
-						width: propWidth || undefined,
-						height: propHeight || undefined,
-					} }
+					style={ { ...style, width: propWidth || undefined, height: propHeight || undefined } }
+					data-testid="leaderboard-chart-container"
+					trailingContent={ nonLegendChildren }
 				>
 					<div className={ styles.emptyState }>
 						{ loading
 							? __( 'Loading…', 'jetpack-charts' )
 							: __( 'No data available', 'jetpack-charts' ) }
 					</div>
-					{ /* Render children from composition API */ }
-					{ otherChildren }
-				</Stack>
+				</ChartLayout>
 			</SingleChartContext.Provider>
 		);
 	}
 
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			shape={ legendShape }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shape={ legend.shape ?? 'circle' }
 			shapeStyles={ legendShapeStyles }
 			chartId={ chartId }
 			interactive={ legendInteractive }
@@ -301,16 +291,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider
-			value={ {
-				chartId,
-				chartWidth: 0, // LeaderboardChart doesn't need specific dimensions
-				chartHeight: 0,
-			} }
-		>
-			<Stack
-				direction="column"
-				data-testid="leaderboard-chart-container"
+		<SingleChartContext.Provider value={ { chartId } }>
+			<ChartLayout
+				legendPosition={ legendPosition }
+				legendElement={ legendElement }
+				legendChildren={ legendChildren }
 				className={ clsx(
 					styles.leaderboardChart,
 					{
@@ -325,9 +310,9 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					width: propWidth || undefined,
 					height: propHeight || undefined,
 				} }
+				data-testid="leaderboard-chart-container"
+				trailingContent={ nonLegendChildren }
 			>
-				{ legendPosition === 'top' && legendElement }
-
 				<div className={ styles.leaderboardChart__content }>
 					{ allSeriesHidden ? (
 						<div className={ styles.emptyState }>
@@ -375,12 +360,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 						</Grid>
 					) }
 				</div>
-
-				{ legendPosition === 'bottom' && legendElement }
-
-				{ /* Render children from composition API */ }
-				{ otherChildren }
-			</Stack>
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };

package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx

@@ -169,8 +169,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendShape="rect"
-					legendShapeStyles={ { width: 10, height: 6 } }
+					legend={ { shape: 'rect', shapeStyles: { width: 10, height: 6 } } }
 				/>
 			);
 
@@ -306,7 +305,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ true }
+					legend={ { interactive: true } }
 				/>
 			);
 
@@ -320,7 +319,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ false }
+					legend={ { interactive: false } }
 				/>
 			);
 
@@ -335,7 +334,7 @@ describe( 'LeaderboardChart', () => {
 					data={ mockData }
 					withComparison={ true }
 					showLegend={ true }
-					legendInteractive={ true }
+					legend={ { interactive: true } }
 				/>
 			);
 

package/src/charts/leaderboard-chart/types.ts

@@ -1,6 +1,5 @@
 import { type ReactNode } from 'react';
 import { BaseChartProps, LeaderboardEntry } from '../../types';
-import type { LegendShapeStyles } from '../../components/legend';
 
 export interface LeaderboardChartProps
 	extends Pick<
@@ -8,16 +7,12 @@ export interface LeaderboardChartProps
 		| 'className'
 		| 'data'
 		| 'showLegend'
-		| 'legendOrientation'
-		| 'legendPosition'
-		| 'legendAlignment'
-		| 'legendShape'
+		| 'legend'
 		| 'chartId'
 		| 'width'
 		| 'height'
 		| 'size'
 		| 'gap'
-		| 'legendInteractive'
 		| 'animation'
 	> {
 	/**
@@ -62,11 +57,6 @@ export interface LeaderboardChartProps
 		'--a8c--charts--leaderboard--bar--border-radius'?: string;
 	};
 
-	/**
-	 * Styles for legend shapes (width, height, margin).
-	 */
-	legendShapeStyles?: LegendShapeStyles;
-
 	/**
 	 * Custom labels for legend items
 	 */

package/src/charts/line-chart/line-chart.module.scss

@@ -1,11 +1,6 @@
 .line-chart {
 	position: relative;
 
-	&__svg-wrapper {
-		flex: 1;
-		min-height: 0; // Required for flex shrinking
-	}
-
 	&--animated {
 
 		path {