@automattic/charts 0.56.2 → 0.56.4

package/dist/chunk-EBDUXL5K.js

@@ -0,0 +1,421 @@
+import {
+  Stack
+} from "./chunk-MEIVKY4K.js";
+import {
+  GlobalChartsContext,
+  GlobalChartsProvider,
+  useChartId,
+  useChartRegistration,
+  useGlobalChartsContext,
+  useGlobalChartsTheme,
+  usePrefersReducedMotion
+} from "./chunk-AWNCAKZY.js";
+import {
+  formatPercentage,
+  hexToRgba
+} from "./chunk-TE63Y5PX.js";
+
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
+import clsx from "clsx";
+import { useRef, useMemo, useEffect, useCallback as useCallback2, useContext } from "react";
+
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
+var conversion_funnel_chart_module_default = {
+  "conversionFunnelChart": "a8ccharts-lK-YNK",
+  "loading": "a8ccharts-DbHKK5",
+  "main-metric": "a8ccharts-61WPYr",
+  "main-rate": "a8ccharts-RRRI6x",
+  "change-indicator": "a8ccharts-661iwx",
+  "funnel-container": "a8ccharts-Z7EGnW",
+  "funnel-step": "a8ccharts-VqFY0l",
+  "blurred": "a8ccharts-7dTRBs",
+  "step-header": "a8ccharts-2JsQiV",
+  "step-label": "a8ccharts-6OabC4",
+  "step-rate": "a8ccharts-9wSZ6n",
+  "bar-container": "a8ccharts-sSmCTi",
+  "disabled": "a8ccharts-PLWVAW",
+  "funnel-bar": "a8ccharts-EzczI-",
+  "selected": "a8ccharts-wNpZEu",
+  "funnel-bar--animated": "a8ccharts-68HQJl",
+  "stretch": "a8ccharts-CmtieZ",
+  "tooltip-wrapper": "a8ccharts-2TeoCn",
+  "tooltip-title": "a8ccharts-jkRitH",
+  "tooltip-content": "a8ccharts-8jgT-3",
+  "empty-state": "a8ccharts-Ml6MMr"
+};
+
+// src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
+import { useCallback, useState } from "react";
+var useFunnelSelection = (hideTooltip) => {
+  const [clickedStep, setClickedStep] = useState(null);
+  const handleBarClick = useCallback(
+    (stepId) => {
+      if (clickedStep === stepId) {
+        setClickedStep(null);
+        hideTooltip?.();
+      } else {
+        setClickedStep(stepId);
+      }
+    },
+    [clickedStep, hideTooltip]
+  );
+  const handleBarKeyDown = useCallback(
+    (stepId, event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (clickedStep === stepId) {
+          setClickedStep(null);
+          hideTooltip?.();
+        } else {
+          setClickedStep(stepId);
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setClickedStep(null);
+        hideTooltip?.();
+      }
+    },
+    [clickedStep, hideTooltip]
+  );
+  const clearSelection = useCallback(() => {
+    setClickedStep(null);
+    hideTooltip?.();
+  }, [hideTooltip]);
+  const getStepState = useCallback(
+    (stepId) => ({
+      isClicked: clickedStep === stepId,
+      isBlurred: clickedStep !== null && clickedStep !== stepId
+    }),
+    [clickedStep]
+  );
+  return {
+    clickedStep,
+    handleBarClick,
+    handleBarKeyDown,
+    clearSelection,
+    getStepState
+  };
+};
+
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var ConversionFunnelChartInternal = ({
+  mainRate,
+  changeIndicator,
+  steps,
+  loading = false,
+  animation,
+  className,
+  chartId: providedChartId,
+  height,
+  style,
+  renderStepLabel,
+  renderStepRate,
+  renderMainMetric,
+  renderTooltip
+}) => {
+  const chartId = useChartId(providedChartId);
+  const {
+    conversionFunnelChart: conversionFunnelChartSettings
+  } = useGlobalChartsTheme();
+  const {
+    getElementStyles
+  } = useGlobalChartsContext();
+  const chartRef = useRef(null);
+  const selectedBarRef = useRef(null);
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip
+  } = useTooltip();
+  const {
+    handleBarClick,
+    handleBarKeyDown,
+    clearSelection,
+    getStepState
+  } = useFunnelSelection(hideTooltip);
+  const {
+    containerRef: portalContainerRef,
+    TooltipInPortal,
+    containerBounds
+  } = useTooltipInPortal({
+    // use TooltipWithBounds for boundary detection
+    detectBounds: true,
+    // when tooltip containers are scrolled, this will correctly update the Tooltip position
+    scroll: true
+  });
+  const clearSelectionAndRef = useCallback2(() => {
+    clearSelection();
+    selectedBarRef.current = null;
+    hideTooltip();
+  }, [clearSelection, hideTooltip]);
+  const showTooltipAt = useCallback2((step, x, y) => {
+    showTooltip({
+      tooltipData: step,
+      tooltipLeft: x,
+      tooltipTop: y - 10
+    });
+  }, [showTooltip]);
+  const getMouseTooltipCoords = useCallback2((event) => {
+    if (containerBounds.width === 0 || containerBounds.height === 0) {
+      return null;
+    }
+    return {
+      x: event.clientX - containerBounds.left,
+      y: event.clientY - containerBounds.top
+    };
+  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);
+  const getKeyboardTooltipCoords = useCallback2((event) => {
+    if (containerBounds.width === 0 || containerBounds.height === 0) {
+      return null;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = rect.left + rect.width / 2 - containerBounds.left;
+    const y = rect.top - containerBounds.top;
+    return {
+      x,
+      y
+    };
+  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);
+  const handleStepInteraction = useCallback2((step, event, interactionType) => {
+    selectedBarRef.current = event.currentTarget;
+    const {
+      isClicked
+    } = getStepState(step.id);
+    if (isClicked) {
+      if (interactionType === "click") {
+        handleBarClick(step.id);
+      } else {
+        handleBarKeyDown(step.id, event);
+      }
+      return;
+    }
+    if (interactionType === "click") {
+      handleBarClick(step.id);
+      const coords = getMouseTooltipCoords(event);
+      if (coords) {
+        showTooltipAt(step, coords.x, coords.y);
+      }
+    } else {
+      handleBarKeyDown(step.id, event);
+      const coords = getKeyboardTooltipCoords(event);
+      if (coords) {
+        showTooltipAt(step, coords.x, coords.y);
+      }
+    }
+  }, [getStepState, handleBarClick, handleBarKeyDown, showTooltipAt, getMouseTooltipCoords, getKeyboardTooltipCoords]);
+  const stepHandlers = useMemo(() => {
+    const handlers = /* @__PURE__ */ new Map();
+    steps.forEach((step) => {
+      const onClick = (event) => {
+        event.stopPropagation();
+        handleStepInteraction(step, event, "click");
+      };
+      const onKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          handleStepInteraction(step, event, "keyboard");
+        } else {
+          selectedBarRef.current = event.currentTarget;
+          handleBarKeyDown(step.id, event);
+        }
+      };
+      handlers.set(step.id, {
+        onClick,
+        onKeyDown
+      });
+    });
+    return handlers;
+  }, [steps, handleStepInteraction, handleBarKeyDown]);
+  useEffect(() => {
+    const handleDocumentClick = (event) => {
+      if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {
+        clearSelectionAndRef();
+      }
+    };
+    document.addEventListener("mousedown", handleDocumentClick);
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+    };
+  }, [clearSelectionAndRef]);
+  const resolvedHeight = height ?? style?.height ?? "100%";
+  const {
+    primaryColor,
+    backgroundColor,
+    positiveChangeColor,
+    negativeChangeColor
+  } = conversionFunnelChartSettings;
+  const {
+    color: barColor
+  } = getElementStyles ? getElementStyles({
+    index: 0,
+    overrideColor: primaryColor
+  }) : {
+    color: primaryColor || "#000000"
+  };
+  const isPositiveChange = changeIndicator?.startsWith("+");
+  const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;
+  const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || "rgba(0, 0, 0, 0.08)";
+  const renderDefaultMainMetric = () => /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [/* @__PURE__ */ _jsx("span", {
+      className: conversion_funnel_chart_module_default["main-rate"],
+      children: formatPercentage(mainRate)
+    }), changeIndicator && /* @__PURE__ */ _jsx("span", {
+      className: conversion_funnel_chart_module_default["change-indicator"],
+      style: {
+        color: changeColor
+      },
+      children: changeIndicator
+    })]
+  });
+  const renderDefaultTooltip = (step) => /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [/* @__PURE__ */ _jsx("div", {
+      className: conversion_funnel_chart_module_default["tooltip-title"],
+      children: step.label
+    }), /* @__PURE__ */ _jsxs("div", {
+      className: conversion_funnel_chart_module_default["tooltip-content"],
+      children: [formatPercentage(step.rate), ` \u2022 ${step.count ?? "no"} items`]
+    })]
+  });
+  const isDataValid = Boolean(steps && steps.length > 0);
+  const chartMetadata = useMemo(() => ({
+    mainRate,
+    changeIndicator,
+    stepsCount: steps?.length || 0
+  }), [mainRate, changeIndicator, steps?.length]);
+  useChartRegistration({
+    chartId,
+    legendItems: [],
+    chartType: "conversion-funnel",
+    isDataValid,
+    metadata: chartMetadata
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  if (!isDataValid) {
+    return /* @__PURE__ */ _jsx(Stack, {
+      direction: "column",
+      className: clsx(conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      style: {
+        ...style,
+        height: resolvedHeight
+      },
+      children: /* @__PURE__ */ _jsx("div", {
+        className: conversion_funnel_chart_module_default["empty-state"],
+        children: loading ? "Loading..." : "No data available"
+      })
+    });
+  }
+  const maxRate = Math.max(...steps.map((step) => step.rate));
+  return /* @__PURE__ */ _jsxs(_Fragment, {
+    children: [/* @__PURE__ */ _jsxs(Stack, {
+      direction: "column",
+      ref: (node) => {
+        portalContainerRef(node);
+        chartRef.current = node;
+      },
+      className: clsx(conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      style: {
+        ...style,
+        height: resolvedHeight
+      },
+      children: [renderMainMetric ? renderMainMetric({
+        mainRate,
+        changeIndicator,
+        className: conversion_funnel_chart_module_default["main-metric"],
+        changeColor
+      }) : /* @__PURE__ */ _jsx("div", {
+        className: conversion_funnel_chart_module_default["main-metric"],
+        children: renderDefaultMainMetric()
+      }), /* @__PURE__ */ _jsx("div", {
+        className: conversion_funnel_chart_module_default["funnel-container"],
+        children: steps.map((step, index) => {
+          const barHeight = step.rate / maxRate * 100;
+          const {
+            isBlurred
+          } = getStepState(step.id);
+          return /* @__PURE__ */ _jsxs("div", {
+            className: clsx(conversion_funnel_chart_module_default["funnel-step"], isBlurred && conversion_funnel_chart_module_default.blurred),
+            children: [/* @__PURE__ */ _jsxs("div", {
+              className: conversion_funnel_chart_module_default["step-header"],
+              children: [renderStepLabel ? renderStepLabel({
+                step,
+                index,
+                className: conversion_funnel_chart_module_default["step-label"]
+              }) : /* @__PURE__ */ _jsx("span", {
+                className: conversion_funnel_chart_module_default["step-label"],
+                children: step.label
+              }), renderStepRate ? renderStepRate({
+                step,
+                index,
+                className: conversion_funnel_chart_module_default["step-rate"]
+              }) : /* @__PURE__ */ _jsx("span", {
+                className: conversion_funnel_chart_module_default["step-rate"],
+                children: formatPercentage(step.rate)
+              })]
+            }), /* @__PURE__ */ _jsx("div", {
+              className: clsx(conversion_funnel_chart_module_default["bar-container"], isBlurred && conversion_funnel_chart_module_default.disabled),
+              onClick: stepHandlers.get(step.id)?.onClick,
+              onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
+              role: "button",
+              tabIndex: isBlurred ? -1 : 0,
+              "aria-label": step.label,
+              style: {
+                backgroundColor: barBackgroundColor
+              },
+              children: /* @__PURE__ */ _jsx("div", {
+                className: clsx(conversion_funnel_chart_module_default["funnel-bar"], {
+                  [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion
+                }),
+                style: {
+                  height: `${barHeight}%`,
+                  backgroundColor: barColor
+                }
+              })
+            })]
+          }, step.id);
+        })
+      })]
+    }), tooltipOpen && tooltipData && (() => {
+      const tooltipContent = renderTooltip ? renderTooltip({
+        step: tooltipData,
+        index: steps.findIndex((s) => s.id === tooltipData.id),
+        top: tooltipTop,
+        left: tooltipLeft,
+        className: conversion_funnel_chart_module_default["tooltip-wrapper"]
+      }) : renderDefaultTooltip(tooltipData);
+      if (!tooltipContent) return null;
+      return /* @__PURE__ */ _jsx(
+        TooltipInPortal,
+        {
+          top: tooltipTop,
+          left: tooltipLeft,
+          className: conversion_funnel_chart_module_default["tooltip-wrapper"],
+          children: tooltipContent
+        },
+        Math.random()
+      );
+    })()]
+  });
+};
+var ConversionFunnelChartWithProvider = (props) => {
+  const existingContext = useContext(GlobalChartsContext);
+  if (existingContext) {
+    return /* @__PURE__ */ _jsx(ConversionFunnelChartInternal, {
+      ...props
+    });
+  }
+  return /* @__PURE__ */ _jsx(GlobalChartsProvider, {
+    children: /* @__PURE__ */ _jsx(ConversionFunnelChartInternal, {
+      ...props
+    })
+  });
+};
+ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
+
+export {
+  ConversionFunnelChartWithProvider
+};
+//# sourceMappingURL=chunk-EBDUXL5K.js.map

package/dist/chunk-EBDUXL5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx","../src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss","../src/charts/conversion-funnel-chart/private/use-funnel-selection.ts"],"sourcesContent":["import { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useRef, useMemo, useEffect, useCallback, useContext } from 'react';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, GlobalChartsContext, useChartId, useChartRegistration, useGlobalChartsTheme, useGlobalChartsContext } from '../../providers';\nimport { formatPercentage, hexToRgba } from '../../utils';\nimport styles from './conversion-funnel-chart.module.scss';\nimport { useFunnelSelection } from './private';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Internal ConversionFunnelChart component with chart registration\n *\n * @param props                  - Component props\n * @param props.chartId          - Optional unique identifier for the chart\n * @param props.mainRate         - Main conversion rate to highlight\n * @param props.changeIndicator  - Change indicator (e.g., +2%, -1.5%)\n * @param props.steps            - Array of funnel steps\n * @param props.loading          - Whether the chart is in loading state\n * @param props.animation        - Whether to show chart animation on initial render or not\n * @param props.className        - Additional CSS class name\n * @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to \"100%\".\n * @param props.style            - Custom styling\n * @param props.renderStepLabel  - Custom render function for step labels\n * @param props.renderStepRate   - Custom render function for step rates\n * @param props.renderMainMetric - Custom render function for the entire main metric section\n * @param props.renderTooltip    - Custom render function for tooltip content\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartInternal = ({\n  mainRate,\n  changeIndicator,\n  steps,\n  loading = false,\n  animation,\n  className,\n  chartId: providedChartId,\n  height,\n  style,\n  renderStepLabel,\n  renderStepRate,\n  renderMainMetric,\n  renderTooltip\n}) => {\n  const chartId = useChartId(providedChartId);\n  const {\n    conversionFunnelChart: conversionFunnelChartSettings\n  } = useGlobalChartsTheme();\n  const {\n    getElementStyles\n  } = useGlobalChartsContext();\n  const chartRef = useRef(null);\n  const selectedBarRef = useRef(null);\n\n  // Use @visx/tooltip hooks for tooltip positioning\n  const {\n    tooltipData,\n    tooltipLeft,\n    tooltipTop,\n    tooltipOpen,\n    showTooltip,\n    hideTooltip\n  } = useTooltip();\n\n  // Use custom hook for selection management\n  const {\n    handleBarClick,\n    handleBarKeyDown,\n    clearSelection,\n    getStepState\n  } = useFunnelSelection(hideTooltip);\n  const {\n    containerRef: portalContainerRef,\n    TooltipInPortal,\n    containerBounds\n  } = useTooltipInPortal({\n    // use TooltipWithBounds for boundary detection\n    detectBounds: true,\n    // when tooltip containers are scrolled, this will correctly update the Tooltip position\n    scroll: true\n  });\n\n  // Wrapper to clear selectedBarRef after clearing selection\n  const clearSelectionAndRef = useCallback(() => {\n    clearSelection();\n    selectedBarRef.current = null;\n    hideTooltip();\n  }, [clearSelection, hideTooltip]);\n\n  // Helper function to show tooltip at specific coordinates\n  const showTooltipAt = useCallback((step, x, y) => {\n    showTooltip({\n      tooltipData: step,\n      tooltipLeft: x,\n      tooltipTop: y - 10\n    });\n  }, [showTooltip]);\n\n  // Helper function to get tooltip coordinates for mouse events\n  // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n  // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n  // By passing (clientX - containerBounds.left), we get correct page coordinates\n  // regardless of whether bounds are stale (e.g., after dashboard customization).\n  const getMouseTooltipCoords = useCallback(event => {\n    // Don't return coords until container bounds are measured\n    if (containerBounds.width === 0 || containerBounds.height === 0) {\n      return null;\n    }\n    return {\n      x: event.clientX - containerBounds.left,\n      y: event.clientY - containerBounds.top\n    };\n  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n  // Helper function to get tooltip coordinates for keyboard events\n  // Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.\n  const getKeyboardTooltipCoords = useCallback(event => {\n    // Don't return coords until container bounds are measured\n    if (containerBounds.width === 0 || containerBounds.height === 0) {\n      return null;\n    }\n    const rect = event.currentTarget.getBoundingClientRect();\n    // Calculate center of element in viewport coordinates, then subtract containerBounds\n    const x = rect.left + rect.width / 2 - containerBounds.left;\n    const y = rect.top - containerBounds.top;\n    return {\n      x,\n      y\n    };\n  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top]);\n\n  // Helper function to handle step interaction (both click and keyboard)\n  const handleStepInteraction = useCallback((step, event, interactionType) => {\n    // Store reference to the interacted element\n    selectedBarRef.current = event.currentTarget;\n\n    // Check if deselecting the same step\n    const {\n      isClicked\n    } = getStepState(step.id);\n    if (isClicked) {\n      // Deselecting - clear selection (tooltip will be hidden by hook)\n      if (interactionType === 'click') {\n        handleBarClick(step.id);\n      } else {\n        handleBarKeyDown(step.id, event);\n      }\n      return;\n    }\n\n    // Selecting - handle selection and show tooltip\n    if (interactionType === 'click') {\n      handleBarClick(step.id);\n      const coords = getMouseTooltipCoords(event);\n      if (coords) {\n        showTooltipAt(step, coords.x, coords.y);\n      }\n    } else {\n      handleBarKeyDown(step.id, event);\n      const coords = getKeyboardTooltipCoords(event);\n      if (coords) {\n        showTooltipAt(step, coords.x, coords.y);\n      }\n    }\n  }, [getStepState, handleBarClick, handleBarKeyDown, showTooltipAt, getMouseTooltipCoords, getKeyboardTooltipCoords]);\n\n  // Create handler factories to avoid arrow functions in JSX\n  const stepHandlers = useMemo(() => {\n    const handlers = new Map();\n    steps.forEach(step => {\n      const onClick = event => {\n        event.stopPropagation();\n        handleStepInteraction(step, event, 'click');\n      };\n      const onKeyDown = event => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          handleStepInteraction(step, event, 'keyboard');\n        } else {\n          // For other keys (like Escape), just handle the selection\n          selectedBarRef.current = event.currentTarget;\n          handleBarKeyDown(step.id, event);\n        }\n      };\n      handlers.set(step.id, {\n        onClick,\n        onKeyDown\n      });\n    });\n    return handlers;\n  }, [steps, handleStepInteraction, handleBarKeyDown]);\n\n  // Handle document-level click to clear selection when clicking outside selected bar\n  useEffect(() => {\n    const handleDocumentClick = event => {\n      // Only clear selection if there's an active selection and click is outside the selected bar\n      if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) {\n        clearSelectionAndRef();\n      }\n    };\n    document.addEventListener('mousedown', handleDocumentClick);\n    return () => {\n      document.removeEventListener('mousedown', handleDocumentClick);\n    };\n  }, [clearSelectionAndRef]);\n\n  // Resolve height: explicit height prop > style.height > default 100%\n  const resolvedHeight = height ?? style?.height ?? '100%';\n\n  // Get component settings from theme with fallbacks\n  const {\n    primaryColor,\n    backgroundColor,\n    positiveChangeColor,\n    negativeChangeColor\n  } = conversionFunnelChartSettings;\n\n  // Resolve bar color using getElementStyles with primaryColor as override\n  const {\n    color: barColor\n  } = getElementStyles ? getElementStyles({\n    index: 0,\n    overrideColor: primaryColor\n  }) : {\n    color: primaryColor || '#000000'\n  };\n\n  // Determine change indicator color\n  const isPositiveChange = changeIndicator?.startsWith('+');\n  const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;\n\n  // Create light background version of primary color if not set\n  const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || 'rgba(0, 0, 0, 0.08)';\n\n  // Default main metric rendering function\n  const renderDefaultMainMetric = () => /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(\"span\", {\n      className: styles['main-rate'],\n      children: formatPercentage(mainRate)\n    }), changeIndicator && /*#__PURE__*/_jsx(\"span\", {\n      className: styles['change-indicator'],\n      style: {\n        color: changeColor\n      },\n      children: changeIndicator\n    })]\n  });\n\n  // Default tooltip rendering function\n  const renderDefaultTooltip = step => /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: styles['tooltip-title'],\n      children: step.label\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      className: styles['tooltip-content'],\n      children: [formatPercentage(step.rate), ` • ${step.count ?? 'no'} items`]\n    })]\n  });\n\n  // Validate data\n  const isDataValid = Boolean(steps && steps.length > 0);\n\n  // Memoize metadata to prevent unnecessary re-registration\n  const chartMetadata = useMemo(() => ({\n    mainRate,\n    changeIndicator,\n    stepsCount: steps?.length || 0\n  }), [mainRate, changeIndicator, steps?.length]);\n  useChartRegistration({\n    chartId,\n    legendItems: [],\n    chartType: 'conversion-funnel',\n    isDataValid,\n    metadata: chartMetadata\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  // Handle empty or undefined data\n  if (!isDataValid) {\n    return /*#__PURE__*/_jsx(Stack, {\n      direction: \"column\",\n      className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n      style: {\n        ...style,\n        height: resolvedHeight\n      },\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['empty-state'],\n        children: loading ? 'Loading...' : 'No data available'\n      })\n    });\n  }\n\n  // Calculate bar heights relative to the maximum (first step)\n  const maxRate = Math.max(...steps.map(step => step.rate));\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsxs(Stack, {\n      direction: \"column\",\n      ref: node => {\n        // Set containerRef for @visx coordinate system\n        portalContainerRef(node);\n        chartRef.current = node;\n      },\n      className: clsx(styles.conversionFunnelChart, loading && styles.loading, className),\n      style: {\n        ...style,\n        height: resolvedHeight\n      },\n      children: [renderMainMetric ? renderMainMetric({\n        mainRate,\n        changeIndicator,\n        className: styles['main-metric'],\n        changeColor\n      }) : /*#__PURE__*/_jsx(\"div\", {\n        className: styles['main-metric'],\n        children: renderDefaultMainMetric()\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: styles['funnel-container'],\n        children: steps.map((step, index) => {\n          const barHeight = step.rate / maxRate * 100;\n          const {\n            isBlurred\n          } = getStepState(step.id);\n          return /*#__PURE__*/_jsxs(\"div\", {\n            className: clsx(styles['funnel-step'], isBlurred && styles.blurred),\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: styles['step-header'],\n              children: [renderStepLabel ? renderStepLabel({\n                step,\n                index,\n                className: styles['step-label']\n              }) : /*#__PURE__*/_jsx(\"span\", {\n                className: styles['step-label'],\n                children: step.label\n              }), renderStepRate ? renderStepRate({\n                step,\n                index,\n                className: styles['step-rate']\n              }) : /*#__PURE__*/_jsx(\"span\", {\n                className: styles['step-rate'],\n                children: formatPercentage(step.rate)\n              })]\n            }), /*#__PURE__*/_jsx(\"div\", {\n              className: clsx(styles['bar-container'], isBlurred && styles.disabled),\n              onClick: stepHandlers.get(step.id)?.onClick,\n              onKeyDown: stepHandlers.get(step.id)?.onKeyDown,\n              role: \"button\",\n              tabIndex: isBlurred ? -1 : 0,\n              \"aria-label\": step.label,\n              style: {\n                backgroundColor: barBackgroundColor\n              },\n              children: /*#__PURE__*/_jsx(\"div\", {\n                className: clsx(styles['funnel-bar'], {\n                  [styles['funnel-bar--animated']]: animation && !loading && !prefersReducedMotion\n                }),\n                style: {\n                  height: `${barHeight}%`,\n                  backgroundColor: barColor\n                }\n              })\n            })]\n          }, step.id);\n        })\n      })]\n    }), tooltipOpen && tooltipData && (() => {\n      const tooltipContent = renderTooltip ? renderTooltip({\n        step: tooltipData,\n        index: steps.findIndex(s => s.id === tooltipData.id),\n        top: tooltipTop,\n        left: tooltipLeft,\n        className: styles['tooltip-wrapper']\n      }) : renderDefaultTooltip(tooltipData);\n\n      // Don't render tooltip if renderTooltip returns falsy\n      if (!tooltipContent) return null;\n      return /*#__PURE__*/_jsx(TooltipInPortal\n      // set this to random so it correctly updates with parent bounds\n      , {\n        top: tooltipTop,\n        left: tooltipLeft,\n        className: styles['tooltip-wrapper'],\n        children: tooltipContent\n      }, Math.random());\n    })()]\n  });\n};\n\n/**\n * ConversionFunnelChart component with provider wrapper\n *\n * @param props - Component props\n * @return JSX element representing the conversion funnel chart\n */\nconst ConversionFunnelChartWithProvider = props => {\n  const existingContext = useContext(GlobalChartsContext);\n\n  // If we're already in a GlobalChartsProvider context, don't create a new one\n  if (existingContext) {\n    return /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(ConversionFunnelChartInternal, {\n      ...props\n    })\n  });\n};\nConversionFunnelChartWithProvider.displayName = 'ConversionFunnelChart';\nexport { ConversionFunnelChartWithProvider as default };","import 'css-chunk:src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss';export default {\n  \"conversionFunnelChart\": \"a8ccharts-lK-YNK\",\n  \"loading\": \"a8ccharts-DbHKK5\",\n  \"main-metric\": \"a8ccharts-61WPYr\",\n  \"main-rate\": \"a8ccharts-RRRI6x\",\n  \"change-indicator\": \"a8ccharts-661iwx\",\n  \"funnel-container\": \"a8ccharts-Z7EGnW\",\n  \"funnel-step\": \"a8ccharts-VqFY0l\",\n  \"blurred\": \"a8ccharts-7dTRBs\",\n  \"step-header\": \"a8ccharts-2JsQiV\",\n  \"step-label\": \"a8ccharts-6OabC4\",\n  \"step-rate\": \"a8ccharts-9wSZ6n\",\n  \"bar-container\": \"a8ccharts-sSmCTi\",\n  \"disabled\": \"a8ccharts-PLWVAW\",\n  \"funnel-bar\": \"a8ccharts-EzczI-\",\n  \"selected\": \"a8ccharts-wNpZEu\",\n  \"funnel-bar--animated\": \"a8ccharts-68HQJl\",\n  \"stretch\": \"a8ccharts-CmtieZ\",\n  \"tooltip-wrapper\": \"a8ccharts-2TeoCn\",\n  \"tooltip-title\": \"a8ccharts-jkRitH\",\n  \"tooltip-content\": \"a8ccharts-8jgT-3\",\n  \"empty-state\": \"a8ccharts-Ml6MMr\"\n};","import { useCallback, useState } from 'react';\n\n/**\n * Custom hook to manage funnel bar selection state and interactions\n * @param hideTooltip - Function to hide tooltip when selection is cleared\n * @return Object containing selection state and event handlers\n */\nexport const useFunnelSelection = ( hideTooltip?: () => void ) => {\n\tconst [ clickedStep, setClickedStep ] = useState< string | null >( null );\n\n\t// Handle bar click\n\tconst handleBarClick = useCallback(\n\t\t( stepId: string ) => {\n\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t// If clicking the same step, deselect it\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t} else {\n\t\t\t\t// Otherwise, select this step\n\t\t\t\tsetClickedStep( stepId );\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Handle bar keydown\n\tconst handleBarKeyDown = useCallback(\n\t\t( stepId: string, event: React.KeyboardEvent ) => {\n\t\t\tif ( event.key === 'Enter' || event.key === ' ' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( clickedStep === stepId ) {\n\t\t\t\t\tsetClickedStep( null );\n\t\t\t\t\thideTooltip?.();\n\t\t\t\t} else {\n\t\t\t\t\tsetClickedStep( stepId );\n\t\t\t\t}\n\t\t\t} else if ( event.key === 'Escape' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetClickedStep( null );\n\t\t\t\thideTooltip?.();\n\t\t\t}\n\t\t},\n\t\t[ clickedStep, hideTooltip ]\n\t);\n\n\t// Clear selection (for chart-level click)\n\tconst clearSelection = useCallback( () => {\n\t\tsetClickedStep( null );\n\t\thideTooltip?.();\n\t}, [ hideTooltip ] );\n\n\t// Get step state helpers\n\tconst getStepState = useCallback(\n\t\t( stepId: string ) => ( {\n\t\t\tisClicked: clickedStep === stepId,\n\t\t\tisBlurred: clickedStep !== null && clickedStep !== stepId,\n\t\t} ),\n\t\t[ clickedStep ]\n\t);\n\n\treturn {\n\t\tclickedStep,\n\t\thandleBarClick,\n\t\thandleBarKeyDown,\n\t\tclearSelection,\n\t\tgetStepState,\n\t};\n};\n"],"mappings":"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","names":["useCallback","useCallback"]}