@levi-gemcommerce/analytics 0.0.0-test.1

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function TooltipWithPortal({ children }: {
+    children: ReactNode;
+}): import("react").ReactPortal | null;

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

@@ -0,0 +1,13 @@
+"use client"
+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,13 @@
+"use client"
+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/components/index.d.ts

@@ -0,0 +1,7 @@
+export type { TooltipPlacement } from './FunnelTooltip';
+export { FunnelChartLabels } from './FunnelChartLabels';
+export { FunnelTooltip } from './FunnelTooltip';
+export { TooltipWithPortal } from './TooltipWithPortal';
+export { ScaleIcon } from './ScaleIcon';
+export { ScaleIconTooltip } from './ScaleIconTooltip';
+export { Tooltip } from './Tooltip';

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

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

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

@@ -0,0 +1,28 @@
+"use client"
+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,28 @@
+"use client"
+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.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Manages tooltip show/hide state with delayed hiding to support
+ * mouse travel between bar and tooltip (hover bridge pattern).
+ */
+export declare function useTooltipInteraction(): {
+    tooltipIndex: number | null;
+    showTooltipAt: (index: number) => void;
+    scheduleTooltipHide: () => void;
+    handleTooltipMouseEnter: () => void;
+    handleTooltipMouseLeave: () => void;
+    handleChartBlur: (event: React.FocusEvent) => void;
+};

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

@@ -0,0 +1,53 @@
+"use client"
+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,53 @@
+"use client"
+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

@@ -0,0 +1,27 @@
+import type { GDataPoint } from '../../../../../types';
+import type { TooltipPlacement } from '../components';
+import type { ScaleBand } from 'd3-scale';
+interface UseTooltipPlacementParams {
+    tooltipIndex: number | null;
+    dataSeries: GDataPoint[];
+    getBarHeight: (value: number) => number;
+    chartX: number;
+    chartY: number;
+    drawableHeight: number;
+    barHeightAdjustment: number;
+    barWidth: number;
+    xScale: ScaleBand<string>;
+}
+/**
+ * Computes tooltip x/y position and placement (above/below bar).
+ * Listens to scroll events via rAF and only triggers re-render
+ * when placement actually flips — not on every scroll frame.
+ */
+export declare function useTooltipPlacement({ tooltipIndex, dataSeries, getBarHeight, chartX, chartY, drawableHeight, barHeightAdjustment, barWidth, xScale, }: UseTooltipPlacementParams): {
+    getXPosition: (activeDataSeries: GDataPoint) => number;
+    getYPosition: (activeDataSeries: GDataPoint, tooltipHeight: number) => {
+        y: number;
+        placement: TooltipPlacement;
+    };
+};
+export {};

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

@@ -0,0 +1,77 @@
+"use client"
+import { TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT, TOOLTIP_HORIZONTAL_OFFSET, TOOLTIP_WIDTH, TOOLTIP_GAP_FROM_BAR } from '../constants.js';
+import 'react/jsx-runtime';
+import 'd3-shape';
+import { SCROLLBAR_WIDTH } from '../../TooltipWrapper/constants.js';
+import '../../TooltipWrapper/types.js';
+import { clamp } from '@shopify/polaris-viz-core';
+import '../../../hooks/useResizeObserver.js';
+import { useRef, useState, useEffect } from 'react';
+import '../../../constants.js';
+import 'react-dom';
+
+/**
+ * Computes tooltip x/y position and placement (above/below bar).
+ * Listens to scroll events via rAF and only triggers re-render
+ * when placement actually flips — not on every scroll frame.
+ */
+function useTooltipPlacement({ tooltipIndex, dataSeries, getBarHeight, chartX, chartY, drawableHeight, barHeightAdjustment, barWidth, xScale, }) {
+    const rafRef = useRef(null);
+    const lastPlacementRef = useRef(null);
+    const [, setPlacementTick] = useState(0);
+    useEffect(() => {
+        if (tooltipIndex == null) {
+            lastPlacementRef.current = null;
+            return;
+        }
+        const onScroll = () => {
+            if (rafRef.current != null)
+                return;
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                const activeData = dataSeries[tooltipIndex];
+                if (!activeData)
+                    return;
+                const barHeight = getBarHeight(activeData.value ?? 0);
+                const barTopY = chartY + (drawableHeight - barHeightAdjustment) - barHeight;
+                const tooltipHeight = activeData.chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
+                const hasSpaceAbove = barTopY - window.scrollY - tooltipHeight - TOOLTIP_GAP_FROM_BAR >= 0;
+                const newPlacement = hasSpaceAbove ? 'above' : 'below';
+                if (newPlacement !== lastPlacementRef.current) {
+                    lastPlacementRef.current = newPlacement;
+                    setPlacementTick((t) => t + 1);
+                }
+            });
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+            if (rafRef.current != null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [tooltipIndex, dataSeries, getBarHeight, chartY, drawableHeight, barHeightAdjustment]);
+    const getXPosition = (activeDataSeries) => {
+        const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
+        const xPosition = chartX + currentX + (barWidth - TOOLTIP_WIDTH) / 2;
+        return clamp({
+            amount: xPosition,
+            min: TOOLTIP_HORIZONTAL_OFFSET,
+            max: window.innerWidth - TOOLTIP_WIDTH - TOOLTIP_HORIZONTAL_OFFSET - SCROLLBAR_WIDTH,
+        });
+    };
+    const getYPosition = (activeDataSeries, tooltipHeight) => {
+        const barHeight = getBarHeight(activeDataSeries.value ?? 0);
+        const barTopY = chartY + (drawableHeight - barHeightAdjustment) - barHeight;
+        const barBottomY = chartY + (drawableHeight - barHeightAdjustment);
+        const hasSpaceAbove = barTopY - window.scrollY - tooltipHeight - TOOLTIP_GAP_FROM_BAR >= 0;
+        if (hasSpaceAbove) {
+            return { y: barTopY, placement: 'above' };
+        }
+        return { y: barBottomY, placement: 'below' };
+    };
+    return { getXPosition, getYPosition };
+}
+
+export { useTooltipPlacement };

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

@@ -0,0 +1,77 @@
+"use client"
+import { TOOLTIP_HEIGHT, SHORT_TOOLTIP_HEIGHT, TOOLTIP_HORIZONTAL_OFFSET, TOOLTIP_WIDTH, TOOLTIP_GAP_FROM_BAR } from '../constants.mjs';
+import 'react/jsx-runtime';
+import 'd3-shape';
+import { SCROLLBAR_WIDTH } from '../../TooltipWrapper/constants.mjs';
+import '../../TooltipWrapper/types.mjs';
+import { clamp } from '@shopify/polaris-viz-core';
+import '../../../hooks/useResizeObserver.mjs';
+import { useRef, useState, useEffect } from 'react';
+import '../../../constants.mjs';
+import 'react-dom';
+
+/**
+ * Computes tooltip x/y position and placement (above/below bar).
+ * Listens to scroll events via rAF and only triggers re-render
+ * when placement actually flips — not on every scroll frame.
+ */
+function useTooltipPlacement({ tooltipIndex, dataSeries, getBarHeight, chartX, chartY, drawableHeight, barHeightAdjustment, barWidth, xScale, }) {
+    const rafRef = useRef(null);
+    const lastPlacementRef = useRef(null);
+    const [, setPlacementTick] = useState(0);
+    useEffect(() => {
+        if (tooltipIndex == null) {
+            lastPlacementRef.current = null;
+            return;
+        }
+        const onScroll = () => {
+            if (rafRef.current != null)
+                return;
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                const activeData = dataSeries[tooltipIndex];
+                if (!activeData)
+                    return;
+                const barHeight = getBarHeight(activeData.value ?? 0);
+                const barTopY = chartY + (drawableHeight - barHeightAdjustment) - barHeight;
+                const tooltipHeight = activeData.chartTooltip ? TOOLTIP_HEIGHT : SHORT_TOOLTIP_HEIGHT;
+                const hasSpaceAbove = barTopY - window.scrollY - tooltipHeight - TOOLTIP_GAP_FROM_BAR >= 0;
+                const newPlacement = hasSpaceAbove ? 'above' : 'below';
+                if (newPlacement !== lastPlacementRef.current) {
+                    lastPlacementRef.current = newPlacement;
+                    setPlacementTick((t) => t + 1);
+                }
+            });
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+            if (rafRef.current != null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [tooltipIndex, dataSeries, getBarHeight, chartY, drawableHeight, barHeightAdjustment]);
+    const getXPosition = (activeDataSeries) => {
+        const currentX = xScale(activeDataSeries.key.toString()) ?? 0;
+        const xPosition = chartX + currentX + (barWidth - TOOLTIP_WIDTH) / 2;
+        return clamp({
+            amount: xPosition,
+            min: TOOLTIP_HORIZONTAL_OFFSET,
+            max: window.innerWidth - TOOLTIP_WIDTH - TOOLTIP_HORIZONTAL_OFFSET - SCROLLBAR_WIDTH,
+        });
+    };
+    const getYPosition = (activeDataSeries, tooltipHeight) => {
+        const barHeight = getBarHeight(activeDataSeries.value ?? 0);
+        const barTopY = chartY + (drawableHeight - barHeightAdjustment) - barHeight;
+        const barBottomY = chartY + (drawableHeight - barHeightAdjustment);
+        const hasSpaceAbove = barTopY - window.scrollY - tooltipHeight - TOOLTIP_GAP_FROM_BAR >= 0;
+        if (hasSpaceAbove) {
+            return { y: barTopY, placement: 'above' };
+        }
+        return { y: barBottomY, placement: 'below' };
+    };
+    return { getXPosition, getYPosition };
+}
+
+export { useTooltipPlacement };

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

@@ -0,0 +1,4 @@
+export { FunnelChartNext } from './FunnelChartNext';
+export type { FunnelChartNextProps } from './FunnelChartNext';
+export { ChartContainerWrapper } from './FunnelChartNext';
+export * from './constants';

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

@@ -0,0 +1,9 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+import type { TrendIndicatorProps } from '../TrendIndicator';
+export type MetaDataTrendIndicator = Omit<TrendIndicatorProps, 'theme'>;
+export interface FunnelChartMetaData {
+    trends?: MetaDataTrendIndicator;
+}
+export type FunnelChartDataSeries = DataSeries & {
+    metadata?: FunnelChartMetaData;
+};

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/calculate-dropoff.d.ts

@@ -0,0 +1 @@
+export declare function calculateDropOff(value: number, nextValue: number): number;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/calculate-dropoff.js

@@ -0,0 +1,8 @@
+"use client"
+function calculateDropOff(value, nextValue) {
+    if (!value)
+        return 0;
+    return ((nextValue - value) / value) * 100;
+}
+
+export { calculateDropOff };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/calculate-dropoff.mjs

@@ -0,0 +1,8 @@
+"use client"
+function calculateDropOff(value, nextValue) {
+    if (!value)
+        return 0;
+    return ((nextValue - value) / value) * 100;
+}
+
+export { calculateDropOff };

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

@@ -0,0 +1,10 @@
+import type { MetaDataTrendIndicator } from '../types';
+import type { GDataSeries } from '../../../../../types';
+import type { FunnelChartNextProps } from '../FunnelChartNext';
+export interface UseBuildFunnelTrendsProps {
+    data: GDataSeries[];
+    percentageFormatter: FunnelChartNextProps['percentageFormatter'];
+}
+export declare function useBuildFunnelTrends({ data, percentageFormatter }: UseBuildFunnelTrendsProps): {
+    trends: MetaDataTrendIndicator;
+} | undefined;

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/useBuildFunnelTrends.js

@@ -0,0 +1,71 @@
+"use client"
+import { useMemo } from 'react';
+
+function useBuildFunnelTrends({ data, percentageFormatter }) {
+    return useMemo(() => {
+        const primarySeries = data.find((series) => !series.isComparison);
+        const comparisonSeries = data.find((series) => series.isComparison);
+        if (!primarySeries || !comparisonSeries || !primarySeries.metadata?.trends) {
+            return undefined;
+        }
+        const trends = {};
+        primarySeries.data.forEach((_, index) => {
+            const reachedTrend = primarySeries.metadata?.trends[index];
+            if (!reachedTrend)
+                return;
+            const droppedPercentageChange = calculateDroppedPercentageChange({
+                previousStepValue: primarySeries.data[index - 1]?.value,
+                currentStepValue: primarySeries.data[index]?.value,
+                comparisonPreviousStepValue: comparisonSeries.data[index - 1]?.value,
+                comparisonCurrentStepValue: comparisonSeries.data[index]?.value,
+            });
+            const droppedTrend = index === 0 || comparisonSeries.isEmptyData
+                ? undefined
+                : formatDroppedTrend(droppedPercentageChange, percentageFormatter);
+            trends[index] = {
+                reached: reachedTrend,
+                ...(droppedTrend && { dropped: droppedTrend }),
+            };
+        });
+        return { trends };
+    }, [data, percentageFormatter]);
+}
+function calculateDroppedPercentageChange({ previousStepValue, currentStepValue, comparisonPreviousStepValue, comparisonCurrentStepValue, }) {
+    const hasEmptyValues = previousStepValue == null ||
+        currentStepValue == null ||
+        comparisonPreviousStepValue == null ||
+        comparisonCurrentStepValue == null;
+    if (hasEmptyValues)
+        return null;
+    const currentDropped = previousStepValue - currentStepValue;
+    const comparisonDropped = comparisonPreviousStepValue - comparisonCurrentStepValue;
+    if (comparisonDropped === 0)
+        return null;
+    return ((currentDropped - comparisonDropped) / Math.abs(comparisonDropped)) * 100;
+}
+function formatDroppedTrend(percentageChange, percentageFormatter) {
+    if (percentageChange == null) {
+        return {
+            value: null,
+        };
+    }
+    const absolutePercentageChange = Math.abs(percentageChange);
+    const defaultFormattedPercentage = `${absolutePercentageChange}%`;
+    const formattedPercentage = percentageFormatter
+        ? percentageFormatter(absolutePercentageChange)
+        : defaultFormattedPercentage;
+    if (percentageChange === 0) {
+        return {
+            value: formattedPercentage,
+            trend: 'neutral',
+            direction: 'upward',
+        };
+    }
+    return {
+        value: formattedPercentage,
+        trend: percentageChange < 0 ? 'positive' : 'negative',
+        direction: percentageChange < 0 ? 'downward' : 'upward',
+    };
+}
+
+export { useBuildFunnelTrends };

package/dist/esm/shared/charts/components/GPolarisViz/components/FunnelChartNext/utilities/useBuildFunnelTrends.mjs

@@ -0,0 +1,71 @@
+"use client"
+import { useMemo } from 'react';
+
+function useBuildFunnelTrends({ data, percentageFormatter }) {
+    return useMemo(() => {
+        const primarySeries = data.find((series) => !series.isComparison);
+        const comparisonSeries = data.find((series) => series.isComparison);
+        if (!primarySeries || !comparisonSeries || !primarySeries.metadata?.trends) {
+            return undefined;
+        }
+        const trends = {};
+        primarySeries.data.forEach((_, index) => {
+            const reachedTrend = primarySeries.metadata?.trends[index];
+            if (!reachedTrend)
+                return;
+            const droppedPercentageChange = calculateDroppedPercentageChange({
+                previousStepValue: primarySeries.data[index - 1]?.value,
+                currentStepValue: primarySeries.data[index]?.value,
+                comparisonPreviousStepValue: comparisonSeries.data[index - 1]?.value,
+                comparisonCurrentStepValue: comparisonSeries.data[index]?.value,
+            });
+            const droppedTrend = index === 0 || comparisonSeries.isEmptyData
+                ? undefined
+                : formatDroppedTrend(droppedPercentageChange, percentageFormatter);
+            trends[index] = {
+                reached: reachedTrend,
+                ...(droppedTrend && { dropped: droppedTrend }),
+            };
+        });
+        return { trends };
+    }, [data, percentageFormatter]);
+}
+function calculateDroppedPercentageChange({ previousStepValue, currentStepValue, comparisonPreviousStepValue, comparisonCurrentStepValue, }) {
+    const hasEmptyValues = previousStepValue == null ||
+        currentStepValue == null ||
+        comparisonPreviousStepValue == null ||
+        comparisonCurrentStepValue == null;
+    if (hasEmptyValues)
+        return null;
+    const currentDropped = previousStepValue - currentStepValue;
+    const comparisonDropped = comparisonPreviousStepValue - comparisonCurrentStepValue;
+    if (comparisonDropped === 0)
+        return null;
+    return ((currentDropped - comparisonDropped) / Math.abs(comparisonDropped)) * 100;
+}
+function formatDroppedTrend(percentageChange, percentageFormatter) {
+    if (percentageChange == null) {
+        return {
+            value: null,
+        };
+    }
+    const absolutePercentageChange = Math.abs(percentageChange);
+    const defaultFormattedPercentage = `${absolutePercentageChange}%`;
+    const formattedPercentage = percentageFormatter
+        ? percentageFormatter(absolutePercentageChange)
+        : defaultFormattedPercentage;
+    if (percentageChange === 0) {
+        return {
+            value: formattedPercentage,
+            trend: 'neutral',
+            direction: 'upward',
+        };
+    }
+    return {
+        value: formattedPercentage,
+        trend: percentageChange < 0 ? 'positive' : 'negative',
+        direction: percentageChange < 0 ? 'downward' : 'upward',
+    };
+}
+
+export { useBuildFunnelTrends };

package/dist/esm/shared/charts/components/GPolarisViz/components/HorizontalGridLines/HorizontalGridLines.d.ts

@@ -0,0 +1,10 @@
+import type { YAxisTick } from '../../types';
+export interface Props {
+    ticks: YAxisTick[];
+    transform: {
+        x: number;
+        y: number;
+    };
+    width: number;
+}
+export declare const HorizontalGridLines: import("react").NamedExoticComponent<Props>;

package/dist/esm/shared/charts/components/GPolarisViz/components/HorizontalGridLines/index.d.ts

@@ -0,0 +1 @@
+export { HorizontalGridLines } from './HorizontalGridLines';

package/dist/esm/shared/charts/components/GPolarisViz/components/Labels/SingleTextLine.d.ts

@@ -0,0 +1,14 @@
+interface SingleTextLineProps {
+    color: string;
+    fontSize: number;
+    fontWeight?: number;
+    targetWidth: number;
+    text: string;
+    x?: number;
+    y?: number;
+    ariaHidden?: boolean;
+    dominantBaseline?: 'middle' | 'hanging';
+    textAnchor?: 'start' | 'middle' | 'end';
+}
+export declare function SingleTextLine({ ariaHidden, color, dominantBaseline, fontSize, fontWeight, targetWidth, text, textAnchor, y, x, }: SingleTextLineProps): import("react/jsx-runtime").JSX.Element;
+export {};