@automattic/charts 4.2.0 → 4.4.0

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

@@ -353,6 +353,41 @@ describe( 'useChartMargin', () => {
 
 			expect( result.current.left ).toBe( 20 );
 		} );
+
+		it( 'measures ticks from readings that exist', () => {
+			const partialData = [
+				{
+					label: 'Series 1',
+					data: [
+						{ date: new Date( '2024-01-01' ), value: null },
+						{ date: new Date( '2024-01-02' ), value: 100 },
+						{ date: new Date( '2024-01-03' ), value: 200 },
+					],
+				},
+			];
+
+			renderHook( () => useChartMargin( 300, optionsBase, partialData, baseTheme ) );
+
+			const ticks = mockGetLongestTickWidth.mock.calls[ 0 ][ 0 ] as number[];
+			expect( Math.min( ...ticks ) ).toBe( 100 );
+		} );
+
+		it( 'measures a unit range when no bucket has a reading', () => {
+			const allNullData = [
+				{
+					label: 'Series 1',
+					data: [
+						{ date: new Date( '2024-01-01' ), value: null },
+						{ date: new Date( '2024-01-02' ), value: null },
+					],
+				},
+			];
+
+			renderHook( () => useChartMargin( 300, optionsBase, allNullData, baseTheme ) );
+
+			const ticks = mockGetLongestTickWidth.mock.calls[ 0 ][ 0 ] as number[];
+			expect( Math.max( ...ticks ) ).toBe( 1 );
+		} );
 	} );
 
 	describe( 'horizontal y ticks', () => {

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

@@ -111,8 +111,13 @@ export const useChartMargin = (
 			return options.axis.y.tickValues;
 		}
 
-		const minY = Math.min( ...allDataPoints.map( d => d.value ) );
-		const maxY = Math.max( ...allDataPoints.map( d => d.value ) );
+		const values = allDataPoints
+			.map( d => d.value )
+			.filter(
+				( value ): value is number => typeof value === 'number' && Number.isFinite( value )
+			);
+		const minY = values.length ? Math.min( ...values ) : 0;
+		const maxY = values.length ? Math.max( ...values ) : 1;
 		const yScale = createScale( {
 			...options.yScale,
 			// A pinned domain is what the axis actually renders, so measure those

package/src/providers/chart-context/global-charts-provider.tsx

@@ -219,7 +219,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 
 	const getElementStyles = useCallback< GlobalChartsContextValue[ 'getElementStyles' ] >(
 		( { data, index, overrideColor, legendShape } ) => {
-			const isSeriesData = data && typeof data === 'object' && 'data' in data && 'options' in data;
+			const isSeriesData = data && typeof data === 'object' && 'data' in data;
 			// DataPointPercentage has a numeric 'value' directly, unlike SeriesData which has 'data' array
 			const isPointPercentageData =
 				data &&

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -1318,11 +1318,11 @@ describe( 'ChartContext', () => {
 			expect( styles ).toHaveProperty( 'glyph' );
 			expect( styles ).toHaveProperty( 'shapeStyles' );
 
-			// Verify types
+			// A series without an `options` key is still a series, so theme styles apply.
 			expect( typeof styles.color ).toBe( 'string' );
-			expect( typeof styles.lineStyles ).toBe( 'object' );
-			expect( typeof styles.glyph ).toBe( 'function' );
-			expect( typeof styles.shapeStyles ).toBe( 'object' );
+			expect( styles.lineStyles ).toEqual( { strokeWidth: 2 } );
+			expect( styles.glyph ).toBe( mockGlyph );
+			expect( styles.shapeStyles ).toEqual( { fill: '#SHAPE1' } );
 		} );
 
 		it( 'returns complete ElementStyles object for DataPointPercentage', () => {

package/src/types.ts

@@ -134,6 +134,7 @@ export type ThemeAnnotationStyles = {
 export type DataPoint = {
 	label: string;
 	value: number;
+	/** Per-point fill override for BarChart; other built-in charts ignore it. */
 	color?: string;
 };
 
@@ -186,6 +187,7 @@ export type DataPointDate = {
 	dateString?: string;
 	value: number | null;
 	label?: string;
+	/** Per-point fill override for BarChart; other built-in charts ignore it. */
 	color?: string;
 };
 
@@ -650,6 +652,12 @@ export type SeriesChartLegendConfig = ChartLegendConfig< SeriesData[] > & {
 	 * uncollapsed one toggles only its own.
 	 */
 	collapseGroups?: boolean;
+	/**
+	 * Append a static, non-interactive item explaining the comparison overlay whenever a series
+	 * has `options.type === 'comparison'`. Skipped when that series already has its own item.
+	 * Pass a string to replace the default label.
+	 */
+	comparisonItem?: boolean | string;
 };
 
 /**

package/src/components/legend/utils/label-transform-factory.ts

@@ -1,24 +0,0 @@
-import type { ItemTransformer, LabelFormatter } from '@visx/legend';
-import type { AnyD3Scale, ScaleInput } from '@visx/scale';
-
-/**
- * Returns a function which takes a Datum and index as input, and returns a formatted label object.
- * @param {object}                            root0             - The object to return the value of.
- * @param {AnyD3Scale}                        root0.scale       - The scale to use.
- * @param {LabelFormatter<ScaleInput<Scale>>} root0.labelFormat - The label format to use.
- * @return {ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>>} The label transform factory.
- */
-export function labelTransformFactory< Scale extends AnyD3Scale >( {
-	scale,
-	labelFormat,
-}: {
-	scale: Scale;
-	labelFormat: LabelFormatter< ScaleInput< Scale > >;
-} ): ItemTransformer< ScaleInput< Scale >, ReturnType< Scale > > {
-	return ( d, i ) => ( {
-		datum: d,
-		index: i,
-		text: `${ labelFormat( d, i ) }`,
-		value: scale( d ),
-	} );
-}