@levi-gemcommerce/analytics 1.0.0-dev.39 → 1.0.0-dev.40

package/dist/esm/components/CardPathAnalysis/helpers/pathAnalysis.d.ts

@@ -1,4 +1,4 @@
-import type { IGetTextPrice } from '@/modules/shopify';
+import type { IGetTextPrice } from '@/core/gemxql';
 import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
 export declare const processPathAnalytics: (analyticsData: IBasePathAnalyticPageWithParent[] | undefined, locationPath: string) => IBasePathAnalyticPageWithChild | undefined;
 export declare const processPathAnalyticsTree: (analyticsData: IBasePathAnalyticPageWithParent[] | undefined) => IBasePathAnalyticPageWithChild[] | undefined;

package/dist/esm/gemxql.js

@@ -4,8 +4,8 @@ import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useQuery } from '@tanstack/react-query';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { create } from 'zustand';
 import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { create } from 'zustand';
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';

package/dist/esm/gemxql.mjs

@@ -4,8 +4,8 @@ import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useQuery } from '@tanstack/react-query';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { create } from 'zustand';
 import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { create } from 'zustand';
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';

package/dist/esm/index.js

@@ -1133,6 +1133,8 @@ const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
 
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 const useCurrencyRatesStore = create((set) => ({
     currencyRates: null,
     setCurrencyRates: (rates) => set({ currencyRates: rates }),
@@ -1174,100 +1176,6 @@ const useFetchCurrencyRates = () => {
     }, [data, setCurrencyRates]);
 };
 
-const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
-    if (typeof price === 'string')
-        return price;
-    if (typeof price !== 'number')
-        return;
-    // Support legacy 3rd arg as locale string
-    const opts = typeof options === 'string' ? { locale: options } : options;
-    const locale = opts?.locale ?? 'en-US';
-    if (price >= 1_000_000_000) {
-        return `${new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency,
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        }).format(price / 1_000_000_000)}B`;
-    }
-    if (price >= 1_000_000) {
-        return `${new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency,
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        }).format(price / 1_000_000)}M`;
-    }
-    if (opts?.compact && Math.abs(price) >= 1_000) {
-        return `${new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency,
-            minimumFractionDigits: 1,
-            maximumFractionDigits: 1,
-        }).format(price / 1_000)}K`;
-    }
-    return new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency,
-    }).format(price);
-};
-
-const ConvertMoneyContext = createContext({
-    getTextPrice: (price) => {
-        if (typeof price === 'string')
-            return price;
-        return `${price ?? 0}`;
-    },
-});
-const convertAmount = (amount, from, to, rates) => {
-    if (from === to || !rates[from] || !rates[to])
-        return amount;
-    const converted = (amount * rates[from]) / rates[to];
-    return converted ? Number(converted.toFixed(2)) : amount;
-};
-const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }) => {
-    useFetchCurrencyRates();
-    const currencyRates = useCurrencyRatesStore((state) => state.currencyRates);
-    const getTextPrice = useCallback((price, _hasCurrency, options) => {
-        if (typeof price === 'string')
-            return price;
-        if (typeof price !== 'number')
-            return '0';
-        if (!currency)
-            return price.toString();
-        const converted = currencyRates
-            ? convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates)
-            : price;
-        return trimDecimalZeros(getPriceByCurrency(converted, currency, { locale, compact: options?.compact }) ?? '0');
-    }, [currency, locale, currencyRates]);
-    const value = useMemo(() => ({ getTextPrice }), [getTextPrice]);
-    return jsx(ConvertMoneyContext.Provider, { value: value, children: children });
-};
-const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
-
-const LINE_SERIES_COLORS = {
-    comparison: SERIES_COLORS.comparison,
-    single: SERIES_COLORS.current,
-    all: [...SERIES_COLORS.all],
-};
-const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesColors = LINE_SERIES_COLORS, }) => {
-    return (jsxs(Fragment, { children: [jsx("link", { rel: "stylesheet", href: chartStyle }), jsx(PolarisVizProvider, { themes: {
-                    Light: {
-                        chartContainer: {
-                            minHeight,
-                        },
-                        grid: {
-                            horizontalOverflow: true,
-                            verticalOverflow: true,
-                            horizontalMargin: 0,
-                        },
-                        seriesColors,
-                    },
-                }, children: children })] }));
-};
-
-const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
 
@@ -1637,6 +1545,98 @@ const useWindowSize = () => {
     return { windowSize, windowWidth, isMobileTabletView, isMobileView };
 };
 
+const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
+    if (typeof price === 'string')
+        return price;
+    if (typeof price !== 'number')
+        return;
+    // Support legacy 3rd arg as locale string
+    const opts = typeof options === 'string' ? { locale: options } : options;
+    const locale = opts?.locale ?? 'en-US';
+    if (price >= 1_000_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000_000)}B`;
+    }
+    if (price >= 1_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000)}M`;
+    }
+    if (opts?.compact && Math.abs(price) >= 1_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        }).format(price / 1_000)}K`;
+    }
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(price);
+};
+
+const ConvertMoneyContext = createContext({
+    getTextPrice: (price) => {
+        if (typeof price === 'string')
+            return price;
+        return `${price ?? 0}`;
+    },
+});
+const convertAmount = (amount, from, to, rates) => {
+    if (from === to || !rates[from] || !rates[to])
+        return amount;
+    const converted = (amount * rates[from]) / rates[to];
+    return converted ? Number(converted.toFixed(2)) : amount;
+};
+const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }) => {
+    useFetchCurrencyRates();
+    const currencyRates = useCurrencyRatesStore((state) => state.currencyRates);
+    const getTextPrice = useCallback((price, _hasCurrency, options) => {
+        if (typeof price === 'string')
+            return price;
+        if (typeof price !== 'number')
+            return '0';
+        if (!currency)
+            return price.toString();
+        const converted = currencyRates
+            ? convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates)
+            : price;
+        return trimDecimalZeros(getPriceByCurrency(converted, currency, { locale, compact: options?.compact }) ?? '0');
+    }, [currency, locale, currencyRates]);
+    const value = useMemo(() => ({ getTextPrice }), [getTextPrice]);
+    return jsx(ConvertMoneyContext.Provider, { value: value, children: children });
+};
+const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
+
+const LINE_SERIES_COLORS = {
+    comparison: SERIES_COLORS.comparison,
+    single: SERIES_COLORS.current,
+    all: [...SERIES_COLORS.all],
+};
+const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesColors = LINE_SERIES_COLORS, }) => {
+    return (jsxs(Fragment, { children: [jsx("link", { rel: "stylesheet", href: chartStyle }), jsx(PolarisVizProvider, { themes: {
+                    Light: {
+                        chartContainer: {
+                            minHeight,
+                        },
+                        grid: {
+                            horizontalOverflow: true,
+                            verticalOverflow: true,
+                            horizontalMargin: 0,
+                        },
+                        seriesColors,
+                    },
+                }, children: children })] }));
+};
+
 const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
     const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
     if (!metricKey) {
@@ -2967,10 +2967,177 @@ var IPAMetricKey;
     IPAMetricKey["PAGE_AOV"] = "PAGE_AVERAGE_ORDER_VALUE";
     IPAMetricKey["PAGE_VISITORS"] = "PAGE_VISITORS";
 })(IPAMetricKey || (IPAMetricKey = {}));
+var IMetricFormatter;
+(function (IMetricFormatter) {
+    IMetricFormatter["PERCENTAGE_STRING"] = "PERCENTAGE_STRING";
+    IMetricFormatter["CURRENCY"] = "CURRENCY";
+    IMetricFormatter["DURATION"] = "DURATION";
+    IMetricFormatter["DURATION_MS"] = "DURATION_MS";
+    IMetricFormatter["MILLISECONDS"] = "MILLISECONDS";
+    IMetricFormatter["NORMAL"] = "NORMAL";
+    IMetricFormatter["NUMBER_COMMAS"] = "NUMBER_COMMAS";
+    IMetricFormatter["NUMBER_COMMAS_LEAN"] = "NUMBER_COMMAS_LEAN";
+})(IMetricFormatter || (IMetricFormatter = {}));
+
+const formatMetricByFormatter = ({ value, formatter, getTextPrice, compact }) => {
+    const dataValue = value ?? 0;
+    switch (formatter) {
+        case IMetricFormatter.PERCENTAGE_STRING: {
+            if (typeof dataValue !== 'number')
+                return calcPercentageString(0, 1, 2) ?? '';
+            return calcPercentageString(dataValue, 1, 2) ?? '';
+        }
+        case IMetricFormatter.NUMBER_COMMAS:
+        case IMetricFormatter.NUMBER_COMMAS_LEAN:
+        case IMetricFormatter.NORMAL: {
+            if (compact && typeof dataValue === 'number' && Math.abs(dataValue) >= 1_000) {
+                return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(dataValue);
+            }
+            return numberWithCommas(dataValue.toString());
+        }
+        case IMetricFormatter.DURATION: {
+            return getTimeDurationLabel(Number(dataValue));
+        }
+        case IMetricFormatter.DURATION_MS:
+        case IMetricFormatter.MILLISECONDS: {
+            return getTimeDurationLabel(Number(dataValue) / 1000);
+        }
+        case IMetricFormatter.CURRENCY: {
+            return getTextPrice(dataValue, false, compact ? { compact } : undefined);
+        }
+        default:
+            return `${dataValue}`;
+    }
+};
 
-const formatMetricByFormatter = (_params) => '';
-const PA_METRIC_TOOLTIP = {};
+const getPAMetricValueV2 = (metric, key) => {
+    if (!metric || !key || !(key in PAGE_ANALYTIC_MAPPING))
+        return { value: 0, formatter: IMetricFormatter.NORMAL };
+    return PAGE_ANALYTIC_MAPPING[key].getMetricValue({ metric });
+};
 
+const detectDataV2By = ({ data, formatter, extractValue, }) => {
+    const valueEmpty = { formatter, value: 0 };
+    if (!data)
+        return valueEmpty;
+    const value = extractValue(data);
+    if (typeof value === 'undefined')
+        return valueEmpty;
+    return { value, formatter };
+};
+const toNumber = (value) => value ?? 0;
+const divideRatio = (part, total) => {
+    const numerator = toNumber(part);
+    const denominator = toNumber(total);
+    const ratio = numerator > 0 && denominator > 0 ? numerator / denominator : 0;
+    return ratio ? ratio : undefined;
+};
+const getTotalSessionMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessions ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalVisitorMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalVisitors ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalOrderMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalOrders ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalPageViewMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalPageViewed ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalRevenueMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalRevenue ?? undefined,
+    formatter: IMetricFormatter.CURRENCY,
+});
+const getBounceRateMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalSessionsWithoutAction, value?.totalSessions),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+});
+const getLinkCtrMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalClickedHasHref, value?.totalPageViewed),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+});
+const getConversionRateMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalSessionsThatCompletedCheckout, value?.totalSessions),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+});
+const getAddToCartRateMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => divideRatio(value?.totalSessionsWithCartAdditions, value?.totalSessions),
+    formatter: IMetricFormatter.PERCENTAGE_STRING,
+});
+const getAverageTimeOnPageMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => {
+        const averageTimeOnPage = divideRatio(value?.totalTimeOnPage, value?.totalPageViewedHaveTimeOnPage);
+        return averageTimeOnPage ? Number(averageTimeOnPage.toFixed(2)) : undefined;
+    },
+    formatter: IMetricFormatter.DURATION,
+});
+const getRevenuePerVisitorMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => {
+        const revenuePerVisitor = divideRatio(value?.totalRevenue, value?.totalVisitors);
+        return revenuePerVisitor ? Number(revenuePerVisitor.toFixed(2)) : undefined;
+    },
+    formatter: IMetricFormatter.CURRENCY,
+});
+const getAverageOrderValueMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => {
+        const averageOrderValue = divideRatio(value?.totalRevenue, value?.totalOrders);
+        return averageOrderValue ? Number(averageOrderValue.toFixed(2)) : undefined;
+    },
+    formatter: IMetricFormatter.CURRENCY,
+});
+const getTotalATCMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalAddedToCart ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalSessionWithCartAdditionMetric$1 = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessionsWithCartAdditions ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalSessionReachedCheckoutMetric$1 = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessionsThatReachedCheckout ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalSessionCompletedCheckoutMetric$1 = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: (value) => value?.totalSessionsThatCompletedCheckout ?? undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getPathAnalysisMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: () => undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getTotalSessionByDeviceMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: () => undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+const getNewReturningCustomerMetric = ({ metric }) => detectDataV2By({
+    data: metric,
+    extractValue: () => undefined,
+    formatter: IMetricFormatter.NORMAL,
+});
+
+const PA_METRIC_TOOLTIP = {};
 const METRICS_COLUMNS = {
     [IPAMetricKey.PAGE_SESSIONS]: { label: 'Sessions' },
     [IPAMetricKey.PAGE_BR]: { label: 'Bounce rate' },
@@ -2994,7 +3161,72 @@ const METRICS_COLUMNS = {
     [IPAMetricKey.PAGE_SESSIONS_BY_DEVICE]: { label: 'Sessions by device type' },
     [IPAMetricKey.PAGE_NEW_RETURNING_CUSTOMER]: { label: 'New vs returning visitors' },
 };
-const PAGE_ANALYTIC_MAPPING = Object.fromEntries(Object.values(IPAMetricKey).map((key) => [key, { heading: { title: METRICS_COLUMNS[key].label } }]));
+const getHeading = (key) => ({ title: METRICS_COLUMNS[key].label });
+const PAGE_ANALYTIC_MAPPING = {
+    [IPAMetricKey.PAGE_SESSIONS]: {
+        getMetricValue: getTotalSessionMetric,
+        heading: getHeading(IPAMetricKey.PAGE_SESSIONS),
+    },
+    [IPAMetricKey.PAGE_BR]: { getMetricValue: getBounceRateMetric, heading: getHeading(IPAMetricKey.PAGE_BR) },
+    [IPAMetricKey.PAGE_CTR]: { getMetricValue: getLinkCtrMetric, heading: getHeading(IPAMetricKey.PAGE_CTR) },
+    [IPAMetricKey.PAGE_CR]: { getMetricValue: getConversionRateMetric, heading: getHeading(IPAMetricKey.PAGE_CR) },
+    [IPAMetricKey.PAGE_VISITORS]: {
+        getMetricValue: getTotalVisitorMetric,
+        heading: getHeading(IPAMetricKey.PAGE_VISITORS),
+    },
+    [IPAMetricKey.PAGE_AVG_TIME]: {
+        getMetricValue: getAverageTimeOnPageMetric,
+        heading: getHeading(IPAMetricKey.PAGE_AVG_TIME),
+    },
+    [IPAMetricKey.PAGE_VIEWS]: { getMetricValue: getTotalPageViewMetric, heading: getHeading(IPAMetricKey.PAGE_VIEWS) },
+    [IPAMetricKey.PAGE_REVENUE]: {
+        getMetricValue: getTotalRevenueMetric,
+        heading: getHeading(IPAMetricKey.PAGE_REVENUE),
+    },
+    [IPAMetricKey.PAGE_ADDED_TO_CART]: {
+        getMetricValue: getTotalATCMetric,
+        heading: getHeading(IPAMetricKey.PAGE_ADDED_TO_CART),
+    },
+    [IPAMetricKey.PAGE_REACHED_CHECKOUT]: {
+        getMetricValue: getTotalSessionReachedCheckoutMetric$1,
+        heading: getHeading(IPAMetricKey.PAGE_REACHED_CHECKOUT),
+    },
+    [IPAMetricKey.PAGE_COMPLETE_CHECKOUT]: {
+        getMetricValue: getTotalSessionCompletedCheckoutMetric$1,
+        heading: getHeading(IPAMetricKey.PAGE_COMPLETE_CHECKOUT),
+    },
+    [IPAMetricKey.PAGE_RPV]: { getMetricValue: getRevenuePerVisitorMetric, heading: getHeading(IPAMetricKey.PAGE_RPV) },
+    [IPAMetricKey.PAGE_CART_ADDITION]: {
+        getMetricValue: getTotalSessionWithCartAdditionMetric$1,
+        heading: getHeading(IPAMetricKey.PAGE_CART_ADDITION),
+    },
+    [IPAMetricKey.PAGE_ADD_TO_CART_RATE]: {
+        getMetricValue: getAddToCartRateMetric,
+        heading: getHeading(IPAMetricKey.PAGE_ADD_TO_CART_RATE),
+    },
+    [IPAMetricKey.PAGE_ORDERS]: { getMetricValue: getTotalOrderMetric, heading: getHeading(IPAMetricKey.PAGE_ORDERS) },
+    [IPAMetricKey.PAGE_AOV]: { getMetricValue: getAverageOrderValueMetric, heading: getHeading(IPAMetricKey.PAGE_AOV) },
+    [IPAMetricKey.PAGE_SESSIONS_BY_VISITOR]: {
+        getMetricValue: getTotalVisitorMetric,
+        heading: getHeading(IPAMetricKey.PAGE_SESSIONS_BY_VISITOR),
+    },
+    [IPAMetricKey.PAGE_SESSIONS_BY_TRAFFIC]: {
+        getMetricValue: getTotalSessionMetric,
+        heading: getHeading(IPAMetricKey.PAGE_SESSIONS_BY_TRAFFIC),
+    },
+    [IPAMetricKey.PAGE_PATH_ANALYSIS]: {
+        getMetricValue: getPathAnalysisMetric,
+        heading: getHeading(IPAMetricKey.PAGE_PATH_ANALYSIS),
+    },
+    [IPAMetricKey.PAGE_SESSIONS_BY_DEVICE]: {
+        getMetricValue: getTotalSessionByDeviceMetric,
+        heading: getHeading(IPAMetricKey.PAGE_SESSIONS_BY_DEVICE),
+    },
+    [IPAMetricKey.PAGE_NEW_RETURNING_CUSTOMER]: {
+        getMetricValue: getNewReturningCustomerMetric,
+        heading: getHeading(IPAMetricKey.PAGE_NEW_RETURNING_CUSTOMER),
+    },
+};
 
 const removeDuplicates = (data, keys) => {
     if (!Array.isArray(data))
@@ -3063,7 +3295,7 @@ const getFunnelChartTooltip = (data) => {
     const { page, getTextPrice } = data;
     if (!page)
         return [];
-    page.metric;
+    const metric = page.metric;
     const totalContinuationSession = numberWithCommas((page.metric?.totalContinuationSession || 0).toString());
     const baseInfo = [
         {
@@ -3079,9 +3311,14 @@ const getFunnelChartTooltip = (data) => {
             };
         }
         const metricKey = key;
+        const value = getPAMetricValueV2(metric, metricKey);
         return {
             key: PAGE_ANALYTIC_MAPPING[metricKey].heading.title,
-            value: formatMetricByFormatter(),
+            value: formatMetricByFormatter({
+                value: value.value,
+                formatter: value.formatter,
+                getTextPrice,
+            }),
         };
     });
     return baseInfo.concat(metricInfo);
@@ -23635,16 +23872,12 @@ const MOCK_DATA_PATH_ANALYSIS = [
     },
 ];
 
-const useConvertMoneyByCurrency = () => ({
-    getTextPrice: () => '',
-});
-
 const FUNNEL_NAME = 'Conversion';
 // Checkout pages don't support heatmap viewing
 const NON_HEATMAP_PAGE_TYPES = new Set([TemplateType.CHECKOUT]);
 const usePathAnalysisChart = () => {
     const { t } = useTranslation();
-    const { getTextPrice } = useConvertMoneyByCurrency();
+    const { getTextPrice } = useConvertMoneyContext();
     const { heatmap } = usePathAnalysisConfig();
     const { shopifyPageType, pageWithMetric, nextLevelPages, dynamicLevels, previousPathAnalyticsMap, handleAddNextLevel, handleChangeLevel, getPagesByParentID, handleDeleteLevel, } = usePathAnalysisContext();
     const orderedPages = useMemo(() => [pageWithMetric, ...dynamicLevels].filter(Boolean), [pageWithMetric, dynamicLevels]);