@automattic/charts 1.10.2 → 1.11.0

package/dist/index.js

@@ -4,7 +4,7 @@ import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarS
 import { __, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
-import { Children, Fragment, Fragment as Fragment$2, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
+import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
 import { color, hsl } from "@visx/vendor/d3-color";
 import { addDays, differenceInCalendarWeeks, differenceInHours, differenceInYears, format, isValid, parse, parseISO, startOfWeek } from "date-fns";
 import { Text, getStringWidth } from "@visx/text";
@@ -722,9 +722,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",
@@ -733,59 +733,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",
@@ -6128,9 +6128,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);
 				})
@@ -6288,17 +6288,17 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 			children: __("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);
@@ -6375,7 +6375,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__ */ jsx("span", {
@@ -8639,6 +8639,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 = useRef(null);
+	const [fittedCount, setFittedCount] = useState(rowCount);
+	const [isMeasurable, setIsMeasurable] = useState(true);
+	const measure = 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]);
+	useLayoutEffect(() => {
+		if (!enabled) {
+			setFittedCount(rowCount);
+			return;
+		}
+		measure();
+	}, [
+		enabled,
+		rowCount,
+		data,
+		measure
+	]);
+	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
@@ -8699,15 +8783,18 @@ 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",
 	"overlayLabel": "a8ccharts-GovfoW-overlayLabel",
+	"row": "a8ccharts-GovfoW-row",
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
@@ -8747,8 +8834,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__ */ jsx(Fragment$1, { children: typeof label === "string" ? /* @__PURE__ */ jsx(Text$1, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -8766,7 +8854,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 					backgroundColor: primaryColor
 				}
 			}),
-			showComparisonBar && hasComparisonValue(entry) && /* @__PURE__ */ jsx("div", {
+			showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ jsx("div", {
 				className: clsx(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
 				style: {
 					width: getBarWidth(entry.previousShare),
@@ -8792,6 +8880,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)
@@ -8802,7 +8891,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);
@@ -8871,6 +8960,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__ */ jsx(SingleChartContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
@@ -8923,20 +9014,27 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				height: propHeight || void 0
 			},
 			trailingContent: nonLegendChildren,
-			children: /* @__PURE__ */ jsx("div", {
-				className: leaderboard_chart_module_default.leaderboardChart__content,
-				children: allSeriesHidden ? /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				className: clsx(leaderboard_chart_module_default.leaderboardChart__content, { [leaderboard_chart_module_default["leaderboardChart__content--fit"]]: shouldFitRows }),
+				children: [shouldFitRows && fittedCount === 0 && !allSeriesHidden && /* @__PURE__ */ jsx("div", {
+					className: clsx(leaderboard_chart_module_default.emptyState, leaderboard_chart_module_default.fitEmptyState),
+					children: __("Not enough space to display data", "jetpack-charts")
+				}), allSeriesHidden ? /* @__PURE__ */ jsx("div", {
 					className: leaderboard_chart_module_default.emptyState,
 					children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
 				}) : /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
@@ -8968,17 +9066,19 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 									style: { color: deltaColor },
 									children: [/* @__PURE__ */ jsx("span", {
 										"aria-hidden": "true",
-										children: "-"
+										children: "—"
 									}), /* @__PURE__ */ jsx(component_default$1, {
 										as: "span",
-										children: __("No comparison data", "jetpack-charts")
+										children: hasPreviousPeriodValue ? __("Percentage change unavailable", "jetpack-charts") : __("No comparison data", "jetpack-charts")
 									})]
 								})
 							]
 						})] });
 						if (entry.onClick) return /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: leaderboard_chart_module_default.interactiveRow,
+							"data-row-index": rowIndex,
+							style: rowStyle,
+							className: clsx(leaderboard_chart_module_default.row, leaderboard_chart_module_default.interactiveRow),
 							onClick: entry.onClick,
 							"aria-label": entry.ariaLabel,
 							children: [rowCells, /* @__PURE__ */ jsx(Icon, {
@@ -8987,9 +9087,14 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								size: 24
 							})]
 						}, entry.id);
-						return /* @__PURE__ */ jsx(Fragment$2, { children: rowCells }, entry.id);
+						return /* @__PURE__ */ jsx("div", {
+							"data-row-index": rowIndex,
+							style: rowStyle,
+							className: leaderboard_chart_module_default.row,
+							children: rowCells
+						}, entry.id);
 					})
-				})
+				})]
 			})
 		})
 	});