@automattic/charts 2.0.1 → 3.1.0

package/src/charts/heatmap-chart/private/build-calendar-data.ts

@@ -10,6 +10,36 @@ export type CalendarHeatmapResult = {
 /** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
 const LABELLED_ROWS = [ 0, 2, 4 ];
 
+/**
+ * Resolve one grid bound: an unparseable or narrowing value falls back to the
+ * series' own bound, so the grid can only ever be widened.
+ *
+ * @param bound     - Requested bound as `yyyy-MM-dd`, if any.
+ * @param fallback  - The series' own bound on this side.
+ * @param direction - Which way the bound is allowed to move.
+ * @return The bound to draw to.
+ */
+const widenTo = (
+	bound: string | undefined,
+	fallback: Date,
+	direction: 'earlier' | 'later'
+): Date => {
+	if ( ! bound ) {
+		return fallback;
+	}
+
+	const parsed = parseISO( bound );
+	if ( isNaN( parsed.getTime() ) ) {
+		return fallback;
+	}
+
+	if ( direction === 'earlier' ) {
+		return parsed < fallback ? parsed : fallback;
+	}
+
+	return parsed > fallback ? parsed : fallback;
+};
+
 const toDate = ( point: DataPointDate ): Date | null => {
 	if ( point.date instanceof Date && ! isNaN( point.date.getTime() ) ) {
 		return point.date;
@@ -34,6 +64,16 @@ export const buildCalendarHeatmapData = (
 		 * blank cells even when the series has no entry for them.
 		 */
 		hideOutOfRangeDays?: boolean;
+		/**
+		 * Draw the grid over this span (`yyyy-MM-dd` bounds) instead of the
+		 * series' own. Days inside the grid but outside the series become
+		 * placeholder cells: painted as empty slots so a short series still
+		 * fills its container, but reporting nothing, since they were never
+		 * measured. A start bound is drawn from the beginning of its week, so
+		 * the grid always opens on a whole column. Bounds narrower than the
+		 * series are ignored — the grid never drops a day that carries data.
+		 */
+		gridSpan?: { start?: string; end?: string };
 	} = {}
 ): CalendarHeatmapResult => {
 	const weekStartsOn = options.weekStartsOn ?? 1;
@@ -60,14 +100,27 @@ export const buildCalendarHeatmapData = (
 		}
 	}
 
-	const gridStart = startOfWeek( minDate, { weekStartsOn } );
-	const weekCount = differenceInCalendarWeeks( maxDate, gridStart, { weekStartsOn } ) + 1;
-
 	// Day-key bounds for the ragged-edge option: calendar-day comparison, so
 	// entries carrying a time of day can't shift the span.
 	const minDayKey = format( minDate, 'yyyy-MM-dd' );
 	const maxDayKey = format( maxDate, 'yyyy-MM-dd' );
 
+	// The grid may run wider than the series, never narrower: a bound that would
+	// cut into the data is dropped rather than honoured.
+	const gridMinDate = widenTo( options.gridSpan?.start, minDate, 'earlier' );
+	const gridMaxDate = widenTo( options.gridSpan?.end, maxDate, 'later' );
+
+	const gridMaxDayKey = format( gridMaxDate, 'yyyy-MM-dd' );
+
+	const gridStart = startOfWeek( gridMinDate, { weekStartsOn } );
+
+	// A start bound rarely lands on a week start, and `gridStart` rounds it down.
+	// The days it rounds past were no more measured than the rest of the widened
+	// span, so they are filler too; treating them as a ragged edge instead would
+	// notch the first column by however far the bound sat into its week.
+	const gridMinDayKey = format( gridMinDate < minDate ? gridStart : gridMinDate, 'yyyy-MM-dd' );
+	const weekCount = differenceInCalendarWeeks( gridMaxDate, gridStart, { weekStartsOn } ) + 1;
+
 	const rowLabels = Array.from( { length: 7 }, ( _, row ) =>
 		LABELLED_ROWS.includes( row ) ? format( addDays( gridStart, row ), 'EEE' ) : ''
 	);
@@ -104,8 +157,15 @@ export const buildCalendarHeatmapData = (
 				label: format( day, 'EEE, MMM d, yyyy' ),
 				value: valueByDay.has( key ) ? ( valueByDay.get( key ) as number | null ) : null,
 			};
-			if ( hideOutOfRangeDays && ( key < minDayKey || key > maxDayKey ) ) {
-				cell.hidden = true;
+			if ( key < gridMinDayKey || key > gridMaxDayKey ) {
+				// The days completing the grid's first/last week: the calendar's
+				// ragged edge.
+				if ( hideOutOfRangeDays ) {
+					cell.hidden = true;
+				}
+			} else if ( key < minDayKey || key > maxDayKey ) {
+				// Inside the grid the caller asked for, outside the series: filler.
+				cell.placeholder = true;
 			}
 			cells.push( cell );
 		}

package/src/charts/heatmap-chart/test/build-calendar-data.test.ts

@@ -142,3 +142,128 @@ describe( 'buildCalendarHeatmapData', () => {
 		expect( rowLabels[ 4 ] ).toBe( 'Thu' );
 	} );
 } );
+
+describe( 'buildCalendarHeatmapData with a grid wider than the series', () => {
+	// Mon Jan 1 2024 through Sun Jan 7 — one whole week of data.
+	const oneWeek: DataPointDate[] = [
+		{ dateString: '2024-01-01', value: 3 },
+		{ dateString: '2024-01-07', value: 4 },
+	];
+
+	test( 'draws the extra weeks and marks them placeholders, not blank cells', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-04' }, // 4 weeks earlier
+		} );
+
+		expect( data ).toHaveLength( 5 );
+
+		// The filler weeks stand for days nothing was measured for.
+		expect( data[ 0 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+		expect( data[ 3 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+
+		// The data week is untouched: real values, no placeholder flag.
+		expect( data[ 4 ].data[ 0 ] ).toMatchObject( { value: 3 } );
+		expect( data[ 4 ].data[ 0 ].placeholder ).toBeUndefined();
+		expect( data[ 4 ].data[ 6 ] ).toMatchObject( { value: 4 } );
+	} );
+
+	test( 'labels the filler columns so the grid still reads as a calendar', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-04' },
+		} );
+
+		expect( data.map( column => column.label ) ).toEqual( [ 'Dec', '', '', '', 'Jan' ] );
+	} );
+
+	test( 'ignores a bound that would cut into the series', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2024-01-04', end: '2024-01-05' },
+		} );
+
+		expect( data ).toHaveLength( 1 );
+		expect( data[ 0 ].data[ 0 ].value ).toBe( 3 );
+		expect( data[ 0 ].data[ 6 ].value ).toBe( 4 );
+	} );
+
+	test( 'falls back to the series span for an unparseable bound', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: 'not-a-date' },
+		} );
+
+		expect( data ).toHaveLength( 1 );
+	} );
+
+	test( 'separates the ragged edge from the filler', () => {
+		// The grid opens Mon Dec 25 and closes with the series on Wed Jan 3, so
+		// Thu Jan 4 onward only completes the last week.
+		const { data } = buildCalendarHeatmapData( [ { dateString: '2024-01-03', value: 5 } ], {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-25' },
+		} );
+
+		const lastColumn = data[ data.length - 1 ];
+
+		// Inside the requested grid, before the data: filler.
+		expect( lastColumn.data[ 0 ].placeholder ).toBe( true );
+		expect( lastColumn.data[ 0 ].hidden ).toBeUndefined();
+
+		expect( lastColumn.data[ 2 ].value ).toBe( 5 );
+
+		// Past the grid's end: the calendar's ragged edge, painted as nothing.
+		expect( lastColumn.data[ 3 ].hidden ).toBe( true );
+		expect( lastColumn.data[ 3 ].placeholder ).toBeUndefined();
+	} );
+
+	test( 'is a no-op when no grid span is given', () => {
+		expect( buildCalendarHeatmapData( oneWeek, { weekStartsOn: 1 } ) ).toEqual(
+			buildCalendarHeatmapData( oneWeek, { weekStartsOn: 1, gridSpan: {} } )
+		);
+	} );
+
+	// The caller sizes the grid in whole weeks back from the period's last day, so
+	// the bound lands on that weekday — a Monday only one year in seven.
+	test( 'opens on a whole column when the start bound falls mid-week', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-07' }, // a Thursday
+		} );
+
+		expect( data ).toHaveLength( 5 );
+
+		// Mon Dec 4 through Wed Dec 6 precede the bound; they are as unmeasured as
+		// the rest of the filler, so they fill the column rather than notching it.
+		expect( data[ 0 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+		expect( data[ 0 ].data.some( cell => cell.hidden ) ).toBe( false );
+	} );
+
+	test( 'still draws the ragged edge past the grid end', () => {
+		// Wed Jan 3 ends the series, so Thu Jan 4 onward only completes the week.
+		const { data } = buildCalendarHeatmapData( [ { dateString: '2024-01-03', value: 5 } ], {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-20' }, // a Wednesday
+		} );
+
+		expect( data[ 0 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+
+		const lastColumn = data[ data.length - 1 ];
+		expect( lastColumn.data[ 2 ].value ).toBe( 5 );
+		expect( lastColumn.data[ 3 ].hidden ).toBe( true );
+	} );
+
+	test( 'keeps the ragged start edge when the bound is ignored', () => {
+		// A narrowing bound never applies, so the series' own first week stays
+		// ragged rather than being filled out.
+		const { data } = buildCalendarHeatmapData( [ { dateString: '2024-01-03', value: 5 } ], {
+			weekStartsOn: 1,
+			gridSpan: { start: '2024-01-05' },
+		} );
+
+		expect( data ).toHaveLength( 1 );
+		expect( data[ 0 ].data[ 0 ].hidden ).toBe( true );
+		expect( data[ 0 ].data[ 0 ].placeholder ).toBeUndefined();
+	} );
+} );

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

@@ -13,6 +13,14 @@ export type HeatmapCell = {
 	 * days completing the first/last week fall outside the covered range.
 	 */
 	hidden?: boolean;
+	/**
+	 * Paint the cell as a faded empty slot that carries no claim about the day:
+	 * it is set apart from a measured day that scored zero, and skipped by
+	 * hover, tooltips, keyboard navigation and the accessibility tree. For grid
+	 * filler — slots drawn only so a short range still fills its container,
+	 * which were never measured.
+	 */
+	placeholder?: boolean;
 };
 
 /** A heatmap column (rendered left→right); its cells render top→bottom. */

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

@@ -60,20 +60,26 @@
 		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
 		min-width: var(--wpds-dimension-size-5xs, 4px);
 
-		border-radius: var(--a8c-charts-border-radius-leaderboard-bar, var(--a8c--charts--leaderboard--bar--border-radius, 9999px));
+		border-radius: var(--a8c-charts-border-radius-leaderboard-bar);
 		z-index: -1; /* places it behind the label */
 
+		// Keep the collapsed state in `from` and never on the element: a dropped
+		// animation then fails visible. `both`, not `forwards`, for the
+		// backwards fill.
 		&--animated {
 			transform-origin: left;
 			transform-box: fill-box;
-			transform: scaleX(0);
 			animation:
-				stretch var(--wpds-motion-duration-xl, 400ms)
-				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+				stretch var(--a8c-charts-motion-duration-entrance)
+				var(--a8c-charts-motion-easing-entrance) both;
 		}
 
 		@keyframes stretch {
 
+			from {
+				transform: scaleX(0);
+			}
+
 			to {
 				transform: scaleX(1);
 			}
@@ -104,7 +110,7 @@
 .emptyState {
 	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }
@@ -205,7 +211,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 		border-radius: var(--wpds-border-radius-sm, 2px);
 		outline:
 			$focus-ring-width solid
-			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 		// Inset by its own width so the outer edge hugs the row boundary: the
 		// outline then sits in the shared row padding, clear of the bar, and stays
 		// inside the overflow:auto container that would clip an outset ring.
@@ -220,7 +226,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	transition:
 		opacity var(--wpds-motion-duration-sm, 100ms)
 		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));

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

@@ -17,8 +17,9 @@ import {
 } from '../../providers';
 import { formatMetricValue, attachSubComponents } from '../../utils';
 import { useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
-import { SingleChartContext } from '../private/single-chart-context';
+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';
@@ -225,35 +226,28 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 		legendLabels,
 	} );
 
-	// Track visibility of primary and comparison series for interactive legends
+	// Track visibility of primary and comparison series from the shared legend state.
 	const isPrimaryVisible = useMemo( () => {
-		if ( ! chartId || ! legendInteractive || legendItems.length === 0 ) {
+		if ( legendItems.length === 0 ) {
 			return true;
 		}
 		return isSeriesVisible( chartId, legendItems[ 0 ].label );
-	}, [ chartId, legendInteractive, legendItems, isSeriesVisible ] );
+	}, [ chartId, legendItems, isSeriesVisible ] );
 
 	const isComparisonVisible = useMemo( () => {
-		if ( ! chartId || ! legendInteractive || legendItems.length < 2 ) {
+		if ( legendItems.length < 2 ) {
 			return true;
 		}
 		return isSeriesVisible( chartId, legendItems[ 1 ].label );
-	}, [ chartId, legendInteractive, legendItems, isSeriesVisible ] );
+	}, [ chartId, legendItems, isSeriesVisible ] );
 
 	// Check if all series are hidden
 	const allSeriesHidden = useMemo( () => {
-		if ( ! legendInteractive ) return false;
 		if ( withComparison && ! withOverlayLabel ) {
 			return ! isPrimaryVisible && ! isComparisonVisible;
 		}
 		return ! isPrimaryVisible;
-	}, [
-		legendInteractive,
-		isPrimaryVisible,
-		isComparisonVisible,
-		withComparison,
-		withOverlayLabel,
-	] );
+	}, [ isPrimaryVisible, isComparisonVisible, withComparison, withOverlayLabel ] );
 
 	// Validate data
 	const isDataValid = Boolean( data && data.length > 0 );
@@ -278,9 +272,10 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 	const prefersReducedMotion = usePrefersReducedMotion();
 
-	// There are no rows to measure while an interactive legend has hidden every
-	// series. Pausing fitting restores the full row count and, when a series is shown
-	// again, re-runs the effect against the newly mounted grid.
+	// There are no rows to measure while every series is hidden, whether from an
+	// interactive legend click or a programmatic toggle. Pausing fitting restores
+	// the full row count and, when a series is shown again, re-runs the effect
+	// against the newly mounted grid.
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(
 		fitRows && ! allSeriesHidden,
 		data?.length ?? 0,
@@ -291,7 +286,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	// Handle empty or undefined data
 	if ( ! data || data.length === 0 ) {
 		return (
-			<SingleChartContext.Provider value={ { chartId } }>
+			<ChartInstanceContext.Provider value={ { chartId } }>
 				<ChartLayout
 					legendPosition={ legendPosition }
 					legendElement={ false }
@@ -315,7 +310,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 							: __( 'No data available', 'jetpack-charts' ) }
 					</div>
 				</ChartLayout>
-			</SingleChartContext.Provider>
+			</ChartInstanceContext.Provider>
 		);
 	}
 
@@ -335,7 +330,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider value={ { chartId } }>
+		<ChartInstanceContext.Provider value={ { chartId } }>
 			<ChartLayout
 				legendPosition={ legendPosition }
 				legendElement={ legendElement }
@@ -372,7 +367,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) }
 					{ allSeriesHidden ? (
 						<div className={ styles.emptyState }>
-							{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
+							{ getAllHiddenMessage( legendInteractive, 'series' ) }
 						</div>
 					) : (
 						<Grid
@@ -476,7 +471,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) }
 				</div>
 			</ChartLayout>
-		</SingleChartContext.Provider>
+		</ChartInstanceContext.Provider>
 	);
 };
 

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

@@ -1,6 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { GlobalChartsProvider } from '../../../providers';
+import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
 import LeaderboardChart from '../leaderboard-chart';
+import type { GlobalChartsContextValue } from '../../../providers/chart-context/types';
 import type { LeaderboardEntry } from '../../../types';
 
 const mockDefaultParentSize = () => ( {
@@ -418,6 +421,109 @@ describe( 'LeaderboardChart', () => {
 		} );
 	} );
 
+	describe( 'Programmatic visibility', () => {
+		it( 'hides the primary series programmatically when the legend is not interactive', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LeaderboardChart
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-leaderboard"
+						data={ mockData }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const primaryLabel = screen.getAllByTestId( 'legend-item' )[ 0 ].textContent;
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-leaderboard', primaryLabel );
+			} );
+
+			expect( screen.getByText( /all series are hidden/i ) ).toBeInTheDocument();
+		} );
+
+		it( 'omits the click instruction when the legend cannot be clicked', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LeaderboardChart
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-empty-copy-leaderboard"
+						data={ mockData }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const primaryLabel = screen.getAllByTestId( 'legend-item' )[ 0 ].textContent;
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-empty-copy-leaderboard', primaryLabel );
+			} );
+
+			expect( screen.getByText( 'All series are hidden.' ) ).toBeInTheDocument();
+			expect( screen.queryByText( /click legend items/i ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'still renders the primary series when only the comparison is hidden programmatically', () => {
+			// Hiding every series routes through allSeriesHidden to the empty state and
+			// never exercises the per-series render path. Hiding only the comparison
+			// series exercises that path for the leaderboard's primary/comparison split.
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LeaderboardChart
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						withComparison={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-comparison-leaderboard"
+						data={ mockData }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const comparisonLabel = screen.getAllByTestId( 'legend-item' )[ 1 ].textContent;
+
+			act( () => {
+				context.toggleSeriesVisibility(
+					'test-programmatic-comparison-leaderboard',
+					comparisonLabel
+				);
+			} );
+
+			expect( screen.queryByText( /all series are hidden/i ) ).not.toBeInTheDocument();
+			expect( screen.getByText( 'Direct' ) ).toBeInTheDocument();
+			expect( screen.getByText( '12.5K' ) ).toBeInTheDocument();
+			expect( screen.queryByText( '+25%' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'Responsive wrapper', () => {
 		it( 'applies explicit width and height to chart container', () => {
 			const { useParentSize } = jest.requireMock( '@visx/responsive' );

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

@@ -65,8 +65,6 @@ export interface LeaderboardChartProps
 	 */
 	style?: React.CSSProperties & {
 		'--a8c-charts-border-radius-leaderboard-bar'?: string;
-		/** @deprecated Use `--a8c-charts-border-radius-leaderboard-bar`. */
-		'--a8c--charts--leaderboard--bar--border-radius'?: string;
 	};
 
 	/**

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

@@ -1,14 +1,15 @@
 .line-chart {
 	position: relative;
 
+	// Keep the collapsed state in `from` and never on the element: a dropped
+	// animation then fails visible. `both`, not `forwards`, for backwards fill.
 	&--animated {
 
 		path {
 			transform-origin: 0 95%;
-			transform: scaleY(0);
 			animation:
-				rise var(--wpds-motion-duration-xl, 400ms)
-				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+				rise var(--a8c-charts-motion-duration-entrance)
+				var(--a8c-charts-motion-easing-entrance) both;
 		}
 	}
 
@@ -18,13 +19,13 @@
 
 	&__tooltip,
 	&__annotation-label-popover {
-		background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
-		color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+		background: var(--a8c-charts-color-surface);
+		color: var(--a8c-charts-color-label);
 		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
 	&__tooltip-date {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 		padding-bottom: var(--wpds-dimension-padding-md, 12px);
 	}
 
@@ -33,7 +34,7 @@
 	}
 
 	&__tooltip-label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 		padding-right: var(--wpds-dimension-padding-lg, 16px);
 	}
 
@@ -110,6 +111,10 @@
 
 @keyframes rise {
 
+	from {
+		transform: scaleY(0);
+	}
+
 	to {
 		transform: scaleY(1);
 	}