@automattic/charts 1.10.3 → 1.11.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.11.0] - 2026-07-27
+### Added
+- Charts: add a `fitRows` prop to LeaderboardChart so a chart in a fixed-height container shows only the rows that fit instead of scrolling. [#50688]
+
+### Changed
+- Charts: standardise package CSS custom properties on the --a8c-charts-{category}-{name} naming convention and document the token catalog; existing public override variables keep working via deprecated aliases. [#50656]
+
+### Fixed
+- Leaderboard: Distinguish unavailable percentage changes from missing comparison data. [#50690]
+
 ## [1.10.3] - 2026-07-22
 ### Fixed
 - LeaderboardChart: Keep row spacing and column alignment identical whether or not a row is interactive. [#50657]
@@ -935,6 +945,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[1.11.0]: https://github.com/Automattic/charts/compare/v1.10.3...v1.11.0
 [1.10.3]: https://github.com/Automattic/charts/compare/v1.10.2...v1.10.3
 [1.10.2]: https://github.com/Automattic/charts/compare/v1.10.1...v1.10.2
 [1.10.1]: https://github.com/Automattic/charts/compare/v1.10.0...v1.10.1

package/TOKENS.md

@@ -0,0 +1,72 @@
+# Charts CSS custom-property catalog
+
+`@automattic/charts` exposes its themeable values as CSS custom properties under a
+single convention: `--a8c-charts-{category}-{name}`. `{category}` mirrors the WPDS
+token type (`color`, `dimension`, `border-radius`).
+
+## How it resolves today
+
+Nothing emits these variables at runtime yet (that is CHARTS-203). Each reference in
+the library carries its default inline as a fallback:
+
+```scss
+stroke: var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
+```
+
+So an `--a8c-charts-*` variable you set on a chart container wins; otherwise the
+mapped `--wpds-*` token wins; otherwise the spec-value hex wins. Setting any
+`--a8c-charts-*` variable on a chart ancestor overrides that role.
+
+## Tier 1 — semantic catalog (shared, themeable roles)
+
+| Role | Maps to `--wpds-*` | Fallback |
+|---|---|---|
+| `--a8c-charts-color-grid` | `--wpds-color-stroke-surface-neutral` | `#dbdbdb` |
+| `--a8c-charts-color-axis` | `--wpds-color-stroke-surface-neutral` | `#dbdbdb` |
+| `--a8c-charts-color-tick` | `--wpds-color-stroke-surface-neutral` | `#dbdbdb` |
+| `--a8c-charts-color-label` | `--wpds-color-foreground-content-neutral` | `#1e1e1e` |
+| `--a8c-charts-color-label-secondary` | `--wpds-color-foreground-content-neutral-weak` | `#707070` |
+| `--a8c-charts-color-label-inverse` | `--wpds-color-foreground-interactive-neutral-strong` | `#f0f0f0` |
+| `--a8c-charts-color-label-on-fill` | _(none — white-on-series-fill, no WPDS fit)_ | `#FFFFFF` |
+| `--a8c-charts-color-annotation` | `--wpds-color-foreground-content-neutral` | `#1e1e1e` |
+| `--a8c-charts-color-trend-up` | `--wpds-color-foreground-content-success-weak` | `#008030` |
+| `--a8c-charts-color-trend-down` | `--wpds-color-foreground-content-error-weak` | `#cc1818` |
+| `--a8c-charts-color-trend-neutral` | `--wpds-color-foreground-content-neutral-weak` | `#707070` |
+| `--a8c-charts-color-background` | `--wpds-color-background-surface-neutral-strong` | `#fff` |
+| `--a8c-charts-color-surface-secondary` | `--wpds-color-background-surface-neutral-weak` | `#f4f4f4` |
+| `--a8c-charts-color-track` | `--wpds-color-background-track-neutral-weak` | `#f0f0f0` |
+| `--a8c-charts-color-tooltip-surface` | _(none — translucent dark surface, no WPDS fit)_ | `rgba(0,0,0,0.85)` |
+| `--a8c-charts-color-focus` | `--wpds-color-stroke-focus` | `#3858e9` |
+
+`--a8c-charts-color-axis` (axis line) and `--a8c-charts-color-tick` (tick marks)
+resolve to the same value as `--a8c-charts-color-grid` by default. They are kept as
+distinct roles so axis, tick marks, and gridlines can be themed independently; each
+maps directly to its own `--wpds-*` token rather than chaining through `grid`.
+
+## Tier 2 — component-specific variables
+
+Instance styling knobs, on the same convention but not shared semantic roles:
+`--a8c-charts-border-radius-leaderboard-bar`,
+`--a8c-charts-dimension-leaderboard-bar-hover-inset`,
+`--a8c-charts-color-heatmap-*`, `--a8c-charts-dimension-heatmap-*`,
+`--a8c-charts-heatmap-cell-intensity`.
+
+`--a8c-charts-heatmap-cell-intensity` is the one variable without a `{category}`
+segment: it holds a unitless 0–1 scalar consumed inside `color-mix()`, not a colour.
+
+The heatmap Tier-2 variables (`--a8c-charts-color-heatmap-*`,
+`--a8c-charts-dimension-heatmap-*`, `--a8c-charts-heatmap-cell-intensity`) are
+**component-emitted** — the chart sets them from JS per render — not consumer
+override points.
+
+## Public override variables
+
+These are documented, supported override points. Deprecated names still work — they
+are read as an inner fallback behind the new name:
+
+| New | Deprecated alias |
+|---|---|
+| `--a8c-charts-color-trend-up` | `--charts-trend-up-color` |
+| `--a8c-charts-color-trend-down` | `--charts-trend-down-color` |
+| `--a8c-charts-color-trend-neutral` | `--charts-trend-neutral-color` |
+| `--a8c-charts-border-radius-leaderboard-bar` | `--a8c--charts--leaderboard--bar--border-radius` |

package/dist/index.cjs

@@ -725,9 +725,9 @@ const getChartColor = (index, colorCache) => {
 * Default theme configuration
 */
 const defaultTheme = {
-	backgroundColor: "var(--wpds-color-background-surface-neutral-strong, #fff)",
+	backgroundColor: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))",
 	labelBackgroundColor: "transparent",
-	labelTextColor: "#FFFFFF",
+	labelTextColor: "var(--a8c-charts-color-label-on-fill, #FFFFFF)",
 	colors: [
 		"#98C8DF",
 		"#006DAB",
@@ -736,59 +736,59 @@ const defaultTheme = {
 		"#FF8C8F"
 	],
 	gridStyles: {
-		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		stroke: "var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
 		strokeWidth: 1
 	},
 	tickLength: 4,
 	gridColor: "",
 	gridColorDark: "",
 	xTickLineStyles: {
-		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		stroke: "var(--a8c-charts-color-tick, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
 		strokeWidth: 1
 	},
 	xAxisLineStyles: {
-		stroke: "var(--wpds-color-stroke-surface-neutral, #dbdbdb)",
+		stroke: "var(--a8c-charts-color-axis, var(--wpds-color-stroke-surface-neutral, #dbdbdb))",
 		strokeWidth: 1
 	},
 	legend: {
-		labelStyles: { color: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
+		labelStyles: { color: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
 		containerStyles: {},
 		shapeStyles: []
 	},
 	seriesLineStyles: [],
 	glyphs: [],
 	svgLabelSmall: {
-		fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
+		fill: "var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
 		fontFamily: "inherit"
 	},
 	svgLabelBig: { fontFamily: "inherit" },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
-			backgroundFill: "var(--wpds-color-background-surface-neutral-strong, #fff)"
+			anchorLineStroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
+			backgroundFill: "var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))"
 		},
-		connector: { stroke: "var(--wpds-color-foreground-content-neutral, #1e1e1e)" },
+		connector: { stroke: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))" },
 		circleSubject: {
 			stroke: "transparent",
-			fill: "var(--wpds-color-foreground-content-neutral, #1e1e1e)",
+			fill: "var(--a8c-charts-color-annotation, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
 			radius: 5
 		}
 	},
-	geoChart: { featureFillColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)" },
+	geoChart: { featureFillColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))" },
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
 		labelSpacing: "xs",
 		deltaColors: [
-			"var(--wpds-color-foreground-content-error-weak, #cc1818)",
-			"var(--wpds-color-foreground-content-neutral-weak, #707070)",
-			"var(--wpds-color-foreground-content-success-weak, #008030)"
+			"var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))",
+			"var(--a8c-charts-color-trend-neutral, var(--wpds-color-foreground-content-neutral-weak, #707070))",
+			"var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))"
 		]
 	},
 	conversionFunnelChart: {
-		backgroundColor: "var(--wpds-color-background-surface-neutral-weak, #f4f4f4)",
-		positiveChangeColor: "var(--wpds-color-foreground-content-success-weak, #008030)",
-		negativeChangeColor: "var(--wpds-color-foreground-content-error-weak, #cc1818)"
+		backgroundColor: "var(--a8c-charts-color-surface-secondary, var(--wpds-color-background-surface-neutral-weak, #f4f4f4))",
+		positiveChangeColor: "var(--a8c-charts-color-trend-up, var(--wpds-color-foreground-content-success-weak, #008030))",
+		negativeChangeColor: "var(--a8c-charts-color-trend-down, var(--wpds-color-foreground-content-error-weak, #cc1818))"
 	},
 	lineChart: { lineStyles: { comparison: {
 		strokeDasharray: "4 4",
@@ -6427,9 +6427,9 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
-							"--heatmap-primary": primaryColorHex,
-							"--heatmap-bg": backgroundColor,
-							"--intensity": intensity
+							"--a8c-charts-color-heatmap-primary": primaryColorHex,
+							"--a8c-charts-color-heatmap-background": backgroundColor,
+							"--a8c-charts-heatmap-cell-intensity": intensity
 						}
 					}, index);
 				})
@@ -6587,17 +6587,17 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 			children: (0, _wordpress_i18n.__)("No data available", "jetpack-charts")
 		})
 	});
-	const columnTrack = compact ? "var(--heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
-	const rowTrack = compact ? "var(--heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
+	const columnTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
+	const rowTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
 	const gridStyle = {
-		"--heatmap-primary": primaryColorHex,
-		"--heatmap-bg": theme.backgroundColor,
+		"--a8c-charts-color-heatmap-primary": primaryColorHex,
+		"--a8c-charts-color-heatmap-background": theme.backgroundColor,
 		gridTemplateColumns: `auto repeat(${columns}, ${columnTrack})`,
 		gridTemplateRows: `auto repeat(${rows}, ${rowTrack})`
 	};
 	if (compact) {
-		gridStyle["--heatmap-cell-gap"] = `${compactCellGap}px`;
-		gridStyle["--heatmap-cell-size"] = `${compactCellSize}px`;
+		gridStyle["--a8c-charts-dimension-heatmap-cell-gap"] = `${compactCellGap}px`;
+		gridStyle["--a8c-charts-dimension-heatmap-cell-size"] = `${compactCellSize}px`;
 	}
 	const activeDescendant = selectedIndex !== void 0 ? `${chartId}-cell-${Math.floor(selectedIndex / rows)}-${selectedIndex % rows}` : void 0;
 	const heightCapped = !compact && Boolean(maxCellHeight);
@@ -6674,7 +6674,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 										[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: present && cellHasLightText(normalized),
 										[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selectedIndex === flatIndex
 									}),
-									style: present ? { "--intensity": normalized } : void 0,
+									style: present ? { "--a8c-charts-heatmap-cell-intensity": normalized } : void 0,
 									onMouseMove: handleCellMouseMove,
 									onMouseLeave: handleCellMouseLeave,
 									children: drawValues && present && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -9007,6 +9007,90 @@ function UnconnectedGrid(props, forwardedRef) {
 }
 var component_default = contextConnect(UnconnectedGrid, "Grid");
 //#endregion
+//#region src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
+/**
+* Fractional layout rounding can put a row's bottom a hair past the container's
+* without any visible clipping. Allow that much slack before hiding a row.
+*
+* Exported so tests and stories assert against the real tolerance rather than
+* restating it.
+*/
+const SUBPIXEL_TOLERANCE = .5;
+/**
+* Counts how many leading rows fit inside the content container.
+*
+* Rows are read from the DOM rather than derived from constants: row height
+* depends on the theme's row gap, label wrapping, and whatever a caller renders
+* as a label, so any restated number would drift.
+*
+* Every row is a direct grid child marked with `data-row-index`; interactive rows
+* use a button wrapper and non-interactive rows use a div wrapper.
+*
+* @param enabled  - Whether to measure at all. When false every row fits.
+* @param rowCount - Total number of rows rendered.
+* @param data     - Rendered row data, whose geometry may change without changing the count.
+* @return Ref for the content container and the number of leading rows that fit.
+*/
+function useFittedRowCount(enabled, rowCount, data) {
+	const contentRef = (0, react$1.useRef)(null);
+	const [fittedCount, setFittedCount] = (0, react$1.useState)(rowCount);
+	const [isMeasurable, setIsMeasurable] = (0, react$1.useState)(true);
+	const measure = (0, react$1.useCallback)(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		content.scrollTop = 0;
+		const rows = content.querySelectorAll(":scope > [data-leaderboard-grid] > [data-row-index]");
+		const rowBottoms = [];
+		rows.forEach((row) => {
+			const index = Number(row.getAttribute("data-row-index"));
+			if (!Number.isInteger(index) || index < 0 || index >= rowCount) return;
+			const { bottom } = row.getBoundingClientRect();
+			rowBottoms[index] = Math.max(rowBottoms[index] ?? -Infinity, bottom);
+		});
+		if (rowBottoms.length === 0) {
+			setIsMeasurable(false);
+			setFittedCount(rowCount);
+			return;
+		}
+		setIsMeasurable(true);
+		const contentBottom = content.getBoundingClientRect().bottom + SUBPIXEL_TOLERANCE;
+		let fits = 0;
+		while (fits < rowBottoms.length && rowBottoms[fits] <= contentBottom) fits++;
+		setFittedCount((current) => current === fits ? current : fits);
+	}, [rowCount]);
+	(0, react$1.useLayoutEffect)(() => {
+		if (!enabled) {
+			setFittedCount(rowCount);
+			return;
+		}
+		measure();
+	}, [
+		enabled,
+		rowCount,
+		data,
+		measure
+	]);
+	(0, react$1.useLayoutEffect)(() => {
+		if (!enabled) return;
+		const content = contentRef.current;
+		if (!content) return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(content);
+		const grid = content.querySelector(":scope > [data-leaderboard-grid]");
+		if (grid) observer.observe(grid);
+		return () => observer.disconnect();
+	}, [
+		enabled,
+		rowCount,
+		measure
+	]);
+	return {
+		contentRef,
+		fittedCount: enabled ? fittedCount : rowCount,
+		isMeasurable
+	};
+}
+//#endregion
 //#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts
 /**
 * Hook to create legend items from leaderboard data
@@ -9067,11 +9151,13 @@ var leaderboard_chart_module_default = {
 	"deltaPlaceholder": "a8ccharts-GovfoW-deltaPlaceholder",
 	"deltaValue": "a8ccharts-GovfoW-deltaValue",
 	"emptyState": "a8ccharts-GovfoW-emptyState",
+	"fitEmptyState": "a8ccharts-GovfoW-fitEmptyState",
 	"interactiveRow": "a8ccharts-GovfoW-interactiveRow",
 	"is-overlay": "a8ccharts-GovfoW-is-overlay",
 	"label": "a8ccharts-GovfoW-label",
 	"leaderboardChart": "a8ccharts-GovfoW-leaderboardChart",
 	"leaderboardChart__content": "a8ccharts-GovfoW-leaderboardChart__content",
+	"leaderboardChart__content--fit": "a8ccharts-GovfoW-leaderboardChart__content--fit",
 	"leaderboardChart--loading": "a8ccharts-GovfoW-leaderboardChart--loading",
 	"leaderboardChart--responsive": "a8ccharts-GovfoW-leaderboardChart--responsive",
 	"overlap": "a8ccharts-GovfoW-overlap",
@@ -9116,8 +9202,9 @@ const defaultDeltaFormatter = (value) => {
 * @param share - The bar's share of the row width, as a percentage.
 * @return A CSS width value.
 */
-const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${share} / 100)`;
-const hasComparisonValue = (entry) => entry.previousValue != null && entry.previousShare != null && entry.delta != null;
+const getBarWidth = (share) => `calc(${share}% - var(--a8c-charts-dimension-leaderboard-bar-hover-inset, 0px) * ${share} / 100)`;
+const hasPreviousValue = (entry) => entry.previousValue != null && entry.previousShare != null;
+const hasDeltaValue = (entry) => hasPreviousValue(entry) && entry.delta != null;
 const BarLabel = ({ label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text$2, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -9135,7 +9222,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 					backgroundColor: primaryColor
 				}
 			}),
-			showComparisonBar && hasComparisonValue(entry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, clsx.default)(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
 				style: {
 					width: getBarWidth(entry.previousShare),
@@ -9161,6 +9248,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.valueFormatter   - Custom formatter for values
 * @param props.deltaFormatter   - Custom formatter for delta values
 * @param props.loading          - Whether the chart is in loading state
+* @param props.fitRows          - Whether to show only the rows that fit the chart's height
 * @param props.animation        - Whether the chart should animate on load
 * @param props.showLegend       - Whether to show legend
 * @param props.legend           - Legend configuration (orientation, position, alignment, shape, shapeStyles, interactive)
@@ -9171,7 +9259,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.style            - Custom styling for the chart container
 * @return JSX element representing the leaderboard chart
 */
-const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, showLegend = false, legend = {}, legendLabels, gap = "md", className, style, children }) => {
+const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", className, style, children }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
@@ -9240,6 +9328,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		}), [withComparison, withOverlayLabel])
 	});
 	const prefersReducedMotion = usePrefersReducedMotion();
+	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
+	const shouldFitRows = fitRows && isMeasurable;
 	if (!data || data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
@@ -9292,20 +9382,27 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				height: propHeight || void 0
 			},
 			trailingContent: nonLegendChildren,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: leaderboard_chart_module_default.leaderboardChart__content,
-				children: allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: contentRef,
+				className: (0, clsx.default)(leaderboard_chart_module_default.leaderboardChart__content, { [leaderboard_chart_module_default["leaderboardChart__content--fit"]]: shouldFitRows }),
+				children: [shouldFitRows && fittedCount === 0 && !allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(leaderboard_chart_module_default.emptyState, leaderboard_chart_module_default.fitEmptyState),
+					children: (0, _wordpress_i18n.__)("Not enough space to display data", "jetpack-charts")
+				}), allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: leaderboard_chart_module_default.emptyState,
 					children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap,
 					columnGap,
-					children: data.map((entry) => {
+					"data-leaderboard-grid": true,
+					children: data.map((entry, rowIndex) => {
+						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
 						const showComparisonColumn = withComparison && isComparisonVisible;
-						const hasDeltaValue = hasComparisonValue(entry);
-						const showComparisonValue = showComparisonColumn && hasDeltaValue;
-						const showComparisonPlaceholder = showComparisonColumn && !hasDeltaValue;
+						const hasPreviousPeriodValue = hasPreviousValue(entry);
+						const hasDelta = hasDeltaValue(entry);
+						const showComparisonValue = showComparisonColumn && hasDelta;
+						const showComparisonPlaceholder = showComparisonColumn && !hasDelta;
 						const colorIndex = showComparisonValue ? Math.sign(entry.delta) + 1 : 1;
 						const deltaColor = deltaColors[colorIndex];
 						const rowCells = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stack, {
@@ -9337,16 +9434,18 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 									style: { color: deltaColor },
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										"aria-hidden": "true",
-										children: "-"
+										children: "—"
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$1, {
 										as: "span",
-										children: (0, _wordpress_i18n.__)("No comparison data", "jetpack-charts")
+										children: hasPreviousPeriodValue ? (0, _wordpress_i18n.__)("Percentage change unavailable", "jetpack-charts") : (0, _wordpress_i18n.__)("No comparison data", "jetpack-charts")
 									})]
 								})
 							]
 						})] });
 						if (entry.onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
+							"data-row-index": rowIndex,
+							style: rowStyle,
 							className: (0, clsx.default)(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
 							onClick: entry.onClick,
 							"aria-label": entry.ariaLabel,
@@ -9357,11 +9456,13 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							})]
 						}, entry.id);
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-row-index": rowIndex,
+							style: rowStyle,
 							className: leaderboard_chart_module_default.row,
 							children: rowCells
 						}, entry.id);
 					})
-				})
+				})]
 			})
 		})
 	});