@automattic/charts 0.56.7 → 0.58.0

package/dist/{chunk-YDVHT7GS.cjs → chunk-WYK7EL5R.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
 
@@ -7,15 +7,53 @@
 
 
 
+var _chunkMXGLYWVPcjs = require('./chunk-MXGLYWVP.cjs');
 
-var _chunkZVGEDXDPcjs = require('./chunk-ZVGEDXDP.cjs');
+
+
+var _chunkEMMSS5I5cjs = require('./chunk-EMMSS5I5.cjs');
+
+// ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/index.js
+var require_fast_deep_equal = _chunkEMMSS5I5cjs.__commonJS.call(void 0, {
+  "../../../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
-var _fastdeepequal = require('fast-deep-equal'); var _fastdeepequal2 = _interopRequireDefault(_fastdeepequal);
+var import_fast_deep_equal = _chunkEMMSS5I5cjs.__toESM.call(void 0, require_fast_deep_equal(), 1);
 var _react = require('react');
 var useDeepMemo = (value) => {
   const ref = _react.useRef.call(void 0, value);
-  if (!_fastdeepequal2.default.call(void 0, ref.current, value)) {
+  if (!(0, import_fast_deep_equal.default)(ref.current, value)) {
     ref.current = value;
   }
   return ref.current;
@@ -96,7 +134,7 @@ function installRemoveChildPatch() {
   patchedRemoveChild = function(child) {
     if (relocatedNodes.has(child) && child.parentNode !== this) {
       relocatedNodes.delete(child);
-      _optionalChain([child, 'access', _2 => _2.parentNode, 'optionalAccess', _3 => _3.removeChild, 'call', _4 => _4(child)]);
+      _optionalChain([child, 'access', _ => _.parentNode, 'optionalAccess', _2 => _2.removeChild, 'call', _3 => _3(child)]);
       return child;
     }
     return origRemoveChild.call(this, child);
@@ -115,7 +153,7 @@ function uninstallRemoveChildPatch() {
 }
 function useTooltipPortalRelocator(containerRef) {
   _react.useEffect.call(void 0, () => {
-    const container = _optionalChain([containerRef, 'optionalAccess', _5 => _5.current]);
+    const container = _optionalChain([containerRef, 'optionalAccess', _4 => _4.current]);
     if (!container) {
       return;
     }
@@ -229,7 +267,7 @@ var getChartColor = (index, colorCache) => {
     const candidateHsl = [hue, saturation, lightness];
     let isSufficientlyDifferent = true;
     for (const existingHsl of existingHslColors) {
-      if (_chunkZVGEDXDPcjs.getColorDistance.call(void 0, candidateHsl, existingHsl) < MIN_COLOR_DISTANCE) {
+      if (_chunkMXGLYWVPcjs.getColorDistance.call(void 0, candidateHsl, existingHsl) < MIN_COLOR_DISTANCE) {
         isSufficientlyDifferent = false;
         break;
       }
@@ -266,12 +304,14 @@ var defaultTheme = {
   gridColorDark: "",
   xTickLineStyles: { stroke: "black" },
   xAxisLineStyles: { stroke: "#DCDCDE", strokeWidth: 1 },
-  legendLabelStyles: {
-    color: "var(--jp-gray-80, #2c3338)"
+  legend: {
+    labelStyles: {
+      color: "var(--jp-gray-80, #2c3338)"
+    },
+    containerStyles: {},
+    shapeStyles: []
   },
-  legendContainerStyles: {},
   seriesLineStyles: [],
-  legendShapeStyles: [],
   glyphs: [],
   svgLabelSmall: { fill: "var(--jp-gray-80, #2c3338)" },
   annotationStyles: {
@@ -330,7 +370,7 @@ var GlobalChartsProvider = ({
   const wrapperRef = _react.useRef.call(void 0, null);
   useTooltipPortalRelocator(_nullishCoalesce(portalContainer, () => ( wrapperRef)));
   const providerTheme = _react.useMemo.call(void 0, () => {
-    return theme ? _chunkZVGEDXDPcjs.mergeThemes.call(void 0, defaultTheme, theme) : defaultTheme;
+    return theme ? _chunkMXGLYWVPcjs.mergeThemes.call(void 0, defaultTheme, theme) : defaultTheme;
   }, [theme]);
   const [colorCache, setColorCache] = _react.useState.call(void 0, () => ({
     colors: [],
@@ -353,7 +393,7 @@ var GlobalChartsProvider = ({
         if (color && typeof color === "string") {
           let colorValue = color;
           if (color.startsWith("--") || color.startsWith("var(")) {
-            const resolved = _chunkZVGEDXDPcjs.resolveCssVariable.call(void 0, color, wrapperRef.current);
+            const resolved = _chunkMXGLYWVPcjs.resolveCssVariable.call(void 0, color, wrapperRef.current);
             if (resolved === null || resolved === "") {
               continue;
             }
@@ -404,7 +444,7 @@ var GlobalChartsProvider = ({
     overrideColor
   }) => {
     if (overrideColor) {
-      return _chunkZVGEDXDPcjs.normalizeColorToHex.call(void 0, overrideColor, wrapperRef.current, _chunkZVGEDXDPcjs.resolveCssVariable);
+      return _chunkMXGLYWVPcjs.normalizeColorToHex.call(void 0, overrideColor, wrapperRef.current, _chunkMXGLYWVPcjs.resolveCssVariable);
     }
     if (group) {
       const existing = groupToColorMap.get(group);
@@ -428,13 +468,13 @@ var GlobalChartsProvider = ({
     const isPointPercentageData = data && typeof data === "object" && "percentage" in data;
     return {
       color: resolveColor({
-        group: _optionalChain([data, 'optionalAccess', _6 => _6.group]),
+        group: _optionalChain([data, 'optionalAccess', _5 => _5.group]),
         index,
-        overrideColor: overrideColor || isSeriesData && _optionalChain([data, 'optionalAccess', _7 => _7.options, 'optionalAccess', _8 => _8.stroke]) || isPointPercentageData && _optionalChain([data, 'optionalAccess', _9 => _9.color])
+        overrideColor: overrideColor || isSeriesData && _optionalChain([data, 'optionalAccess', _6 => _6.options, 'optionalAccess', _7 => _7.stroke]) || isPointPercentageData && _optionalChain([data, 'optionalAccess', _8 => _8.color])
       }),
-      lineStyles: isSeriesData ? _chunkZVGEDXDPcjs.getSeriesLineStyles.call(void 0, data, index, providerTheme) : {},
-      glyph: _optionalChain([providerTheme, 'access', _10 => _10.glyphs, 'optionalAccess', _11 => _11[index]]),
-      shapeStyles: isSeriesData ? _chunkZVGEDXDPcjs.getItemShapeStyles.call(void 0, data, index, providerTheme, legendShape) : {}
+      lineStyles: isSeriesData ? _chunkMXGLYWVPcjs.getSeriesLineStyles.call(void 0, data, index, providerTheme) : {},
+      glyph: _optionalChain([providerTheme, 'access', _9 => _9.glyphs, 'optionalAccess', _10 => _10[index]]),
+      shapeStyles: isSeriesData ? _chunkMXGLYWVPcjs.getItemShapeStyles.call(void 0, data, index, providerTheme, legendShape) : {}
     };
   }, [providerTheme, resolveColor]);
   const toggleSeriesVisibility = _react.useCallback.call(void 0, (chartId, seriesLabel) => {
@@ -541,7 +581,7 @@ var useChartRegistration = ({
 
 var useGlobalChartsTheme = () => {
   const context = _react.useContext.call(void 0, GlobalChartsContext);
-  const globalTheme = _optionalChain([context, 'optionalAccess', _12 => _12.theme]);
+  const globalTheme = _optionalChain([context, 'optionalAccess', _11 => _11.theme]);
   return _nullishCoalesce(globalTheme, () => ( defaultTheme));
 };
 
@@ -549,7 +589,7 @@ var useGlobalChartsTheme = () => {
 var useXYChartTheme = (data) => {
   const theme = useGlobalChartsTheme();
   return _react.useMemo.call(void 0, () => {
-    const seriesColors = (_nullishCoalesce(data, () => ( []))).map((series) => _optionalChain([series, 'access', _13 => _13.options, 'optionalAccess', _14 => _14.stroke])).filter((color) => Boolean(color));
+    const seriesColors = (_nullishCoalesce(data, () => ( []))).map((series) => _optionalChain([series, 'access', _12 => _12.options, 'optionalAccess', _13 => _13.stroke])).filter((color) => Boolean(color));
     return _xychart.buildChartTheme.call(void 0, {
       ...theme,
       colors: [...seriesColors, ..._nullishCoalesce(theme.colors, () => ( []))]
@@ -561,7 +601,7 @@ var useXYChartTheme = (data) => {
 
 var useChartDataTransform = (data) => {
   return _react.useMemo.call(void 0, () => {
-    const firstPoint = _optionalChain([data, 'optionalAccess', _15 => _15[0], 'optionalAccess', _16 => _16.data, 'optionalAccess', _17 => _17[0]]);
+    const firstPoint = _optionalChain([data, 'optionalAccess', _14 => _14[0], 'optionalAccess', _15 => _15.data, 'optionalAccess', _16 => _16[0]]);
     const hasDateProperties = firstPoint && ("date" in firstPoint || "dateString" in firstPoint);
     if (!hasDateProperties) {
       return data;
@@ -573,7 +613,7 @@ var useChartDataTransform = (data) => {
         if ("date" in point && point.date) {
           date = point.date;
         } else if ("dateString" in point && point.dateString) {
-          date = _chunkZVGEDXDPcjs.parseAsLocalDate.call(void 0, point.dateString);
+          date = _chunkMXGLYWVPcjs.parseAsLocalDate.call(void 0, point.dateString);
         }
         return {
           ...point,
@@ -609,9 +649,9 @@ var resolveFontSize = (val) => {
   return void 0;
 };
 var getXAxisLabelMetrics = (theme, orientation) => {
-  const xAxisStyles = orientation === "top" ? _optionalChain([theme, 'access', _18 => _18.axisStyles, 'optionalAccess', _19 => _19.x, 'optionalAccess', _20 => _20.top]) : _optionalChain([theme, 'access', _21 => _21.axisStyles, 'optionalAccess', _22 => _22.x, 'optionalAccess', _23 => _23.bottom]);
-  const fontSize = resolveFontSize(_optionalChain([xAxisStyles, 'optionalAccess', _24 => _24.axisLabel, 'optionalAccess', _25 => _25.fontSize])) || resolveFontSize(_optionalChain([theme, 'access', _26 => _26.svgLabelSmall, 'optionalAccess', _27 => _27.fontSize])) || DEFAULT_FONT_SIZE;
-  const tickLength = _nullishCoalesce(_optionalChain([xAxisStyles, 'optionalAccess', _28 => _28.tickLength]), () => ( DEFAULT_TICK_LENGTH));
+  const xAxisStyles = orientation === "top" ? _optionalChain([theme, 'access', _17 => _17.axisStyles, 'optionalAccess', _18 => _18.x, 'optionalAccess', _19 => _19.top]) : _optionalChain([theme, 'access', _20 => _20.axisStyles, 'optionalAccess', _21 => _21.x, 'optionalAccess', _22 => _22.bottom]);
+  const fontSize = resolveFontSize(_optionalChain([xAxisStyles, 'optionalAccess', _23 => _23.axisLabel, 'optionalAccess', _24 => _24.fontSize])) || resolveFontSize(_optionalChain([theme, 'access', _25 => _25.svgLabelSmall, 'optionalAccess', _26 => _26.fontSize])) || DEFAULT_FONT_SIZE;
+  const tickLength = _nullishCoalesce(_optionalChain([xAxisStyles, 'optionalAccess', _27 => _27.tickLength]), () => ( DEFAULT_TICK_LENGTH));
   return {
     fontSize,
     tickLength
@@ -621,7 +661,7 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
   const yTicks = _react.useMemo.call(void 0, () => {
     const allDataPoints = data.flatMap((series) => series.data);
     if (horizontal) {
-      return allDataPoints.map((d) => d.label || _optionalChain([options, 'access', _29 => _29.axis, 'optionalAccess', _30 => _30.y, 'optionalAccess', _31 => _31.tickFormat, 'call', _32 => _32(d.date.getTime(), 0, [])]));
+      return allDataPoints.map((d) => d.label || _optionalChain([options, 'access', _28 => _28.axis, 'optionalAccess', _29 => _29.y, 'optionalAccess', _30 => _30.tickFormat, 'call', _31 => _31(d.date.getTime(), 0, [])]));
     }
     const minY = Math.min(...allDataPoints.map((d) => d.value));
     const maxY = Math.max(...allDataPoints.map((d) => d.value));
@@ -630,7 +670,7 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
       domain: [minY, maxY],
       range: [height, 0]
     });
-    return _scale.getTicks.call(void 0, yScale, _optionalChain([options, 'access', _33 => _33.axis, 'optionalAccess', _34 => _34.y, 'optionalAccess', _35 => _35.numTicks]));
+    return _scale.getTicks.call(void 0, yScale, _optionalChain([options, 'access', _32 => _32.axis, 'optionalAccess', _33 => _33.y, 'optionalAccess', _34 => _34.numTicks]));
   }, [options, data, height, horizontal]);
   return _react.useMemo.call(void 0, () => {
     const defaultMargin = {
@@ -639,16 +679,16 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
       bottom: DEFAULT_MARGIN_BOTTOM,
       left: DEFAULT_MARGIN_LEFT
     };
-    const yAxisOrientation = _optionalChain([options, 'access', _36 => _36.axis, 'optionalAccess', _37 => _37.y, 'optionalAccess', _38 => _38.orientation]);
+    const yAxisOrientation = _optionalChain([options, 'access', _35 => _35.axis, 'optionalAccess', _36 => _36.y, 'optionalAccess', _37 => _37.orientation]);
     const yAxisStyles = yAxisOrientation === "right" ? theme.axisStyles.y.right : theme.axisStyles.y.left;
-    const yTickWidth = _chunkZVGEDXDPcjs.getLongestTickWidth.call(void 0, yTicks, _optionalChain([options, 'access', _39 => _39.axis, 'optionalAccess', _40 => _40.y, 'optionalAccess', _41 => _41.tickFormat]), yAxisStyles.axisLabel);
-    const yMarginValue = (_nullishCoalesce(yTickWidth, () => ( DEFAULT_Y_TICK_WIDTH))) + (_nullishCoalesce(_optionalChain([yAxisStyles, 'optionalAccess', _42 => _42.tickLength]), () => ( 0)));
+    const yTickWidth = _chunkMXGLYWVPcjs.getLongestTickWidth.call(void 0, yTicks, _optionalChain([options, 'access', _38 => _38.axis, 'optionalAccess', _39 => _39.y, 'optionalAccess', _40 => _40.tickFormat]), yAxisStyles.axisLabel);
+    const yMarginValue = (_nullishCoalesce(yTickWidth, () => ( DEFAULT_Y_TICK_WIDTH))) + (_nullishCoalesce(_optionalChain([yAxisStyles, 'optionalAccess', _41 => _41.tickLength]), () => ( 0)));
     if (yAxisOrientation === "right") {
       defaultMargin.right = yMarginValue;
     } else {
       defaultMargin.left = yMarginValue;
     }
-    const xOrientation = _optionalChain([options, 'access', _43 => _43.axis, 'optionalAccess', _44 => _44.x, 'optionalAccess', _45 => _45.orientation]) === "top" ? "top" : "bottom";
+    const xOrientation = _optionalChain([options, 'access', _42 => _42.axis, 'optionalAccess', _43 => _43.x, 'optionalAccess', _44 => _44.orientation]) === "top" ? "top" : "bottom";
     const {
       fontSize,
       tickLength
@@ -693,401 +733,6 @@ function useElementSize({
   return [refCallback, width, height];
 }
 
-// src/hooks/use-has-legend-child.ts
-
-
-// src/components/legend/legend.tsx
-
-
-// src/charts/private/single-chart-context/single-chart-context.tsx
-
-var ChartInstanceContext = /* @__PURE__ */ _react.createContext.call(void 0, null);
-var SingleChartContext = ChartInstanceContext;
-
-// src/charts/private/single-chart-context/use-single-chart-context.ts
-
-var useChartInstanceContext = () => {
-  const context = _react.useContext.call(void 0, 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
-var _group = require('@visx/group');
-var _legend = require('@visx/legend');
-
-var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
-
-
-// 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
-
-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__ */ _jsxruntime.jsx.call(void 0, "span", {
-    ref: textRef,
-    className: _clsx2.default.call(void 0, 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__ */ _react.forwardRef.call(void 0, ({
-  items,
-  className,
-  orientation = "horizontal",
-  position = "bottom",
-  alignment = "center",
-  maxWidth,
-  textOverflow = "wrap",
-  shape = "rect",
-  fill = valueOrIdentityString,
-  size = valueOrIdentityString,
-  labelFormat = valueOrIdentity,
-  labelTransform = labelTransformFactory,
-  shapeWidth = 16,
-  shapeHeight = 16,
-  shapeMargin = "2px 4px 2px 0",
-  labelAlign = "left",
-  labelFlex = "0 0 auto",
-  // Use natural width instead of expanding to fill space
-  labelMargin = "0 4px",
-  itemMargin = "0",
-  itemDirection = "row",
-  legendLabelProps,
-  legendItemClassName,
-  render,
-  interactive = false,
-  chartId,
-  ...legendItemProps
-}, ref) => {
-  const theme = useGlobalChartsTheme();
-  const context = _react.useContext.call(void 0, GlobalChartsContext);
-  const legendScale = _scale.scaleOrdinal.call(void 0, {
-    domain: items.map((item) => item.label),
-    range: items.map((item) => item.color)
-  });
-  const domain = legendScale.domain();
-  const getShapeStyle = _react.useCallback.call(void 0, ({
-    index
-  }) => _optionalChain([items, 'access', _46 => _46[index], 'optionalAccess', _47 => _47.shapeStyle]), [items]);
-  const handleLegendClick = _react.useCallback.call(void 0, (seriesLabel) => {
-    if (interactive && chartId && context) {
-      context.toggleSeriesVisibility(chartId, seriesLabel);
-    }
-  }, [interactive, chartId, context]);
-  const isSeriesVisible = _react.useCallback.call(void 0, (seriesLabel) => {
-    if (!interactive || !chartId || !context) {
-      return true;
-    }
-    return context.isSeriesVisible(chartId, seriesLabel);
-  }, [interactive, chartId, context]);
-  const createClickHandler = _react.useCallback.call(void 0, (labelText) => {
-    if (!interactive) {
-      return void 0;
-    }
-    return () => handleLegendClick(labelText);
-  }, [interactive, handleLegendClick]);
-  const createKeyDownHandler = _react.useCallback.call(void 0, (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__ */ _jsxruntime.jsx.call(void 0, _legend.LegendOrdinal, {
-    scale: legendScale,
-    labelFormat,
-    labelTransform,
-    children: (labels) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-      ref,
-      role: "list",
-      className: _clsx2.default.call(void 0, 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.legendContainerStyles
-      },
-      children: labels.map((label, i) => {
-        const visible = isSeriesVisible(label.text);
-        const handleClick = createClickHandler(label.text);
-        const handleKeyDown = createKeyDownHandler(label.text);
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendItem, {
-          className: _clsx2.default.call(void 0, "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"], legendItemClassName),
-          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,
-          ...legendItemProps,
-          children: [_optionalChain([items, 'access', _48 => _48[i], 'optionalAccess', _49 => _49.renderGlyph]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
-            width: _optionalChain([items, 'access', _50 => _50[i], 'optionalAccess', _51 => _51.glyphSize]) * 2,
-            height: _optionalChain([items, 'access', _52 => _52[i], 'optionalAccess', _53 => _53.glyphSize]) * 2,
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
-              children: _optionalChain([items, 'access', _54 => _54[i], 'optionalAccess', _55 => _55.renderGlyph, 'call', _56 => _56({
-                key: `legend-glyph-${label.text}`,
-                datum: {},
-                index: i,
-                color: fill(label),
-                size: _optionalChain([items, 'access', _57 => _57[i], 'optionalAccess', _58 => _58.glyphSize]),
-                x: _optionalChain([items, 'access', _59 => _59[i], 'optionalAccess', _60 => _60.glyphSize]),
-                y: _optionalChain([items, 'access', _61 => _61[i], 'optionalAccess', _62 => _62.glyphSize])
-              })])
-            })
-          }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendShape, {
-            shape,
-            height: shapeHeight,
-            width: shapeWidth,
-            margin: shapeMargin,
-            item: domain[i],
-            itemIndex: i,
-            label,
-            fill,
-            size,
-            shapeStyle: getShapeStyle
-          }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendLabel, {
-            className: _clsx2.default.call(void 0, "visx-legend-label", base_legend_module_default["legend-item-label"]),
-            style: {
-              justifyContent: labelAlign,
-              flex: labelFlex,
-              margin: labelMargin,
-              ...theme.legendLabelStyles
-            },
-            ...legendLabelProps,
-            children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendText, {
-              text: label.text,
-              textOverflow,
-              maxWidth
-            }), _optionalChain([items, 'access', _63 => _63.find, 'call', _64 => _64((item) => item.label === label.text), 'optionalAccess', _65 => _65.value]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
-              className: base_legend_module_default["legend-item-value"],
-              children: ["\xA0", _optionalChain([items, 'access', _66 => _66.find, 'call', _67 => _67((item) => item.label === label.text), 'optionalAccess', _68 => _68.value])]
-            })]
-          })]
-        }, `legend-${label.text}-${i}`);
-      })
-    })
-  });
-});
-
-// src/components/legend/legend.tsx
-
-var Legend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
-  chartId,
-  items,
-  ...props
-}, ref) => {
-  const context = _react.useContext.call(void 0, GlobalChartsContext);
-  const singleChartContext = _react.useContext.call(void 0, SingleChartContext);
-  const contextChartId = _nullishCoalesce(chartId, () => ( _optionalChain([singleChartContext, 'optionalAccess', _69 => _69.chartId])));
-  const contextItems = _react.useMemo.call(void 0, () => {
-    return contextChartId && context ? _optionalChain([context, 'access', _70 => _70.getChartData, 'call', _71 => _71(contextChartId), 'optionalAccess', _72 => _72.legendItems]) : void 0;
-  }, [contextChartId, context]);
-  const legendItems = items || contextItems;
-  if (!legendItems) {
-    return null;
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BaseLegend, {
-    ref,
-    items: legendItems,
-    ...props,
-    chartId: contextChartId
-  });
-});
-
-// src/components/legend/hooks/use-chart-legend-items.ts
-var _numberformatters = require('@automattic/number-formatters');
-
-function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
-  if (!showValues || legendValueDisplay === "none") {
-    return "";
-  }
-  if ("percentage" in point) {
-    const percentagePoint = point;
-    switch (legendValueDisplay) {
-      case "percentage":
-        return _chunkZVGEDXDPcjs.formatPercentage.call(void 0, percentagePoint.percentage);
-      case "value":
-        return _numberformatters.formatNumber.call(void 0, percentagePoint.value);
-      case "valueDisplay":
-        return percentagePoint.valueDisplay || _numberformatters.formatNumber.call(void 0, percentagePoint.value);
-      default:
-        return "";
-    }
-  }
-  if ("value" in point) {
-    return point.value !== null ? _numberformatters.formatNumber.call(void 0, 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 ? _optionalChain([series, 'access', _73 => _73.data, 'optionalAccess', _74 => _74.length, 'optionalAccess', _75 => _75.toString, 'call', _76 => _76()]) || "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 _react.useMemo.call(void 0, () => {
-    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 _react.useMemo.call(void 0, () => {
-    let found = false;
-    _react.Children.forEach(children, (child) => {
-      if (_react.isValidElement.call(void 0, child) && child.type === Legend) {
-        found = true;
-      }
-    });
-    return found;
-  }, [children]);
-}
-
 // src/hooks/use-text-truncation.ts
 
 function useTextTruncation(enabled = true) {
@@ -1119,25 +764,28 @@ function useTextTruncation(enabled = true) {
 
 // src/hooks/use-zero-value-display.ts
 
+var MIN_PIXEL_SIZE = 3;
+var ZERO_PIXEL_SIZE = MIN_PIXEL_SIZE - 1;
 var useZeroValueDisplay = (data, options = { enabled: false }) => {
-  const { enabled, minValueRatio = 0.6, maxValueRatio = 8e-3 } = options;
+  const { enabled, valueAxisLength } = options;
   return _react.useMemo.call(void 0, () => {
-    if (!enabled) return data;
-    const nonZeroValues = [];
+    if (!enabled || !valueAxisLength || valueAxisLength <= 0) return data;
+    let maxAbsoluteValue = 0;
     for (const series of data) {
       for (const point of series.data) {
         if (point.value !== null && point.value !== 0) {
-          nonZeroValues.push(point.value);
+          maxAbsoluteValue = Math.max(maxAbsoluteValue, Math.abs(point.value));
         }
       }
     }
-    if (nonZeroValues.length === 0) return data;
-    const absoluteValues = nonZeroValues.map(Math.abs);
-    const minAbsoluteValue = Math.min(...absoluteValues);
-    const maxAbsoluteValue = Math.max(...absoluteValues);
-    const minVisibleValue = Math.min(
-      minAbsoluteValue * minValueRatio,
-      maxAbsoluteValue * maxValueRatio
+    if (maxAbsoluteValue === 0) return data;
+    const minNonZeroValue = Math.min(
+      MIN_PIXEL_SIZE / valueAxisLength * maxAbsoluteValue,
+      maxAbsoluteValue
+    );
+    const zeroVisualValue = Math.min(
+      ZERO_PIXEL_SIZE / valueAxisLength * maxAbsoluteValue,
+      maxAbsoluteValue
     );
     return data.map((series) => ({
       ...series,
@@ -1145,13 +793,23 @@ var useZeroValueDisplay = (data, options = { enabled: false }) => {
         if (point.value === 0) {
           return {
             ...point,
-            visualValue: minVisibleValue
+            visualValue: zeroVisualValue
+          };
+        }
+        if (point.value === null) {
+          return point;
+        }
+        const absValue = Math.abs(point.value);
+        if (absValue < minNonZeroValue) {
+          return {
+            ...point,
+            visualValue: Math.sign(point.value) * minNonZeroValue
           };
         }
         return point;
       })
     }));
-  }, [data, enabled, minValueRatio, maxValueRatio]);
+  }, [data, enabled, valueAxisLength]);
 };
 
 // src/hooks/use-interactive-legend-data.ts
@@ -1233,10 +891,5 @@ function usePrefersReducedMotion() {
 
 
 
-
-
-
-
-
-exports.SingleChartContext = SingleChartContext; exports.useSingleChartContext = useSingleChartContext; exports.useTooltipPortalRelocator = useTooltipPortalRelocator; exports.defaultTheme = defaultTheme; exports.GlobalChartsContext = GlobalChartsContext; exports.GlobalChartsProvider = GlobalChartsProvider; exports.useGlobalChartsContext = useGlobalChartsContext; exports.useChartId = useChartId; exports.useDeepMemo = useDeepMemo; exports.useChartMouseHandler = useChartMouseHandler; exports.useXYChartTheme = useXYChartTheme; exports.useChartDataTransform = useChartDataTransform; exports.useChartMargin = useChartMargin; exports.useElementSize = useElementSize; exports.useHasLegendChild = useHasLegendChild; exports.useTextTruncation = useTextTruncation; exports.useZeroValueDisplay = useZeroValueDisplay; exports.useInteractiveLegendData = useInteractiveLegendData; exports.usePrefersReducedMotion = usePrefersReducedMotion; exports.useChartRegistration = useChartRegistration; exports.useGlobalChartsTheme = useGlobalChartsTheme; exports.Legend = Legend; exports.useChartLegendItems = useChartLegendItems;
-//# sourceMappingURL=chunk-YDVHT7GS.cjs.map
+exports.useTooltipPortalRelocator = useTooltipPortalRelocator; exports.defaultTheme = defaultTheme; exports.GlobalChartsContext = GlobalChartsContext; exports.GlobalChartsProvider = GlobalChartsProvider; exports.useGlobalChartsContext = useGlobalChartsContext; exports.useChartId = useChartId; exports.useDeepMemo = useDeepMemo; exports.useChartMouseHandler = useChartMouseHandler; exports.useXYChartTheme = useXYChartTheme; exports.useChartDataTransform = useChartDataTransform; exports.useChartMargin = useChartMargin; exports.useElementSize = useElementSize; exports.useTextTruncation = useTextTruncation; exports.useZeroValueDisplay = useZeroValueDisplay; exports.useInteractiveLegendData = useInteractiveLegendData; exports.usePrefersReducedMotion = usePrefersReducedMotion; exports.useChartRegistration = useChartRegistration; exports.useGlobalChartsTheme = useGlobalChartsTheme;
+//# sourceMappingURL=chunk-WYK7EL5R.cjs.map