@automattic/charts 1.3.1 → 1.4.1

package/dist/index.js

@@ -467,7 +467,7 @@ var require_es6 = __commonJS({
 
 // src/charts/area-chart/area-chart.tsx
 import { formatNumberCompact as formatNumberCompact3 } from "@automattic/number-formatters";
-import { XYChart as XYChart2, AreaSeries as AreaSeries2, AreaStack, Grid as Grid2, Axis as Axis2 } from "@visx/xychart";
+import { XYChart as XYChart2, AnimatedAreaSeries, AnimatedAreaStack, Grid as Grid2, Axis as Axis2 } from "@visx/xychart";
 import { __ as __4 } from "@wordpress/i18n";
 import clsx5 from "clsx";
 import { useMemo as useMemo16, useContext as useContext13, forwardRef as forwardRef5, useImperativeHandle as useImperativeHandle4, useState as useState10, useRef as useRef10, useCallback as useCallback9 } from "react";
@@ -493,104 +493,7 @@ var useSingleChartContext = useChartInstanceContext;
 
 // src/providers/chart-context/global-charts-provider.tsx
 import { hsl as d3Hsl3 } from "@visx/vendor/d3-color";
-import { createContext as createContext2, useCallback, useMemo, useState, useEffect as useEffect2, useLayoutEffect, useRef } from "react";
-
-// src/hooks/use-tooltip-portal-relocator.ts
-import { useEffect } from "react";
-
-// src/hooks/use-tooltip-portal-relocator.module.scss
-var use_tooltip_portal_relocator_module_default = {
-  "relocatedPortal": "a8ccharts-jCw5dQ"
-};
-
-// src/hooks/use-tooltip-portal-relocator.ts
-function isVisxPortalNode(node2) {
-  return node2 instanceof HTMLDivElement && node2.parentElement === document.body && !node2.id && !node2.className && node2.querySelector(".visx-tooltip") !== null;
-}
-var patchRefCount = 0;
-var origRemoveChild = null;
-var patchedRemoveChild = null;
-var relocatedNodes = /* @__PURE__ */ new WeakSet();
-function installRemoveChildPatch() {
-  if (patchRefCount++ > 0) {
-    return;
-  }
-  origRemoveChild = document.body.removeChild;
-  patchedRemoveChild = function(child) {
-    if (relocatedNodes.has(child) && child.parentNode !== this) {
-      relocatedNodes.delete(child);
-      child.parentNode?.removeChild(child);
-      return child;
-    }
-    return origRemoveChild.call(this, child);
-  };
-  document.body.removeChild = patchedRemoveChild;
-}
-function uninstallRemoveChildPatch() {
-  if (--patchRefCount > 0) {
-    return;
-  }
-  if (document.body.removeChild === patchedRemoveChild) {
-    document.body.removeChild = origRemoveChild;
-  }
-  origRemoveChild = null;
-  patchedRemoveChild = null;
-}
-function useTooltipPortalRelocator(containerRef) {
-  useEffect(() => {
-    const container = containerRef?.current;
-    if (!container) {
-      return;
-    }
-    const instanceNodes = /* @__PURE__ */ new Set();
-    const relocateNode = (node2) => {
-      if (!isVisxPortalNode(node2)) {
-        return;
-      }
-      node2.style.opacity = "0";
-      node2.classList.add(use_tooltip_portal_relocator_module_default.relocatedPortal);
-      const { activeElement } = node2.ownerDocument;
-      const focusedElement = activeElement instanceof HTMLElement && node2.contains(activeElement) ? activeElement : null;
-      container.insertBefore(node2, container.firstChild);
-      relocatedNodes.add(node2);
-      instanceNodes.add(node2);
-      if (focusedElement) {
-        focusedElement.focus();
-      }
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          node2.style.opacity = "";
-        });
-      });
-    };
-    installRemoveChildPatch();
-    for (const child of Array.from(document.body.children)) {
-      relocateNode(child);
-    }
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const node2 of mutation.addedNodes) {
-          relocateNode(node2);
-        }
-      }
-    });
-    observer.observe(document.body, { childList: true });
-    return () => {
-      observer.disconnect();
-      for (const node2 of instanceNodes) {
-        if (node2 instanceof HTMLElement) {
-          node2.classList.remove(use_tooltip_portal_relocator_module_default.relocatedPortal);
-        }
-        if (node2.parentNode === container) {
-          document.body.appendChild(node2);
-        }
-        relocatedNodes.delete(node2);
-      }
-      instanceNodes.clear();
-      uninstallRemoveChildPatch();
-    };
-  }, [containerRef]);
-}
+import { createContext as createContext2, useCallback, useMemo, useState, useEffect, useLayoutEffect, useRef } from "react";
 
 // src/utils/create-composition.ts
 function attachSubComponents(Chart2, subComponents) {
@@ -1096,13 +999,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var GlobalChartsContext = /* @__PURE__ */ createContext2(null);
 var GlobalChartsProvider = ({
   children,
-  theme,
-  portalContainer
+  theme
 }) => {
   const [charts, setCharts] = useState(() => /* @__PURE__ */ new Map());
   const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Map());
   const wrapperRef = useRef(null);
-  useTooltipPortalRelocator(portalContainer ?? wrapperRef);
   const providerTheme = useMemo(() => {
     return theme ? mergeThemes(defaultTheme, theme) : defaultTheme;
   }, [theme]);
@@ -1150,13 +1051,13 @@ var GlobalChartsProvider = ({
       maxHue
     });
   }, [providerTheme]);
-  useEffect2(() => {
+  useEffect(() => {
     if (colorCache.colors.length > 0) {
       setIsColorPaletteResolved(true);
     }
   }, [colorCache]);
   const [groupToColorMap, setGroupToColorMap] = useState(() => /* @__PURE__ */ new Map());
-  useEffect2(() => {
+  useEffect(() => {
     setGroupToColorMap(/* @__PURE__ */ new Map());
   }, [providerTheme.colors]);
   const registerChart = useCallback((id, data) => {
@@ -1279,7 +1180,7 @@ var useChartId = (providedId) => {
 };
 
 // src/providers/chart-context/hooks/use-chart-registration.ts
-import { useEffect as useEffect4, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo8 } from "react";
 
 // src/hooks/use-deep-memo.ts
 var import_fast_deep_equal = __toESM(require_fast_deep_equal(), 1);
@@ -1362,6 +1263,9 @@ var useChartMargin = (height, options, data, theme, horizontal = false) => {
     if (horizontal) {
       return allDataPoints.map((d) => d.label || options.axis?.y?.tickFormat(d.date.getTime(), 0, []));
     }
+    if (options.axis?.y?.tickValues?.length) {
+      return options.axis.y.tickValues;
+    }
     const minY = Math.min(...allDataPoints.map((d) => d.value));
     const maxY = Math.max(...allDataPoints.map((d) => d.value));
     const yScale = createScale({
@@ -1565,12 +1469,12 @@ var useInteractiveLegendData = ({
 };
 
 // src/hooks/use-prefers-reduced-motion.ts
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect2 } from "react";
 var QUERY = "(prefers-reduced-motion: no-preference)";
 var getInitialState = () => !window.matchMedia(QUERY).matches;
 function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] = useState4(getInitialState);
-  useEffect3(() => {
+  useEffect2(() => {
     const mediaQueryList = window.matchMedia(QUERY);
     const listener = (event) => {
       setPrefersReducedMotion(!event.matches);
@@ -1594,7 +1498,7 @@ var useChartRegistration = ({
   const { registerChart, unregisterChart } = useGlobalChartsContext();
   const stableLegendItems = useDeepMemo(legendItems);
   const memoizedMetadata = useMemo8(() => metadata, [metadata]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (isDataValid) {
       registerChart(chartId, {
         legendItems: stableLegendItems,
@@ -1647,7 +1551,7 @@ import {
   useContext as useContext4,
   useDebugValue,
   useDeferredValue,
-  useEffect as useEffect5,
+  useEffect as useEffect4,
   useId as useId2,
   useMemo as useMemo9,
   useImperativeHandle,
@@ -2694,7 +2598,7 @@ var BaseTooltip = ({
 
 // src/components/tooltip/accessible-tooltip.tsx
 import { Tooltip, TooltipContext } from "@visx/xychart";
-import { useContext as useContext7, useEffect as useEffect6, useCallback as useCallback6, useMemo as useMemo12 } from "react";
+import { useContext as useContext7, useEffect as useEffect5, useCallback as useCallback6, useMemo as useMemo12 } from "react";
 import { jsx as _jsx5 } from "react/jsx-runtime";
 var AccessibleTooltip = ({
   renderTooltip,
@@ -2726,7 +2630,7 @@ var AccessibleTooltip = ({
     }
     return flattened;
   }, [series, mode]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (selectedIndex === void 0) {
       tooltipContext?.hideTooltip();
       return;
@@ -2925,7 +2829,7 @@ function useChartChildren(children, chartType) {
 }
 
 // src/charts/private/chart-layout/chart-layout.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/charts/private/chart-layout/chart-layout.module.scss
 var chart_layout_module_default = {
@@ -2953,7 +2857,7 @@ var ChartLayout = ({
   const visibilityStyle = isRenderProp && !isMeasured ? {
     visibility: "hidden"
   } : {};
-  useEffect7(() => {
+  useEffect6(() => {
     if (isRenderProp && onContentHeightChange && isMeasured) {
       onContentHeightChange(contentHeight);
     }
@@ -3198,7 +3102,7 @@ var line_chart_module_default = {
 import { __ } from "@wordpress/i18n";
 import { Icon, close } from "@wordpress/icons";
 import clsx3 from "clsx";
-import { useEffect as useEffect8, useId as useId3, useRef as useRef7, useState as useState6 } from "react";
+import { useEffect as useEffect7, useId as useId3, useRef as useRef7, useState as useState6 } from "react";
 import { jsx as _jsx12, jsxs as _jsxs4 } from "react/jsx-runtime";
 var POPOVER_BUTTON_SIZE = 44;
 var LineChartAnnotationLabelWithPopover = ({
@@ -3212,7 +3116,7 @@ var LineChartAnnotationLabelWithPopover = ({
   const popoverRef = useRef7(null);
   const [isPositioned, setIsPositioned] = useState6(false);
   const isBrowserSafari = isSafari();
-  useEffect8(() => {
+  useEffect7(() => {
     const button = buttonRef.current;
     const popover = popoverRef.current;
     if (!button || !popover) return;
@@ -3285,7 +3189,7 @@ var line_chart_annotation_label_popover_default = LineChartAnnotationLabelWithPo
 
 // src/charts/line-chart/private/line-chart-annotations-overlay.tsx
 import { DataContext as DataContext2 } from "@visx/xychart";
-import { useEffect as useEffect9, useState as useState7, useCallback as useCallback7 } from "react";
+import { useEffect as useEffect8, useState as useState7, useCallback as useCallback7 } from "react";
 import { jsx as _jsx13 } from "react/jsx-runtime";
 var LineChartAnnotationsOverlay = ({
   children
@@ -3320,7 +3224,7 @@ var LineChartAnnotationsOverlay = ({
     }
     return null;
   }, [chartRef, createScaleSignature]);
-  useEffect9(() => {
+  useEffect8(() => {
     let timeoutId = null;
     let lastSignature = null;
     let retryCount = 0;
@@ -3384,7 +3288,7 @@ var line_chart_annotations_overlay_default = LineChartAnnotationsOverlay;
 import { Annotation, CircleSubject, Connector, HtmlLabel, Label, LineSubject } from "@visx/annotation";
 import { DataContext as DataContext3 } from "@visx/xychart";
 import merge from "deepmerge";
-import { useContext as useContext9, useRef as useRef8, useEffect as useEffect10, useState as useState8, useMemo as useMemo14 } from "react";
+import { useContext as useContext9, useRef as useRef8, useEffect as useEffect9, useState as useState8, useMemo as useMemo14 } from "react";
 import { jsx as _jsx14, jsxs as _jsxs5 } from "react/jsx-runtime";
 var ANNOTATION_MAX_WIDTH = 125;
 var ANNOTATION_INIT_HEIGHT = 100;
@@ -3481,7 +3385,7 @@ var LineChartAnnotation = ({
   const labelRef = useRef8(null);
   const [height, setHeight] = useState8(null);
   const styles = merge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
-  useEffect10(() => {
+  useEffect9(() => {
     if (labelRef.current?.getBBox) {
       const bbox = labelRef.current.getBBox();
       setHeight(bbox.height);
@@ -4299,6 +4203,42 @@ var AreaChartInternal = /* @__PURE__ */ forwardRef5(({
     chartRef,
     totalPoints: dataSorted[0]?.data.length || 0
   });
+  const fixedYDomain = useMemo16(() => {
+    if (!legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") {
+      return void 0;
+    }
+    if (stacked) {
+      const numPoints = Math.max(...dataSorted.map((s) => s.data.length));
+      let posMax = 0;
+      let negMin = 0;
+      for (let i = 0; i < numPoints; i++) {
+        let posSum = 0;
+        let negSum = 0;
+        for (const series of dataSorted) {
+          const v = Number(series.data[i]?.value);
+          if (Number.isNaN(v)) continue;
+          if (v >= 0) posSum += v;
+          else negSum += v;
+        }
+        if (posSum > posMax) posMax = posSum;
+        if (negSum < negMin) negMin = negSum;
+      }
+      return [negMin, posMax];
+    }
+    let max = -Infinity;
+    let min = Infinity;
+    for (const series of dataSorted) {
+      for (const point of series.data) {
+        const v = Number(point?.value);
+        if (!Number.isNaN(v)) {
+          if (v > max) max = v;
+          if (v < min) min = v;
+        }
+      }
+    }
+    if (max === -Infinity) return void 0;
+    return [Math.min(0, min), max];
+  }, [dataSorted, stacked, stackOffset, legendInteractive]);
   const chartOptions = useMemo16(() => {
     const formatter = options?.axis?.x?.tickFormat || getFormatter(dataSorted);
     return {
@@ -4327,10 +4267,13 @@ var AreaChartInternal = /* @__PURE__ */ forwardRef5(({
         nice: true,
         // Stacked areas should always include zero so the baseline is meaningful.
         zero: stacked,
+        ...fixedYDomain ? {
+          domain: fixedYDomain
+        } : {},
         ...options?.yScale
       }
     };
-  }, [options, dataSorted, width, stacked]);
+  }, [options, dataSorted, width, stacked, fixedYDomain]);
   const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
   const error = validateData2(dataSorted);
   const isDataValid = !error;
@@ -4353,10 +4296,33 @@ var AreaChartInternal = /* @__PURE__ */ forwardRef5(({
     metadata: chartMetadata
   });
   const prefersReducedMotion = usePrefersReducedMotion();
+  const animationEnabled = !!animation && !prefersReducedMotion;
   const accessors = {
     xAccessor: (d) => d?.date,
     yAccessor: (d) => d?.value
   };
+  const zeroYAccessor = useCallback9(() => 0, []);
+  const visibleLabels = useMemo16(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
+  const filteredRenderTooltip = useCallback9((params) => {
+    if (!legendInteractive) return renderTooltip(params);
+    const datumByKey = params?.tooltipData?.datumByKey;
+    if (!datumByKey) return renderTooltip(params);
+    const filtered = Object.fromEntries(Object.entries(datumByKey).filter(([key]) => visibleLabels.has(key)));
+    if (Object.keys(filtered).length === 0) return null;
+    const nearestDatum = params?.tooltipData?.nearestDatum;
+    const nextNearest = nearestDatum && visibleLabels.has(nearestDatum.key) ? nearestDatum : {
+      ...Object.values(filtered)[0],
+      distance: nearestDatum?.distance ?? 0
+    };
+    return renderTooltip({
+      ...params,
+      tooltipData: {
+        ...params.tooltipData,
+        datumByKey: filtered,
+        nearestDatum: nextNearest
+      }
+    });
+  }, [renderTooltip, legendInteractive, visibleLabels]);
   const resolvedFillOpacity = fillOpacity ?? (stacked ? 0.85 : 0.4);
   const resolvedWithStroke = withStroke ?? !stacked;
   if (error) {
@@ -4382,6 +4348,35 @@ var AreaChartInternal = /* @__PURE__ */ forwardRef5(({
     isVisible
   }) => isVisible);
   const curve = getCurveType(curveType, smoothing);
+  const renderSeries = ({
+    series: seriesData,
+    index,
+    isVisible
+  }) => {
+    const {
+      color,
+      lineStyles
+    } = getElementStyles({
+      data: seriesData,
+      index
+    });
+    return /* @__PURE__ */ _jsx17(AnimatedAreaSeries, {
+      dataKey: seriesData?.label,
+      data: seriesData.data,
+      xAccessor: accessors.xAccessor,
+      yAccessor: isVisible || !legendInteractive ? accessors.yAccessor : zeroYAccessor,
+      fill: color,
+      fillOpacity: resolvedFillOpacity,
+      ...stacked ? {} : {
+        renderLine: resolvedWithStroke,
+        curve
+      },
+      lineProps: {
+        stroke: color,
+        ...lineStyles
+      }
+    }, seriesData?.label || index);
+  };
   return /* @__PURE__ */ _jsx17(SingleChartContext.Provider, {
     value: {
       chartId,
@@ -4395,7 +4390,7 @@ var AreaChartInternal = /* @__PURE__ */ forwardRef5(({
       legendChildren,
       gap,
       className: clsx5("area-chart", area_chart_module_default["area-chart"], {
-        [area_chart_module_default["area-chart--animated"]]: animation && !prefersReducedMotion
+        [area_chart_module_default["area-chart--animated"]]: animationEnabled
       }, className),
       style: {
         width,
@@ -4444,63 +4439,17 @@ var AreaChartInternal = /* @__PURE__ */ forwardRef5(({
                 width,
                 height: chartHeight,
                 children: __4("All series are hidden. Click legend items to show data.", "jetpack-charts")
-              }) : null, !allSeriesHidden && stacked && /* @__PURE__ */ _jsx17(AreaStack, {
+              }) : null, !allSeriesHidden && stacked && /* @__PURE__ */ _jsx17(AnimatedAreaStack, {
                 curve,
                 offset: stackOffset,
                 renderLine: resolvedWithStroke,
-                children: visibleSeries.map(({
-                  series: seriesData,
-                  index
-                }) => {
-                  const {
-                    color,
-                    lineStyles
-                  } = getElementStyles({
-                    data: seriesData,
-                    index
-                  });
-                  return /* @__PURE__ */ _jsx17(AreaSeries2, {
-                    dataKey: seriesData?.label,
-                    data: seriesData.data,
-                    ...accessors,
-                    fill: color,
-                    fillOpacity: resolvedFillOpacity,
-                    lineProps: {
-                      stroke: color,
-                      ...lineStyles
-                    }
-                  }, seriesData?.label || index);
-                })
-              }), !allSeriesHidden && !stacked && visibleSeries.map(({
-                series: seriesData,
-                index
-              }) => {
-                const {
-                  color,
-                  lineStyles
-                } = getElementStyles({
-                  data: seriesData,
-                  index
-                });
-                return /* @__PURE__ */ _jsx17(AreaSeries2, {
-                  dataKey: seriesData?.label,
-                  data: seriesData.data,
-                  ...accessors,
-                  fill: color,
-                  fillOpacity: resolvedFillOpacity,
-                  renderLine: resolvedWithStroke,
-                  curve,
-                  lineProps: {
-                    stroke: color,
-                    ...lineStyles
-                  }
-                }, seriesData?.label || index);
-              }), withTooltips && /* @__PURE__ */ _jsxs7(_Fragment4, {
+                children: seriesWithVisibility.map(renderSeries)
+              }), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries), withTooltips && /* @__PURE__ */ _jsxs7(_Fragment4, {
                 children: [/* @__PURE__ */ _jsx17(AccessibleTooltip, {
                   detectBounds: true,
                   snapTooltipToDatumX: true,
                   snapTooltipToDatumY: !stacked,
-                  renderTooltip,
+                  renderTooltip: filteredRenderTooltip,
                   showVerticalCrosshair: withTooltipCrosshairs?.showVertical,
                   showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal,
                   selectedIndex,
@@ -5332,7 +5281,7 @@ var BarListChartResponsive = withResponsive(BarListChart);
 // src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
 import clsx7 from "clsx";
-import { useRef as useRef12, useMemo as useMemo20, useEffect as useEffect11, useCallback as useCallback12, useContext as useContext17 } from "react";
+import { useRef as useRef12, useMemo as useMemo20, useEffect as useEffect10, useCallback as useCallback12, useContext as useContext17 } from "react";
 
 // src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
 var conversion_funnel_chart_module_default = {
@@ -5542,7 +5491,7 @@ var ConversionFunnelChartInternal = ({
     });
     return handlers;
   }, [steps, handleStepInteraction, handleBarKeyDown]);
-  useEffect11(() => {
+  useEffect10(() => {
     const handleDocumentClick = (event) => {
       if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {
         clearSelectionAndRef();
@@ -5922,14 +5871,14 @@ var GeoChartResponsive = withResponsive(GeoChartWithProvider);
 // ../../../node_modules/.pnpm/@wordpress+components@32.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
   const mountedRef = useRef5(false);
-  useEffect5(() => {
+  useEffect4(() => {
     if (mountedRef.current) {
       return effect();
     }
     mountedRef.current = true;
     return void 0;
   }, deps);
-  useEffect5(() => () => {
+  useEffect4(() => () => {
     mountedRef.current = false;
   }, []);
 }
@@ -7946,7 +7895,7 @@ var useBreakpointIndex = (options = {}) => {
     throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`);
   }
   const [value, setValue] = useState5(defaultIndex);
-  useEffect5(() => {
+  useEffect4(() => {
     const getIndex = () => breakpoints.filter((bp) => {
       return typeof window !== "undefined" ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false;
     }).length;