@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/components/CardPathAnalysis/components/PathAnalysisChart.tsx

@@ -0,0 +1,55 @@
+import type { IFunnelChartColors } from '@/shared/charts';
+
+import { GChartProvider, GFunnelChart } from '@/shared/charts';
+import { BlockStack } from '@shopify/polaris';
+import { useMemo } from 'react';
+import { FINAL_FUNNEL_FIXED_LEVEL } from '../configs';
+import { MOCK_DATA_PATH_ANALYSIS } from '../constants';
+import { usePathAnalysisChart } from '../hooks/usePathAnalysisChart';
+
+interface PathAnalysisChartProps {
+  funnelColors?: IFunnelChartColors;
+  isEnabled?: boolean;
+}
+
+export const PathAnalysisChart: React.FC<PathAnalysisChartProps> = ({ funnelColors, isEnabled }) => {
+  const {
+    lengthDisplayedLevels,
+    listFunnelSelection,
+    isDisabledAddICon,
+    hideAddIcon,
+    funnelData,
+    getListFunnelByID,
+    onAddNextFunnel,
+    onChangeFunnel,
+  } = usePathAnalysisChart();
+
+  const dataSeries = useMemo(() => {
+    if (!isEnabled) return MOCK_DATA_PATH_ANALYSIS;
+
+    return funnelData;
+  }, [funnelData, isEnabled]);
+
+  return (
+    <BlockStack gap="400">
+      <GChartProvider minHeight={400} seriesColors={{ single: '#2C7DFF' }}>
+        <BlockStack gap="200">
+          <GFunnelChart
+            dataSeries={dataSeries}
+            funnelColors={funnelColors}
+            actionProps={{
+              fixedLevel: FINAL_FUNNEL_FIXED_LEVEL,
+              lengthDisplayedLevels,
+              listFunnelSelection,
+              isDisabledAddICon,
+              hideAddIcon,
+              getListFunnelByID,
+              onAddNextFunnel,
+              onChangeFunnel,
+            }}
+          />
+        </BlockStack>
+      </GChartProvider>
+    </BlockStack>
+  );
+};

package/src/components/CardPathAnalysis/components/index.ts

@@ -0,0 +1 @@
+export * from './CardPathAnalysis';

package/src/components/CardPathAnalysis/configs/index.ts

@@ -0,0 +1,2 @@
+export const MAX_FUNNEL_ADDITIONAL_LEVEL = 3;
+export const FINAL_FUNNEL_FIXED_LEVEL = 3;

package/src/components/CardPathAnalysis/constants/index.ts

@@ -0,0 +1 @@
+export * from './path-analysis';

package/src/components/CardPathAnalysis/constants/path-analysis.ts

@@ -0,0 +1,162 @@
+export const FUNNEL_POPOVER_KEY = {
+  LEVEL_1: 'LEVEL_1',
+  LEVEL_2: 'LEVEL_2',
+  LEVEL_3: 'LEVEL_3',
+  LEVEL_4: 'LEVEL_4',
+  LEVEL_5: 'LEVEL_5',
+  LEVEL_6: 'LEVEL_6',
+  LEVEL_7: 'LEVEL_7',
+  ADD_LEVEL: 'ADD_LEVEL',
+} as const;
+
+export const MOCK_DATA_PATH_ANALYSIS = [
+  {
+    data: [
+      {
+        value: 8500,
+        key: 'Home page',
+        id: '2552a8bf748314b0',
+        chartTooltip: [
+          {
+            key: 'GemX: CRO & A/B Testing',
+            value: '/en-vn',
+          },
+          {
+            key: 'Sessions',
+            value: '20',
+          },
+          {
+            key: 'Continuation sessions',
+            value: '16',
+          },
+          {
+            key: 'Visitors',
+            value: '20',
+          },
+          {
+            key: 'Bounce rate',
+            value: '20%',
+          },
+          {
+            key: 'Click-through rate',
+            value: '76.19%',
+          },
+        ],
+      },
+      {
+        value: 7000,
+        key: 'Landing page',
+        id: '2552a8bf748314b02',
+        chartTooltip: [
+          {
+            key: 'GemX: CRO & A/B Testing',
+            value: '/en-vn/products/1',
+          },
+          {
+            key: 'Sessions',
+            value: '10',
+          },
+          {
+            key: 'Continuation sessions',
+            value: '16',
+          },
+          {
+            key: 'Visitors',
+            value: '20',
+          },
+          {
+            key: 'Bounce rate',
+            value: '20%',
+          },
+          {
+            key: 'Click-through rate',
+            value: '76.19%',
+          },
+        ],
+      },
+      {
+        value: 4800,
+        key: 'Added to cart',
+        labelTooltip: {
+          title: 'Sessions with cart additions',
+          content: 'Sessions in your online store in which a visitor added item to the cart',
+        },
+      },
+      {
+        value: 2900,
+        key: 'Reached checkout',
+        labelTooltip: {
+          title: 'Sessions that reached checkout',
+          content: 'Sessions in your online store in which the checkout page was reached',
+        },
+      },
+      {
+        value: 1100,
+        key: 'Completed checkout',
+        labelTooltip: {
+          title: 'Sessions that completed checkout',
+          content: 'Sessions in your online store in which a purchase was completed',
+        },
+      },
+    ],
+    name: 'Conversion',
+    metadata: {
+      trends: {
+        '0': {
+          value: '33.33%',
+          trend: 'negative',
+          direction: 'downward',
+        },
+        '1': {
+          value: '46.15%',
+          trend: 'positive',
+          direction: 'upward',
+        },
+        '2': {
+          value: '46.15%',
+          trend: 'positive',
+          direction: 'upward',
+        },
+        '3': {
+          value: '46.15%',
+          trend: 'positive',
+          direction: 'upward',
+        },
+      },
+    },
+  },
+  {
+    name: 'Conversion',
+    data: [
+      {
+        value: 1350,
+        key: 'Home page',
+      },
+      {
+        value: 1253,
+        key: 'Added to cart',
+        labelTooltip: {
+          title: 'Sessions with cart additions',
+          content: 'Sessions in your online store in which a visitor added item to the cart',
+        },
+      },
+      {
+        value: 1103,
+        key: 'Reached checkout',
+        labelTooltip: {
+          title: 'Sessions that reached checkout',
+          content: 'Sessions in your online store in which the checkout page was reached',
+        },
+      },
+      {
+        value: 400,
+        key: 'Completed checkout',
+        labelTooltip: {
+          title: 'Sessions that completed checkout',
+          content: 'Sessions in your online store in which a purchase was completed',
+        },
+      },
+    ],
+    isComparison: true,
+  },
+];

package/src/components/CardPathAnalysis/contexts/PathAnalysisConfigProvider.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import type { IBasePathAnalyticPageWithChild } from '../types';
+
+import { createContext, useContext, useMemo } from 'react';
+
+export interface IPathAnalysisPricingConfig {
+  isLoading: boolean;
+  isPathAnalysisEnabled: boolean;
+  onOpenModalPricing: () => void;
+}
+
+export interface IPathAnalysisHeatmapConfig {
+  isEnabledV1: boolean;
+  isEnabledV2: boolean;
+  onView: (level: number, pages: IBasePathAnalyticPageWithChild[]) => void;
+}
+
+export interface IPathAnalysisConfig {
+  pricing: IPathAnalysisPricingConfig;
+  heatmap: IPathAnalysisHeatmapConfig;
+  /**
+   * When enabled, the funnel auto-expands every level along the dominant path
+   * (first level → highest-traffic child → ... up to MAX_FUNNEL_ADDITIONAL_LEVEL,
+   * stopping early when a level has no further paths) and the "+" add button is hidden.
+   */
+  autoExpandLevels?: boolean;
+}
+
+const DEFAULT_CONFIG: IPathAnalysisConfig = {
+  pricing: {
+    isLoading: false,
+    isPathAnalysisEnabled: false,
+    onOpenModalPricing: () => {},
+  },
+  heatmap: {
+    isEnabledV1: false,
+    isEnabledV2: false,
+    onView: () => {},
+  },
+  autoExpandLevels: false,
+};
+
+const PathAnalysisConfigContext = createContext<IPathAnalysisConfig>(DEFAULT_CONFIG);
+
+export interface IPathAnalysisConfigProviderProps {
+  children: ReactNode;
+  pricing: IPathAnalysisPricingConfig;
+  heatmap: IPathAnalysisHeatmapConfig;
+  autoExpandLevels?: boolean;
+}
+
+export const PathAnalysisConfigProvider = ({
+  children,
+  pricing,
+  heatmap,
+  autoExpandLevels,
+}: IPathAnalysisConfigProviderProps) => {
+  const value = useMemo<IPathAnalysisConfig>(
+    () => ({ pricing, heatmap, autoExpandLevels }),
+    [pricing, heatmap, autoExpandLevels],
+  );
+
+  return <PathAnalysisConfigContext.Provider value={value}>{children}</PathAnalysisConfigContext.Provider>;
+};
+
+export const usePathAnalysisConfig = (): IPathAnalysisConfig => useContext(PathAnalysisConfigContext);

package/src/components/CardPathAnalysis/contexts/PathAnalysisProvider.tsx

@@ -0,0 +1,130 @@
+import type { OnChangeFunnelType } from '@/shared/charts';
+import type { EAnalyticMode } from '@/types';
+import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
+
+import { createContext, useContext } from 'react';
+import { usePathAnalysisFunnel } from '../hooks/usePathAnalysisFunnel';
+import { usePathAnalyticsMerger } from '../hooks/usePathAnalyticsMerger';
+import { usePathAnalysisConfig } from './PathAnalysisConfigProvider';
+
+export interface IPathAnalysisFirstLevel {
+  id: string;
+  locationPath: string;
+  pageTitle: string;
+  pageType: string;
+  parentID: string;
+  level: number;
+  metric: {
+    totalSessions: number;
+  };
+}
+
+export interface ICampaignPathsData {
+  paths?: IPathAnalysisFirstLevel[];
+  isLoading?: boolean;
+}
+
+export interface IAnalyticsData {
+  pathAnalytics?: IBasePathAnalyticPageWithParent[];
+  previousPathAnalyticsMap?: Record<string, IBasePathAnalyticPageWithParent>;
+  isLoading?: boolean;
+  locationPath?: string;
+  shopifyPageType?: string;
+}
+
+export interface PathAnalysisType {
+  mode: EAnalyticMode;
+  campaignID?: string;
+  campaignGroupID?: string;
+  campaignVariantID?: string;
+  campaignVersionID?: string;
+  pathAnalytics?: IBasePathAnalyticPageWithParent[];
+  isLoadingMetric: boolean;
+  shopifyPageType?: string;
+  pageWithMetric: IBasePathAnalyticPageWithChild | undefined;
+  dynamicLevels: IBasePathAnalyticPageWithChild[];
+  nextLevelPages: IBasePathAnalyticPageWithChild[];
+  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithParent>;
+  handleAddNextLevel: (childId: string) => void;
+  handleChangeLevel: OnChangeFunnelType;
+  getPagesByParentID: (data: { level?: number; parentID?: string }) => IBasePathAnalyticPageWithChild[];
+  handleDeleteLevel: (id?: string) => void;
+}
+
+export interface PathAnalysisProviderProps {
+  children: React.ReactNode;
+  campaignID?: string;
+  campaignGroupID?: string;
+  campaignVariantID?: string;
+  campaignVersionID?: string;
+  mode: EAnalyticMode;
+  campaignPathsData?: ICampaignPathsData;
+  analyticsData?: IAnalyticsData;
+}
+
+export const PathAnalysisContext = createContext<PathAnalysisType | undefined>(undefined);
+
+export const PathAnalysisProvider = (props: PathAnalysisProviderProps) => {
+  const {
+    children,
+    campaignID,
+    campaignGroupID,
+    campaignVariantID,
+    campaignVersionID,
+    mode,
+    campaignPathsData,
+    analyticsData,
+  } = props;
+
+  const dataFirstLevels = campaignPathsData?.paths;
+  const isFetchingFirstLevelPaths = campaignPathsData?.isLoading ?? false;
+
+  const pathAnalytics = analyticsData?.pathAnalytics ?? [];
+  const previousPathAnalyticsMap = analyticsData?.previousPathAnalyticsMap ?? {};
+  const isLoadingMetric = analyticsData?.isLoading ?? false;
+  const locationPath = analyticsData?.locationPath;
+  const shopifyPageType = analyticsData?.shopifyPageType;
+
+  const pathAnalysisCacheKey = JSON.stringify({ mode, campaignVariantID, campaignVersionID });
+
+  const { autoExpandLevels } = usePathAnalysisConfig();
+
+  const { processedPathAnalytics } = usePathAnalyticsMerger({ pathAnalytics, dataFirstLevels });
+
+  const pathAnalysisFunnelData = usePathAnalysisFunnel({
+    pathAnalytics: processedPathAnalytics,
+    pathAnalysisCacheKey,
+    dataFirstLevels,
+    locationPath,
+    autoExpandLevels,
+  });
+
+  const isLoading = isLoadingMetric || isFetchingFirstLevelPaths;
+
+  return (
+    <PathAnalysisContext.Provider
+      value={{
+        mode,
+        campaignID,
+        campaignGroupID,
+        campaignVariantID,
+        campaignVersionID,
+        shopifyPageType,
+        pathAnalytics: processedPathAnalytics,
+        previousPathAnalyticsMap,
+        isLoadingMetric: isLoading,
+        ...pathAnalysisFunnelData,
+      }}
+    >
+      {children}
+    </PathAnalysisContext.Provider>
+  );
+};
+
+export const usePathAnalysisContext = () => {
+  const context = useContext(PathAnalysisContext);
+  if (!context) {
+    throw new Error('usePathAnalysisContext must be used within a PathAnalysisProvider');
+  }
+  return context;
+};

package/src/components/CardPathAnalysis/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './PathAnalysisConfigProvider';
+export * from './PathAnalysisProvider';

package/src/components/CardPathAnalysis/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './pathAnalysis';
+export * from './pathAnalysisChart';

package/src/components/CardPathAnalysis/helpers/metricHelpers.ts

@@ -0,0 +1,13 @@
+import type { IBasePageAnalyticMetric } from '@/types/metric';
+
+export const getTotalSessionWithCartAdditionMetric = ({ metric }: { metric?: IBasePageAnalyticMetric }) => ({
+  value: metric?.totalSessionsWithCartAdditions ?? undefined,
+});
+
+export const getTotalSessionReachedCheckoutMetric = ({ metric }: { metric?: IBasePageAnalyticMetric }) => ({
+  value: metric?.totalSessionsThatReachedCheckout ?? undefined,
+});
+
+export const getTotalSessionCompletedCheckoutMetric = ({ metric }: { metric?: IBasePageAnalyticMetric }) => ({
+  value: metric?.totalSessionsThatCompletedCheckout ?? undefined,
+});

package/src/components/CardPathAnalysis/helpers/pathAnalysis.ts

@@ -0,0 +1,96 @@
+import type { IGetTextPrice } from '@/core/gemxql';
+import type { IBasePageAnalyticMetric } from '@/types/metric';
+import type { TemplateType } from '@/types/template';
+import type { IBasePathAnalyticPageWithChild, IBasePathAnalyticPageWithParent } from '../types';
+
+import { formatMetricByFormatter, getPAMetricValueV2, PAGE_ANALYTIC_MAPPING } from '@/modules/analytics';
+import { IPAMetricKey } from '@/modules/analytics/types';
+import { numberWithCommas, parseTemplateType } from '@/utils';
+
+import { buildTree, removeDuplicates } from './treeUtils';
+
+export const processPathAnalytics = (
+  analyticsData: IBasePathAnalyticPageWithParent[] | undefined,
+  locationPath: string,
+): IBasePathAnalyticPageWithChild | undefined => {
+  if (!analyticsData) return undefined;
+
+  const dataTree = processPathAnalyticsTree(analyticsData);
+  return dataTree?.find((item) => item.id === locationPath);
+};
+
+export const processPathAnalyticsTree = (
+  analyticsData: IBasePathAnalyticPageWithParent[] | undefined,
+): IBasePathAnalyticPageWithChild[] | undefined => {
+  if (!analyticsData) return undefined;
+
+  const uniqueData = removeDuplicates(analyticsData, ['id', 'parentID', 'level', 'locationPath']);
+
+  const updateData = uniqueData.map((item) => ({
+    ...item,
+    metric: item?.metric,
+  })) as IBasePathAnalyticPageWithParent[];
+
+  const dataTree = buildTree<IBasePathAnalyticPageWithChild>(updateData);
+
+  return dataTree;
+};
+
+export const getFunnelChildrenPages = (
+  page: IBasePathAnalyticPageWithChild | undefined,
+): IBasePathAnalyticPageWithChild[] => {
+  if (!page || !page.children) {
+    return [];
+  }
+  return page.children
+    .filter((child) => child.id)
+    .map((child) => ({
+      ...child,
+      children: getFunnelChildrenPages(child),
+    }));
+};
+
+export const getFunnelChartTooltip = (data: { page?: IBasePathAnalyticPageWithChild; getTextPrice: IGetTextPrice }) => {
+  const CONTINUATION_SESSIONS_KEY = 'CONTINUATION_SESSIONS_KEY';
+  const keys = [
+    IPAMetricKey.PAGE_SESSIONS,
+    CONTINUATION_SESSIONS_KEY,
+    IPAMetricKey.PAGE_VISITORS,
+    IPAMetricKey.PAGE_BR,
+    IPAMetricKey.PAGE_CTR,
+  ];
+  const { page, getTextPrice } = data;
+
+  if (!page) return [];
+  const metric = page.metric as IBasePageAnalyticMetric;
+  const totalContinuationSession = numberWithCommas((page.metric?.totalContinuationSession || 0).toString());
+
+  const baseInfo = [
+    {
+      key: page.pageTitle || parseTemplateType(page.pageType as TemplateType),
+      value: page.locationPath as string,
+    },
+  ];
+
+  const metricInfo = keys.map((key) => {
+    if (key === CONTINUATION_SESSIONS_KEY) {
+      return {
+        key: 'Continuation sessions',
+        value: totalContinuationSession,
+      };
+    }
+
+    const metricKey = key as IPAMetricKey;
+    const value = getPAMetricValueV2(metric, metricKey);
+    return {
+      key: PAGE_ANALYTIC_MAPPING[metricKey].heading.title as string,
+      value: formatMetricByFormatter({
+        value: value.value,
+        formatter: value.formatter,
+        getTextPrice,
+      }),
+    };
+  });
+
+  return baseInfo.concat(metricInfo);
+};

package/src/components/CardPathAnalysis/helpers/pathAnalysisChart.ts

@@ -0,0 +1,128 @@
+import type { IBasePageAnalyticMetric } from '@/types/metric';
+import type { TrendIndicatorProps } from '@shopify/polaris-viz';
+import type { IBasePathAnalyticPageWithChild } from '../types';
+
+import {
+  getTotalSessionCompletedCheckoutMetric,
+  getTotalSessionReachedCheckoutMetric,
+  getTotalSessionWithCartAdditionMetric,
+} from './metricHelpers';
+import { formatPercentage } from '@/utils';
+export const calculateFunnelTrendChange = ({
+  currentValue,
+  previousValue,
+}: {
+  currentValue?: number;
+  previousValue?: number;
+}): TrendIndicatorProps => {
+  const shouldSkipComparison =
+    typeof currentValue !== 'number' || typeof previousValue !== 'number' || previousValue === 0;
+
+  if (shouldSkipComparison) return {};
+
+  const changePercentage = ((currentValue - previousValue) / previousValue) * 100;
+  const formattedChange = formatPercentage(Math.abs(changePercentage));
+  const trend = changePercentage > 0 ? 'positive' : changePercentage < 0 ? 'negative' : 'neutral';
+  const direction = changePercentage > 0 ? 'upward' : changePercentage < 0 ? 'downward' : undefined;
+
+  return { value: formattedChange, trend, direction };
+};
+
+export const calculateFirstLevelTrend = ({
+  pageWithMetric,
+  previousPathAnalyticsMap,
+}: {
+  pageWithMetric?: IBasePathAnalyticPageWithChild;
+  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>;
+}) => {
+  if (!pageWithMetric) return null;
+
+  const currentValue = pageWithMetric?.metric?.totalSessions ?? undefined;
+  const previousValue = previousPathAnalyticsMap[`${pageWithMetric?.id}`]?.metric?.totalSessions ?? undefined;
+
+  return calculateFunnelTrendChange({ currentValue, previousValue });
+};
+
+export const calculateDynamicLevelsTrends = (
+  dynamicLevels: IBasePathAnalyticPageWithChild[],
+  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>,
+) => {
+  const trends: Record<string, TrendIndicatorProps> = {};
+
+  dynamicLevels.forEach((level, index) => {
+    const levelPreviousData = previousPathAnalyticsMap[level.id];
+
+    const levelTrend = calculateFunnelTrendChange({
+      currentValue: level.metric?.totalSessions ?? undefined,
+      previousValue: levelPreviousData?.metric?.totalSessions ?? undefined,
+    });
+    trends[`${index + 1}`] = levelTrend;
+  });
+
+  return trends;
+};
+
+export const calculateConversionMetricsTrends = (
+  dynamicLevels: IBasePathAnalyticPageWithChild[],
+  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>,
+  pageWithMetric?: IBasePathAnalyticPageWithChild,
+) => {
+  const lastLevel = dynamicLevels[dynamicLevels.length - 1] || pageWithMetric;
+  const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel!.id];
+
+  const metric = lastLevel?.metric as IBasePageAnalyticMetric;
+  const previousMetric = lastLevelPreviousData?.metric as IBasePageAnalyticMetric;
+  const totalAddedToCart = getTotalSessionWithCartAdditionMetric({ metric }).value ?? 0;
+  const totalReachedCheckout = getTotalSessionReachedCheckoutMetric({ metric }).value ?? 0;
+  const totalCompletedCheckout = getTotalSessionCompletedCheckoutMetric({ metric }).value ?? 0;
+
+  const totalAddedToCartPrevious = getTotalSessionWithCartAdditionMetric({ metric: previousMetric }).value ?? 0;
+  const totalReachedCheckoutPrevious = getTotalSessionReachedCheckoutMetric({ metric: previousMetric }).value ?? 0;
+  const totalCompletedCheckoutPrevious = getTotalSessionCompletedCheckoutMetric({ metric: previousMetric }).value ?? 0;
+
+  const trends: Record<string, TrendIndicatorProps> = {};
+  const conversionLevelIndex = dynamicLevels.length + 1;
+
+  const cartTrend = calculateFunnelTrendChange({
+    currentValue: Number(totalAddedToCart ?? 0),
+    previousValue: Number(totalAddedToCartPrevious ?? 0),
+  });
+  const checkoutTrend = calculateFunnelTrendChange({
+    currentValue: Number(totalReachedCheckout ?? 0),
+    previousValue: Number(totalReachedCheckoutPrevious ?? 0),
+  });
+  const completedTrend = calculateFunnelTrendChange({
+    currentValue: Number(totalCompletedCheckout ?? 0),
+    previousValue: Number(totalCompletedCheckoutPrevious ?? 0),
+  });
+
+  trends[`${conversionLevelIndex}`] = cartTrend;
+  trends[`${conversionLevelIndex + 1}`] = checkoutTrend;
+  trends[`${conversionLevelIndex + 2}`] = completedTrend;
+
+  return trends;
+};
+
+export const calculateConversionFunnelTrends = ({
+  pageWithMetric,
+  previousPathAnalyticsMap,
+  dynamicLevels,
+}: {
+  pageWithMetric?: IBasePathAnalyticPageWithChild;
+  previousPathAnalyticsMap: Record<string, IBasePathAnalyticPageWithChild>;
+  dynamicLevels: IBasePathAnalyticPageWithChild[];
+}) => {
+  const firstLevelTrend = calculateFirstLevelTrend({
+    pageWithMetric,
+    previousPathAnalyticsMap,
+  });
+  if (!firstLevelTrend) return {};
+
+  const trends: Record<string, TrendIndicatorProps> = {
+    '0': firstLevelTrend,
+    ...calculateDynamicLevelsTrends(dynamicLevels, previousPathAnalyticsMap),
+    ...calculateConversionMetricsTrends(dynamicLevels, previousPathAnalyticsMap, pageWithMetric),
+  };
+
+  return trends;
+};