@levi-gemcommerce/analytics 3.0.1-dev.2 → 3.0.1-dev.4

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

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { LABELS_HEIGHT, LINE_GRADIENT, LINE_OFFSET, LINE_WIDTH, GAP, SEGMENT_WIDTH_RATIO } from './constants.mjs';
+import { FunnelChartConnector } from '../../shared/FunnelChartConnector/FunnelChartConnector.mjs';
+import { FunnelChartConnectorGradient } from '../../shared/FunnelChartConnector/FunnelChartConnectorGradient.mjs';
+import { useChartContext, uniqueId, LinearGradientWithStops } from '@shopify/polaris-viz-core';
+import { useBuildFunnelTrends } from './utilities/useBuildFunnelTrends.mjs';
+import { useTooltipInteraction } from './hooks/useTooltipInteraction.mjs';
+import { FunnelChartLabels } from './components/FunnelChartLabels/FunnelChartLabels.mjs';
+import '@react-spring/web';
+import { TooltipWithPortal } from './components/TooltipWithPortal.mjs';
+import { useState, useMemo, Fragment } from 'react';
+import '../../constants.mjs';
+import { FunnelChartSegment } from '../../shared/FunnelChartSegment/FunnelChartSegment.mjs';
+import '../../hooks/useResizeObserver.mjs';
+import '../../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../../core/gemxql/types/analytic-data.mjs';
+import '../../../../../../core/gemxql/types/analytic-source.mjs';
+import '../../../../../../core/gemxql/types/extra-condition.mjs';
+import '../../../../../../core/gemxql/types/field-filters.mjs';
+import '../../../../../../core/gemxql/types/field-operators.mjs';
+import '../../../../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../../../../core/gemxql/types/order-by.mjs';
+import '../../../../../../core/gemxql/types/page-fields.mjs';
+import '../../../../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../../../utils/dayjs.mjs';
+import '../../../../../../utils/analytics.mjs';
+import '../../../../../../types/template.mjs';
+import '../../../../../components/GPagination/GPagination.mjs';
+import { useFunnelBarScaling } from '../../hooks/useFunnelBarScaling.mjs';
+import 'd3-shape';
+import '../../shared/Bar/Bar.mjs';
+import 'react-dom';
+import { scaleLinear, scaleBand } from 'd3-scale';
+import { ChartElements } from '../ChartElements/index.mjs';
+import { useTooltipPlacement } from './hooks/useTooltipPlacement.mjs';
+import { TooltipOverlay } from './components/TooltipOverlay.mjs';
+
+function Chart({ data, tooltipLabels, showTooltip = true, showPercentages = true, isShowFirstLabel, funnelColors, seriesNameFormatter, labelFormatter, percentageFormatter = (value) => {
+    return labelFormatter(value);
+}, renderScaleIconTooltipContent, }) {
+    const [hoverIndex, setHoverIndex] = useState(null);
+    const { tooltipIndex, showTooltipAt, scheduleTooltipHide, handleTooltipMouseEnter, handleTooltipMouseLeave, handleChartBlur, } = useTooltipInteraction();
+    const { containerBounds } = useChartContext();
+    const dataSeries = data[0].data;
+    const calculatedTrends = useBuildFunnelTrends({ data, percentageFormatter });
+    const trends = calculatedTrends?.trends;
+    const xValues = dataSeries.map(({ key }) => key);
+    const yValues = dataSeries.map(({ value }) => value);
+    const sanitizedYValues = yValues.map((value) => Math.max(0, value));
+    const chartContainerWidth = containerBounds?.width ?? 0;
+    const barHeightAdjustment = chartContainerWidth <= 500 ? 10 : 0;
+    const { width: drawableWidth, height: drawableHeight, x: chartX, y: chartY, } = containerBounds ?? {
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+    };
+    const highestYValue = Math.max(...sanitizedYValues);
+    const yScale = scaleLinear()
+        .range([0, drawableHeight - LABELS_HEIGHT - barHeightAdjustment])
+        .domain([0, highestYValue]);
+    const { getBarHeight, shouldApplyScaling } = useFunnelBarScaling({
+        yScale,
+        values: sanitizedYValues,
+    });
+    const labels = useMemo(() => dataSeries.map((dataPoint, index) => {
+        if (!isShowFirstLabel)
+            return { ...dataPoint, value: seriesNameFormatter(dataPoint.key) };
+        if (index === 0)
+            return { ...dataPoint, value: 'Sessions' };
+        return { ...dataPoint, value: '' };
+    }), [dataSeries, seriesNameFormatter, isShowFirstLabel]);
+    const totalStepWidth = drawableWidth / xValues.length;
+    const connectorWidth = totalStepWidth * (1 - SEGMENT_WIDTH_RATIO);
+    const drawableWidthWithLastConnector = drawableWidth + connectorWidth;
+    const xScale = scaleBand().domain(xValues).range([0, drawableWidthWithLastConnector]);
+    const labelXScale = scaleBand()
+        .range([0, drawableWidthWithLastConnector])
+        .domain(labels.map((_, index) => index.toString()));
+    const sectionWidth = xScale.bandwidth();
+    const barWidth = sectionWidth * SEGMENT_WIDTH_RATIO;
+    const lineGradientId = useMemo(() => uniqueId('line-gradient'), []);
+    const firstPoint = dataSeries[0];
+    const calculatePercentage = (value, total) => {
+        const sanitizedValue = Math.max(0, value);
+        const sanitizedTotal = Math.max(0, total);
+        return sanitizedTotal === 0 ? 0 : (sanitizedValue / sanitizedTotal) * 100;
+    };
+    const percentages = dataSeries.map((dataPoint) => {
+        const firstValue = firstPoint?.value ?? 0;
+        return percentageFormatter(calculatePercentage(dataPoint.value ?? 0, firstValue));
+    });
+    const formattedValues = dataSeries.map((dataPoint) => {
+        return labelFormatter(dataPoint.value);
+    });
+    const { getXPosition, getYPosition } = useTooltipPlacement({
+        tooltipIndex,
+        dataSeries,
+        getBarHeight,
+        chartX,
+        chartY,
+        drawableHeight,
+        barHeightAdjustment,
+        barWidth,
+        xScale,
+    });
+    return (jsx(ChartElements.Svg, { height: drawableHeight, width: drawableWidth, children: jsxs("g", { onBlur: handleChartBlur, children: [jsx(FunnelChartConnectorGradient, { funnelColors: funnelColors }), jsx(LinearGradientWithStops, { gradient: LINE_GRADIENT, id: lineGradientId, x1: "0%", x2: "0%", y1: "0%", y2: "100%" }), dataSeries.map((dataPoint, index) => {
+                    const nextPoint = dataSeries[index + 1];
+                    const xPosition = xScale(dataPoint.key.toString());
+                    const x = xPosition == null ? 0 : xPosition;
+                    const isLast = index === dataSeries.length - 1;
+                    const barHeight = getBarHeight(dataPoint.value || 0);
+                    const nextBarHeight = getBarHeight(nextPoint?.value || 0);
+                    return (jsx(Fragment, { children: jsxs("g", { role: "listitem", onMouseEnter: () => setHoverIndex(index), onMouseLeave: () => setHoverIndex(null), children: [jsx("rect", { x: x - (LINE_OFFSET - LINE_WIDTH), y: 0, width: sectionWidth + (LINE_OFFSET - LINE_WIDTH), height: drawableHeight, fill: "transparent" }), jsx(FunnelChartSegment, { ariaLabel: `${seriesNameFormatter(dataPoint.key)}: ${labelFormatter(dataPoint.value)}`, barHeight: barHeight, barWidth: barWidth, index: index, isLast: isLast, onMouseEnter: (index) => showTooltip && showTooltipAt(index), onMouseLeave: () => showTooltip && scheduleTooltipHide(), shouldApplyScaling: shouldApplyScaling, x: x, funnelColors: funnelColors, children: !isLast && (jsx(FunnelChartConnector, { drawableHeight: drawableHeight, height: drawableHeight, index: index, nextX: (xScale(nextPoint?.key.toString() ?? '') ?? 0) - LINE_OFFSET, nextY: drawableHeight - nextBarHeight, startX: x + barWidth + GAP, startY: drawableHeight - barHeight })) }), index > 0 && (jsx("rect", { y: 0, x: x - (LINE_OFFSET - LINE_WIDTH), width: LINE_WIDTH, height: drawableHeight, fill: `url(#${lineGradientId})` }))] }, dataPoint.key) }, dataPoint.key));
+                }), jsx("g", { children: jsx(FunnelChartLabels, { formattedValues: formattedValues, labels: labels, labelWidth: sectionWidth, barWidth: barWidth, percentages: percentages, xScale: labelXScale, shouldApplyScaling: shouldApplyScaling, renderScaleIconTooltipContent: renderScaleIconTooltipContent, trends: trends, showPercentages: showPercentages, hoverIndex: hoverIndex, onMouseEnter: (index) => setHoverIndex(index), onMouseLeave: () => setHoverIndex(null) }) }), jsx(TooltipWithPortal, { children: showTooltip && tooltipIndex != null && (jsx(TooltipOverlay, { tooltipIndex: tooltipIndex, dataSeries: dataSeries, trends: trends, tooltipLabels: tooltipLabels, funnelColors: funnelColors, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter, getBarHeight: getBarHeight, getXPosition: getXPosition, getYPosition: getYPosition, chartX: chartX, barWidth: barWidth, xScale: xScale, onTooltipMouseEnter: handleTooltipMouseEnter, onTooltipMouseLeave: handleTooltipMouseLeave })) })] }) }));
+}
+
+export { Chart };

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

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useChartContext, DEFAULT_CHART_PROPS, ChartState } from '@shopify/polaris-viz-core';
+import { numberWithCommas } from '../../../../../../utils/number.js';
+import '../../../../../../utils/dayjs.js';
+import '../../../../../../utils/analytics.js';
+import '../../../../../../types/template.js';
+import { ChartContainer } from '../ChartContainer/ChartContainer.js';
+import { ChartSkeleton } from '../ChartSkeleton/ChartSkeleton.js';
+import { Chart } from './Chart.js';
+
+const DEFAULT_LABEL_FORMATTER = (value) => numberWithCommas(value?.toString() ?? '');
+const DEFAULT_TOOLTIP_LABELS = {
+    reached: 'Reached this step',
+    dropped: 'Dropped off',
+};
+function FunnelChartNext(props) {
+    const { theme: defaultTheme } = useChartContext();
+    const { data, theme = defaultTheme, state, errorText, tooltipLabels = DEFAULT_TOOLTIP_LABELS, showTooltip = true, showPercentages = true, isShowFirstLabel = false, funnelColors, seriesNameFormatter = DEFAULT_LABEL_FORMATTER, labelFormatter = DEFAULT_LABEL_FORMATTER, percentageFormatter, renderScaleIconTooltipContent, } = {
+        ...DEFAULT_CHART_PROPS,
+        ...props,
+    };
+    return (jsx(ChartContainerWrapper, { props: props, children: state !== ChartState.Success ? (jsx(ChartSkeleton, { type: "Funnel", state: state, errorText: errorText, theme: theme })) : (jsx(Chart, { data: data, tooltipLabels: tooltipLabels, showTooltip: showTooltip, showPercentages: showPercentages, isShowFirstLabel: isShowFirstLabel, funnelColors: funnelColors, seriesNameFormatter: seriesNameFormatter, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter, renderScaleIconTooltipContent: renderScaleIconTooltipContent })) }));
+}
+const ChartContainerWrapper = ({ props, children, height, }) => {
+    const { theme: defaultTheme } = useChartContext();
+    const { data, theme = defaultTheme, id, isAnimated, onError, } = {
+        ...DEFAULT_CHART_PROPS,
+        ...props,
+    };
+    return (jsx(ChartContainer, { data: data, id: id, isAnimated: isAnimated, onError: onError, theme: theme, height: height, children: children }));
+};
+
+export { ChartContainerWrapper, FunnelChartNext };

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

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useChartContext, DEFAULT_CHART_PROPS, ChartState } from '@shopify/polaris-viz-core';
+import { numberWithCommas } from '../../../../../../utils/number.mjs';
+import '../../../../../../utils/dayjs.mjs';
+import '../../../../../../utils/analytics.mjs';
+import '../../../../../../types/template.mjs';
+import { ChartContainer } from '../ChartContainer/ChartContainer.mjs';
+import { ChartSkeleton } from '../ChartSkeleton/ChartSkeleton.mjs';
+import { Chart } from './Chart.mjs';
+
+const DEFAULT_LABEL_FORMATTER = (value) => numberWithCommas(value?.toString() ?? '');
+const DEFAULT_TOOLTIP_LABELS = {
+    reached: 'Reached this step',
+    dropped: 'Dropped off',
+};
+function FunnelChartNext(props) {
+    const { theme: defaultTheme } = useChartContext();
+    const { data, theme = defaultTheme, state, errorText, tooltipLabels = DEFAULT_TOOLTIP_LABELS, showTooltip = true, showPercentages = true, isShowFirstLabel = false, funnelColors, seriesNameFormatter = DEFAULT_LABEL_FORMATTER, labelFormatter = DEFAULT_LABEL_FORMATTER, percentageFormatter, renderScaleIconTooltipContent, } = {
+        ...DEFAULT_CHART_PROPS,
+        ...props,
+    };
+    return (jsx(ChartContainerWrapper, { props: props, children: state !== ChartState.Success ? (jsx(ChartSkeleton, { type: "Funnel", state: state, errorText: errorText, theme: theme })) : (jsx(Chart, { data: data, tooltipLabels: tooltipLabels, showTooltip: showTooltip, showPercentages: showPercentages, isShowFirstLabel: isShowFirstLabel, funnelColors: funnelColors, seriesNameFormatter: seriesNameFormatter, labelFormatter: labelFormatter, percentageFormatter: percentageFormatter, renderScaleIconTooltipContent: renderScaleIconTooltipContent })) }));
+}
+const ChartContainerWrapper = ({ props, children, height, }) => {
+    const { theme: defaultTheme } = useChartContext();
+    const { data, theme = defaultTheme, id, isAnimated, onError, } = {
+        ...DEFAULT_CHART_PROPS,
+        ...props,
+    };
+    return (jsx(ChartContainer, { data: data, id: id, isAnimated: isAnimated, onError: onError, theme: theme, height: height, children: children }));
+};
+
+export { ChartContainerWrapper, FunnelChartNext };

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

@@ -1,4 +1,4 @@
-import type { IPointSecondaryAction } from '@/shared/charts/types';
+import type { IPointSecondaryAction } from '../../../../../../types';
 import type { FunnelChartMetaData } from '../../types';
 import type { ScaleBand } from 'd3-scale';
 import type { ReactNode } from 'react';

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

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.js';
+import { useChartContext, estimateStringWidth, LINE_HEIGHT } from '@shopify/polaris-viz-core';
+import { estimateStringWidthWithOffset } from '../../../../utilities/estimateStringWidthWithOffset.js';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.js';
+import { ScaleIconTooltip } from '../ScaleIconTooltip.js';
+import '../../../../constants.js';
+import { useState, useMemo, Fragment } from 'react';
+import { Tooltip, Button } from '@shopify/polaris';
+import { SingleTextLine } from '../../../Labels/SingleTextLine.js';
+import { ScaleIcon } from '../ScaleIcon.js';
+
+const LINE_GAP = 5;
+const LINE_PADDING = 4;
+const GROUP_OFFSET = 10;
+const LABEL_FONT_SIZE = 12;
+const VALUE_FONT_SIZE = 14;
+const VALUE_FONT_WEIGHT = 500;
+const PRIMARY_VALUE_FONT_WEIGHT = 550;
+const VALUE_FONT_SIZE_SMALL = 12;
+const TREND_INDICATOR_SPACING = 20;
+const TREND_INDICATOR_SPACING_2 = 10;
+const VERTICAL_STACK_SPACING = 3;
+const MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY = 400;
+const LABEL_VERTICAL_OFFSET = 2;
+const TREND_INDICATOR_SPACING_ADJUSTMENT = 35;
+const ACTION_BUTTON_WIDTH = 20;
+const TEXT_COLOR = '#616161';
+const PRIMARY_TEXT_COLOR = '#303030';
+const REDUCED_FONT_SIZE = 11;
+const LAYOUT_STRATEGY = {
+    ONE_LINE_ALL: 'one_line_all',
+    ONE_LINE_COUNTS_AND_TRENDS: 'one_line_counts_and_trends',
+    VERTICAL_STACKING: 'vertical_stacking',
+};
+function FunnelChartLabels({ formattedValues, labels, labelWidth, barWidth, percentages, trends, xScale, shouldApplyScaling, showPercentages = true, renderScaleIconTooltipContent, hoverIndex, onMouseEnter, onMouseLeave, isShowScaleIcon = false, }) {
+    const { characterWidths, containerBounds } = useChartContext();
+    const chartContainerWidth = containerBounds?.width ?? 0;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const labelFontSize = useMemo(() => {
+        const maxLabelWidth = Math.max(...labels.map((label) => estimateStringWidth(label.value, characterWidths)));
+        return maxLabelWidth > labelWidth ? REDUCED_FONT_SIZE : LABEL_FONT_SIZE;
+    }, [labels, characterWidths, labelWidth]);
+    const { layoutStrategy } = useMemo(() => {
+        // Check if all items can fit in one Main Percentage, Counts, and TI (if present) on a single line.
+        const actionButtonWidth = labels[0]?.secondaryActions?.length ? ACTION_BUTTON_WIDTH : 0;
+        const canAllFitInOneLine = labels.every((_, i) => {
+            const isLast = i === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const availableWidth = currentTargetWidth - actionButtonWidth;
+            const currentPercentWidth = showPercentages
+                ? estimateStringWidthWithOffset(percentages[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT)
+                : 0;
+            const currentCountStringWidth = estimateStringWidthWithOffset(formattedValues[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(trends?.[i]?.reached);
+            return (currentPercentWidth +
+                LINE_PADDING +
+                currentCountStringWidth +
+                (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+                availableWidth);
+        });
+        if (canAllFitInOneLine) {
+            // All elements in one line
+            return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_ALL };
+        }
+        // If chart width is very narrow, prioritize full stacking.
+        if (chartContainerWidth < MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY) {
+            return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+        }
+        // Check if counts and trends can fit in one line.
+        const canCountsAndTrendsFitOneLine = labels.every((_, i) => {
+            const isLast = i === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const availableWidth = currentTargetWidth - actionButtonWidth;
+            const currentCountStringWidth = estimateStringWidthWithOffset(formattedValues[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(trends?.[i]?.reached);
+            return (currentCountStringWidth + (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+                Number(availableWidth) + TREND_INDICATOR_SPACING_ADJUSTMENT);
+        });
+        if (canCountsAndTrendsFitOneLine) {
+            return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS };
+        }
+        // Fall back to vertical stacking.
+        return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+    }, [
+        labels,
+        percentages,
+        formattedValues,
+        trends,
+        labelWidth,
+        barWidth,
+        chartContainerWidth,
+        showPercentages,
+        hoverIndex,
+    ]);
+    function displayChartLabels(layoutStrategy, index, currentTargetWidth, percentWidth, countStringWidth, trendIndicatorProps, trendIndicatorWidth, showPercentages) {
+        if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_ALL) {
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(SingleTextLine, { color: PRIMARY_TEXT_COLOR, text: percentages[index], targetWidth: percentWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: PRIMARY_VALUE_FONT_WEIGHT })) : null, jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], x: showPercentages ? percentWidth + LINE_PADDING : 0, targetWidth: currentTargetWidth -
+                            (percentWidth + LINE_PADDING) -
+                            (trendIndicatorProps ? TREND_INDICATOR_SPACING + trendIndicatorWidth : 0), textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: !showPercentages ? VALUE_FONT_WEIGHT : undefined }), ' ', trendIndicatorProps && (jsx("g", { transform: `translate(${percentWidth + countStringWidth + TREND_INDICATOR_SPACING}, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }))] }));
+        }
+        if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS) {
+            const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(Fragment, { children: jsx(SingleTextLine, { color: TEXT_COLOR, text: percentages[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT }) })) : null, jsxs("g", { transform: `translate(0, ${formattedValueTransformY})`, children: [jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], targetWidth: trendIndicatorProps ? countStringWidth : currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE_SMALL, fontWeight: VALUE_FONT_WEIGHT, x: 0, y: 2 }), trendIndicatorProps && (jsx("g", { transform: `translate(${countStringWidth + TREND_INDICATOR_SPACING_2}, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }))] })] }));
+        }
+        if (layoutStrategy === LAYOUT_STRATEGY.VERTICAL_STACKING) {
+            const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+            const trendIndicatorTransformY = showPercentages
+                ? LINE_HEIGHT * 2 + VERTICAL_STACK_SPACING * 2
+                : LINE_HEIGHT + VERTICAL_STACK_SPACING * 2;
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(SingleTextLine, { color: TEXT_COLOR, text: percentages[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT })) : null, jsx("g", { transform: `translate(0, ${formattedValueTransformY})`, children: jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT, x: 0 }) }), trendIndicatorProps && (jsx("g", { transform: `translate(0, ${trendIndicatorTransformY})`, children: jsx("g", { transform: `translate(0, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }) }))] }));
+        }
+        return null;
+    }
+    return (jsx(Fragment, { children: labels.map((label, index) => {
+            const x = xScale(index.toString()) ?? 0;
+            const showScaleIcon = index === 0 && shouldApplyScaling && isShowScaleIcon;
+            const isLast = index === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const percentWidth = estimateStringWidthWithOffset(percentages[index], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const countStringWidth = estimateStringWidthWithOffset(formattedValues[index], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorProps, trendIndicatorWidth } = getTrendIndicatorData(trends?.[index]?.reached);
+            const updatedPercentWidth = showPercentages ? percentWidth : 0;
+            return (jsxs("g", { transform: `translate(${index === 0 ? x : x + GROUP_OFFSET},${GROUP_OFFSET})`, onMouseEnter: () => onMouseEnter?.(index), onMouseLeave: () => onMouseLeave?.(), children: [showScaleIcon && (jsxs("g", { transform: "translate(0, -3)", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [jsx(ScaleIcon, {}), showTooltip && renderScaleIconTooltipContent && (jsx(ScaleIconTooltip, { renderScaleIconTooltipContent: renderScaleIconTooltipContent }))] })), jsx(SingleTextLine, { color: TEXT_COLOR, text: label.value, targetWidth: currentTargetWidth, textAnchor: "start", fontSize: labelFontSize, x: showScaleIcon ? 20 : 0 }), jsx("g", { transform: `translate(0,${LINE_HEIGHT + LINE_GAP})`, children: displayChartLabels(layoutStrategy, index, currentTargetWidth, updatedPercentWidth, countStringWidth, trendIndicatorProps, trendIndicatorWidth, showPercentages) }), hoverIndex === index &&
+                        label.secondaryActions?.map((action, index) => (jsx("foreignObject", { x: currentTargetWidth - (index + 1) * 20, y: LINE_HEIGHT, style: { overflow: 'visible' }, children: jsx(Tooltip, { content: 'Remove step', children: jsx(Button, { variant: "tertiary", tone: "critical", onClick: () => action.onAction?.(), icon: action.icon, disabled: action.disabled, loading: action.loading }) }) }, index)))] }, index));
+        }) }));
+}
+
+export { FunnelChartLabels, LABEL_VERTICAL_OFFSET };

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

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData.mjs';
+import { useChartContext, estimateStringWidth, LINE_HEIGHT } from '@shopify/polaris-viz-core';
+import { estimateStringWidthWithOffset } from '../../../../utilities/estimateStringWidthWithOffset.mjs';
+import { TrendIndicator } from '../../../TrendIndicator/TrendIndicator.mjs';
+import { ScaleIconTooltip } from '../ScaleIconTooltip.mjs';
+import '../../../../constants.mjs';
+import { useState, useMemo, Fragment } from 'react';
+import { Tooltip, Button } from '@shopify/polaris';
+import { SingleTextLine } from '../../../Labels/SingleTextLine.mjs';
+import { ScaleIcon } from '../ScaleIcon.mjs';
+
+const LINE_GAP = 5;
+const LINE_PADDING = 4;
+const GROUP_OFFSET = 10;
+const LABEL_FONT_SIZE = 12;
+const VALUE_FONT_SIZE = 14;
+const VALUE_FONT_WEIGHT = 500;
+const PRIMARY_VALUE_FONT_WEIGHT = 550;
+const VALUE_FONT_SIZE_SMALL = 12;
+const TREND_INDICATOR_SPACING = 20;
+const TREND_INDICATOR_SPACING_2 = 10;
+const VERTICAL_STACK_SPACING = 3;
+const MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY = 400;
+const LABEL_VERTICAL_OFFSET = 2;
+const TREND_INDICATOR_SPACING_ADJUSTMENT = 35;
+const ACTION_BUTTON_WIDTH = 20;
+const TEXT_COLOR = '#616161';
+const PRIMARY_TEXT_COLOR = '#303030';
+const REDUCED_FONT_SIZE = 11;
+const LAYOUT_STRATEGY = {
+    ONE_LINE_ALL: 'one_line_all',
+    ONE_LINE_COUNTS_AND_TRENDS: 'one_line_counts_and_trends',
+    VERTICAL_STACKING: 'vertical_stacking',
+};
+function FunnelChartLabels({ formattedValues, labels, labelWidth, barWidth, percentages, trends, xScale, shouldApplyScaling, showPercentages = true, renderScaleIconTooltipContent, hoverIndex, onMouseEnter, onMouseLeave, isShowScaleIcon = false, }) {
+    const { characterWidths, containerBounds } = useChartContext();
+    const chartContainerWidth = containerBounds?.width ?? 0;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const labelFontSize = useMemo(() => {
+        const maxLabelWidth = Math.max(...labels.map((label) => estimateStringWidth(label.value, characterWidths)));
+        return maxLabelWidth > labelWidth ? REDUCED_FONT_SIZE : LABEL_FONT_SIZE;
+    }, [labels, characterWidths, labelWidth]);
+    const { layoutStrategy } = useMemo(() => {
+        // Check if all items can fit in one Main Percentage, Counts, and TI (if present) on a single line.
+        const actionButtonWidth = labels[0]?.secondaryActions?.length ? ACTION_BUTTON_WIDTH : 0;
+        const canAllFitInOneLine = labels.every((_, i) => {
+            const isLast = i === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const availableWidth = currentTargetWidth - actionButtonWidth;
+            const currentPercentWidth = showPercentages
+                ? estimateStringWidthWithOffset(percentages[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT)
+                : 0;
+            const currentCountStringWidth = estimateStringWidthWithOffset(formattedValues[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(trends?.[i]?.reached);
+            return (currentPercentWidth +
+                LINE_PADDING +
+                currentCountStringWidth +
+                (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+                availableWidth);
+        });
+        if (canAllFitInOneLine) {
+            // All elements in one line
+            return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_ALL };
+        }
+        // If chart width is very narrow, prioritize full stacking.
+        if (chartContainerWidth < MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY) {
+            return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+        }
+        // Check if counts and trends can fit in one line.
+        const canCountsAndTrendsFitOneLine = labels.every((_, i) => {
+            const isLast = i === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const availableWidth = currentTargetWidth - actionButtonWidth;
+            const currentCountStringWidth = estimateStringWidthWithOffset(formattedValues[i], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(trends?.[i]?.reached);
+            return (currentCountStringWidth + (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+                Number(availableWidth) + TREND_INDICATOR_SPACING_ADJUSTMENT);
+        });
+        if (canCountsAndTrendsFitOneLine) {
+            return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS };
+        }
+        // Fall back to vertical stacking.
+        return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+    }, [
+        labels,
+        percentages,
+        formattedValues,
+        trends,
+        labelWidth,
+        barWidth,
+        chartContainerWidth,
+        showPercentages,
+        hoverIndex,
+    ]);
+    function displayChartLabels(layoutStrategy, index, currentTargetWidth, percentWidth, countStringWidth, trendIndicatorProps, trendIndicatorWidth, showPercentages) {
+        if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_ALL) {
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(SingleTextLine, { color: PRIMARY_TEXT_COLOR, text: percentages[index], targetWidth: percentWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: PRIMARY_VALUE_FONT_WEIGHT })) : null, jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], x: showPercentages ? percentWidth + LINE_PADDING : 0, targetWidth: currentTargetWidth -
+                            (percentWidth + LINE_PADDING) -
+                            (trendIndicatorProps ? TREND_INDICATOR_SPACING + trendIndicatorWidth : 0), textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: !showPercentages ? VALUE_FONT_WEIGHT : undefined }), ' ', trendIndicatorProps && (jsx("g", { transform: `translate(${percentWidth + countStringWidth + TREND_INDICATOR_SPACING}, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }))] }));
+        }
+        if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS) {
+            const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(Fragment, { children: jsx(SingleTextLine, { color: TEXT_COLOR, text: percentages[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT }) })) : null, jsxs("g", { transform: `translate(0, ${formattedValueTransformY})`, children: [jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], targetWidth: trendIndicatorProps ? countStringWidth : currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE_SMALL, fontWeight: VALUE_FONT_WEIGHT, x: 0, y: 2 }), trendIndicatorProps && (jsx("g", { transform: `translate(${countStringWidth + TREND_INDICATOR_SPACING_2}, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }))] })] }));
+        }
+        if (layoutStrategy === LAYOUT_STRATEGY.VERTICAL_STACKING) {
+            const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+            const trendIndicatorTransformY = showPercentages
+                ? LINE_HEIGHT * 2 + VERTICAL_STACK_SPACING * 2
+                : LINE_HEIGHT + VERTICAL_STACK_SPACING * 2;
+            return (jsxs(Fragment, { children: [showPercentages ? (jsx(SingleTextLine, { color: TEXT_COLOR, text: percentages[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT })) : null, jsx("g", { transform: `translate(0, ${formattedValueTransformY})`, children: jsx(SingleTextLine, { color: TEXT_COLOR, text: formattedValues[index], targetWidth: currentTargetWidth, textAnchor: "start", fontSize: VALUE_FONT_SIZE, fontWeight: VALUE_FONT_WEIGHT, x: 0 }) }), trendIndicatorProps && (jsx("g", { transform: `translate(0, ${trendIndicatorTransformY})`, children: jsx("g", { transform: `translate(0, ${-LABEL_VERTICAL_OFFSET})`, children: jsx(TrendIndicator, { ...trendIndicatorProps }) }) }))] }));
+        }
+        return null;
+    }
+    return (jsx(Fragment, { children: labels.map((label, index) => {
+            const x = xScale(index.toString()) ?? 0;
+            const showScaleIcon = index === 0 && shouldApplyScaling && isShowScaleIcon;
+            const isLast = index === labels.length - 1;
+            const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+            const percentWidth = estimateStringWidthWithOffset(percentages[index], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const countStringWidth = estimateStringWidthWithOffset(formattedValues[index], VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+            const { trendIndicatorProps, trendIndicatorWidth } = getTrendIndicatorData(trends?.[index]?.reached);
+            const updatedPercentWidth = showPercentages ? percentWidth : 0;
+            return (jsxs("g", { transform: `translate(${index === 0 ? x : x + GROUP_OFFSET},${GROUP_OFFSET})`, onMouseEnter: () => onMouseEnter?.(index), onMouseLeave: () => onMouseLeave?.(), children: [showScaleIcon && (jsxs("g", { transform: "translate(0, -3)", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [jsx(ScaleIcon, {}), showTooltip && renderScaleIconTooltipContent && (jsx(ScaleIconTooltip, { renderScaleIconTooltipContent: renderScaleIconTooltipContent }))] })), jsx(SingleTextLine, { color: TEXT_COLOR, text: label.value, targetWidth: currentTargetWidth, textAnchor: "start", fontSize: labelFontSize, x: showScaleIcon ? 20 : 0 }), jsx("g", { transform: `translate(0,${LINE_HEIGHT + LINE_GAP})`, children: displayChartLabels(layoutStrategy, index, currentTargetWidth, updatedPercentWidth, countStringWidth, trendIndicatorProps, trendIndicatorWidth, showPercentages) }), hoverIndex === index &&
+                        label.secondaryActions?.map((action, index) => (jsx("foreignObject", { x: currentTargetWidth - (index + 1) * 20, y: LINE_HEIGHT, style: { overflow: 'visible' }, children: jsx(Tooltip, { content: 'Remove step', children: jsx(Button, { variant: "tertiary", tone: "critical", onClick: () => action.onAction?.(), icon: action.icon, disabled: action.disabled, loading: action.loading }) }) }, index)))] }, index));
+        }) }));
+}
+
+export { FunnelChartLabels, LABEL_VERTICAL_OFFSET };

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

@@ -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.js';
+
+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/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 {