@automattic/charts 1.0.2 → 1.1.1

package/src/components/legend/private/base-legend.tsx

@@ -1,6 +1,7 @@
 import { Group } from '@visx/group';
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import {
 	type RefAttributes,
@@ -16,10 +17,11 @@ import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '.
 import styles from './base-legend.module.scss';
 import type { BaseLegendProps } from '../types';
 
-const orientationToFlexDirection = {
-	horizontal: 'row' as const,
-	vertical: 'column' as const,
-};
+const ALIGNMENT_TO_FLEX = {
+	start: 'flex-start',
+	center: 'center',
+	end: 'flex-end',
+} as const;
 
 // Component for legend text with truncation detection
 // Moved outside BaseLegend to prevent recreation on every render
@@ -159,6 +161,8 @@ export const BaseLegend: ForwardRefExoticComponent<
 			[ interactive, handleLegendClick ]
 		);
 
+		const flexAlignment = ALIGNMENT_TO_FLEX[ alignment ] ?? 'center';
+
 		return render ? (
 			render( items )
 		) : (
@@ -168,20 +172,17 @@ export const BaseLegend: ForwardRefExoticComponent<
 				labelTransform={ labelTransform }
 			>
 				{ labels => (
-					<div
+					<Stack
 						ref={ ref }
+						direction={ orientation === 'vertical' ? 'column' : 'row' }
+						gap={ orientation === 'vertical' ? 'sm' : 'lg' }
+						align={ orientation === 'vertical' ? flexAlignment : undefined }
+						justify={ orientation === 'horizontal' ? flexAlignment : undefined }
+						wrap={ orientation === 'horizontal' ? 'wrap' : undefined }
 						role="list"
 						data-testid={ `legend-${ orientation }` }
-						className={ clsx(
-							styles.legend,
-							styles[ `legend--${ orientation }` ],
-							styles[ `legend--alignment-${ alignment }` ],
-							className
-						) }
-						style={ {
-							flexDirection: orientationToFlexDirection[ orientation ],
-							...theme.legend?.containerStyles,
-						} }
+						className={ clsx( styles.legend, className ) }
+						style={ theme.legend?.containerStyles }
 					>
 						{ labels.map( ( label, i ) => {
 							const visible = isSeriesVisible( label.text );
@@ -257,28 +258,29 @@ export const BaseLegend: ForwardRefExoticComponent<
 											labelClassName
 										) }
 										style={ {
-											justifyContent: labelJustifyContent,
 											flex: labelFlex,
 											margin: labelMargin,
 											...theme.legend?.labelStyles,
 										} }
 									>
-										<LegendText
-											text={ label.text }
-											textOverflow={ textOverflow }
-											maxWidth={ maxWidth }
-										/>
-										{ matchedItem?.value != null && matchedItem.value !== '' && (
-											<span className={ styles[ 'legend-item-value' ] }>
-												{ '\u00A0' }
-												{ matchedItem.value }
-											</span>
-										) }
+										<Stack align="center" gap="sm" justify={ labelJustifyContent }>
+											<LegendText
+												text={ label.text }
+												textOverflow={ textOverflow }
+												maxWidth={ maxWidth }
+											/>
+											{ matchedItem?.value != null && matchedItem.value !== '' && (
+												<span className={ styles[ 'legend-item-value' ] }>
+													{ '\u00A0' }
+													{ matchedItem.value }
+												</span>
+											) }
+										</Stack>
 									</LegendLabel>
 								</LegendItem>
 							);
 						} ) }
-					</div>
+					</Stack>
 				) }
 			</LegendOrdinal>
 		);

package/src/components/tooltip/base-tooltip.module.scss

@@ -3,7 +3,7 @@
 	background-color: rgba(0, 0, 0, 0.85);
 	color: #fff;
 	border-radius: 4px;
-	font-size: 14px;
+	font-size: var(--wpds-font-size-md, 13px);
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 	position: absolute;
 	pointer-events: none;

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -2,8 +2,8 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.125em;
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--wpds-font-size-md, 13px);
+	font-weight: var(--wpds-font-weight-medium, 499);
 	line-height: 1;
 
 	&--up {

package/src/hooks/use-chart-margin.tsx

@@ -1,6 +1,6 @@
 import { createScale, getTicks } from '@visx/scale';
 import { useMemo } from 'react';
-import { getLongestTickWidth } from '../utils';
+import { getLongestTickWidth, resolveFontSize } from '../utils';
 import type { BaseChartProps, DataPointDate, SeriesData } from '../types';
 import type { XYChartTheme } from '@visx/xychart';
 
@@ -50,19 +50,6 @@ const DEFAULT_TICK_LENGTH = 8;
  */
 const DEFAULT_Y_TICK_WIDTH = 40;
 
-const resolveFontSize = ( val?: number | string ): number | undefined => {
-	if ( typeof val === 'number' && ! isNaN( val ) ) {
-		return val;
-	}
-
-	if ( typeof val === 'string' ) {
-		const parsed = parseFloat( val );
-		return isNaN( parsed ) ? undefined : parsed;
-	}
-
-	return undefined;
-};
-
 const getXAxisLabelMetrics = ( theme: XYChartTheme, orientation: 'top' | 'bottom' ) => {
 	const xAxisStyles =
 		orientation === 'top' ? theme.axisStyles?.x?.top : theme.axisStyles?.x?.bottom;

package/src/providers/chart-context/themes.ts

@@ -26,7 +26,13 @@ const defaultTheme: CompleteChartTheme = {
 	},
 	seriesLineStyles: [],
 	glyphs: [],
-	svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)' },
+	// `fontFamily: 'inherit'` overrides visx's hardcoded default font stack
+	// (`-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif`)
+	// that `buildChartTheme` injects as an inline style on SVG `<text>`
+	// elements for axis labels and ticks. Setting `inherit` lets SVG text
+	// pick up the host application's font-family via normal CSS inheritance.
+	svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)', fontFamily: 'inherit' },
+	svgLabelBig: { fontFamily: 'inherit' },
 	annotationStyles: {
 		label: {
 			anchorLineStroke: 'var(--jp-gray-80, #2c3338)',

package/src/types.ts

@@ -243,6 +243,8 @@ export type ChartTheme = {
 	};
 	/** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
 	svgLabelSmall?: TextProps;
+	/** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
+	svgLabelBig?: TextProps;
 	annotationStyles?: AnnotationStyles;
 	/** GeoChart specific settings */
 	geoChart?: {

package/src/utils/index.ts

@@ -26,3 +26,6 @@ export * from './color-utils';
 
 // CSS utilities
 export { resolveCssVariable } from './resolve-css-var';
+
+// Font sizing utilities
+export { resolveFontSize } from './resolve-font-size';

package/src/utils/resolve-font-size.ts

@@ -0,0 +1,37 @@
+/**
+ * Resolve a theme `fontSize` value into a plain number suitable for
+ * canvas-based measurement (e.g. `getStringWidth`).
+ *
+ * Accepts:
+ * - A number — returned as-is
+ * - A pixel string like `"12px"` — parsed and returned as a number
+ *
+ * Returns `undefined` for any other input (missing value, NaN, or
+ * relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+ * their own default. Relative units are intentionally rejected because
+ * we cannot resolve them to absolute pixels here without a parent
+ * computed style, and silently returning the unitless prefix
+ * (`parseFloat("0.875rem") === 0.875`) would produce nearly-zero
+ * widths in measurement code.
+ * @param val - Raw font size value from a theme, axis style, or props
+ * @return Parsed numeric font size in pixels, or `undefined` when unresolvable
+ */
+export const resolveFontSize = ( val?: number | string ): number | undefined => {
+	if ( typeof val === 'number' ) {
+		return isNaN( val ) ? undefined : val;
+	}
+
+	if ( typeof val === 'string' ) {
+		// Only accept plain numeric strings or pixel values.
+		// Reject rem, em, %, vh, vw, etc. — they cannot be resolved to
+		// absolute pixels without a computed style context.
+		const match = val.trim().match( /^(-?\d+\.?\d*|-?\.\d+)(px)?$/ );
+		if ( ! match ) {
+			return undefined;
+		}
+		const parsed = parseFloat( match[ 1 ] );
+		return isNaN( parsed ) ? undefined : parsed;
+	}
+
+	return undefined;
+};

package/src/utils/test/resolve-css-var.test.ts

@@ -414,9 +414,8 @@ describe( 'resolveCssVariable', () => {
 				if ( element === themedElement ) {
 					return {
 						getPropertyValue: ( prop: string ) => {
-							// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
-							if ( prop === '--wpds-color-bg-interactive-brand-weak' ) {
-								return '#c029dc'; // User's custom accent color
+							if ( prop === '--custom-accent-color' ) {
+								return '#c029dc';
 							}
 							return '';
 						},
@@ -428,8 +427,7 @@ describe( 'resolveCssVariable', () => {
 			} );
 			window.getComputedStyle = mockGetComputedStyle as unknown as typeof window.getComputedStyle;
 
-			// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
-			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand-weak', themedElement );
+			const result = resolveCssVariable( '--custom-accent-color', themedElement );
 			expect( result ).toBe( '#c029dc' );
 		} );
 	} );

package/src/utils/test/resolve-font-size.test.ts

@@ -0,0 +1,66 @@
+import { resolveFontSize } from '../resolve-font-size';
+
+describe( 'resolveFontSize', () => {
+	describe( 'numeric input', () => {
+		it( 'returns whole numbers as-is', () => {
+			expect( resolveFontSize( 12 ) ).toBe( 12 );
+			expect( resolveFontSize( 0 ) ).toBe( 0 );
+		} );
+
+		it( 'returns decimal numbers as-is', () => {
+			expect( resolveFontSize( 13.5 ) ).toBe( 13.5 );
+		} );
+
+		it( 'returns undefined for NaN', () => {
+			expect( resolveFontSize( NaN ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'string input', () => {
+		it( 'parses bare numeric strings', () => {
+			expect( resolveFontSize( '12' ) ).toBe( 12 );
+			expect( resolveFontSize( '13.5' ) ).toBe( 13.5 );
+		} );
+
+		it( 'parses pixel strings', () => {
+			expect( resolveFontSize( '12px' ) ).toBe( 12 );
+			expect( resolveFontSize( '13.5px' ) ).toBe( 13.5 );
+		} );
+
+		it( 'trims whitespace before parsing', () => {
+			expect( resolveFontSize( '  14px  ' ) ).toBe( 14 );
+		} );
+
+		it( 'rejects rem values rather than returning the unitless prefix', () => {
+			expect( resolveFontSize( '0.875rem' ) ).toBeUndefined();
+		} );
+
+		it( 'rejects em, %, vh, vw and other relative units', () => {
+			expect( resolveFontSize( '1em' ) ).toBeUndefined();
+			expect( resolveFontSize( '100%' ) ).toBeUndefined();
+			expect( resolveFontSize( '2vh' ) ).toBeUndefined();
+			expect( resolveFontSize( '2vw' ) ).toBeUndefined();
+		} );
+
+		it( 'rejects keywords like inherit, initial, unset', () => {
+			expect( resolveFontSize( 'inherit' ) ).toBeUndefined();
+			expect( resolveFontSize( 'initial' ) ).toBeUndefined();
+			expect( resolveFontSize( 'medium' ) ).toBeUndefined();
+		} );
+
+		it( 'returns undefined for empty string', () => {
+			expect( resolveFontSize( '' ) ).toBeUndefined();
+		} );
+
+		it( 'returns undefined for unparseable strings', () => {
+			expect( resolveFontSize( 'abc' ) ).toBeUndefined();
+			expect( resolveFontSize( 'pxpx' ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'missing input', () => {
+		it( 'returns undefined for undefined', () => {
+			expect( resolveFontSize( undefined ) ).toBeUndefined();
+		} );
+	} );
+} );

package/dist/chunk-EMMSS5I5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-EMMSS5I5.cjs"],"names":[],"mappings":"AAAA,6EAAI,SAAS,EAAE,MAAM,CAAC,MAAM;AAC5B,IAAI,UAAU,EAAE,MAAM,CAAC,cAAc;AACrC,IAAI,iBAAiB,EAAE,MAAM,CAAC,wBAAwB;AACtD,IAAI,kBAAkB,EAAE,MAAM,CAAC,mBAAmB;AAClD,IAAI,aAAa,EAAE,MAAM,CAAC,cAAc;AACxC,IAAI,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,cAAc;AAClD,IAAI,WAAW,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,SAAS,SAAS,CAAC,EAAE;AACnD,EAAE,OAAO,IAAI,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO;AACpG,CAAC;AACD,IAAI,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG;AAChC,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG;AACtB,IAAI,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AACjE,CAAC;AACD,IAAI,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG;AAC9C,EAAE,GAAG,CAAC,KAAK,GAAG,OAAO,KAAK,IAAI,SAAS,GAAG,OAAO,KAAK,IAAI,UAAU,EAAE;AACtE,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;AAC3C,MAAM,GAAG,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,MAAM;AACvD,QAAQ,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;AAC1H,EAAE;AACF,EAAE,OAAO,EAAE;AACX,CAAC;AACD,IAAI,QAAQ,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW;AAChH;AACA;AACA;AACA;AACA,EAAE,WAAW,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM;AACjH,EAAE;AACF,CAAC,CAAC;AACF;AACA;AACE;AACA;AACA;AACF,wFAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-EMMSS5I5.cjs"}