@levi-gemcommerce/analytics 2.0.5-dev.1 → 2.1.0-test.0

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/FunnelTooltip.mjs

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { useSpring, to, animated } from '@react-spring/web';
+import { FUNNEL_CONNECTOR_Y_OFFSET } from '../../constants.mjs';
+
+function FunnelTooltip({ children, x, y, placement = 'above', }) {
+    const yOffset = placement === 'above' ? FUNNEL_CONNECTOR_Y_OFFSET : -FUNNEL_CONNECTOR_Y_OFFSET;
+    const placementTranslateY = placement === 'above' ? '-100%' : '0%';
+    const springs = useSpring({
+        from: { opacity: 0, posX: x, posY: y + yOffset },
+        to: { opacity: 1, posX: Math.round(x), posY: Math.round(y) },
+    });
+    const transform = to([springs.posX, springs.posY], (px, py) => `translate(${px}px, ${py}px) translateY(${placementTranslateY})`);
+    return (jsx(animated.div, { className: "GFunnelChartNextTooltip-container", style: { transform, opacity: springs.opacity }, children: children }));
+}
+
+export { FunnelTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIcon.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+const ICON_COLOR = '#050F2E';
+const ICON_BACKGROUND_COLOR = '#F3F3F3';
+function ScaleIcon() {
+    return (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "8", fill: ICON_BACKGROUND_COLOR }), jsx("g", { transform: "translate(4, 2)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.99996 0.820219C2.99996 0.367258 3.36716 6.10352e-05 3.82012 6.10352e-05C4.27308 6.10352e-05 4.64027 0.367258 4.64027 0.820219V3.55216L6.04518 2.98454C6.46516 2.81486 6.94318 3.01777 7.11286 3.43774C7.28254 3.85772 7.07964 4.33574 6.65966 4.50542L1.3366 6.65608C0.916618 6.82576 0.438604 6.62285 0.268922 6.20287C0.0992403 5.7829 0.302145 5.30488 0.722123 5.1352L3.00068 4.2146C3.0002 4.2031 2.99996 4.19153 2.99996 4.1799V0.820219ZM6.04523 6.3073C6.4652 6.13762 6.94322 6.34052 7.1129 6.7605C7.28258 7.18048 7.07968 7.65849 6.6597 7.82817L4.64032 8.64406V11.7526C4.64032 12.2056 4.27312 12.5728 3.82016 12.5728C3.3672 12.5728 3 12.2056 3 11.7526V9.30679L1.33664 9.97883C0.91666 10.1485 0.438646 9.94561 0.268964 9.52563C0.0992823 9.10565 0.302187 8.62764 0.722165 8.45795L6.04523 6.3073Z", fill: ICON_COLOR }) })] }));
+}
+
+export { ScaleIcon };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIcon.mjs

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+const ICON_COLOR = '#050F2E';
+const ICON_BACKGROUND_COLOR = '#F3F3F3';
+function ScaleIcon() {
+    return (jsxs(Fragment, { children: [jsx("circle", { cx: "8", cy: "8", r: "8", fill: ICON_BACKGROUND_COLOR }), jsx("g", { transform: "translate(4, 2)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.99996 0.820219C2.99996 0.367258 3.36716 6.10352e-05 3.82012 6.10352e-05C4.27308 6.10352e-05 4.64027 0.367258 4.64027 0.820219V3.55216L6.04518 2.98454C6.46516 2.81486 6.94318 3.01777 7.11286 3.43774C7.28254 3.85772 7.07964 4.33574 6.65966 4.50542L1.3366 6.65608C0.916618 6.82576 0.438604 6.62285 0.268922 6.20287C0.0992403 5.7829 0.302145 5.30488 0.722123 5.1352L3.00068 4.2146C3.0002 4.2031 2.99996 4.19153 2.99996 4.1799V0.820219ZM6.04523 6.3073C6.4652 6.13762 6.94322 6.34052 7.1129 6.7605C7.28258 7.18048 7.07968 7.65849 6.6597 7.82817L4.64032 8.64406V11.7526C4.64032 12.2056 4.27312 12.5728 3.82016 12.5728C3.3672 12.5728 3 12.2056 3 11.7526V9.30679L1.33664 9.97883C0.91666 10.1485 0.438646 9.94561 0.268964 9.52563C0.0992823 9.10565 0.302187 8.62764 0.722165 8.45795L6.04523 6.3073Z", fill: ICON_COLOR }) })] }));
+}
+
+export { ScaleIcon };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIconTooltip.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useChartContext, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import '../../../constants.js';
+import { Fragment } from 'react';
+import { TooltipContentContainer } from '../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.js';
+import { TooltipWithPortal } from './TooltipWithPortal.js';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.js';
+
+const TOOLTIP_VERTICAL_OFFSET = 65;
+function ScaleIconTooltip({ renderScaleIconTooltipContent }) {
+    const { containerBounds } = useChartContext();
+    const { x, y } = containerBounds ?? {
+        x: 0,
+        y: 0,
+    };
+    return (jsx(TooltipWithPortal, { children: jsx(FunnelTooltip, { x: x, y: y - TOOLTIP_VERTICAL_OFFSET, children: jsx(TooltipContentContainer, { maxWidth: 200, theme: DEFAULT_THEME_NAME, color: "white", children: () => jsx(Fragment, { children: renderScaleIconTooltipContent() }) }) }) }));
+}
+
+export { ScaleIconTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIconTooltip.mjs

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useChartContext, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import '../../../constants.mjs';
+import { Fragment } from 'react';
+import { TooltipContentContainer } from '../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.mjs';
+import { TooltipWithPortal } from './TooltipWithPortal.mjs';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.mjs';
+
+const TOOLTIP_VERTICAL_OFFSET = 65;
+function ScaleIconTooltip({ renderScaleIconTooltipContent }) {
+    const { containerBounds } = useChartContext();
+    const { x, y } = containerBounds ?? {
+        x: 0,
+        y: 0,
+    };
+    return (jsx(TooltipWithPortal, { children: jsx(FunnelTooltip, { x: x, y: y - TOOLTIP_VERTICAL_OFFSET, children: jsx(TooltipContentContainer, { maxWidth: 200, theme: DEFAULT_THEME_NAME, color: "white", children: () => jsx(Fragment, { children: renderScaleIconTooltipContent() }) }) }) }));
+}
+
+export { ScaleIconTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.d.ts

@@ -1,4 +1,4 @@
-import type { GDataPoint, GDataPointTooltipPrimaryAction } from '@/shared/charts/types/chart';
+import type { GDataPoint, GDataPointTooltipPrimaryAction } from '../../../../../../types/chart';
 export interface TooltipContentProps {
     data: {
         key: string;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_WIDTH } from '../../constants.js';
+import { BlockStack, Box, Text, Divider, InlineStack, Button } from '@shopify/polaris';
+
+function CustomTooltip({ data, primaryAction, item }) {
+    const basicInfo = data[0];
+    const metricsData = data.slice(1);
+    return (jsx("div", { style: {
+            background: '#FFFFFF',
+            borderRadius: 8,
+            padding: 12,
+            boxShadow: '0px 8px 16px -4px rgba(26, 26, 26, 0.22), inset 0px 1px 0px 0px rgba(204, 204, 204, 0.5), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.17), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.13), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.13)',
+            width: TOOLTIP_WIDTH,
+            maxWidth: TOOLTIP_WIDTH,
+        }, children: jsxs(BlockStack, { gap: "300", children: [jsxs(Box, { children: [jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "semibold", truncate: true, children: basicInfo?.key }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", truncate: true, children: basicInfo?.value })] }), jsx(Divider, {}), jsx(BlockStack, { gap: "100", children: metricsData.map(({ key, value }, index) => (jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: key }), jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: value })] }, `row-${index}-${key}`))) }), primaryAction && (jsx("div", { role: "button", tabIndex: 0, onMouseDown: () => primaryAction.onClick(item), children: jsx(Button, { fullWidth: true, size: "medium", children: primaryAction.content }) }))] }) }));
+}
+
+export { CustomTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.mjs

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_WIDTH } from '../../constants.mjs';
+import { BlockStack, Box, Text, Divider, InlineStack, Button } from '@shopify/polaris';
+
+function CustomTooltip({ data, primaryAction, item }) {
+    const basicInfo = data[0];
+    const metricsData = data.slice(1);
+    return (jsx("div", { style: {
+            background: '#FFFFFF',
+            borderRadius: 8,
+            padding: 12,
+            boxShadow: '0px 8px 16px -4px rgba(26, 26, 26, 0.22), inset 0px 1px 0px 0px rgba(204, 204, 204, 0.5), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.17), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.13), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.13)',
+            width: TOOLTIP_WIDTH,
+            maxWidth: TOOLTIP_WIDTH,
+        }, children: jsxs(BlockStack, { gap: "300", children: [jsxs(Box, { children: [jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "semibold", truncate: true, children: basicInfo?.key }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", truncate: true, children: basicInfo?.value })] }), jsx(Divider, {}), jsx(BlockStack, { gap: "100", children: metricsData.map(({ key, value }, index) => (jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: key }), jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: value })] }, `row-${index}-${key}`))) }), primaryAction && (jsx("div", { role: "button", tabIndex: 0, onMouseDown: () => primaryAction.onClick(item), children: jsx(Button, { fullWidth: true, size: "medium", children: primaryAction.content }) }))] }) }));
+}
+
+export { CustomTooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { IFunnelChartColors } from '@/shared/charts/components/GFunnelChart/types';
+import type { IFunnelChartColors } from '../../../../../GFunnelChart/types';
 import type { DataPoint, LabelFormatter } from '@shopify/polaris-viz-core';
 import type { FunnelChartMetaData } from '../../types';
 export interface TooltipContentProps {

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import { FUNNEL_CHART_CONNECTOR_GRADIENT } from '../../../../shared/FunnelChartConnector/constants.js';
+import '@react-spring/web';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.js';
+import { FUNNEL_CHART_SEGMENT_FILL } from '../../../../shared/FunnelChartSegment/constants.js';
+import { Fragment } from 'react';
+import { SeriesIcon } from '../../../../shared/SeriesIcon/SeriesIcon.js';
+import '../../../../constants.js';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.js';
+import { TooltipContentContainer } from '../../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.js';
+import { TooltipTitle } from '../../../TooltipContent/components/TooltipTitle/TooltipTitle.js';
+import { calculateDropOff } from '../../utilities/calculate-dropoff.js';
+import { TOOLTIP_WIDTH } from '../../constants.js';
+
+function Tooltip({ activeIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, }) {
+    const selectedTheme = useTheme(DEFAULT_THEME_NAME);
+    const point = dataSeries[activeIndex];
+    const previousPoint = dataSeries[activeIndex - 1];
+    const isFirst = activeIndex === 0;
+    const currentValue = point?.value ?? null;
+    const previousValue = previousPoint?.value ?? null;
+    const hasValidValues = currentValue !== null && previousValue !== null;
+    const getDropOffPercent = () => {
+        if (isFirst || !hasValidValues || previousValue === 0)
+            return null;
+        return Math.abs(calculateDropOff(previousValue, currentValue));
+    };
+    const getReachedPercent = (percDropOff) => {
+        if (isFirst)
+            return 100;
+        if (!hasValidValues)
+            return null;
+        return 100 - percDropOff;
+    };
+    const percDropOffage = getDropOffPercent();
+    const reachedPercent = getReachedPercent(percDropOffage);
+    const data = [
+        {
+            key: tooltipLabels.reached,
+            value: currentValue === null ? '-' : labelFormatter(currentValue),
+            color: funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL,
+            percent: reachedPercent,
+            trendKey: 'reached',
+        },
+    ];
+    if (!isFirst && hasValidValues) {
+        let value = '0';
+        if (previousValue > 0 && previousValue >= currentValue) {
+            value = labelFormatter(previousValue - currentValue);
+        }
+        data.push({
+            key: tooltipLabels.dropped,
+            value,
+            percent: percDropOffage,
+            color: funnelColors?.connector ?? FUNNEL_CHART_CONNECTOR_GRADIENT,
+            trendKey: 'dropped',
+        });
+    }
+    return (jsx(TooltipContentContainer, { maxWidth: TOOLTIP_WIDTH, minWidth: TOOLTIP_WIDTH, theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.backgroundColor, children: () => (jsxs(Fragment, { children: [jsx(TooltipTitle, { theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.textColor, "aria-label": `Step: ${point.key}`, children: point.key }), jsx("div", { className: "GFunnelChartNextTooltip-rows", children: data.map(({ key, value, color, percent, trendKey }, index) => {
+                        const formattedPercent = percent === null ? '-' : percentageFormatter(percent);
+                        const ariaLabel = `${key}: ${value}, ${formattedPercent}`;
+                        const { trendIndicatorProps } = getTrendIndicatorData(trends?.[activeIndex]);
+                        const trendByKey = trendIndicatorProps[trendKey];
+                        return (jsxs("div", { className: "GFunnelChartNextTooltip-row", "aria-label": ariaLabel, children: [jsxs("div", { className: "GFunnelChartNextTooltip-keys", children: [jsx(SeriesIcon, { color: color }), jsx("span", { children: key })] }), jsxs("div", { className: "GFunnelChartNextTooltip-values", children: [jsx("span", { children: jsx("strong", { children: value }) }), jsx("span", { children: jsx("strong", { children: formattedPercent }) }), trendIndicatorProps && (jsx("div", { className: "GFunnelChartNextTooltip-trendIndicator", children: jsx(TrendIndicator, { ...trendByKey }) }))] })] }, `row-${index}-${key}`));
+                    }) })] })) }));
+}
+
+export { Tooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.mjs

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, DEFAULT_THEME_NAME } from '@shopify/polaris-viz-core';
+import { FUNNEL_CHART_CONNECTOR_GRADIENT } from '../../../../shared/FunnelChartConnector/constants.mjs';
+import '@react-spring/web';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.mjs';
+import { FUNNEL_CHART_SEGMENT_FILL } from '../../../../shared/FunnelChartSegment/constants.mjs';
+import { Fragment } from 'react';
+import { SeriesIcon } from '../../../../shared/SeriesIcon/SeriesIcon.mjs';
+import '../../../../constants.mjs';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.mjs';
+import { TooltipContentContainer } from '../../../TooltipContent/components/TooltipContentContainer/TooltipContentContainer.mjs';
+import { TooltipTitle } from '../../../TooltipContent/components/TooltipTitle/TooltipTitle.mjs';
+import { calculateDropOff } from '../../utilities/calculate-dropoff.mjs';
+import { TOOLTIP_WIDTH } from '../../constants.mjs';
+
+function Tooltip({ activeIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, }) {
+    const selectedTheme = useTheme(DEFAULT_THEME_NAME);
+    const point = dataSeries[activeIndex];
+    const previousPoint = dataSeries[activeIndex - 1];
+    const isFirst = activeIndex === 0;
+    const currentValue = point?.value ?? null;
+    const previousValue = previousPoint?.value ?? null;
+    const hasValidValues = currentValue !== null && previousValue !== null;
+    const getDropOffPercent = () => {
+        if (isFirst || !hasValidValues || previousValue === 0)
+            return null;
+        return Math.abs(calculateDropOff(previousValue, currentValue));
+    };
+    const getReachedPercent = (percDropOff) => {
+        if (isFirst)
+            return 100;
+        if (!hasValidValues)
+            return null;
+        return 100 - percDropOff;
+    };
+    const percDropOffage = getDropOffPercent();
+    const reachedPercent = getReachedPercent(percDropOffage);
+    const data = [
+        {
+            key: tooltipLabels.reached,
+            value: currentValue === null ? '-' : labelFormatter(currentValue),
+            color: funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL,
+            percent: reachedPercent,
+            trendKey: 'reached',
+        },
+    ];
+    if (!isFirst && hasValidValues) {
+        let value = '0';
+        if (previousValue > 0 && previousValue >= currentValue) {
+            value = labelFormatter(previousValue - currentValue);
+        }
+        data.push({
+            key: tooltipLabels.dropped,
+            value,
+            percent: percDropOffage,
+            color: funnelColors?.connector ?? FUNNEL_CHART_CONNECTOR_GRADIENT,
+            trendKey: 'dropped',
+        });
+    }
+    return (jsx(TooltipContentContainer, { maxWidth: TOOLTIP_WIDTH, minWidth: TOOLTIP_WIDTH, theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.backgroundColor, children: () => (jsxs(Fragment, { children: [jsx(TooltipTitle, { theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.textColor, "aria-label": `Step: ${point.key}`, children: point.key }), jsx("div", { className: "GFunnelChartNextTooltip-rows", children: data.map(({ key, value, color, percent, trendKey }, index) => {
+                        const formattedPercent = percent === null ? '-' : percentageFormatter(percent);
+                        const ariaLabel = `${key}: ${value}, ${formattedPercent}`;
+                        const { trendIndicatorProps } = getTrendIndicatorData(trends?.[activeIndex]);
+                        const trendByKey = trendIndicatorProps[trendKey];
+                        return (jsxs("div", { className: "GFunnelChartNextTooltip-row", "aria-label": ariaLabel, children: [jsxs("div", { className: "GFunnelChartNextTooltip-keys", children: [jsx(SeriesIcon, { color: color }), jsx("span", { children: key })] }), jsxs("div", { className: "GFunnelChartNextTooltip-values", children: [jsx("span", { children: jsx("strong", { children: value }) }), jsx("span", { children: jsx("strong", { children: formattedPercent }) }), trendIndicatorProps && (jsx("div", { className: "GFunnelChartNextTooltip-trendIndicator", children: jsx(TrendIndicator, { ...trendByKey }) }))] })] }, `row-${index}-${key}`));
+                    }) })] })) }));
+}
+
+export { Tooltip };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.d.ts

@@ -1,7 +1,7 @@
 import type { IFunnelChartColors } from '../../../../GFunnelChart/types';
 import type { TooltipPlacement } from './FunnelTooltip/FunnelTooltip';
 import type { LabelFormatter } from '@shopify/polaris-viz-core';
-import type { GDataPoint } from '@/shared/charts/types';
+import type { GDataPoint } from '../../../../../types';
 import type { ScaleBand } from 'd3-scale';
 interface TooltipOverlayProps {
     tooltipIndex: number;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_GAP_FROM_BAR, TOOLTIP_WIDTH, TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT } from '../constants.js';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.js';
+import { CustomTooltip } from './Tooltip/CustomTooltip.js';
+import { Tooltip } from './Tooltip/Tooltip.js';
+
+function TooltipOverlay({ tooltipIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, getBarHeight, getXPosition, getYPosition, chartX, barWidth, xScale, onTooltipMouseEnter, onTooltipMouseLeave, }) {
+    const activeDataSeries = dataSeries[tooltipIndex];
+    if (!activeDataSeries)
+        return null;
+    const xPosition = getXPosition(activeDataSeries);
+    const chartTooltip = activeDataSeries.chartTooltip;
+    const tooltipHeight = chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
+    const { y: yPosition, placement } = getYPosition(activeDataSeries, tooltipHeight);
+    const chartTooltipPrimaryAction = activeDataSeries.chartTooltipPrimaryAction;
+    // Hover bridge: covers area between tooltip and bar so mouse can travel between them
+    const activeBarHeight = getBarHeight(activeDataSeries.value ?? 0);
+    const bridgeHeight = TOOLTIP_GAP_FROM_BAR + activeBarHeight;
+    // Compute union of tooltip and section edges (relative to tooltip left)
+    const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
+    const sectionLeftRel = chartX + currentX - xPosition;
+    const sectionRightRel = sectionLeftRel + barWidth;
+    const bridgeLeft = Math.min(0, sectionLeftRel);
+    const bridgeRight = Math.max(TOOLTIP_WIDTH, sectionRightRel);
+    const bridgeWidth = bridgeRight - bridgeLeft;
+    const isBelow = placement === 'below';
+    return (jsx(FunnelTooltip, { x: xPosition, y: yPosition, placement: placement, children: jsxs("div", { role: "presentation", style: {
+                position: 'relative',
+                overflow: 'visible',
+                pointerEvents: 'auto',
+                ...(isBelow
+                    ? { paddingTop: TOOLTIP_GAP_FROM_BAR }
+                    : { paddingBottom: TOOLTIP_GAP_FROM_BAR }),
+            }, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave, children: [chartTooltip ? (jsx(CustomTooltip, { data: chartTooltip, primaryAction: chartTooltipPrimaryAction, item: activeDataSeries })) : (jsx(Tooltip, { activeIndex: tooltipIndex, dataSeries: dataSeries, trends: trends, tooltipLabels: tooltipLabels, funnelColors: funnelColors, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter })), jsx("div", { style: {
+                        position: 'absolute',
+                        ...(isBelow
+                            ? {
+                                top: -bridgeHeight,
+                                clipPath: `polygon(${sectionLeftRel - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 100%, ${-bridgeLeft}px 100%)`,
+                            }
+                            : {
+                                bottom: -bridgeHeight,
+                                clipPath: `polygon(${-bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 100%, ${sectionLeftRel - bridgeLeft}px 100%)`,
+                            }),
+                        left: bridgeLeft,
+                        width: bridgeWidth,
+                        height: bridgeHeight,
+                    } })] }) }, `${tooltipIndex}-${placement}`));
+}
+
+export { TooltipOverlay };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipOverlay.mjs

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TOOLTIP_GAP_FROM_BAR, TOOLTIP_WIDTH, TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT } from '../constants.mjs';
+import { FunnelTooltip } from './FunnelTooltip/FunnelTooltip.mjs';
+import { CustomTooltip } from './Tooltip/CustomTooltip.mjs';
+import { Tooltip } from './Tooltip/Tooltip.mjs';
+
+function TooltipOverlay({ tooltipIndex, dataSeries, trends, tooltipLabels, funnelColors, labelFormatter, percentageFormatter, getBarHeight, getXPosition, getYPosition, chartX, barWidth, xScale, onTooltipMouseEnter, onTooltipMouseLeave, }) {
+    const activeDataSeries = dataSeries[tooltipIndex];
+    if (!activeDataSeries)
+        return null;
+    const xPosition = getXPosition(activeDataSeries);
+    const chartTooltip = activeDataSeries.chartTooltip;
+    const tooltipHeight = chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
+    const { y: yPosition, placement } = getYPosition(activeDataSeries, tooltipHeight);
+    const chartTooltipPrimaryAction = activeDataSeries.chartTooltipPrimaryAction;
+    // Hover bridge: covers area between tooltip and bar so mouse can travel between them
+    const activeBarHeight = getBarHeight(activeDataSeries.value ?? 0);
+    const bridgeHeight = TOOLTIP_GAP_FROM_BAR + activeBarHeight;
+    // Compute union of tooltip and section edges (relative to tooltip left)
+    const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
+    const sectionLeftRel = chartX + currentX - xPosition;
+    const sectionRightRel = sectionLeftRel + barWidth;
+    const bridgeLeft = Math.min(0, sectionLeftRel);
+    const bridgeRight = Math.max(TOOLTIP_WIDTH, sectionRightRel);
+    const bridgeWidth = bridgeRight - bridgeLeft;
+    const isBelow = placement === 'below';
+    return (jsx(FunnelTooltip, { x: xPosition, y: yPosition, placement: placement, children: jsxs("div", { role: "presentation", style: {
+                position: 'relative',
+                overflow: 'visible',
+                pointerEvents: 'auto',
+                ...(isBelow
+                    ? { paddingTop: TOOLTIP_GAP_FROM_BAR }
+                    : { paddingBottom: TOOLTIP_GAP_FROM_BAR }),
+            }, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave, children: [chartTooltip ? (jsx(CustomTooltip, { data: chartTooltip, primaryAction: chartTooltipPrimaryAction, item: activeDataSeries })) : (jsx(Tooltip, { activeIndex: tooltipIndex, dataSeries: dataSeries, trends: trends, tooltipLabels: tooltipLabels, funnelColors: funnelColors, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter })), jsx("div", { style: {
+                        position: 'absolute',
+                        ...(isBelow
+                            ? {
+                                top: -bridgeHeight,
+                                clipPath: `polygon(${sectionLeftRel - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 100%, ${-bridgeLeft}px 100%)`,
+                            }
+                            : {
+                                bottom: -bridgeHeight,
+                                clipPath: `polygon(${-bridgeLeft}px 0, ${TOOLTIP_WIDTH - bridgeLeft}px 0, ${sectionRightRel - bridgeLeft}px 100%, ${sectionLeftRel - bridgeLeft}px 100%)`,
+                            }),
+                        left: bridgeLeft,
+                        width: bridgeWidth,
+                        height: bridgeHeight,
+                    } })] }) }, `${tooltipIndex}-${placement}`));
+}
+
+export { TooltipOverlay };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipWithPortal.js

@@ -0,0 +1,12 @@
+import { useRootContainer } from '../../../hooks/useRootContainer.js';
+import { TOOLTIP_ID } from '../../../constants.js';
+import { createPortal } from 'react-dom';
+
+function TooltipWithPortal({ children }) {
+    const container = useRootContainer(TOOLTIP_ID);
+    if (!container)
+        return null;
+    return createPortal(children, container);
+}
+
+export { TooltipWithPortal };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/TooltipWithPortal.mjs

@@ -0,0 +1,12 @@
+import { useRootContainer } from '../../../hooks/useRootContainer.mjs';
+import { TOOLTIP_ID } from '../../../constants.mjs';
+import { createPortal } from 'react-dom';
+
+function TooltipWithPortal({ children }) {
+    const container = useRootContainer(TOOLTIP_ID);
+    if (!container)
+        return null;
+    return createPortal(children, container);
+}
+
+export { TooltipWithPortal };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/constants.js

@@ -0,0 +1,27 @@
+const FUNNEL_CONNECTOR_Y_OFFSET = 30;
+const TOOLTIP_WIDTH = 286;
+const SEGMENT_WIDTH_RATIO = 0.75;
+const TOOLTIP_HORIZONTAL_OFFSET = 10;
+const LINE_OFFSET = 3;
+const LINE_WIDTH = 1;
+const TOOLTIP_HEIGHT = 225;
+const TOOLTIP_BOTTOM_OFFSET = 5;
+const TOOLTIP_RIGHT_POSITION_THRESHOLD = 65;
+const SHORT_TOOLTIP_HEIGHT = 139;
+const GAP = 1;
+const PERCENTAGE_COLOR = 'rgba(48, 48, 48, 1)';
+const LINE_GRADIENT = [
+    {
+        color: 'rgba(227, 227, 227, 1)',
+        offset: 0,
+    },
+    {
+        color: 'rgba(227, 227, 227, 0)',
+        offset: 100,
+    },
+];
+const TOOLTIP_GAP_FROM_BAR = 4;
+const LABELS_HEIGHT = 80;
+const PERCENTAGE_SUMMARY_HEIGHT = 30;
+
+export { FUNNEL_CONNECTOR_Y_OFFSET, GAP, LABELS_HEIGHT, LINE_GRADIENT, LINE_OFFSET, LINE_WIDTH, PERCENTAGE_COLOR, PERCENTAGE_SUMMARY_HEIGHT, SEGMENT_WIDTH_RATIO, SHORT_TOOLTIP_HEIGHT, TOOLTIP_BOTTOM_OFFSET, TOOLTIP_GAP_FROM_BAR, TOOLTIP_HEIGHT, TOOLTIP_HORIZONTAL_OFFSET, TOOLTIP_RIGHT_POSITION_THRESHOLD, TOOLTIP_WIDTH };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/constants.mjs

@@ -0,0 +1,27 @@
+const FUNNEL_CONNECTOR_Y_OFFSET = 30;
+const TOOLTIP_WIDTH = 286;
+const SEGMENT_WIDTH_RATIO = 0.75;
+const TOOLTIP_HORIZONTAL_OFFSET = 10;
+const LINE_OFFSET = 3;
+const LINE_WIDTH = 1;
+const TOOLTIP_HEIGHT = 225;
+const TOOLTIP_BOTTOM_OFFSET = 5;
+const TOOLTIP_RIGHT_POSITION_THRESHOLD = 65;
+const SHORT_TOOLTIP_HEIGHT = 139;
+const GAP = 1;
+const PERCENTAGE_COLOR = 'rgba(48, 48, 48, 1)';
+const LINE_GRADIENT = [
+    {
+        color: 'rgba(227, 227, 227, 1)',
+        offset: 0,
+    },
+    {
+        color: 'rgba(227, 227, 227, 0)',
+        offset: 100,
+    },
+];
+const TOOLTIP_GAP_FROM_BAR = 4;
+const LABELS_HEIGHT = 80;
+const PERCENTAGE_SUMMARY_HEIGHT = 30;
+
+export { FUNNEL_CONNECTOR_Y_OFFSET, GAP, LABELS_HEIGHT, LINE_GRADIENT, LINE_OFFSET, LINE_WIDTH, PERCENTAGE_COLOR, PERCENTAGE_SUMMARY_HEIGHT, SEGMENT_WIDTH_RATIO, SHORT_TOOLTIP_HEIGHT, TOOLTIP_BOTTOM_OFFSET, TOOLTIP_GAP_FROM_BAR, TOOLTIP_HEIGHT, TOOLTIP_HORIZONTAL_OFFSET, TOOLTIP_RIGHT_POSITION_THRESHOLD, TOOLTIP_WIDTH };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/hooks/useTooltipInteraction.js

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * Manages tooltip show/hide state with delayed hiding to support
+ * mouse travel between bar and tooltip (hover bridge pattern).
+ */
+function useTooltipInteraction() {
+    const [tooltipIndex, setTooltipIndex] = useState(null);
+    const isTooltipHoveredRef = useRef(false);
+    const hideTimerRef = useRef(null);
+    const clearHideTimer = useCallback(() => {
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const showTooltipAt = useCallback((index) => {
+        clearHideTimer();
+        setTooltipIndex(index);
+    }, [clearHideTimer]);
+    const scheduleTooltipHide = useCallback(() => {
+        clearHideTimer();
+        hideTimerRef.current = window.setTimeout(() => {
+            if (!isTooltipHoveredRef.current)
+                setTooltipIndex(null);
+        }, 0);
+    }, [clearHideTimer]);
+    const handleTooltipMouseEnter = useCallback(() => {
+        isTooltipHoveredRef.current = true;
+    }, []);
+    const handleTooltipMouseLeave = useCallback(() => {
+        isTooltipHoveredRef.current = false;
+        scheduleTooltipHide();
+    }, [scheduleTooltipHide]);
+    const handleChartBlur = useCallback((event) => {
+        const currentTarget = event.currentTarget;
+        const relatedTarget = event.relatedTarget;
+        if (!currentTarget.contains(relatedTarget)) {
+            setTooltipIndex(null);
+        }
+    }, []);
+    return {
+        tooltipIndex,
+        showTooltipAt,
+        scheduleTooltipHide,
+        handleTooltipMouseEnter,
+        handleTooltipMouseLeave,
+        handleChartBlur,
+    };
+}
+
+export { useTooltipInteraction };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/hooks/useTooltipInteraction.mjs

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * Manages tooltip show/hide state with delayed hiding to support
+ * mouse travel between bar and tooltip (hover bridge pattern).
+ */
+function useTooltipInteraction() {
+    const [tooltipIndex, setTooltipIndex] = useState(null);
+    const isTooltipHoveredRef = useRef(false);
+    const hideTimerRef = useRef(null);
+    const clearHideTimer = useCallback(() => {
+        if (hideTimerRef.current) {
+            window.clearTimeout(hideTimerRef.current);
+            hideTimerRef.current = null;
+        }
+    }, []);
+    const showTooltipAt = useCallback((index) => {
+        clearHideTimer();
+        setTooltipIndex(index);
+    }, [clearHideTimer]);
+    const scheduleTooltipHide = useCallback(() => {
+        clearHideTimer();
+        hideTimerRef.current = window.setTimeout(() => {
+            if (!isTooltipHoveredRef.current)
+                setTooltipIndex(null);
+        }, 0);
+    }, [clearHideTimer]);
+    const handleTooltipMouseEnter = useCallback(() => {
+        isTooltipHoveredRef.current = true;
+    }, []);
+    const handleTooltipMouseLeave = useCallback(() => {
+        isTooltipHoveredRef.current = false;
+        scheduleTooltipHide();
+    }, [scheduleTooltipHide]);
+    const handleChartBlur = useCallback((event) => {
+        const currentTarget = event.currentTarget;
+        const relatedTarget = event.relatedTarget;
+        if (!currentTarget.contains(relatedTarget)) {
+            setTooltipIndex(null);
+        }
+    }, []);
+    return {
+        tooltipIndex,
+        showTooltipAt,
+        scheduleTooltipHide,
+        handleTooltipMouseEnter,
+        handleTooltipMouseLeave,
+        handleChartBlur,
+    };
+}
+
+export { useTooltipInteraction };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/hooks/useTooltipPlacement.d.ts

@@ -1,4 +1,4 @@
-import type { GDataPoint } from '@/shared/charts/types';
+import type { GDataPoint } from '../../../../../types';
 import type { TooltipPlacement } from '../components';
 import type { ScaleBand } from 'd3-scale';
 interface UseTooltipPlacementParams {