@automattic/charts 0.56.7 → 0.58.0

package/dist/{types-C05PdDJa.d.ts → types-Dfw9VOKI.d.cts}

@@ -1,32 +1,24 @@
 import { LegendOrdinal } from '@visx/legend';
+import { j as LegendPosition, h as LegendItemStyles, i as LegendLabelStyles, k as LegendShapeStyles } from './types-ChOUI9-N.cjs';
 import { GlyphProps, LineStyles } from '@visx/xychart';
 import { ComponentProps, ReactNode, CSSProperties } from 'react';
 
-type LegendOrdinalProps = Omit<ComponentProps<typeof LegendOrdinal>, 'scale' | 'direction'>;
-type BaseLegendProps = Omit<LegendOrdinalProps, 'shapeStyle'> & {
+type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
+type BaseLegendProps = VisxLegendProps & {
     items: BaseLegendItem[];
     orientation?: 'horizontal' | 'vertical';
-    /**
-     * TODO: Add 'left' | 'right' positioning support in future implementation
-     */
-    position?: 'top' | 'bottom';
+    position?: LegendPosition;
     alignment?: 'start' | 'center' | 'end';
-    /**
-     * Maximum width for legend items. When set, text overflow behavior is controlled by textOverflow prop.
-     * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-     */
-    maxWidth?: string;
-    /**
-     * Controls how text behaves when it exceeds maxWidth.
-     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-     */
-    textOverflow?: 'ellipsis' | 'wrap';
-    /**
-     * Additional CSS class name for legend items.
-     * This allows consumers to customize individual legend item styling.
-     */
-    legendItemClassName?: string;
+    /** Additional CSS class name for legend items. */
+    itemClassName?: string;
+    /** CSS styles for each legend item (margin, flexDirection). */
+    itemStyles?: LegendItemStyles;
+    /** Additional CSS class name for legend labels. */
+    labelClassName?: string;
+    /** CSS styles for legend labels (justifyContent, flex, margin). */
+    labelStyles?: LegendLabelStyles;
+    /** Styles for legend shapes (width, height, margin). */
+    shapeStyles?: LegendShapeStyles;
     /**
      * Function for rendering a custom legend layout.
      */
@@ -47,7 +39,7 @@ type LegendProps = Omit<BaseLegendProps, 'items'> & {
 };
 type BaseLegendItem = {
     label: string;
-    value: number | string;
+    value?: number | string;
     color: string;
     glyphSize?: number;
     renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;

package/dist/utils/index.cjs

@@ -18,7 +18,7 @@
 
 
 
-var _chunkZVGEDXDPcjs = require('../chunk-ZVGEDXDP.cjs');
+var _chunkMXGLYWVPcjs = require('../chunk-MXGLYWVP.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
 
@@ -40,5 +40,5 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-exports.attachSubComponents = _chunkZVGEDXDPcjs.attachSubComponents; exports.formatMetricValue = _chunkZVGEDXDPcjs.formatMetricValue; exports.formatPercentage = _chunkZVGEDXDPcjs.formatPercentage; exports.getColorDistance = _chunkZVGEDXDPcjs.getColorDistance; exports.getItemShapeStyles = _chunkZVGEDXDPcjs.getItemShapeStyles; exports.getLongestTickWidth = _chunkZVGEDXDPcjs.getLongestTickWidth; exports.getSeriesLineStyles = _chunkZVGEDXDPcjs.getSeriesLineStyles; exports.getSeriesStroke = _chunkZVGEDXDPcjs.getSeriesStroke; exports.hexToRgba = _chunkZVGEDXDPcjs.hexToRgba; exports.isSafari = _chunkZVGEDXDPcjs.isSafari; exports.isValidHexColor = _chunkZVGEDXDPcjs.isValidHexColor; exports.lightenHexColor = _chunkZVGEDXDPcjs.lightenHexColor; exports.mergeThemes = _chunkZVGEDXDPcjs.mergeThemes; exports.normalizeColorToHex = _chunkZVGEDXDPcjs.normalizeColorToHex; exports.parseAsLocalDate = _chunkZVGEDXDPcjs.parseAsLocalDate; exports.parseHslString = _chunkZVGEDXDPcjs.parseHslString; exports.parseRgbString = _chunkZVGEDXDPcjs.parseRgbString; exports.resolveCssVariable = _chunkZVGEDXDPcjs.resolveCssVariable; exports.validateHexColor = _chunkZVGEDXDPcjs.validateHexColor;
+exports.attachSubComponents = _chunkMXGLYWVPcjs.attachSubComponents; exports.formatMetricValue = _chunkMXGLYWVPcjs.formatMetricValue; exports.formatPercentage = _chunkMXGLYWVPcjs.formatPercentage; exports.getColorDistance = _chunkMXGLYWVPcjs.getColorDistance; exports.getItemShapeStyles = _chunkMXGLYWVPcjs.getItemShapeStyles; exports.getLongestTickWidth = _chunkMXGLYWVPcjs.getLongestTickWidth; exports.getSeriesLineStyles = _chunkMXGLYWVPcjs.getSeriesLineStyles; exports.getSeriesStroke = _chunkMXGLYWVPcjs.getSeriesStroke; exports.hexToRgba = _chunkMXGLYWVPcjs.hexToRgba; exports.isSafari = _chunkMXGLYWVPcjs.isSafari; exports.isValidHexColor = _chunkMXGLYWVPcjs.isValidHexColor; exports.lightenHexColor = _chunkMXGLYWVPcjs.lightenHexColor; exports.mergeThemes = _chunkMXGLYWVPcjs.mergeThemes; exports.normalizeColorToHex = _chunkMXGLYWVPcjs.normalizeColorToHex; exports.parseAsLocalDate = _chunkMXGLYWVPcjs.parseAsLocalDate; exports.parseHslString = _chunkMXGLYWVPcjs.parseHslString; exports.parseRgbString = _chunkMXGLYWVPcjs.parseRgbString; exports.resolveCssVariable = _chunkMXGLYWVPcjs.resolveCssVariable; exports.validateHexColor = _chunkMXGLYWVPcjs.validateHexColor;
 //# sourceMappingURL=index.cjs.map

package/dist/utils/index.d.cts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.cjs';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.cjs';
+import { o as SeriesData, b as ChartTheme, c as CompleteChartTheme } from '../types-ChOUI9-N.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.js';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.js';
+import { o as SeriesData, b as ChartTheme, c as CompleteChartTheme } from '../types-ChOUI9-N.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';

package/dist/utils/index.js

@@ -18,7 +18,7 @@ import {
   parseRgbString,
   resolveCssVariable,
   validateHexColor
-} from "../chunk-TE63Y5PX.js";
+} from "../chunk-JJIMABHT.js";
 import "../chunk-G3PMV62Z.js";
 export {
   attachSubComponents,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.56.7",
+	"version": "0.58.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -177,10 +177,10 @@
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
 		"test": "TZ=UTC jest --config=tests/jest.config.cjs",
 		"test-coverage": "pnpm run test --coverage",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.0",
+		"@automattic/number-formatters": "^1.1.2",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -200,8 +200,8 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.7.0",
-		"@wordpress/ui": "0.7.0",
+		"@wordpress/theme": "0.8.0",
+		"@wordpress/ui": "0.8.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -224,21 +224,23 @@
 		"@types/jest": "^30.0.0",
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
+		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.2.0",
-		"@wordpress/element": "6.40.0",
+		"@wordpress/components": "32.3.0",
+		"@wordpress/element": "6.41.0",
 		"babel-jest": "30.2.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.25.9",
 		"esbuild-plugin-babel": "^0.2.3",
 		"esbuild-sass-plugin": "^3.1.0",
+		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.2.0",
 		"jest-extended": "7.0.0",
 		"postcss": "8.5.6",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"sass-embedded": "1.97.2",
+		"sass-embedded": "1.97.3",
 		"storybook": "10.2.11",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"

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

@@ -13,7 +13,6 @@ import {
 	useZeroValueDisplay,
 	useChartMargin,
 	useElementSize,
-	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -25,6 +24,7 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
+import { useChartChildren, renderLegendSlot } from '../private/chart-composition';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
 import styles from './bar-chart.module.scss';
@@ -39,7 +39,6 @@ export interface BarChartProps extends BaseChartProps< SeriesData[] > {
 	orientation?: 'horizontal' | 'vertical';
 	withPatterns?: boolean;
 	showZeroValues?: boolean;
-	legendInteractive?: boolean;
 	children?: ReactNode;
 }
 
@@ -85,24 +84,18 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	margin,
 	withTooltips = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'rect',
+	legend = {},
 	gridVisibility: gridVisibilityProp,
 	renderTooltip,
 	options = {},
 	orientation = 'vertical',
 	withPatterns = false,
 	showZeroValues = false,
-	legendInteractive = false,
 	animation,
 	children,
 	gap = 'md',
 } ) => {
+	const legendInteractive = legend.interactive ?? false;
 	const horizontal = orientation === 'horizontal';
 	const chartId = useChartId( providedChartId );
 	const theme = useXYChartTheme( data );
@@ -110,8 +103,10 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const dataSorted = useChartDataTransform( data );
 
 	// Transform data to add a small value for zero bars to make them visible
+	// For vertical bars, height determines bar pixel height; for horizontal bars, width does
 	const dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {
 		enabled: showZeroValues,
+		valueAxisLength: horizontal ? width : height,
 	} );
 
 	// Create legend items using the reusable hook
@@ -121,8 +116,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const chartRef = useRef< HTMLDivElement >( null );
 
-	// Check if children contain a Legend component (composition pattern)
-	const hasLegendChild = useHasLegendChild( children );
+	// Process children for composition API (Legend, etc.)
+	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'BarChart' );
+	const hasLegendChild = legendChildren.length > 0;
 
 	// Use the measured SVG wrapper height, falling back to the passed height if provided.
 	// When there's a legend (via prop or composition), we must wait for measurement because
@@ -325,16 +321,18 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
 	const highlightedBarStyle = createKeyboardHighlightStyle();
 
+	const legendPosition = legend.position ?? 'bottom';
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			maxWidth={ legendMaxWidth }
-			textOverflow={ legendTextOverflow }
-			legendItemClassName={ legendItemClassName }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shapeStyles={ legend.shapeStyles }
 			className={ styles[ 'bar-chart__legend' ] }
-			shape={ legendShape }
+			shape={ legend.shape ?? 'rect' }
 			chartId={ chartId }
 			interactive={ legendInteractive }
 		/>
@@ -369,6 +367,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 				data-chart-id={ `bar-chart-${ chartId }` }
 			>
 				{ legendPosition === 'top' && legendElement }
+				{ renderLegendSlot( legendChildren, 'top' ) }
 
 				<div
 					className={ styles[ 'bar-chart__svg-wrapper' ] }
@@ -482,8 +481,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 				</div>
 
 				{ legendPosition === 'bottom' && legendElement }
+				{ renderLegendSlot( legendChildren, 'bottom' ) }
 
-				{ children }
+				{ nonLegendChildren }
 			</Stack>
 		</SingleChartContext.Provider>
 	);

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', () => {
@@ -562,6 +579,36 @@ describe( 'BarChart', () => {
 				expect( width ).toBeGreaterThan( 0 );
 			} );
 		} );
+
+		test( 'ensures minimum pixel height for zero values in small charts', () => {
+			// With a small chart height (100px) and large data range, zero-value bars
+			// should still be visible (at least 3px based on MIN_PIXEL_HEIGHT)
+			renderWithTheme( {
+				showZeroValues: true,
+				height: 100,
+				data: [
+					{
+						label: 'Test Series',
+						data: [
+							{ label: 'Zero', value: 0 },
+							{ label: 'Large', value: 10000 },
+						],
+						options: {},
+					},
+				],
+			} );
+
+			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const bars = svgElement?.querySelectorAll( '.visx-bar-group rect' );
+
+			expect( bars?.length ).toBe( 2 );
+
+			// The zero-value bar (first bar) should have a minimum visible height.
+			// We check for >= 2px to allow for rounding in the pixel calculation.
+			const zeroBar = bars?.[ 0 ];
+			const zeroBarHeight = parseFloat( zeroBar?.getAttribute( 'height' ) || '0' );
+			expect( zeroBarHeight ).toBeGreaterThanOrEqual( 2 );
+		} );
 	} );
 
 	/* eslint-enable testing-library/no-node-access */
@@ -713,7 +760,7 @@ describe( 'BarChart', () => {
 
 			renderWithTheme( {
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-interactive-bar-chart',
 				data: [
 					{
@@ -741,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: [
 					{
@@ -765,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: [
 					{
@@ -793,7 +840,7 @@ describe( 'BarChart', () => {
 
 			renderWithTheme( {
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-all-hidden-bar-chart',
 				data: [
 					{

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -372,7 +372,7 @@ describe( 'ConversionFunnelChart', () => {
 			expect( customRenderMainMetric ).toHaveBeenCalledWith( {
 				mainRate: 10.3,
 				changeIndicator: undefined,
-				className: undefined,
+				className: 'main-metric',
 				changeColor: expect.any( String ),
 			} );
 		} );
@@ -427,7 +427,7 @@ describe( 'ConversionFunnelChart', () => {
 				index: 1,
 				top: expect.any( Number ),
 				left: expect.any( Number ),
-				className: undefined,
+				className: 'tooltip-wrapper',
 			} );
 		} );
 

package/src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts

@@ -53,7 +53,6 @@ export function useLeaderboardLegendItems( {
 
 		items.push( {
 			label: legendLabels?.primary || __( 'Current period', 'jetpack-charts' ),
-			value: '',
 			color: resolvedPrimaryColor,
 		} );
 
@@ -66,7 +65,6 @@ export function useLeaderboardLegendItems( {
 
 			items.push( {
 				label: legendLabels?.comparison || __( 'Previous period', 'jetpack-charts' ),
-				value: '',
 				color: resolvedSecondaryColor,
 			} );
 		}

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

@@ -1,19 +1,20 @@
 .leaderboardChart {
-	display: flex;
-	flex-direction: column;
 	transition: opacity 0.3s ease-in-out;
 
-	&--legend-top {
-		flex-direction: column-reverse;
-	}
-
-	&--with-legend {
-		gap: 16px;
+	&--responsive {
+		height: 100%;
+		width: 100%;
 	}
 
 	&--loading {
 		opacity: 0.5;
 	}
+
+	&__content {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+	}
 }
 
 .barWithLabelContainer {
@@ -61,8 +62,6 @@
 }
 
 .valueContainer {
-	display: flex;
-	gap: 4px;
 	justify-content: flex-end;
 }