@levi-gemcommerce/analytics 0.0.1-dev.7 → 0.0.1-dev.8

package/dist/esm/index.js

@@ -1,8 +1,13 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@tanstack/react-query';
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import React, { useMemo, forwardRef, useState, useRef, useImperativeHandle, useEffect } from 'react';
 import { SkeletonDisplayText, Box, Popover, InlineStack, BlockStack, Text, List, Card, SkeletonBodyText, Icon } from '@shopify/polaris';
-import React, { useMemo, forwardRef, useState, useRef, useImperativeHandle } from 'react';
-import { PolarisVizProvider, LineChart } from '@shopify/polaris-viz';
+import { PolarisVizProvider, LineChart, DonutChart } from '@shopify/polaris-viz';
 
 var EMetricKey;
 (function (EMetricKey) {
@@ -22,6 +27,9 @@ var EMetricKey;
     EMetricKey["AOV"] = "aov";
     EMetricKey["REVENUE"] = "revenue";
     EMetricKey["RPV"] = "revenue_per_visitor";
+    EMetricKey["VISITOR_ITEMS"] = "visitor_items";
+    EMetricKey["DEVICE_ITEMS"] = "device_items";
+    EMetricKey["TRAFFIC_SOURCE_ITEMS"] = "traffic_source_items";
 })(EMetricKey || (EMetricKey = {}));
 
 const ANALYTICS_METRIC_TOOLTIP = {
@@ -97,8 +105,524 @@ const ANALYTICS_METRIC_TOOLTIP = {
         title: 'Sessions with cart additions',
         content: 'Sessions in your online store in which a visitor added item to the cart',
     },
+    [EMetricKey.VISITOR_ITEMS]: {
+        title: 'Sessions by visitor type',
+        content: '<p>Numbers of new and returning visitors</p>',
+        contentList: [
+            'New visitor: who accesses your store for the first time after GemX installation',
+            'Returning visitor: who comes back to your store after GemX installation',
+        ],
+    },
+    [EMetricKey.DEVICE_ITEMS]: {
+        title: 'Sessions by device type',
+        content: `Sessions in your online store by the visitor's device type`,
+    },
+    [EMetricKey.TRAFFIC_SOURCE_ITEMS]: {
+        title: 'Sessions by traffic source',
+        content: 'Sessions on your page by where visitors come from',
+    },
+};
+
+const NONE_VALUE = 'None';
+const PLACEHOLDER_VALUE$1 = '-';
+
+const TOTALS_SUFFIX = '___totals';
+const COMPARE_PREFIX = 'comparison___';
+const COMPARE_SUFFIX = '___previous_period';
+const COMPARE_TOTALS_SUFFIX = `${COMPARE_SUFFIX}${TOTALS_SUFFIX}`;
+
+const OPERATOR_IS = 'is';
+
+var EAnalyticDataType;
+(function (EAnalyticDataType) {
+    EAnalyticDataType["DATE"] = "DATE";
+    EAnalyticDataType["ARRAY"] = "ARRAY";
+    EAnalyticDataType["OBJECT"] = "OBJECT";
+    EAnalyticDataType["STRING"] = "STRING";
+    EAnalyticDataType["INTEGER"] = "INTEGER";
+    EAnalyticDataType["CURRENCY"] = "CURRENCY";
+    EAnalyticDataType["PERCENT"] = "PERCENT";
+    EAnalyticDataType["DURATION"] = "DURATION";
+    EAnalyticDataType["MONTH"] = "MONTH_TIMESTAMP";
+    EAnalyticDataType["QUARTER"] = "QUARTER_TIMESTAMP";
+    EAnalyticDataType["DAY"] = "DAY_TIMESTAMP";
+    EAnalyticDataType["WEEK"] = "WEEK_TIMESTAMP";
+    EAnalyticDataType["YEAR"] = "YEAR_TIMESTAMP";
+    EAnalyticDataType["HOUR"] = "HOUR_TIMESTAMP";
+})(EAnalyticDataType || (EAnalyticDataType = {}));
+var EAnalyticColumnKey;
+(function (EAnalyticColumnKey) {
+    EAnalyticColumnKey["CAMPAIGNS"] = "experiments";
+    EAnalyticColumnKey["VISITOR_ITEMS"] = "visitor_items";
+    EAnalyticColumnKey["DEVICE_ITEMS"] = "device_items";
+    EAnalyticColumnKey["TRAFFIC_SOURCE_ITEMS"] = "traffic_source_items";
+})(EAnalyticColumnKey || (EAnalyticColumnKey = {}));
+
+var EAnalyticMode;
+(function (EAnalyticMode) {
+    EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
+    EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
+    EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
+})(EAnalyticMode || (EAnalyticMode = {}));
+
+var EAnalyticSource;
+(function (EAnalyticSource) {
+    EAnalyticSource["SESSIONS"] = "sessions";
+    EAnalyticSource["SALES"] = "sales";
+})(EAnalyticSource || (EAnalyticSource = {}));
+
+var EVisitorType;
+(function (EVisitorType) {
+    EVisitorType["NEW"] = "new";
+    EVisitorType["RETURNING"] = "returning";
+})(EVisitorType || (EVisitorType = {}));
+var EDeviceType;
+(function (EDeviceType) {
+    EDeviceType["DESKTOP"] = "desktop";
+    EDeviceType["MOBILE"] = "mobile";
+    EDeviceType["TABLET"] = "tablet";
+})(EDeviceType || (EDeviceType = {}));
+var ETrafficSourceType;
+(function (ETrafficSourceType) {
+    ETrafficSourceType["DIRECT"] = "direct";
+    ETrafficSourceType["EMAIL"] = "email";
+    ETrafficSourceType["REFERRAL"] = "referral";
+    ETrafficSourceType["ORGANIC_SOCIAL"] = "organic-social";
+    ETrafficSourceType["ORGANIC_SEARCH"] = "organic-search";
+    ETrafficSourceType["PAID_SOCIAL"] = "paid-social";
+    ETrafficSourceType["PAID_SEARCH"] = "paid-search";
+    ETrafficSourceType["SMS"] = "sms";
+})(ETrafficSourceType || (ETrafficSourceType = {}));
+
+var EComparisonOperator;
+(function (EComparisonOperator) {
+    EComparisonOperator["EQ"] = "=";
+    EComparisonOperator["IN"] = "IN";
+    EComparisonOperator["LIKE"] = "LIKE";
+})(EComparisonOperator || (EComparisonOperator = {}));
+var EGroupOperator;
+(function (EGroupOperator) {
+    EGroupOperator["OR"] = "OR";
+    EGroupOperator["AND"] = "AND";
+})(EGroupOperator || (EGroupOperator = {}));
+
+var EFilterField;
+(function (EFilterField) {
+    EFilterField["DEVICE"] = "device";
+    EFilterField["DEVICES"] = "devices";
+    EFilterField["VISITOR"] = "visitor_type";
+    EFilterField["VISITORS"] = "visitor_types";
+    EFilterField["TRAFFIC_SOURCE"] = "traffic_source";
+    EFilterField["TRAFFIC_SOURCES"] = "traffic_sources";
+    EFilterField["VERSION"] = "version";
+    EFilterField["VERSIONS"] = "versions";
+    EFilterField["SINGLE_PAGE"] = "page_path";
+    EFilterField["LIST_PAGE"] = "page_paths";
+    EFilterField["GROUP_CAMPAIGN_ITEM"] = "group_campaign_item";
+    EFilterField["GROUP_CAMPAIGN_ITEMS"] = "group_campaign_items";
+    EFilterField["SINGLE_CAMPAIGN"] = "experiment_id";
+    EFilterField["GROUP_CAMPAIGN"] = "experiment_group_id";
+    EFilterField["CAMPAIGN_VERSION_ID"] = "version_id";
+    EFilterField["GROUP_CAMPAIGN_VERSION_ID"] = "group_version_id";
+})(EFilterField || (EFilterField = {}));
+
+var EOperatorField;
+(function (EOperatorField) {
+    EOperatorField["DEVICE_OPERATOR"] = "deviceOperator";
+    EOperatorField["VISITOR_OPERATOR"] = "visitorOperator";
+    EOperatorField["TRAFFIC_SOURCE_OPERATOR"] = "trafficSourceOperator";
+    EOperatorField["VERSION_OPERATOR"] = "versionOperator";
+    EOperatorField["PAGE_OPERATOR"] = "pageOperator";
+    EOperatorField["CAMPAIGN_ITEM_OPERATOR"] = "campaignItemOperator";
+})(EOperatorField || (EOperatorField = {}));
+
+/**
+ * Controls which totals columns are appended to the query result.
+ *
+ * - NONE   → no totals, GROUP BY only.
+ * - TOTALS → adds `<metric>___totals` (grand total only). Use with single-dimension GROUP BY.
+ * - ALL    → adds subtotals per dimension group + grand total. Use with multi-dimension GROUP BY.
+ */
+var EGroupWithClause;
+(function (EGroupWithClause) {
+    EGroupWithClause["NONE"] = "";
+    EGroupWithClause["TOTALS"] = "TOTALS";
+    EGroupWithClause["ALL"] = "WITH GROUP_TOTALS, TOTALS";
+})(EGroupWithClause || (EGroupWithClause = {}));
+
+var EOrderDirectionType;
+(function (EOrderDirectionType) {
+    EOrderDirectionType["ASC"] = "ASC";
+    EOrderDirectionType["DESC"] = "DESC";
+})(EOrderDirectionType || (EOrderDirectionType = {}));
+
+var EPageMetric;
+(function (EPageMetric) {
+    EPageMetric["PAGE_ITEMS"] = "page_items";
+    EPageMetric["PAGE_PATHS"] = "page_paths";
+})(EPageMetric || (EPageMetric = {}));
+var EPageDimension;
+(function (EPageDimension) {
+    EPageDimension["PAGE_PATH"] = "page_path";
+})(EPageDimension || (EPageDimension = {}));
+var EPageField;
+(function (EPageField) {
+    EPageField["SHOPIFY_PAGE_ID"] = "shopify_page_id";
+    EPageField["LOCATION_PATH"] = "location_path";
+    EPageField["PAGE_TYPE"] = "page_type";
+    EPageField["PAGE_TITLE"] = "page_title";
+    EPageField["PAGE_PATH"] = "page_path";
+    EPageField["TEMPLATE_SUFFIX"] = "template_suffix";
+})(EPageField || (EPageField = {}));
+
+var ERowReaderMode;
+(function (ERowReaderMode) {
+    ERowReaderMode["DEFAULT"] = "DEFAULT";
+    ERowReaderMode["COMPARISON"] = "COMPARISON";
+    ERowReaderMode["TOTALS"] = "TOTALS";
+    ERowReaderMode["COMPARISON_TOTALS"] = "COMPARISON_TOTALS";
+})(ERowReaderMode || (ERowReaderMode = {}));
+
+var ETimeDimension;
+(function (ETimeDimension) {
+    ETimeDimension["HOUR"] = "hour";
+    ETimeDimension["DAY"] = "day";
+    ETimeDimension["WEEK"] = "week";
+    ETimeDimension["MONTH"] = "month";
+    ETimeDimension["QUARTER"] = "quarter";
+    ETimeDimension["YEAR"] = "year";
+})(ETimeDimension || (ETimeDimension = {}));
+
+({
+    [ERowReaderMode.DEFAULT]: { prefix: '', suffix: '' },
+    [ERowReaderMode.COMPARISON]: { prefix: COMPARE_PREFIX, suffix: COMPARE_SUFFIX },
+    [ERowReaderMode.TOTALS]: { prefix: '', suffix: TOTALS_SUFFIX },
+    [ERowReaderMode.COMPARISON_TOTALS]: { prefix: COMPARE_PREFIX, suffix: COMPARE_TOTALS_SUFFIX },
+});
+
+EGroupOperator.OR;
+
+[
+    {
+        operator: EOperatorField.DEVICE_OPERATOR,
+        singleField: EFilterField.DEVICE,
+        multiField: EFilterField.DEVICES,
+        fieldName: EFilterField.DEVICE,
+    },
+    {
+        operator: EOperatorField.VISITOR_OPERATOR,
+        singleField: EFilterField.VISITOR,
+        multiField: EFilterField.VISITORS,
+        fieldName: EFilterField.VISITOR,
+    },
+    {
+        operator: EOperatorField.TRAFFIC_SOURCE_OPERATOR,
+        singleField: EFilterField.TRAFFIC_SOURCE,
+        multiField: EFilterField.TRAFFIC_SOURCES,
+        fieldName: EFilterField.TRAFFIC_SOURCE,
+    },
+    {
+        operator: EOperatorField.VERSION_OPERATOR,
+        singleField: EFilterField.VERSION,
+        multiField: EFilterField.VERSIONS,
+        fieldName: EFilterField.VERSION,
+    },
+    {
+        operator: EOperatorField.PAGE_OPERATOR,
+        singleField: EFilterField.SINGLE_PAGE,
+        multiField: EFilterField.LIST_PAGE,
+        fieldName: EFilterField.SINGLE_PAGE,
+    },
+    {
+        operator: EOperatorField.CAMPAIGN_ITEM_OPERATOR,
+        singleField: EFilterField.GROUP_CAMPAIGN_ITEM,
+        multiField: EFilterField.GROUP_CAMPAIGN_ITEMS,
+        condition: EFilterField.GROUP_CAMPAIGN,
+        fieldName: EFilterField.SINGLE_CAMPAIGN,
+    },
+    {
+        operatorVal: OPERATOR_IS,
+        singleField: EFilterField.SINGLE_CAMPAIGN,
+        multiField: EFilterField.GROUP_CAMPAIGN,
+    },
+];
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(quarterOfYear);
+let tz = 'UTC';
+const dayjsTz = (date) => {
+    if (!date)
+        return dayjs().tz(tz);
+    return dayjs(date).tz(tz);
+};
+
+const TRIM_DECIMAL_ZEROS_REGEX = /\.0+$/;
+const DEFAULT_DECIMALS = 2;
+const trimDecimalZeros = (number) => {
+    return `${number}`.replace(TRIM_DECIMAL_ZEROS_REGEX, '');
+};
+const cleanDecimal = (number, decimals = DEFAULT_DECIMALS) => {
+    return trimDecimalZeros(number.toFixed(decimals));
+};
+
+/**
+ * Utility function to calculate percentage and format it.
+ * @param part - The part value.
+ * @param total - The total value.
+ * @param decimals - The number of decimal places to format the percentage to.
+ * @returns The formatted percentage as a string.
+ */
+const PERCENTAGE_THRESHOLD = 0.005;
+const PERCENTAGE_THRESHOLD_STRING = '~0%';
+const calcPercentage = (part, total, decimals = DEFAULT_DECIMALS) => {
+    if (typeof part !== 'number' || !total)
+        return undefined;
+    if (part === 0)
+        return 0;
+    const percentage = (part / total) * 100;
+    return parseFloat(cleanDecimal(percentage, decimals));
+};
+const isLessThanThreshold = (percentage) => percentage > 0 && percentage < PERCENTAGE_THRESHOLD;
+const calcPercentageString = (part, total, decimals = 2) => {
+    const percentage = calcPercentage(part, total, decimals);
+    if (typeof percentage !== 'number')
+        return undefined;
+    if (isLessThanThreshold(percentage)) {
+        return PERCENTAGE_THRESHOLD_STRING;
+    }
+    return `${percentage}%`;
+};
+const formatPercentage = (percentage, decimals = DEFAULT_DECIMALS) => {
+    if (isLessThanThreshold(percentage)) {
+        return PERCENTAGE_THRESHOLD_STRING;
+    }
+    return `${cleanDecimal(percentage, decimals)}%`;
+};
+
+var AnalyticInterval;
+(function (AnalyticInterval) {
+    AnalyticInterval["DAY"] = "DAY";
+    AnalyticInterval["HOUR"] = "HOUR";
+    AnalyticInterval["MONTH"] = "MONTH";
+    AnalyticInterval["QUARTER"] = "QUARTER";
+    AnalyticInterval["WEEK"] = "WEEK";
+    AnalyticInterval["YEAR"] = "YEAR";
+})(AnalyticInterval || (AnalyticInterval = {}));
+function numberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+const SECONDS_IN_MINUTE = 60;
+const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * SECONDS_IN_MINUTE;
+const getTimeDurationLabel = (valueInSeconds) => {
+    let data = valueInSeconds;
+    if (!Number.isFinite(valueInSeconds) || valueInSeconds == null) {
+        data = 0;
+    }
+    const fixedValue = cleanDecimal(data);
+    if (data >= SECONDS_IN_HOUR) {
+        const hours = Math.floor(data / SECONDS_IN_HOUR);
+        const minutes = Math.floor((data % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE);
+        const seconds = Math.floor(data % SECONDS_IN_MINUTE);
+        return `${hours}h ${minutes}m ${seconds}s`;
+    }
+    else if (data >= SECONDS_IN_MINUTE) {
+        const minutes = Math.floor(data / SECONDS_IN_MINUTE);
+        const seconds = Math.floor(data % SECONDS_IN_MINUTE);
+        return `${minutes}m ${seconds}s`;
+    }
+    else {
+        return `${fixedValue}s`;
+    }
+};
+const getFormattedByInterval = (value, interval, options) => {
+    if (!value)
+        return '';
+    const optionFormat = options?.isExpandDetail
+        ? {
+            formatHouse: 'MMM D, h:mm A',
+            formatDay: 'MMM D, YYYY',
+            formatMonth: 'MMM YYYY',
+            formatYear: 'MMM YYYY',
+        }
+        : {
+            formatHouse: 'h A',
+            formatDay: 'MMM D',
+            formatMonth: 'MMM YYYY',
+            formatYear: 'YYYY',
+        };
+    switch (interval) {
+        case AnalyticInterval.HOUR:
+            return dayjsTz(value).format(optionFormat.formatHouse);
+        case AnalyticInterval.DAY:
+        case AnalyticInterval.WEEK:
+            return dayjsTz(value).format(optionFormat.formatDay);
+        case AnalyticInterval.MONTH:
+            return dayjsTz(value).format(optionFormat.formatMonth);
+        case AnalyticInterval.QUARTER: {
+            const d = dayjsTz(value);
+            return `Q${d.quarter()} ${d.format('YYYY')}`;
+        }
+        case AnalyticInterval.YEAR:
+            return dayjsTz(value).format(optionFormat.formatYear);
+    }
+    return dayjsTz(value).format(optionFormat.formatMonth);
 };
 
+const formatAnalyticDate = (dateString) => {
+    if (!dateString)
+        return 'None';
+    const date = dayjsTz(dateString);
+    const now = dayjsTz();
+    const yesterday = dayjsTz().subtract(1, 'day');
+    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
+    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
+    if (isToday) {
+        return `Today at ${date.format('HH:mm')}`;
+    }
+    if (isYesterday) {
+        return `Yesterday at ${date.format('HH:mm')}`;
+    }
+    const daysDiff = now.diff(date, 'day');
+    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
+    if (isWithinWeek) {
+        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
+    }
+    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
+};
+
+const formatAnalyticData = ({ value, formatter, getTextPrice, name, }) => {
+    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
+    if (dataTypeIsObjectOrArray)
+        return value;
+    switch (formatter) {
+        case EAnalyticDataType.INTEGER: {
+            return numberWithCommas((value ?? 0).toString());
+        }
+        case EAnalyticDataType.CURRENCY: {
+            if (!getTextPrice)
+                return `${value ?? 0}`;
+            return getTextPrice(value, false);
+        }
+        case EAnalyticDataType.DATE: {
+            return formatAnalyticDate(value);
+        }
+        case EAnalyticDataType.PERCENT: {
+            if (typeof value !== 'number')
+                return calcPercentageString(0, 1, 2) ?? '';
+            return calcPercentageString(value / 100, 1, 2) ?? '';
+        }
+        case EAnalyticDataType.DURATION: {
+            return getTimeDurationLabel(Number(value));
+        }
+        case EAnalyticDataType.STRING: {
+            const fallbackValue = name === EAnalyticColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
+            return value ?? fallbackValue;
+        }
+        case EAnalyticDataType.DAY: {
+            return getFormattedByInterval(value, AnalyticInterval.DAY, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.HOUR: {
+            return getFormattedByInterval(value, AnalyticInterval.HOUR, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.MONTH: {
+            return getFormattedByInterval(value, AnalyticInterval.MONTH, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.YEAR: {
+            return getFormattedByInterval(value, AnalyticInterval.YEAR);
+        }
+        case EAnalyticDataType.WEEK: {
+            return getFormattedByInterval(value, AnalyticInterval.WEEK, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.QUARTER: {
+            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
+                isExpandDetail: true,
+            });
+        }
+        case EAnalyticDataType.OBJECT:
+        case EAnalyticDataType.ARRAY: {
+            return value;
+        }
+        default:
+            return `${value}`;
+    }
+};
+
+const SESSION_KEY = 'sessions';
+const hasMetricData = (metric) => {
+    const sessions = metric?.[SESSION_KEY];
+    return typeof sessions === 'number' && sessions > 0;
+};
+
+const parseRawJson = (raw) => {
+    if (!raw)
+        return undefined;
+    return typeof raw === 'string' ? JSON.parse(raw) : raw;
+};
+const parseJsonArray = (raw) => {
+    try {
+        const parsed = parseRawJson(raw);
+        if (!Array.isArray(parsed))
+            return undefined;
+        return parsed;
+    }
+    catch {
+        return undefined;
+    }
+};
+const parseBreakdownItems = (raw) => parseJsonArray(raw)?.map((item) => ({ ...item, total: Number(item.total) }));
+
+const readNumeric = (metric, key) => {
+    const raw = metric?.[key];
+    return typeof raw === 'number' ? raw : 0;
+};
+
+const useAnalyticData = (getTextPrice) => {
+    const formatData = ({ value, formatter, name }) => {
+        return formatAnalyticData({ value, formatter, getTextPrice, name });
+    };
+    const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
+        if (!hasMetricData(metric))
+            return { value: 0, change: PLACEHOLDER_VALUE$1 };
+        const currentValue = readNumeric(metric, metricKey);
+        const previousValue = readNumeric(previousMetric, metricKey);
+        const value = formatData({ value: currentValue, formatter, name: metricKey });
+        if (currentValue === 0 && previousValue !== 0)
+            return { value, change: -100 };
+        if (previousValue === 0)
+            return { value, change: PLACEHOLDER_VALUE$1 };
+        const change = ((currentValue - previousValue) / previousValue) * 100;
+        return { value, change };
+    };
+    return { formatData, computeMetric };
+};
+
+var GPaginationDirection;
+(function (GPaginationDirection) {
+    GPaginationDirection["NEXT"] = "NEXT";
+    GPaginationDirection["PREV"] = "PREV";
+})(GPaginationDirection || (GPaginationDirection = {}));
+
+const TARGET_VISITOR = [
+    { value: EVisitorType.NEW, label: 'New' },
+    { value: EVisitorType.RETURNING, label: 'Returning' },
+];
+const TARGET_DEVICES = [
+    { value: EDeviceType.DESKTOP, label: 'Desktop' },
+    { value: EDeviceType.TABLET, label: 'Tablet' },
+    { value: EDeviceType.MOBILE, label: 'Mobile' },
+];
+const TARGET_CHANNEL = [
+    { value: ETrafficSourceType.DIRECT, label: 'Direct' },
+    { value: ETrafficSourceType.EMAIL, label: 'Email' },
+    { value: ETrafficSourceType.REFERRAL, label: 'Referral' },
+    { value: ETrafficSourceType.ORGANIC_SOCIAL, label: 'Organic social' },
+    { value: ETrafficSourceType.ORGANIC_SEARCH, label: 'Organic search' },
+    { value: ETrafficSourceType.PAID_SOCIAL, label: 'Paid social' },
+    { value: ETrafficSourceType.PAID_SEARCH, label: 'Paid search' },
+    { value: ETrafficSourceType.SMS, label: 'SMS' },
+];
+
 const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
 const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
 const CHART_MIN_HEIGHT = 228;
@@ -148,32 +672,6 @@ const GBlockCenter = ({ height, align, inlineAlign, display, ...props }) => {
         }, children: jsx(Box, { ...props }) }));
 };
 
-const TRIM_DECIMAL_ZEROS_REGEX = /\.0+$/;
-const DEFAULT_DECIMALS = 2;
-const trimDecimalZeros = (number) => {
-    return `${number}`.replace(TRIM_DECIMAL_ZEROS_REGEX, '');
-};
-const cleanDecimal = (number, decimals = DEFAULT_DECIMALS) => {
-    return trimDecimalZeros(number.toFixed(decimals));
-};
-
-/**
- * Utility function to calculate percentage and format it.
- * @param part - The part value.
- * @param total - The total value.
- * @param decimals - The number of decimal places to format the percentage to.
- * @returns The formatted percentage as a string.
- */
-const PERCENTAGE_THRESHOLD = 0.005;
-const PERCENTAGE_THRESHOLD_STRING = '~0%';
-const isLessThanThreshold = (percentage) => percentage > 0 && percentage < PERCENTAGE_THRESHOLD;
-const formatPercentage = (percentage, decimals = DEFAULT_DECIMALS) => {
-    if (isLessThanThreshold(percentage)) {
-        return PERCENTAGE_THRESHOLD_STRING;
-    }
-    return `${cleanDecimal(percentage, decimals)}%`;
-};
-
 function toVal(mix) {
     if (typeof mix === 'string') {
         return mix;
@@ -246,7 +744,7 @@ const GTooltipCard = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
     return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer', alignment && ALIGNMENT_MAP[alignment], {
             'GTooltipCard--text-underline': textDecoration === 'underline',
-        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "400", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && (jsx("div", { className: "rounded-md font-mono", style: { fontSize: '12px' }, children: tooltip.formula }))] }) }) })) }) }));
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && (jsx("div", { className: "rounded-md font-mono", style: { fontSize: '12px' }, children: tooltip.formula }))] }) }) })) }) }));
 });
 GTooltipCard.displayName = 'GTooltipCard';
 
@@ -254,7 +752,12 @@ const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
 
-const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT }) => {
+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 (jsx(PolarisVizProvider, { themes: {
             Light: {
                 chartContainer: {
@@ -265,27 +768,72 @@ const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT }) => {
                     verticalOverflow: true,
                     horizontalMargin: 0,
                 },
-                seriesColors: {
-                    comparison: SERIES_COLORS.comparison,
-                    single: SERIES_COLORS.current,
-                    all: [...SERIES_COLORS.all],
-                },
+                seriesColors,
             },
         }, children: children }));
 };
 
-const defaultFormatValue = (value) => String(value);
-const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData }) => {
+const useFormatLineChartData = ({ metricKey, columnTypes }) => {
+    const { formatData } = useAnalyticData();
+    const formatter = metricKey ? columnTypes?.[metricKey] : undefined;
+    const formatValue = (value) => {
+        return String(formatData({ value, formatter }));
+    };
+    const yAxisOptions = {
+        labelFormatter: (value) => {
+            return formatValue(Number(value) || 0);
+        },
+    };
+    return { formatValue, yAxisOptions };
+};
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(() => ({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    }));
+    const windowWidth = useMemo(() => {
+        return {
+            xs: windowSize.width <= 768,
+            md: 768 < windowSize.width && windowSize.width <= 1024,
+            lg: windowSize.width > 1024,
+            xsDown: windowSize.width < 768,
+            '1200Down': windowSize.width < 1200,
+            '1040Down': windowSize.width < 1040,
+        };
+    }, [windowSize.width]);
+    const isMobileTabletView = !windowWidth.lg;
+    const isMobileView = windowWidth.xs;
+    useEffect(() => {
+        const windowSizeHandler = () => {
+            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        };
+        window.addEventListener('resize', windowSizeHandler);
+        return () => {
+            window.removeEventListener('resize', windowSizeHandler);
+        };
+    }, []);
+    return { windowSize, windowWidth, isMobileTabletView, isMobileView };
+};
+
+const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
+    const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
+    if (!metricKey) {
+        return jsx(Fragment, {});
+    }
     if (isLoading) {
         return jsx(GChartSkeleton, {});
     }
     if (isEmptyMetricData) {
         return jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" });
     }
-    return (jsx(MetricChartProvider, { children: jsx(LineChart, { data: lineChartData, yAxisOptions: { labelFormatter: (value) => defaultFormatValue(Number(value) || 0) }, theme: "Light", tooltipOptions: {
-                keyFormatter: (value) => value,
+    return (jsx(MetricChartProvider, { children: jsx(LineChart, { data: lineChartData, yAxisOptions: yAxisOptions, theme: "Light", tooltipOptions: {
+                titleFormatter: () => `${ANALYTICS_METRIC_TOOLTIP[metricKey]?.title ?? ''}`,
+                keyFormatter: (value) => {
+                    return value;
+                },
                 renderTooltipContent(data) {
-                    return jsx(MetricChartTooltip, { data: data, formatValue: defaultFormatValue });
+                    return jsx(MetricChartTooltip, { data: data, formatValue: formatValue });
                 },
             }, showLegend: true }) }));
 };
@@ -337,6 +885,17 @@ const MetricChartTooltip = ({ data, formatValue }) => {
     return (jsx("div", { className: "w-fit min-w-[175px]", children: jsx(Card, { padding: '200', children: jsxs(BlockStack, { gap: '100', children: [jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: data.formatters?.titleFormatter?.(data.title || '') || data.title }), jsxs(BlockStack, { gap: '100', children: [jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]" }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: currentData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(currentData.value) }), jsx(MetricPercentage, { change: formatPercent() })] })] }), jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "w-[12px] border border-dashed border-[#A1CAE7]" }), jsx(Text, { as: "p", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: previousData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(previousData.value) }), jsx("div", { className: "opacity-0", children: jsx(MetricPercentage, { change: formatPercent() }) })] })] })] })] }) }) }));
 };
 
+const MetricInfoSkeleton = ({ isShowOneLine }) => {
+    if (isShowOneLine) {
+        return (jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) }));
+    }
+    return (jsxs(BlockStack, { gap: "200", children: [jsx(Box, { width: "60%", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) })] }));
+};
+
+const MetricDonutChartSkeleton = () => {
+    return (jsx(Card, { children: jsxs(BlockStack, { gap: "400", children: [jsx(MetricInfoSkeleton, { isShowOneLine: true }), jsx(GChartSkeleton, {})] }) }));
+};
+
 var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -347,13 +906,6 @@ var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
 };
 SvgChevronRightIcon.displayName = "ChevronRightIcon";
 
-const MetricInfoSkeleton = ({ isShowOneLine }) => {
-    if (isShowOneLine) {
-        return (jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) }));
-    }
-    return (jsxs(BlockStack, { gap: "200", children: [jsx(Box, { width: "60%", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) })] }));
-};
-
 const MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", wrap: false, children: [jsx(InlineStack, { blockAlign: "center", gap: "200", children: jsx(Text, { as: "span", variant: "headingSm", children: totalValue.value }) }), !hideComparison && jsx(MetricPercentage, { change: totalValue.change })] }) }));
 
 const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, onClickTitle, }) => {
@@ -373,7 +925,7 @@ const MetricChartTab = ({ item, isActive, isLoading, hideComparison, onSelect, o
     return (jsx("div", { className: "w-full cursor-pointer overflow-hidden", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(item.key), children: jsx(Box, { paddingBlock: "150", paddingInline: "300", borderRadius: "200", background: isHighlighted ? 'bg-surface-active' : undefined, children: jsx(MetricInfoBlock, { item: item, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, titleVariant: "headingSm", titleFontWeight: "semibold", onClickTitle: onClickTitle }) }) }));
 };
 
-const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, }) => {
+const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, }) => {
     const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const lineChartData = useMemo(() => {
         const chartData = activeTab ? dataChart[activeTab] : undefined;
@@ -389,12 +941,76 @@ const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, i
                     gridTemplateColumns: `repeat(${metricInfo.length}, 1fr)`,
                     gap: '16px',
                     marginBottom: '16px',
-                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, onSelect: setActiveTab }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData })] }));
+                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, onSelect: setActiveTab }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
+};
+
+const calculatePercentageChange = (current, previous) => {
+    if (current === 0 && previous === 0) {
+        return undefined;
+    }
+    if (previous === 0) {
+        return current > 0 ? '100%' : '0%';
+    }
+    const change = ((current - previous) / previous) * 100;
+    return `${Math.abs(change).toFixed(0)}%`;
+};
+const computeDonutData = ({ name, currentValue, prevValue, hasPreviousData, }) => ({
+    name,
+    data: [{ key: 'value', value: currentValue }],
+    metadata: {
+        trend: {
+            value: hasPreviousData ? calculatePercentageChange(currentValue, prevValue) : undefined,
+            direction: currentValue >= prevValue ? 'upward' : 'downward',
+            trend: currentValue >= prevValue ? 'positive' : 'negative',
+        },
+    },
+});
+const getTotalCountByType = (stats, type) => {
+    const item = stats?.find((stat) => stat?.type?.toLowerCase() === type.toLowerCase());
+    return item?.total ?? 0;
+};
+const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTotalsRow, sort, }) => {
+    const items = parseBreakdownItems(totalsRow?.[metricKey]);
+    const comparisonItems = parseBreakdownItems(comparisonTotalsRow?.[metricKey]);
+    const hasPreviousData = !!comparisonTotalsRow?.[metricKey];
+    const result = targets.map(({ value, label }) => computeDonutData({
+        name: label,
+        currentValue: getTotalCountByType(items, value),
+        prevValue: getTotalCountByType(comparisonItems, value),
+        hasPreviousData,
+    }));
+    const getValue = (item) => item.data[0]?.value ?? 0;
+    return sort ? [...result].sort((a, b) => getValue(b) - getValue(a)) : result;
+};
+
+const DONUT_CHART_MIN_HEIGHT = 294;
+const COMPACT_MAX_WIDTH = 1500;
+const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, onClick, }) => {
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
+    const { windowWidth, windowSize } = useWindowSize();
+    const [isHovered, setIsHovered] = useState(false);
+    const data = useMemo(() => buildBreakdownDonutData({ targets, metricKey, totalsRow, comparisonTotalsRow, sort }), [targets, metricKey, totalsRow, comparisonTotalsRow, sort]);
+    if (isLoading) {
+        return jsx(MetricDonutChartSkeleton, {});
+    }
+    const formatValue = (value) => {
+        return numberWithCommas(`${value}`);
+    };
+    const handleClickTitle = (event) => {
+        event.stopPropagation();
+        onClick();
+    };
+    const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
+                            'max-h-[250px] overflow-hidden': isCompactView,
+                        }), children: isEmptyMetricData ? (jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" })) : (jsx(MetricChartProvider, { minHeight: minHeight, seriesColors: {}, children: jsx(DonutChart, { data: data, legendPosition: "left", showLegendValues: true, showLegend: true, theme: "Light", tooltipOptions: {
+                                    valueFormatter: formatValue,
+                                }, labelFormatter: formatValue }) })) })] }) }) }));
 };
 
-const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, isEmptyMetricData, onClickTitle, }) => {
+const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }) => {
     const [isHovered, setIsHovered] = useState(false);
-    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData })] }) }) }));
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
 };
 
-export { EMetricKey, GSelectableMetricChartCard, SingleMetricChartCard };
+export { ANALYTICS_METRIC_TOOLTIP, CHART_MIN_HEIGHT, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, EAnalyticColumnKey, EDeviceType, EMetricKey, ETrafficSourceType, EVisitorType, GSelectableMetricChartCard, MetricDonutChartCard, PLACEHOLDER_VALUE, SERIES_COLORS, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE };