@automattic/charts 0.56.2 → 0.56.4

package/dist/{chunk-TNRKEBTA.js → chunk-PGJAZN2H.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-AWNCAKZY.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-PGJAZN2H.js.map