@automattic/charts 1.4.0 → 1.4.2

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";
@@ -1533,7 +1533,7 @@ import { Group } from "@visx/group";
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from "@visx/legend";
 import { scaleOrdinal } from "@visx/scale";
 
-// ../../../node_modules/.pnpm/@wordpress+element@6.44.0/node_modules/@wordpress/element/build-module/react.mjs
+// ../../../node_modules/.pnpm/@wordpress+element@6.46.0/node_modules/@wordpress/element/build-module/react.mjs
 import {
   Children,
   cloneElement,
@@ -4203,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 {
@@ -4231,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;
@@ -4257,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) {
@@ -4286,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,
@@ -4299,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,
@@ -4348,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,
@@ -5823,7 +5868,7 @@ var GeoChartWithProvider = (props) => {
 GeoChartWithProvider.displayName = "GeoChart";
 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
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.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);
   useEffect4(() => {
@@ -7277,7 +7322,7 @@ var css2 = _createEmotion.css;
 var sheet = _createEmotion.sheet;
 var cache = _createEmotion.cache;
 
-// ../../../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-cx.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
   const cache2 = __unsafe_useEmotionCache();
@@ -7364,7 +7409,7 @@ function memize(fn, options) {
   return memoized;
 }
 
-// ../../../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/colors-values.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
   900: "#1e1e1e",
@@ -7445,7 +7490,7 @@ var COLORS = Object.freeze({
   ui: UI
 });
 
-// ../../../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/config-values.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
   // These values should be shared with TextControl.
@@ -7505,6 +7550,9 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
   surfaceBorderSubtleColor: "rgba(0, 0, 0, 0.05)",
   surfaceBackgroundTertiaryColor: COLORS.white,
   surfaceColor: COLORS.white,
+  // Modal exit animation: `use-modal-exit-animation` parses this for the
+  // `animationend` timeout race; keep the numeric duration equal to
+  // `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.
   transitionDuration: "200ms",
   transitionDurationFast: "160ms",
   transitionDurationFaster: "120ms",
@@ -7513,14 +7561,14 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
   transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
 });
 
-// ../../../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/context/context-system-provider.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 var import_es6 = __toESM(require_es6(), 1);
 import deepmerge2 from "deepmerge";
 
-// ../../../node_modules/.pnpm/@wordpress+warning@3.45.0/node_modules/@wordpress/warning/build-module/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@3.46.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 
-// ../../../node_modules/.pnpm/@wordpress+warning@3.45.0/node_modules/@wordpress/warning/build-module/index.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@3.46.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
   return globalThis.SCRIPT_DEBUG === true;
 }
@@ -7539,7 +7587,7 @@ function warning(message) {
   logged.add(message);
 }
 
-// ../../../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/context/context-system-provider.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 import { jsx as _jsx23 } from "react/jsx-runtime";
 var ComponentsContext = createContext3(
   /** @type {Record<string, any>} */
@@ -7582,19 +7630,19 @@ var BaseContextSystemProvider = ({
 };
 var ContextSystemProvider = memo(BaseContextSystemProvider);
 
-// ../../../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/context/constants.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
 var COMPONENT_NAMESPACE = "data-wp-component";
 var CONNECTED_NAMESPACE = "data-wp-c16t";
 var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
 
-// ../../../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/context/get-styled-class-name-from-key.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
   const kebab = paramCase(namespace);
   return `components-${kebab}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 
-// ../../../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/context/context-connect.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component2, namespace) {
   return _contextConnect(Component2, namespace, {
     forwardsRef: true
@@ -7619,7 +7667,7 @@ function _contextConnect(Component2, namespace, options) {
   });
 }
 
-// ../../../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/context/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
   return {
     [COMPONENT_NAMESPACE]: componentName
@@ -7631,7 +7679,7 @@ function getConnectedNamespace() {
   };
 }
 
-// ../../../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/context/use-context-system.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
   const contextSystemProps = useComponentsContext();
   if (typeof namespace === "undefined") {
@@ -7815,7 +7863,7 @@ var createStyled = function createStyled2(tag, options) {
   };
 };
 
-// ../../../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/view/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
 import { jsx as _jsx24 } from "react/jsx-runtime";
 var PolymorphicDiv = /* @__PURE__ */ createStyled("div", process.env.NODE_ENV === "production" ? {
   target: "e19lxcc00"
@@ -7838,7 +7886,7 @@ var View = Object.assign(forwardRef(UnforwardedView), {
 });
 var component_default = View;
 
-// ../../../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/use-responsive-value.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = ["40em", "52em", "64em"];
 var useBreakpointIndex = (options = {}) => {
   const {
@@ -7881,7 +7929,7 @@ function useResponsiveValue(values, options = {}) {
   return array[index >= array.length ? array.length - 1 : index];
 }
 
-// ../../../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/grid/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
   bottom: {
     alignItems: "flex-end",
@@ -7932,7 +7980,7 @@ function getAlignmentProps(alignment) {
   return alignmentProps;
 }
 
-// ../../../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/grid/hook.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
 function useGrid(props) {
   const {
     align,
@@ -7978,7 +8026,7 @@ function useGrid(props) {
   };
 }
 
-// ../../../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/grid/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@33.1.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
 import { jsx as _jsx25 } from "react/jsx-runtime";
 function UnconnectedGrid(props, forwardedRef) {
   const gridProps = useGrid(props);