@automattic/charts 4.13.0 → 4.15.0

package/src/charts/bar-chart/use-bar-legend-items.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useChartLegendItems } from '../../components/legend/hooks/use-chart-legend-items';
+import { getDrawnSeries } from './private/stack-layout';
 import { useBarColors } from './use-bar-colors';
 import type { ChartLegendOptions } from '../../components/legend/hooks/use-chart-legend-items';
 import type { BaseLegendItem } from '../../components/legend/types';
@@ -58,17 +59,18 @@ function forBarLayout(
 /**
  * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
  *
- * @param data        - The series the chart draws.
+ * @param allData     - The chart's series; those the layout does not draw get no item.
  * @param options     - The legend options, and the layout the bars are drawn in.
  * @param legendShape - The shape of the legend swatches.
  * @return The legend items.
  */
 export function useBarLegendItems(
-	data: SeriesData[],
+	allData: SeriesData[],
 	options: BarLegendOptions = {},
 	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
 	const { layout } = options;
+	const data = useMemo( () => getDrawnSeries( allData, layout ), [ allData, layout ] );
 	const getBarColors = useBarColors();
 	const seriesColors = useMemo(
 		() => ( layout ? getBarColors( data, { layout } ) : undefined ),

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

@@ -20,6 +20,8 @@ export interface BarListChartProps extends Exclude<
 	BarChartProps,
 	'orientation' | 'size' | 'gridVisibility'
 > {
+	/** Bar lists are always horizontal, and horizontal bars ignore `compactWhenShort`. */
+	compactWhenShort?: never;
 	options?: {
 		/**
 		 * Scale for the y axis. Exclude the type property.

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

@@ -49,7 +49,7 @@
 		}
 
 		.label {
-			padding-left: var(--wpds-dimension-padding-sm);
+			padding-inline-start: var(--a8c-charts-dimension-leaderboard-label-inset);
 		}
 
 		// The bar's 100% height needs a track that fills the row,

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

@@ -23,6 +23,10 @@ import { getAllHiddenMessage } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import { useFittedRowCount, useLeaderboardLegendItems } from './hooks';
 import styles from './leaderboard-chart.module.scss';
+import {
+	resolveLeaderboardEntries,
+	type ResolvedLeaderboardEntry,
+} from './private/resolve-leaderboard-entries';
 import type { LeaderboardChartProps } from './types';
 import type { LeaderboardEntry } from '../../types';
 
@@ -75,15 +79,15 @@ const getBarWidth = ( share: number ): string =>
 	`calc(${ share }% - var(--a8c-charts-dimension-leaderboard-bar-hover-inset, 0px) * ${ share } / 100)`;
 
 const hasPreviousValue = (
-	entry: LeaderboardEntry
-): entry is LeaderboardEntry & {
+	entry: ResolvedLeaderboardEntry
+): entry is ResolvedLeaderboardEntry & {
 	previousValue: number;
 	previousShare: number;
 } => entry.previousValue != null && entry.previousShare != null;
 
 const hasDeltaValue = (
-	entry: LeaderboardEntry
-): entry is LeaderboardEntry & {
+	entry: ResolvedLeaderboardEntry
+): entry is ResolvedLeaderboardEntry & {
 	previousValue: number;
 	previousShare: number;
 	delta: number;
@@ -128,6 +132,7 @@ const Bar = ( {
 
 	const bar = (
 		<div
+			data-testid="leaderboard-chart-bar"
 			className={ clsx( styles.bar, {
 				[ styles[ 'bar--animated' ] ]: animation,
 				[ styles[ 'bar--negative' ] ]: divergingScale && isNegative,
@@ -167,7 +172,7 @@ const BarWithLabel = ( {
 	isPrimaryVisible = true,
 	isComparisonVisible = true,
 }: {
-	entry: LeaderboardEntry;
+	entry: ResolvedLeaderboardEntry;
 	withComparison?: boolean;
 	withOverlayLabel?: boolean;
 	primaryColor: string;
@@ -225,6 +230,7 @@ const BarWithLabel = ( {
  * @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.negativeBars     - How a negative value draws: from a shared zero point, or as an empty 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
@@ -249,6 +255,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	height: propHeight,
 	withComparison = false,
 	withOverlayLabel = false,
+	negativeBars = 'diverge',
 	primaryColor,
 	secondaryColor,
 	valueFormatter = defaultValueFormatter,
@@ -318,11 +325,21 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 		return ! isPrimaryVisible;
 	}, [ isPrimaryVisible, isComparisonVisible, withComparison, withOverlayLabel ] );
 
+	const withComparisonBars = withComparison && ! withOverlayLabel;
+
+	const resolvedData = useMemo(
+		() =>
+			resolveLeaderboardEntries( data ?? [], {
+				includePrevious: withComparisonBars,
+				clampNegative: negativeBars === 'clamp',
+			} ),
+		[ data, withComparisonBars, negativeBars ]
+	);
+
 	// One negative share puts every row on a shared zero point, so the bars stay comparable.
 	const divergingScale = useMemo( (): DivergingScale | undefined => {
-		const withComparisonBars = withComparison && ! withOverlayLabel;
 		const scale = { negative: 0, positive: 0 };
-		for ( const entry of data ?? [] ) {
+		for ( const entry of resolvedData ) {
 			const shares = [ entry.currentShare ];
 			if ( withComparisonBars && hasPreviousValue( entry ) ) {
 				shares.push( entry.previousShare );
@@ -333,7 +350,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 			}
 		}
 		return scale.negative > 0 ? scale : undefined;
-	}, [ data, withComparison, withOverlayLabel ] );
+	}, [ resolvedData, withComparisonBars ] );
 
 	// Validate data
 	const isDataValid = Boolean( data && data.length > 0 );
@@ -471,7 +488,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 							columnGap={ COLUMN_GAP }
 							data-leaderboard-grid
 						>
-							{ data.map( ( entry, rowIndex ) => {
+							{ resolvedData.map( ( entry, rowIndex ) => {
 								// visibility, not clipping: hidden rows keep their geometry (so a
 								// taller container can reveal them) but leave hit testing, focus,
 								// and the accessibility tree.

package/src/charts/leaderboard-chart/private/resolve-leaderboard-entries.ts

@@ -0,0 +1,53 @@
+import type { LeaderboardEntry } from '../../../types';
+
+export type ResolvedLeaderboardEntry = LeaderboardEntry & { currentShare: number };
+
+const toShare = ( value: number, max: number ) => ( max === 0 ? 0 : ( value / max ) * 100 );
+
+const toDelta = ( currentValue: number, previousValue: number | undefined ) => {
+	if ( previousValue == null ) {
+		return undefined;
+	}
+	if ( previousValue === 0 ) {
+		return currentValue === 0 ? 0 : undefined;
+	}
+	return ( ( currentValue - previousValue ) / Math.abs( previousValue ) ) * 100;
+};
+
+/**
+ * Fills in the shares and delta an entry omits, derived from its values.
+ *
+ * @param data                    - Leaderboard entries; passed shares and delta win over derived ones.
+ * @param options                 - Resolver options.
+ * @param options.includePrevious - Whether previous values count toward the shared max.
+ * @param options.clampNegative   - Whether a negative share draws as an empty bar instead of below zero.
+ * @return Entries with `currentShare` always set.
+ */
+export function resolveLeaderboardEntries(
+	data: LeaderboardEntry[],
+	{ includePrevious, clampNegative = false }: { includePrevious: boolean; clampNegative?: boolean }
+): ResolvedLeaderboardEntry[] {
+	const magnitude = clampNegative ? ( value: number ) => Math.max( value, 0 ) : Math.abs;
+	const clamp = ( share: number ) => ( clampNegative ? Math.max( share, 0 ) : share );
+
+	const max = data.reduce( ( largest, { currentValue, previousValue } ) => {
+		const previous = includePrevious && previousValue != null ? magnitude( previousValue ) : 0;
+		return Math.max( largest, magnitude( currentValue ), previous );
+	}, 0 );
+
+	return data.map( entry => {
+		const passedOrDerivedPrevious =
+			entry.previousShare ??
+			( entry.previousValue != null ? toShare( entry.previousValue, max ) : undefined );
+		const previousShare =
+			passedOrDerivedPrevious !== undefined ? clamp( passedOrDerivedPrevious ) : undefined;
+		const delta = entry.delta ?? toDelta( entry.currentValue, entry.previousValue );
+
+		return {
+			...entry,
+			currentShare: clamp( entry.currentShare ?? toShare( entry.currentValue, max ) ),
+			...( previousShare !== undefined && { previousShare } ),
+			...( delta !== undefined && { delta } ),
+		};
+	} );
+}

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

@@ -81,6 +81,22 @@ describe( 'LeaderboardChart', () => {
 		expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 	} );
 
+	it( 'derives the delta of entries that pass only values', () => {
+		render(
+			<LeaderboardChart
+				data={ [
+					{ id: 'up', label: 'Up', currentValue: 100, previousValue: 80 },
+					{ id: 'down', label: 'Down', currentValue: 50, previousValue: 100 },
+				] }
+				withComparison={ true }
+				deltaFormatter={ testDeltaFormatter }
+			/>
+		);
+
+		expect( screen.getByText( '25delta' ) ).toBeInTheDocument();
+		expect( screen.getByText( '-50delta' ) ).toBeInTheDocument();
+	} );
+
 	it( 'shows a placeholder when a row has no previous value', () => {
 		render(
 			<LeaderboardChart
@@ -170,6 +186,31 @@ describe( 'LeaderboardChart', () => {
 		expect( screen.queryAllByTestId( 'leaderboard-chart-diverging-row' ) ).toHaveLength( expected );
 	} );
 
+	it( 'keeps every bar on one side when negative bars clamp', () => {
+		const data = [
+			{ ...mockData[ 0 ], currentShare: undefined, currentValue: -40 },
+			mockData[ 1 ],
+		];
+		render( <LeaderboardChart data={ data } withComparison negativeBars="clamp" /> );
+
+		expect( screen.queryAllByTestId( 'leaderboard-chart-diverging-row' ) ).toHaveLength( 0 );
+	} );
+
+	it.each( [
+		[ 'comparison bars draw', false, /^calc\(50%/ ],
+		[ 'the overlay label hides comparison bars', true, /^calc\(100%/ ],
+	] )( 'sizes the current bar against the max when %s', ( _, withOverlayLabel, expected ) => {
+		const data = [
+			{ id: 'a', label: 'A', currentValue: 50, previousValue: 100 },
+			{ id: 'b', label: 'B', currentValue: 25, previousValue: 10 },
+		] as LeaderboardEntry[];
+		render(
+			<LeaderboardChart data={ data } withComparison withOverlayLabel={ withOverlayLabel } />
+		);
+
+		expect( screen.getAllByTestId( 'leaderboard-chart-bar' )[ 0 ].style.width ).toMatch( expected );
+	} );
+
 	it( 'shows custom label when provided', () => {
 		render(
 			<LeaderboardChart

package/src/charts/leaderboard-chart/test/resolve-leaderboard-entries.test.ts

@@ -0,0 +1,146 @@
+import { resolveLeaderboardEntries } from '../private/resolve-leaderboard-entries';
+import type { LeaderboardEntry } from '../../../types';
+
+type EntryInput = Partial< LeaderboardEntry > & { currentValue: number };
+
+const toEntries = ( rows: EntryInput[] ) =>
+	rows.map( ( row, index ) => ( {
+		id: `row-${ index }`,
+		label: `Row ${ index }`,
+		...row,
+	} ) ) as LeaderboardEntry[];
+
+describe( 'resolveLeaderboardEntries', () => {
+	const comparisonRows = [
+		{ currentValue: 50, previousValue: 100 },
+		{ currentValue: 25, previousValue: 40 },
+	];
+
+	it( 'derives both shares and delta against one max across both periods', () => {
+		const result = resolveLeaderboardEntries( toEntries( comparisonRows ), {
+			includePrevious: true,
+		} );
+
+		expect(
+			result.map( ( { currentShare, previousShare, delta } ) => ( {
+				currentShare,
+				previousShare,
+				delta,
+			} ) )
+		).toEqual( [
+			{ currentShare: 50, previousShare: 100, delta: -50 },
+			{ currentShare: 25, previousShare: 40, delta: -37.5 },
+		] );
+	} );
+
+	it( 'lets a negative previous value set the max', () => {
+		const [ entry ] = resolveLeaderboardEntries(
+			toEntries( [ { currentValue: 10, previousValue: -40 } ] ),
+			{ includePrevious: true }
+		);
+
+		expect( entry ).toMatchObject( { currentShare: 25, previousShare: -100 } );
+	} );
+
+	it( 'ignores previous values for the max when comparison bars are not drawn', () => {
+		const result = resolveLeaderboardEntries( toEntries( comparisonRows ), {
+			includePrevious: false,
+		} );
+
+		expect( result.map( ( { currentShare } ) => currentShare ) ).toEqual( [ 100, 50 ] );
+	} );
+
+	it( 'keeps passed fields and derives the rest', () => {
+		const [ entry ] = resolveLeaderboardEntries(
+			toEntries( [ { currentValue: 50, currentShare: 10, previousValue: 100, delta: 7 } ] ),
+			{ includePrevious: true }
+		);
+
+		expect( entry ).toMatchObject( { currentShare: 10, delta: 7, previousShare: 100 } );
+	} );
+
+	it( 'derives a missing share from the max over every row, passed or not', () => {
+		const result = resolveLeaderboardEntries(
+			toEntries( [ { currentValue: 10, currentShare: 100 }, { currentValue: 20 } ] ),
+			{ includePrevious: false }
+		);
+
+		expect( result.map( ( { currentShare } ) => currentShare ) ).toEqual( [ 100, 100 ] );
+	} );
+
+	it( 'keeps the sign of negative values', () => {
+		const result = resolveLeaderboardEntries(
+			toEntries( [ { currentValue: -30 }, { currentValue: 60 } ] ),
+			{ includePrevious: false }
+		);
+
+		expect( result.map( ( { currentShare } ) => currentShare ) ).toEqual( [ -50, 100 ] );
+	} );
+
+	it( 'clamps negative shares to 0 and sizes the rest against the largest positive value', () => {
+		const result = resolveLeaderboardEntries(
+			toEntries( [
+				{ currentValue: -90, previousValue: 30 },
+				{ currentValue: 60, previousValue: -10, previousShare: -20 },
+			] ),
+			{ includePrevious: true, clampNegative: true }
+		);
+
+		expect(
+			result.map( ( { currentShare, previousShare, delta } ) => ( {
+				currentShare,
+				previousShare,
+				delta,
+			} ) )
+		).toEqual( [
+			{ currentShare: 0, previousShare: 50, delta: -400 },
+			{ currentShare: 100, previousShare: 0, delta: 700 },
+		] );
+	} );
+
+	it.each( [
+		{ currentValue: 5, previousValue: -10, expected: 150 },
+		{ currentValue: 0, previousValue: 0, expected: 0 },
+		{ currentValue: 5, previousValue: 0, expected: undefined },
+		{ currentValue: 5, previousValue: undefined, expected: undefined },
+	] )(
+		'derives delta $expected for current $currentValue and previous $previousValue',
+		( { currentValue, previousValue, expected } ) => {
+			const [ entry ] = resolveLeaderboardEntries(
+				toEntries( [ { currentValue, previousValue } ] ),
+				{ includePrevious: true }
+			);
+
+			expect( entry.delta ).toBe( expected );
+		}
+	);
+
+	it( 'sizes rows without a previous value against the shared max', () => {
+		const result = resolveLeaderboardEntries(
+			toEntries( [ { currentValue: 50, previousValue: 100 }, { currentValue: 25 } ] ),
+			{ includePrevious: true }
+		);
+
+		expect( result.map( ( { currentShare } ) => currentShare ) ).toEqual( [ 50, 25 ] );
+		expect( result[ 1 ] ).not.toHaveProperty( 'previousShare' );
+	} );
+
+	it( 'gives shares of 0 when every value is 0', () => {
+		const [ entry ] = resolveLeaderboardEntries(
+			toEntries( [ { currentValue: 0, previousValue: 0 } ] ),
+			{ includePrevious: true }
+		);
+
+		expect( entry ).toMatchObject( { currentShare: 0, previousShare: 0, delta: 0 } );
+	} );
+
+	it( 'leaves other fields untouched', () => {
+		const onClick = jest.fn();
+		const [ entry ] = resolveLeaderboardEntries(
+			toEntries( [ { id: 'a', label: 'A', currentValue: 1, onClick } ] ),
+			{ includePrevious: false }
+		);
+
+		expect( entry ).toMatchObject( { id: 'a', label: 'A', onClick } );
+	} );
+} );

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

@@ -30,6 +30,12 @@ export interface LeaderboardChartProps extends Pick<
 	 */
 	withOverlayLabel?: boolean;
 
+	/**
+	 * How a negative value draws: `diverge` puts every row on a shared zero point, `clamp` draws it as an empty bar.
+	 * @default 'diverge'
+	 */
+	negativeBars?: 'diverge' | 'clamp';
+
 	/**
 	 * Primary color for current period bars
 	 */

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

@@ -41,9 +41,15 @@ import { ChartLayout } from '../private/chart-layout';
 import { DefaultGlyph } from '../private/default-glyph';
 import { formatReading, isInvalidReading, isReading } from '../private/readings';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
+import {
+	getTickDecimals,
+	getTickDecimalsDomain,
+	hasOnlyWholeNumbers,
+	TickDecimals,
+} from '../private/tick-decimals';
 import { getCurveType } from '../private/time-axis';
 import { buildTimeAxisOptions } from '../private/time-axis-options';
-import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
+import { useCompactWhenShort } from '../private/use-compact-when-short';
 import { withResponsive } from '../private/with-responsive';
 import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
@@ -267,6 +273,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			children,
 			gridVisibility,
 			gap = 'md',
+			compactWhenShort = false,
 		},
 		ref
 	) => {
@@ -301,6 +308,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 
 		// Process children for composition API (Legend, etc.)
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LineChart' );
+		const { isCompact, compactMargin } = useCompactWhenShort( compactWhenShort, height );
 		const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
 
 		// Callback for ChartLayout to notify us when the measured content height changes.
@@ -438,31 +446,47 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			() => hasOnlyWholeNumbers( visibleSeries ),
 			[ visibleSeries ]
 		);
+		const isLogScale = options?.yScale?.type === 'log';
+		// A log axis has no decimal steps to hold ticks to.
+		const callerTickDecimals = isLogScale ? undefined : options?.axis?.y?.tickDecimals;
+		const yTickDecimals = getTickDecimals( hasWholeNumberValues, callerTickDecimals );
 
 		const chartOptions = useMemo( () => {
-			const fallbackYDomain = getFallbackYDomain(
-				visibleReadingExtent,
-				options?.yScale?.type === 'log'
-			);
+			const fallbackYDomain = getFallbackYDomain( visibleReadingExtent, isLogScale );
+			const { tickDecimals, ...yAxisOptions } = options?.axis?.y ?? {};
+			const tickDecimalsDomain =
+				isLogScale ||
+				tickDecimals === undefined ||
+				options?.yScale?.domain ||
+				yAxisOptions.tickValues
+					? undefined
+					: getTickDecimalsDomain(
+							yDomain ?? fallbackYDomain ?? visibleReadingExtent,
+							yTickDecimals
+						);
 
 			return {
 				axis: {
-					x: buildTimeAxisOptions( {
-						dataSorted,
-						width,
-						axisOptions: options?.axis?.x,
-						scaleDomain: options?.xScale?.domain,
-						zoomDomain: zoom.domain,
-						formatting,
-						// A hidden line is unmounted, so visx scales to the rest.
-						isSeriesRendered: series => isSeriesVisible( series.label ),
-					} ),
+					x: {
+						...buildTimeAxisOptions( {
+							dataSorted,
+							width,
+							axisOptions: options?.axis?.x,
+							scaleDomain: options?.xScale?.domain,
+							zoomDomain: zoom.domain,
+							formatting,
+							// A hidden line is unmounted, so visx scales to the rest.
+							isSeriesRendered: series => isSeriesVisible( series.label ),
+						} ),
+						...( isCompact && { display: false } ),
+					},
 					y: {
 						orientation: 'left' as const,
 						numTicks: 4,
 						tickFormat: formatNumberCompact as TickFormatter< number >,
 						display: true,
-						...options?.axis?.y,
+						...yAxisOptions,
+						...( isCompact && { display: false } ),
 					},
 				},
 				xScale: {
@@ -476,6 +500,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 					zero: false,
 					...( fallbackYDomain ? { domain: fallbackYDomain } : {} ),
 					...( yDomain ? { domain: yDomain } : {} ),
+					...( tickDecimalsDomain ? { domain: tickDecimalsDomain } : {} ),
 					...options?.yScale,
 				},
 			};
@@ -486,8 +511,11 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			zoom.domain,
 			yDomain,
 			visibleReadingExtent,
+			isLogScale,
+			yTickDecimals,
 			formatting,
 			isSeriesVisible,
+			isCompact,
 		] );
 
 		// Classified from the rendered series, like the axis above: a hidden
@@ -588,7 +616,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;
 		}
 
-		const legendElement = showLegend && (
+		const legendElement = showLegend && ! isCompact && (
 			<Legend
 				orientation={ legend.orientation ?? 'horizontal' }
 				alignment={ legend.alignment ?? 'center' }
@@ -617,7 +645,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				<ChartLayout
 					legendPosition={ legendPosition }
 					legendElement={ legendElement }
-					legendChildren={ legendChildren }
+					legendChildren={ isCompact ? [] : legendChildren }
 					gap={ gap }
 					className={ clsx(
 						'line-chart',
@@ -655,6 +683,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											height={ chartHeight }
 											margin={ {
 												...defaultMargin,
+												...compactMargin,
 												...margin,
 											} }
 											// xScale and yScale could be set in Axis as well, but they are `scale` props there.
@@ -666,18 +695,18 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											{ /* With every series hidden there is no data to scale against, so the grid and
 											     axes are dropped while the empty state stands in — otherwise they render
 											     squished at the top. */ }
-											<WholeNumberTicks
+											<TickDecimals
 												axis="y"
 												numTicks={ chartOptions.axis.y.numTicks }
-												enabled={
-													hasWholeNumberValues &&
-													! chartOptions.axis.y.tickValues &&
-													! options?.yScale?.domain
+												decimals={
+													! chartOptions.axis.y.tickValues && ! options?.yScale?.domain
+														? yTickDecimals
+														: undefined
 												}
 											>
 												{ tickValues => (
 													<>
-														{ ! allSeriesHidden && gridVisibility !== 'none' && (
+														{ ! allSeriesHidden && gridVisibility !== 'none' && ! isCompact && (
 															<Grid
 																columns={ false }
 																numTicks={ chartOptions.axis.y.numTicks }
@@ -695,7 +724,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 														) }
 													</>
 												) }
-											</WholeNumberTicks>
+											</TickDecimals>
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState
@@ -704,7 +733,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 													width={ width }
 													height={ chartHeight }
 												>
-													{ getAllHiddenMessage( legendInteractive, 'series' ) }
+													{ getAllHiddenMessage( legendInteractive && ! isCompact, 'series' ) }
 												</SvgEmptyState>
 											) : null }