@automattic/charts 0.57.0 → 0.58.0

package/dist/{chunk-32DH6JDF.js → chunk-2I67QUIV.js}

@@ -1,5 +1,4 @@
 import {
-  formatPercentage,
   getColorDistance,
   getItemShapeStyles,
   getLongestTickWidth,
@@ -8,14 +7,53 @@ import {
   normalizeColorToHex,
   parseAsLocalDate,
   resolveCssVariable
-} from "./chunk-DAU3HNEG.js";
+} from "./chunk-JJIMABHT.js";
+import {
+  __commonJS,
+  __toESM
+} from "./chunk-G3PMV62Z.js";
+
+// ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = __commonJS({
+  "../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js"(exports, module) {
+    "use strict";
+    module.exports = function equal(a, b) {
+      if (a === b) return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor) return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length) return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i])) return false;
+          return true;
+        }
+        if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+        for (i = length; i-- !== 0; ) {
+          var key = keys[i];
+          if (!equal(a[key], b[key])) return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    };
+  }
+});
 
 // src/hooks/use-deep-memo.ts
-import isEqual from "fast-deep-equal";
+var import_fast_deep_equal = __toESM(require_fast_deep_equal(), 1);
 import { useRef } from "react";
 var useDeepMemo = (value) => {
   const ref = useRef(value);
-  if (!isEqual(ref.current, value)) {
+  if (!(0, import_fast_deep_equal.default)(ref.current, value)) {
     ref.current = value;
   }
   return ref.current;
@@ -695,413 +733,12 @@ function useElementSize({
   return [refCallback, width, height];
 }
 
-// src/hooks/use-has-legend-child.ts
-import { Children, isValidElement, useMemo as useMemo8 } from "react";
-
-// src/components/legend/legend.tsx
-import { useContext as useContext5, useMemo as useMemo6, forwardRef as forwardRef2 } from "react";
-
-// src/charts/private/single-chart-context/single-chart-context.tsx
-import { createContext as createContext2 } from "react";
-var ChartInstanceContext = /* @__PURE__ */ createContext2(null);
-var SingleChartContext = ChartInstanceContext;
-
-// src/charts/private/single-chart-context/use-single-chart-context.ts
-import { useContext as useContext3 } from "react";
-var useChartInstanceContext = () => {
-  const context = useContext3(ChartInstanceContext);
-  if (!context) {
-    throw new Error("useChartInstanceContext must be used within a Chart component");
-  }
-  return context;
-};
-var useSingleChartContext = useChartInstanceContext;
-
-// src/components/legend/private/base-legend.tsx
-import { Group } from "@visx/group";
-import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
-import { scaleOrdinal } from "@visx/scale";
-import clsx from "clsx";
-import { forwardRef, useCallback as useCallback4, useContext as useContext4 } from "react";
-
-// src/components/legend/utils/value-or-identity.ts
-function valueOrIdentity(_) {
-  if (_ && typeof _ === "object" && "value" in _ && typeof _.value !== "undefined")
-    return _.value;
-  return _;
-}
-function valueOrIdentityString(_) {
-  return String(valueOrIdentity(_));
-}
-
-// src/components/legend/utils/label-transform-factory.ts
-function labelTransformFactory({
-  scale,
-  labelFormat
-}) {
-  return (d, i) => ({
-    datum: d,
-    index: i,
-    text: `${labelFormat(d, i)}`,
-    value: scale(d)
-  });
-}
-
-// src/components/legend/private/base-legend.module.scss
-var base_legend_module_default = {
-  "legend--horizontal": "a8ccharts-AELBvX",
-  "legend--vertical": "a8ccharts-fX8uQe",
-  "legend--alignment-start": "a8ccharts-DEe0wg",
-  "legend--alignment-center": "a8ccharts-WBKF9I",
-  "legend--alignment-end": "a8ccharts-JfwMng",
-  "legend--position-top": "a8ccharts-8Y73Kh",
-  "legend--position-bottom": "a8ccharts-TVM-IY",
-  "legend-item": "a8ccharts-Vflwq8",
-  "legend-item--interactive": "a8ccharts-qGsavM",
-  "legend-item--inactive": "a8ccharts-ZtDY-Q",
-  "legend-item-label": "a8ccharts-2H65Kr",
-  "legend-item-text--wrap": "a8ccharts-faSDBI",
-  "legend-item-text--ellipsis": "a8ccharts-FISUIO",
-  "legend-item-value": "a8ccharts-DTZlT-"
-};
-
-// src/components/legend/private/base-legend.tsx
-import { jsx as _jsx2, jsxs as _jsxs } from "react/jsx-runtime";
-var orientationToFlexDirection = {
-  horizontal: "row",
-  vertical: "column"
-};
-var LegendText = ({
-  text,
-  textOverflow,
-  maxWidth
-}) => {
-  const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
-  const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));
-  return /* @__PURE__ */ _jsx2("span", {
-    ref: textRef,
-    className: clsx(base_legend_module_default["legend-item-text"], maxWidth != null && base_legend_module_default[`legend-item-text--${textOverflow}`]),
-    style: {
-      ...maxWidth != null && {
-        maxWidth,
-        minWidth: 0
-      }
-    },
-    title: isEllipsis && isTruncated ? text : void 0,
-    children: text
-  });
-};
-var BaseLegend = /* @__PURE__ */ forwardRef(({
-  items,
-  className,
-  orientation = "horizontal",
-  position = "bottom",
-  alignment = "center",
-  shape = "rect",
-  fill = valueOrIdentityString,
-  size = valueOrIdentityString,
-  labelFormat = valueOrIdentity,
-  labelTransform = labelTransformFactory,
-  itemStyles,
-  itemClassName,
-  labelStyles,
-  labelClassName,
-  shapeStyles,
-  render,
-  interactive = false,
-  chartId
-}, ref) => {
-  const {
-    margin: itemMargin = "0",
-    flexDirection: itemDirection = "row"
-  } = itemStyles ?? {};
-  const {
-    justifyContent: labelJustifyContent = "flex-start",
-    flex: labelFlex = "0 0 auto",
-    margin: labelMargin = "0 4px",
-    maxWidth,
-    textOverflow = "wrap"
-  } = labelStyles ?? {};
-  const {
-    width: shapeWidth = 16,
-    height: shapeHeight = 16,
-    margin: shapeMargin = "2px 4px 2px 0"
-  } = shapeStyles ?? {};
-  const theme = useGlobalChartsTheme();
-  const context = useContext4(GlobalChartsContext);
-  const legendScale = scaleOrdinal({
-    domain: items.map((item) => item.label),
-    range: items.map((item) => item.color)
-  });
-  const domain = legendScale.domain();
-  const getShapeStyle = useCallback4(({
-    index
-  }) => items[index]?.shapeStyle, [items]);
-  const handleLegendClick = useCallback4((seriesLabel) => {
-    if (interactive && chartId && context) {
-      context.toggleSeriesVisibility(chartId, seriesLabel);
-    }
-  }, [interactive, chartId, context]);
-  const isSeriesVisible = useCallback4((seriesLabel) => {
-    if (!interactive || !chartId || !context) {
-      return true;
-    }
-    return context.isSeriesVisible(chartId, seriesLabel);
-  }, [interactive, chartId, context]);
-  const createClickHandler = useCallback4((labelText) => {
-    if (!interactive) {
-      return void 0;
-    }
-    return () => handleLegendClick(labelText);
-  }, [interactive, handleLegendClick]);
-  const createKeyDownHandler = useCallback4((labelText) => {
-    if (!interactive) {
-      return void 0;
-    }
-    return (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        handleLegendClick(labelText);
-      }
-    };
-  }, [interactive, handleLegendClick]);
-  return render ? render(items) : /* @__PURE__ */ _jsx2(LegendOrdinal, {
-    scale: legendScale,
-    labelFormat,
-    labelTransform,
-    children: (labels) => /* @__PURE__ */ _jsx2("div", {
-      ref,
-      role: "list",
-      className: clsx(base_legend_module_default.legend, base_legend_module_default[`legend--${orientation}`], base_legend_module_default[`legend--alignment-${alignment}`], base_legend_module_default[`legend--position-${position}`], className),
-      style: {
-        flexDirection: orientationToFlexDirection[orientation],
-        ...theme.legend?.containerStyles
-      },
-      children: labels.map((label, i) => {
-        const visible = isSeriesVisible(label.text);
-        const handleClick = createClickHandler(label.text);
-        const handleKeyDown = createKeyDownHandler(label.text);
-        const matchedItem = items[i];
-        return /* @__PURE__ */ _jsxs(LegendItem, {
-          className: clsx("visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
-          margin: itemMargin,
-          flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          role: interactive ? "button" : void 0,
-          tabIndex: interactive ? 0 : void 0,
-          "aria-pressed": interactive ? visible : void 0,
-          "aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
-          children: [items[i]?.renderGlyph ? /* @__PURE__ */ _jsx2("svg", {
-            width: items[i]?.glyphSize * 2,
-            height: items[i]?.glyphSize * 2,
-            children: /* @__PURE__ */ _jsx2(Group, {
-              children: items[i]?.renderGlyph({
-                key: `legend-glyph-${label.text}`,
-                datum: {},
-                index: i,
-                color: fill(label),
-                size: items[i]?.glyphSize,
-                x: items[i]?.glyphSize,
-                y: items[i]?.glyphSize
-              })
-            })
-          }) : /* @__PURE__ */ _jsx2(LegendShape, {
-            shape,
-            height: shapeHeight,
-            width: shapeWidth,
-            margin: shapeMargin,
-            item: domain[i],
-            itemIndex: i,
-            label,
-            fill,
-            size,
-            shapeStyle: getShapeStyle
-          }), /* @__PURE__ */ _jsxs(LegendLabel, {
-            className: clsx("visx-legend-label", base_legend_module_default["legend-item-label"], labelClassName),
-            style: {
-              justifyContent: labelJustifyContent,
-              flex: labelFlex,
-              margin: labelMargin,
-              ...theme.legend?.labelStyles
-            },
-            children: [/* @__PURE__ */ _jsx2(LegendText, {
-              text: label.text,
-              textOverflow,
-              maxWidth
-            }), matchedItem?.value != null && matchedItem.value !== "" && /* @__PURE__ */ _jsxs("span", {
-              className: base_legend_module_default["legend-item-value"],
-              children: ["\xA0", matchedItem.value]
-            })]
-          })]
-        }, `legend-${label.text}-${i}`);
-      })
-    })
-  });
-});
-
-// src/components/legend/legend.tsx
-import { jsx as _jsx3 } from "react/jsx-runtime";
-var Legend = /* @__PURE__ */ forwardRef2(({
-  chartId,
-  items,
-  ...props
-}, ref) => {
-  const context = useContext5(GlobalChartsContext);
-  const singleChartContext = useContext5(SingleChartContext);
-  const contextChartId = chartId ?? singleChartContext?.chartId;
-  const contextItems = useMemo6(() => {
-    return contextChartId && context ? context.getChartData(contextChartId)?.legendItems : void 0;
-  }, [contextChartId, context]);
-  const legendItems = items || contextItems;
-  if (!legendItems) {
-    return null;
-  }
-  return /* @__PURE__ */ _jsx3(BaseLegend, {
-    ref,
-    items: legendItems,
-    ...props,
-    chartId: contextChartId
-  });
-});
-
-// src/components/legend/hooks/use-chart-legend-items.ts
-import { formatNumber } from "@automattic/number-formatters";
-import { useMemo as useMemo7 } from "react";
-function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
-  if (!showValues || legendValueDisplay === "none") {
-    return "";
-  }
-  if ("percentage" in point) {
-    const percentagePoint = point;
-    switch (legendValueDisplay) {
-      case "percentage":
-        return formatPercentage(percentagePoint.percentage);
-      case "value":
-        return formatNumber(percentagePoint.value);
-      case "valueDisplay":
-        return percentagePoint.valueDisplay || formatNumber(percentagePoint.value);
-      default:
-        return "";
-    }
-  }
-  if ("value" in point) {
-    return point.value !== null ? formatNumber(point.value) : "";
-  }
-  return "";
-}
-function applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize) {
-  if (withGlyph) {
-    const glyphToUse = glyph || renderGlyph;
-    if (glyphToUse) {
-      return {
-        ...baseItem,
-        glyphSize,
-        renderGlyph: glyphToUse
-      };
-    }
-  }
-  return baseItem;
-}
-function processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
-  const mapper = (series, index) => {
-    const { color, glyph, shapeStyles } = getElementStyles({
-      data: series,
-      index,
-      legendShape
-    });
-    const baseItem = {
-      label: series.label,
-      value: showValues ? series.data?.length?.toString() || "0" : "",
-      color,
-      shapeStyle: shapeStyles
-    };
-    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
-  };
-  return seriesData.map(mapper);
-}
-function processPointData(pointData, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape) {
-  const mapper = (point, index) => {
-    const { color, glyph, shapeStyles } = getElementStyles({
-      data: point,
-      index,
-      legendShape
-    });
-    const baseItem = {
-      label: point.label,
-      value: formatPointValue(point, showValues, legendValueDisplay),
-      color,
-      shapeStyle: shapeStyles
-    };
-    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
-  };
-  return pointData.map(mapper);
-}
-function useChartLegendItems(data, options = {}, legendShape) {
-  const {
-    showValues = false,
-    legendValueDisplay = "percentage",
-    withGlyph = false,
-    glyphSize = 8,
-    renderGlyph
-  } = options;
-  const { getElementStyles } = useGlobalChartsContext();
-  return useMemo7(() => {
-    if (!data || !Array.isArray(data) || data.length === 0) {
-      return [];
-    }
-    if ("data" in data[0]) {
-      return processSeriesData(
-        data,
-        getElementStyles,
-        showValues,
-        withGlyph,
-        glyphSize,
-        renderGlyph,
-        legendShape
-      );
-    }
-    return processPointData(
-      data,
-      getElementStyles,
-      showValues,
-      legendValueDisplay,
-      withGlyph,
-      glyphSize,
-      renderGlyph,
-      legendShape
-    );
-  }, [
-    data,
-    getElementStyles,
-    showValues,
-    legendValueDisplay,
-    withGlyph,
-    glyphSize,
-    renderGlyph,
-    legendShape
-  ]);
-}
-
-// src/hooks/use-has-legend-child.ts
-function useHasLegendChild(children) {
-  return useMemo8(() => {
-    let found = false;
-    Children.forEach(children, (child) => {
-      if (isValidElement(child) && child.type === Legend) {
-        found = true;
-      }
-    });
-    return found;
-  }, [children]);
-}
-
 // src/hooks/use-text-truncation.ts
-import { useCallback as useCallback5, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback4, useRef as useRef4, useState as useState3 } from "react";
 function useTextTruncation(enabled = true) {
   const [isTruncated, setIsTruncated] = useState3(false);
   const observerRef = useRef4(null);
-  const refCallback = useCallback5(
+  const refCallback = useCallback4(
     (node) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1126,12 +763,12 @@ function useTextTruncation(enabled = true) {
 }
 
 // src/hooks/use-zero-value-display.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo6 } from "react";
 var MIN_PIXEL_SIZE = 3;
 var ZERO_PIXEL_SIZE = MIN_PIXEL_SIZE - 1;
 var useZeroValueDisplay = (data, options = { enabled: false }) => {
   const { enabled, valueAxisLength } = options;
-  return useMemo9(() => {
+  return useMemo6(() => {
     if (!enabled || !valueAxisLength || valueAxisLength <= 0) return data;
     let maxAbsoluteValue = 0;
     for (const series of data) {
@@ -1176,14 +813,14 @@ var useZeroValueDisplay = (data, options = { enabled: false }) => {
 };
 
 // src/hooks/use-interactive-legend-data.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo7 } from "react";
 var useInteractiveLegendData = ({
   data,
   chartId,
   legendInteractive,
   isSeriesVisible
 }) => {
-  const visibleData = useMemo10(() => {
+  const visibleData = useMemo7(() => {
     if (!chartId || !legendInteractive) {
       return data;
     }
@@ -1197,10 +834,10 @@ var useInteractiveLegendData = ({
       percentage: totalValue > 0 ? segment.value / totalValue * 100 : 0
     }));
   }, [data, chartId, isSeriesVisible, legendInteractive]);
-  const allSegmentsHidden = useMemo10(() => {
+  const allSegmentsHidden = useMemo7(() => {
     return legendInteractive && visibleData.length === 0;
   }, [legendInteractive, visibleData]);
-  const legendData = useMemo10(() => {
+  const legendData = useMemo7(() => {
     if (!legendInteractive || !chartId) {
       return data;
     }
@@ -1236,8 +873,6 @@ function usePrefersReducedMotion() {
 }
 
 export {
-  SingleChartContext,
-  useSingleChartContext,
   useTooltipPortalRelocator,
   defaultTheme,
   GlobalChartsContext,
@@ -1250,14 +885,11 @@ export {
   useChartDataTransform,
   useChartMargin,
   useElementSize,
-  useHasLegendChild,
   useTextTruncation,
   useZeroValueDisplay,
   useInteractiveLegendData,
   usePrefersReducedMotion,
   useChartRegistration,
-  useGlobalChartsTheme,
-  Legend,
-  useChartLegendItems
+  useGlobalChartsTheme
 };
-//# sourceMappingURL=chunk-32DH6JDF.js.map
+//# sourceMappingURL=chunk-2I67QUIV.js.map