@automattic/charts 0.56.3 → 0.56.5

package/dist/{chunk-5XI443YP.js → chunk-BPYKWMI7.js}

@@ -7,12 +7,12 @@ var base_tooltip_module_default = {
 };
 
 // src/components/tooltip/base-tooltip.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DefaultTooltipContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  data?.label,
-  ": ",
-  data?.valueDisplay || formatNumber(data?.value)
-] });
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+var DefaultTooltipContent = ({
+  data
+}) => /* @__PURE__ */ _jsxs(_Fragment, {
+  children: [data?.label, ": ", data?.valueDisplay || formatNumber(data?.value)]
+});
 var BaseTooltip = ({
   data,
   top,
@@ -23,17 +23,29 @@ var BaseTooltip = ({
   style,
   renderContainer = true
 }) => {
-  const content = children || data && /* @__PURE__ */ jsx(Component, { data, className });
+  const content = children || data && /* @__PURE__ */ _jsx(Component, {
+    data,
+    className
+  });
   if (!renderContainer) {
     return content;
   }
-  return /* @__PURE__ */ jsx("div", { className: base_tooltip_module_default.tooltip, style: { top, left, ...style }, role: "tooltip", children: content });
+  return /* @__PURE__ */ _jsx("div", {
+    className: base_tooltip_module_default.tooltip,
+    style: {
+      top,
+      left,
+      ...style
+    },
+    role: "tooltip",
+    children: content
+  });
 };
 
 // src/components/tooltip/accessible-tooltip.tsx
 import { Tooltip, TooltipContext } from "@visx/xychart";
 import { useContext, useEffect, useCallback, useMemo } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as _jsx2 } from "react/jsx-runtime";
 var AccessibleTooltip = ({
   renderTooltip,
   selectedIndex,
@@ -96,24 +108,26 @@ var AccessibleTooltip = ({
     return (params) => {
       const tooltipContent = renderTooltip(params);
       if (selectedIndex !== void 0) {
-        return /* @__PURE__ */ jsx2(
-          "div",
-          {
-            ref: tooltipRef,
-            tabIndex: -1,
-            role: "tooltip",
-            "aria-atomic": "true",
-            className: keyboardFocusedClassName,
-            "data-testid": `chart-tooltip-${selectedIndex}`,
-            children: tooltipContent
-          },
-          `chart-tooltip-${selectedIndex}`
-        );
+        return /* @__PURE__ */ _jsx2("div", {
+          ref: tooltipRef,
+          tabIndex: -1,
+          role: "tooltip",
+          "aria-atomic": "true",
+          className: keyboardFocusedClassName,
+          children: tooltipContent
+        }, `chart-tooltip-${selectedIndex}`);
       }
-      return /* @__PURE__ */ jsx2("div", { role: "tooltip", "aria-live": "polite", children: tooltipContent });
+      return /* @__PURE__ */ _jsx2("div", {
+        role: "tooltip",
+        "aria-live": "polite",
+        children: tooltipContent
+      });
     };
   }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
-  return /* @__PURE__ */ jsx2(Tooltip, { ...props, renderTooltip: focusableRenderTooltip });
+  return /* @__PURE__ */ _jsx2(Tooltip, {
+    ...props,
+    renderTooltip: focusableRenderTooltip
+  });
 };
 var useKeyboardNavigation = ({
   selectedIndex,
@@ -123,14 +137,11 @@ var useKeyboardNavigation = ({
   chartRef,
   totalPoints
 }) => {
-  const tooltipRef = useCallback(
-    (element) => {
-      if (element && selectedIndex !== void 0) {
-        element.focus();
-      }
-    },
-    [selectedIndex]
-  );
+  const tooltipRef = useCallback((element) => {
+    if (element && selectedIndex !== void 0) {
+      element.focus();
+    }
+  }, [selectedIndex]);
   const onChartFocus = useCallback(() => {
     if (!isNavigating && selectedIndex !== void 0) {
       setSelectedIndex(0);
@@ -139,37 +150,34 @@ var useKeyboardNavigation = ({
   const onChartBlur = useCallback(() => {
     setIsNavigating(false);
   }, [setIsNavigating]);
-  const onChartKeyDown = useCallback(
-    (event) => {
-      if (totalPoints === 0) return;
-      if (event.key === "Tab") {
-        chartRef.current?.focus();
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        return;
-      }
-      const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
-      if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-        chartRef.current?.focus();
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        return;
-      }
-      event.preventDefault();
-      if (["ArrowRight"].includes(event.key)) {
-        setIsNavigating(true);
-        setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
-      } else if (["ArrowLeft"].includes(event.key)) {
-        setIsNavigating(true);
-        setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
-      } else if (event.key === "Escape") {
-        setSelectedIndex(void 0);
-        setIsNavigating(false);
-        chartRef.current?.focus();
-      }
-    },
-    [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]
-  );
+  const onChartKeyDown = useCallback((event) => {
+    if (totalPoints === 0) return;
+    if (event.key === "Tab") {
+      chartRef.current?.focus();
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
+    if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
+      chartRef.current?.focus();
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    event.preventDefault();
+    if (["ArrowRight"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
+    } else if (["ArrowLeft"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
+    } else if (event.key === "Escape") {
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      chartRef.current?.focus();
+    }
+  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
   return {
     tooltipRef,
     onChartFocus,
@@ -183,4 +191,4 @@ export {
   AccessibleTooltip,
   useKeyboardNavigation
 };
-//# sourceMappingURL=chunk-5XI443YP.js.map
+//# sourceMappingURL=chunk-BPYKWMI7.js.map

package/dist/chunk-BPYKWMI7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tooltip/base-tooltip.tsx","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/accessible-tooltip.tsx"],"sourcesContent":["import { formatNumber } from '@automattic/number-formatters';\nimport styles from './base-tooltip.module.scss';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nconst DefaultTooltipContent = ({\n  data\n}) => /*#__PURE__*/_jsxs(_Fragment, {\n  children: [data?.label, \": \", data?.valueDisplay || formatNumber(data?.value)]\n});\nexport const BaseTooltip = ({\n  data,\n  top,\n  left,\n  component: Component = DefaultTooltipContent,\n  children,\n  className,\n  style,\n  renderContainer = true\n}) => {\n  const content = children || data && /*#__PURE__*/_jsx(Component, {\n    data: data,\n    className: className\n  });\n  if (!renderContainer) {\n    return content;\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: styles.tooltip,\n    style: {\n      top,\n      left,\n      ...style\n    },\n    role: \"tooltip\",\n    children: content\n  });\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n  \"tooltip\": \"a8ccharts-OfX6nd\"\n};","import { Tooltip, TooltipContext } from '@visx/xychart';\nimport { useContext, useEffect, useCallback, useMemo } from 'react';\n\n// Type for flattened tooltip data used in individual mode\n\n// Enhanced tooltip with keyboard navigation and accessibility\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const AccessibleTooltip = ({\n  renderTooltip,\n  selectedIndex,\n  tooltipRef,\n  keyboardFocusedClassName,\n  series = [],\n  mode = 'group',\n  ...props\n}) => {\n  const tooltipContext = useContext(TooltipContext);\n  const tooltipData = useMemo(() => {\n    if (mode !== 'individual') return [];\n    if (series.length === 0) return [];\n    const maxDataPoints = Math.max(...series.map(s => s.data.length));\n    const flattened = [];\n\n    // Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n    for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {\n      for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {\n        const seriesData = series[seriesIndex];\n        if (dataPointIndex < seriesData.data.length) {\n          flattened.push({\n            datum: seriesData.data[dataPointIndex],\n            seriesLabel: seriesData.label,\n            seriesIndex,\n            dataPointIndex\n          });\n        }\n      }\n    }\n    return flattened;\n  }, [series, mode]);\n\n  // Handle tooltip highlighting for keyboard navigation\n  useEffect(() => {\n    if (selectedIndex === undefined) {\n      tooltipContext?.hideTooltip();\n      return;\n    }\n    if (mode === 'group') {\n      // Show all series at the selected data point index in single tooltip.\n      series.forEach((s, index) => {\n        if (selectedIndex < s.data.length) {\n          const datum = s.data[selectedIndex];\n          tooltipContext?.showTooltip({\n            datum,\n            key: s.label,\n            index\n          });\n        }\n      });\n    } else if (mode === 'individual') {\n      // Show individual tooltips for each datapoint from each series.\n      if (selectedIndex < tooltipData.length) {\n        const tooltipItem = tooltipData[selectedIndex];\n        tooltipContext?.showTooltip({\n          datum: tooltipItem.datum,\n          key: tooltipItem.seriesLabel,\n          index: tooltipItem.seriesIndex\n        });\n      }\n    }\n\n    // Don't include tooltipContext in the dependency array to avoid loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedIndex, tooltipData, series]);\n\n  // Create a focusable renderTooltip that includes accessibility features\n  const focusableRenderTooltip = useMemo(() => {\n    if (!renderTooltip) return undefined;\n    return params => {\n      const tooltipContent = renderTooltip(params);\n      if (selectedIndex !== undefined) {\n        return /*#__PURE__*/_jsx(\"div\", {\n          ref: tooltipRef,\n          tabIndex: -1,\n          role: \"tooltip\",\n          \"aria-atomic\": \"true\",\n          className: keyboardFocusedClassName,\n          children: tooltipContent\n        }, `chart-tooltip-${selectedIndex}`);\n      }\n      return /*#__PURE__*/_jsx(\"div\", {\n        role: \"tooltip\",\n        \"aria-live\": \"polite\",\n        children: tooltipContent\n      });\n    };\n  }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);\n  return /*#__PURE__*/_jsx(Tooltip, {\n    ...props,\n    renderTooltip: focusableRenderTooltip\n  });\n};\n\n// Keyboard navigation hook for charts\n\nexport const useKeyboardNavigation = ({\n  selectedIndex,\n  setSelectedIndex,\n  isNavigating,\n  setIsNavigating,\n  chartRef,\n  totalPoints\n}) => {\n  // Focus the tooltip as soon as it is rendered\n  const tooltipRef = useCallback(element => {\n    if (element && selectedIndex !== undefined) {\n      element.focus();\n    }\n  }, [selectedIndex]);\n\n  // On each focus of chart, reset the selectedIndex to 0, if keyboard navigation is not already active\n  const onChartFocus = useCallback(() => {\n    if (!isNavigating && selectedIndex !== undefined) {\n      setSelectedIndex(0);\n    }\n  }, [isNavigating, selectedIndex, setSelectedIndex]);\n\n  // On each blur of chart, keyboard navigation should restart from first tooltip\n  const onChartBlur = useCallback(() => {\n    setIsNavigating(false);\n  }, [setIsNavigating]);\n  const onChartKeyDown = useCallback(event => {\n    if (totalPoints === 0) return;\n\n    // Keep focus on the chart if tab is pressed\n    if (event.key === 'Tab') {\n      chartRef.current?.focus();\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      return;\n    }\n    const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;\n    if (currentSelectedIndex + 1 >= totalPoints && ['ArrowRight'].includes(event.key)) {\n      chartRef.current?.focus();\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      return;\n    }\n    event.preventDefault();\n    if (['ArrowRight'].includes(event.key)) {\n      setIsNavigating(true);\n      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);\n    } else if (['ArrowLeft'].includes(event.key)) {\n      setIsNavigating(true);\n      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);\n    } else if (event.key === 'Escape') {\n      setSelectedIndex(undefined);\n      setIsNavigating(false);\n      chartRef.current?.focus();\n    }\n  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);\n  return {\n    tooltipRef,\n    onChartFocus,\n    onChartBlur,\n    onChartKeyDown\n  };\n};\n\n// Re-export the base Tooltip for backwards compatibility\nexport { Tooltip };"],"mappings":"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","names":["_jsx"]}

package/dist/{chunk-TNRKEBTA.js → chunk-DBY6C4O2.js}

@@ -1,6 +1,6 @@
 import {
   useChartChildren
-} from "./chunk-CEZGL6YP.js";
+} from "./chunk-6CCZL2JJ.js";
 import {
   Children,
   Fragment,
@@ -19,7 +19,7 @@ import {
 } from "./chunk-SEKPIG5K.js";
 import {
   withResponsive
-} from "./chunk-C33AQZEC.js";
+} from "./chunk-TYIH5LMV.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -30,7 +30,7 @@ import {
   useGlobalChartsContext,
   useGlobalChartsTheme,
   usePrefersReducedMotion
-} from "./chunk-H34CJSR6.js";
+} from "./chunk-32ESS4MV.js";
 import {
   attachSubComponents,
   formatMetricValue
@@ -223,7 +223,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment6 = REACT_FRAGMENT_TYPE;
+        var Fragment5 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -282,7 +282,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment6;
+        exports.Fragment = Fragment5;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -2312,10 +2312,10 @@ var jsx = function jsx2(type, props) {
   }
   return React3.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx8) {
+(function(_jsx9) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
-  })(JSX || (JSX = _jsx8.JSX || (_jsx8.JSX = {})));
+  })(JSX || (JSX = _jsx9.JSX || (_jsx9.JSX = {})));
 })(jsx || (jsx = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -4254,7 +4254,7 @@ var leaderboard_chart_module_default = {
 };
 
 // src/charts/leaderboard-chart/leaderboard-chart.tsx
-import { Fragment as Fragment5, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as _jsx8, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var defaultValueFormatter = (value) => {
   return formatMetricValue(value, "number", {
     useMultipliers: true,
@@ -4267,7 +4267,14 @@ var defaultDeltaFormatter = (value) => {
     signDisplay: "exceptZero"
   });
 };
-var BarLabel = ({ label }) => /* @__PURE__ */ jsx3(Fragment5, { children: typeof label === "string" ? /* @__PURE__ */ jsx3(component_default4, { className: leaderboard_chart_module_default.label, children: label }) : label });
+var BarLabel = ({
+  label
+}) => /* @__PURE__ */ _jsx8(_Fragment, {
+  children: typeof label === "string" ? /* @__PURE__ */ _jsx8(component_default4, {
+    className: leaderboard_chart_module_default.label,
+    children: label
+  }) : label
+});
 var BarWithLabel = ({
   entry,
   withComparison,
@@ -4277,41 +4284,30 @@ var BarWithLabel = ({
   animation,
   isPrimaryVisible = true,
   isComparisonVisible = true
-}) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: clsx(leaderboard_chart_module_default.barWithLabelContainer, {
-      [leaderboard_chart_module_default["is-overlay"]]: withOverlayLabel
+}) => /* @__PURE__ */ _jsxs("div", {
+  className: clsx(leaderboard_chart_module_default.barWithLabelContainer, {
+    [leaderboard_chart_module_default["is-overlay"]]: withOverlayLabel
+  }),
+  children: [/* @__PURE__ */ _jsx8(BarLabel, {
+    label: entry.label
+  }), isPrimaryVisible && /* @__PURE__ */ _jsx8("div", {
+    className: clsx(leaderboard_chart_module_default.bar, {
+      [leaderboard_chart_module_default["bar--animated"]]: animation
     }),
-    children: [
-      /* @__PURE__ */ jsx3(BarLabel, { label: entry.label }),
-      isPrimaryVisible && /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: clsx(leaderboard_chart_module_default.bar, {
-            [leaderboard_chart_module_default["bar--animated"]]: animation
-          }),
-          style: {
-            width: entry.currentShare + "%",
-            backgroundColor: primaryColor
-          }
-        }
-      ),
-      withComparison && !withOverlayLabel && isComparisonVisible && /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: clsx(leaderboard_chart_module_default.bar, {
-            [leaderboard_chart_module_default["bar--animated"]]: animation
-          }),
-          style: {
-            width: entry.previousShare + "%",
-            backgroundColor: secondaryColor
-          }
-        }
-      )
-    ]
-  }
-);
+    style: {
+      width: entry.currentShare + "%",
+      backgroundColor: primaryColor
+    }
+  }), withComparison && !withOverlayLabel && isComparisonVisible && /* @__PURE__ */ _jsx8("div", {
+    className: clsx(leaderboard_chart_module_default.bar, {
+      [leaderboard_chart_module_default["bar--animated"]]: animation
+    }),
+    style: {
+      width: entry.previousShare + "%",
+      backgroundColor: secondaryColor
+    }
+  })]
+});
 var LeaderboardChartInternal = ({
   data,
   chartId: providedChartId,
@@ -4337,8 +4333,12 @@ var LeaderboardChartInternal = ({
   children
 }) => {
   const chartId = useChartId(providedChartId);
-  const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
-  const { otherChildren } = useChartChildren(children, "LeaderboardChart");
+  const {
+    leaderboardChart: leaderboardChartSettings
+  } = useGlobalChartsTheme();
+  const {
+    otherChildren
+  } = useChartChildren(children, "LeaderboardChart");
   const {
     labelSpacing,
     rowGap,
@@ -4347,12 +4347,19 @@ var LeaderboardChartInternal = ({
     secondaryColor: settingsSecondaryColor,
     deltaColors
   } = leaderboardChartSettings;
-  const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-  const { color: resolvedPrimaryColor } = getElementStyles({
+  const {
+    getElementStyles,
+    isSeriesVisible
+  } = useGlobalChartsContext();
+  const {
+    color: resolvedPrimaryColor
+  } = getElementStyles({
     index: 0,
     overrideColor: primaryColor || settingsPrimaryColor
   });
-  const { color: resolvedSecondaryColor } = getElementStyles({
+  const {
+    color: resolvedSecondaryColor
+  } = getElementStyles({
     index: 1,
     overrideColor: secondaryColor || settingsSecondaryColor
   });
@@ -4382,21 +4389,12 @@ var LeaderboardChartInternal = ({
       return !isPrimaryVisible && !isComparisonVisible;
     }
     return !isPrimaryVisible;
-  }, [
-    legendInteractive,
-    isPrimaryVisible,
-    isComparisonVisible,
+  }, [legendInteractive, isPrimaryVisible, isComparisonVisible, withComparison, withOverlayLabel]);
+  const isDataValid = Boolean(data && data.length > 0);
+  const chartMetadata = useMemo3(() => ({
     withComparison,
     withOverlayLabel
-  ]);
-  const isDataValid = Boolean(data && data.length > 0);
-  const chartMetadata = useMemo3(
-    () => ({
-      withComparison,
-      withOverlayLabel
-    }),
-    [withComparison, withOverlayLabel]
-  );
+  }), [withComparison, withOverlayLabel]);
   useChartRegistration({
     chartId,
     legendItems,
@@ -4406,124 +4404,110 @@ var LeaderboardChartInternal = ({
   });
   const prefersReducedMotion = usePrefersReducedMotion();
   if (!data || data.length === 0) {
-    return /* @__PURE__ */ jsx3(
-      SingleChartContext.Provider,
-      {
-        value: {
-          chartId,
-          chartWidth: 0,
-          // LeaderboardChart doesn't need specific dimensions
-          chartHeight: 0
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              leaderboard_chart_module_default.leaderboardChart,
-              { [leaderboard_chart_module_default["leaderboardChart--loading"]]: loading },
-              className
-            ),
-            style,
-            children: [
-              /* @__PURE__ */ jsx3("div", { className: leaderboard_chart_module_default.emptyState, children: loading ? __2("Loading\u2026", "jetpack-charts") : __2("No data available", "jetpack-charts") }),
-              otherChildren
-            ]
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx3(
-    SingleChartContext.Provider,
-    {
+    return /* @__PURE__ */ _jsx8(SingleChartContext.Provider, {
       value: {
         chartId,
         chartWidth: 0,
         // LeaderboardChart doesn't need specific dimensions
         chartHeight: 0
       },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: clsx(
-            leaderboard_chart_module_default.leaderboardChart,
-            {
-              [leaderboard_chart_module_default["leaderboardChart--loading"]]: loading,
-              [leaderboard_chart_module_default["leaderboardChart--with-legend"]]: showLegend,
-              [leaderboard_chart_module_default["leaderboardChart--legend-top"]]: showLegend && legendPosition === "top"
-            },
-            className
-          ),
-          style,
-          children: [
-            allSeriesHidden ? /* @__PURE__ */ jsx3("div", { className: leaderboard_chart_module_default.emptyState, children: __2("All series are hidden. Click legend items to show data.", "jetpack-charts") }) : /* @__PURE__ */ jsx3(component_default6, { templateColumns: "minmax(0, 1fr) auto", rowGap, columnGap, children: data.map((entry) => {
-              const colorIndex = Math.sign(entry.delta) + 1;
-              const deltaColor = deltaColors[colorIndex];
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx3(component_default5, { spacing: labelSpacing, children: /* @__PURE__ */ jsx3(
-                  BarWithLabel,
-                  {
-                    entry,
-                    withComparison,
-                    withOverlayLabel,
-                    primaryColor: resolvedPrimaryColor,
-                    secondaryColor: resolvedSecondaryColor,
-                    isPrimaryVisible,
-                    isComparisonVisible,
-                    animation: animation && !loading && !prefersReducedMotion
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: clsx(leaderboard_chart_module_default.valueContainer, {
-                      [leaderboard_chart_module_default.overlayLabel]: withOverlayLabel
-                    }),
-                    children: [
-                      isPrimaryVisible && /* @__PURE__ */ jsx3(component_default4, { children: valueFormatter(entry.currentValue) }),
-                      withComparison && isComparisonVisible && /* @__PURE__ */ jsx3(component_default4, { style: { color: deltaColor }, children: deltaFormatter(entry.delta) })
-                    ]
-                  }
-                )
-              ] }, entry.id);
-            }) }),
-            showLegend && /* @__PURE__ */ jsx3(
-              Legend,
-              {
-                orientation: legendOrientation,
-                position: legendPosition,
-                alignment: legendAlignment,
-                shape: legendShape,
-                shapeWidth: legendShapeWidth,
-                shapeHeight: legendShapeHeight,
-                chartId,
-                interactive: legendInteractive
-              }
-            ),
-            otherChildren
-          ]
-        }
-      )
-    }
-  );
+      children: /* @__PURE__ */ _jsxs("div", {
+        className: clsx(leaderboard_chart_module_default.leaderboardChart, {
+          [leaderboard_chart_module_default["leaderboardChart--loading"]]: loading
+        }, className),
+        style,
+        children: [/* @__PURE__ */ _jsx8("div", {
+          className: leaderboard_chart_module_default.emptyState,
+          children: loading ? __2("Loading\u2026", "jetpack-charts") : __2("No data available", "jetpack-charts")
+        }), otherChildren]
+      })
+    });
+  }
+  return /* @__PURE__ */ _jsx8(SingleChartContext.Provider, {
+    value: {
+      chartId,
+      chartWidth: 0,
+      // LeaderboardChart doesn't need specific dimensions
+      chartHeight: 0
+    },
+    children: /* @__PURE__ */ _jsxs("div", {
+      className: clsx(leaderboard_chart_module_default.leaderboardChart, {
+        [leaderboard_chart_module_default["leaderboardChart--loading"]]: loading,
+        [leaderboard_chart_module_default["leaderboardChart--with-legend"]]: showLegend,
+        [leaderboard_chart_module_default["leaderboardChart--legend-top"]]: showLegend && legendPosition === "top"
+      }, className),
+      style,
+      children: [allSeriesHidden ? /* @__PURE__ */ _jsx8("div", {
+        className: leaderboard_chart_module_default.emptyState,
+        children: __2("All series are hidden. Click legend items to show data.", "jetpack-charts")
+      }) : /* @__PURE__ */ _jsx8(component_default6, {
+        templateColumns: "minmax(0, 1fr) auto",
+        rowGap,
+        columnGap,
+        children: data.map((entry) => {
+          const colorIndex = Math.sign(entry.delta) + 1;
+          const deltaColor = deltaColors[colorIndex];
+          return /* @__PURE__ */ _jsxs(Fragment, {
+            children: [/* @__PURE__ */ _jsx8(component_default5, {
+              spacing: labelSpacing,
+              children: /* @__PURE__ */ _jsx8(BarWithLabel, {
+                entry,
+                withComparison,
+                withOverlayLabel,
+                primaryColor: resolvedPrimaryColor,
+                secondaryColor: resolvedSecondaryColor,
+                isPrimaryVisible,
+                isComparisonVisible,
+                animation: animation && !loading && !prefersReducedMotion
+              })
+            }), /* @__PURE__ */ _jsxs("div", {
+              className: clsx(leaderboard_chart_module_default.valueContainer, {
+                [leaderboard_chart_module_default.overlayLabel]: withOverlayLabel
+              }),
+              children: [isPrimaryVisible && /* @__PURE__ */ _jsx8(component_default4, {
+                children: valueFormatter(entry.currentValue)
+              }), withComparison && isComparisonVisible && /* @__PURE__ */ _jsx8(component_default4, {
+                style: {
+                  color: deltaColor
+                },
+                children: deltaFormatter(entry.delta)
+              })]
+            })]
+          }, entry.id);
+        })
+      }), showLegend && /* @__PURE__ */ _jsx8(Legend, {
+        orientation: legendOrientation,
+        position: legendPosition,
+        alignment: legendAlignment,
+        shape: legendShape,
+        shapeWidth: legendShapeWidth,
+        shapeHeight: legendShapeHeight,
+        chartId,
+        interactive: legendInteractive
+      }), otherChildren]
+    })
+  });
 };
 var LeaderboardChartWithProvider = (props) => {
   const existingContext = useContext6(GlobalChartsContext);
   if (existingContext) {
-    return /* @__PURE__ */ jsx3(LeaderboardChartInternal, { ...props });
+    return /* @__PURE__ */ _jsx8(LeaderboardChartInternal, {
+      ...props
+    });
   }
-  return /* @__PURE__ */ jsx3(GlobalChartsProvider, { children: /* @__PURE__ */ jsx3(LeaderboardChartInternal, { ...props }) });
+  return /* @__PURE__ */ _jsx8(GlobalChartsProvider, {
+    children: /* @__PURE__ */ _jsx8(LeaderboardChartInternal, {
+      ...props
+    })
+  });
 };
 LeaderboardChartWithProvider.displayName = "LeaderboardChart";
 var LeaderboardChart = attachSubComponents(LeaderboardChartWithProvider, {
   Legend
 });
-var LeaderboardChartResponsive = attachSubComponents(
-  withResponsive(LeaderboardChartWithProvider),
-  {
-    Legend
-  }
-);
+var LeaderboardChartResponsive = attachSubComponents(withResponsive(LeaderboardChartWithProvider), {
+  Legend
+});
 
 export {
   useLeaderboardLegendItems,
@@ -4560,4 +4544,4 @@ is-plain-object/dist/is-plain-object.mjs:
    * Released under the MIT License.
    *)
 */
-//# sourceMappingURL=chunk-TNRKEBTA.js.map
+//# sourceMappingURL=chunk-DBY6C4O2.js.map