@automattic/charts 1.6.0 → 1.7.0

package/dist/index.js

@@ -17,7 +17,6 @@ import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
 import { Annotation, CircleSubject, Connector, HtmlLabel, Label, LineSubject } from "@visx/annotation";
-import { Icon, chevronRight, close } from "@wordpress/icons";
 import { PatternCircles, PatternHexagons, PatternLines, PatternWaves } from "@visx/pattern";
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
 import { Chart } from "react-google-charts";
@@ -25,6 +24,7 @@ import DOMPurify from "dompurify";
 import { __assign } from "tslib";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import "@babel/runtime/helpers/extends";
+import { Icon, chevronRight } from "@wordpress/icons";
 import { Pie } from "@visx/shape";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
@@ -709,7 +709,7 @@ const defaultTheme = {
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
-		labelSpacing: 1.5,
+		labelSpacing: "xs",
 		deltaColors: [
 			"#FF8C8F",
 			"#757575",
@@ -3059,6 +3059,19 @@ const LineChartAnnotationsOverlay = ({ children }) => {
 		})
 	});
 };
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+});
 const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, renderLabelPopover }) => {
 	const popoverId = useId();
 	const buttonRef = useRef(null);
@@ -3120,10 +3133,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 					popovertargetaction: "hide",
 					className: line_chart_module_default["line-chart__annotation-label-popover-close-button"],
 					"aria-label": __("Close", "jetpack-charts"),
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: close,
-						size: 16
-					})
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
 				})]
 			})
 		})]
@@ -7763,13 +7773,15 @@ const defaultDeltaFormatter = (value) => {
 };
 /**
 * Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
-* so interactive rows can pull the bar's right edge back by a fixed pixel amount
-* on hover — instead of a percentage scale — keeping the bar↔value gap constant.
+* on hover, scaled by the bar's share so the pull-back is proportional to its
+* length: the full-length (100%) bar — the one that reaches the value — pulls
+* back the whole inset to keep its gap with the value, while shorter bars pull
+* back proportionally less, down to ~0 for a very short bar.
 *
 * @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))`;
+const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${share} / 100)`;
 const BarLabel = ({ label }) => /* @__PURE__ */ jsx(Fragment$1, { children: typeof label === "string" ? /* @__PURE__ */ jsx(Text$1, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -7978,6 +7990,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							type: "button",
 							className: leaderboard_chart_module_default.interactiveRow,
 							onClick: entry.onClick,
+							"aria-label": entry.ariaLabel,
 							children: [rowCells, /* @__PURE__ */ jsx(Icon, {
 								className: leaderboard_chart_module_default.chevron,
 								icon: chevronRight,