@levi-gemcommerce/analytics 1.0.0-dev.14 → 1.0.0-dev.16

package/dist/esm/core/gemxql/builder/clauses/time-query.d.ts

@@ -1,4 +1,5 @@
-import type { AnalyticDateFilter, GemXQlFilters, GemXQlOverrideFilters } from '../../types';
+import type { GemXQlFilters, GemXQlOverrideFilters } from '../../types';
+import type { AnalyticDateFilter } from '@/components';
 export interface IBuildTimeQueryParams {
     dateRange?: AnalyticDateFilter;
     compareDateRange?: AnalyticDateFilter;

package/dist/esm/core/gemxql/builder/helpers/date-query-helpers.d.ts

@@ -1,4 +1,4 @@
-import type { AnalyticDateFilter } from '../../types';
+import type { AnalyticDateFilter } from '@/components';
 export declare const getDateRangeForQuery: (dateRange: AnalyticDateFilter) => {
     dateGTE: string;
     dateLTE: string;

package/dist/esm/core/gemxql/hooks/useAnalyticData.d.ts

@@ -1,4 +1,3 @@
-import type { IGetTextPrice } from '../helpers/formatAnalyticData';
 import type { AnalyticValueType } from '../types';
 interface IFormatDataParams {
     value: AnalyticValueType;
@@ -20,5 +19,5 @@ interface IUseAnalyticDataReturn {
     formatData: (params: IFormatDataParams) => AnalyticValueType;
     computeMetric: (params: IComputeMetricParams) => IComputeMetricResult;
 }
-export declare const useAnalyticData: (getTextPrice?: IGetTextPrice) => IUseAnalyticDataReturn;
+export declare const useAnalyticData: () => IUseAnalyticDataReturn;
 export {};

package/dist/esm/core/gemxql/types/date-filter.d.ts

@@ -1,4 +1,4 @@
-import type { Dayjs } from '@/utils';
+import type { Dayjs } from '../../../utils';
 export interface AnalyticDateFilter {
     versionId?: string;
     startDate: Dayjs | string;

package/dist/esm/core/gemxql/types/index.d.ts

@@ -1,6 +1,5 @@
 export * from './analytic-data';
 export * from './analytic-source';
-export * from './date-filter';
 export * from './extra-condition';
 export * from './field-filters';
 export * from './field-operators';

package/dist/esm/gemxql.js

@@ -3,7 +3,9 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useQuery } from '@tanstack/react-query';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { create } from 'zustand';
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
@@ -947,7 +949,186 @@ const useGemxQlNamedQuery = ({ name, variables, fetcher }, options) => {
 };
 useGemxQlNamedQuery.getKey = (name, variables) => [name, variables];
 
-const useAnalyticData = (getTextPrice) => {
+var EMetricKey;
+(function (EMetricKey) {
+    EMetricKey["SESSION"] = "sessions";
+    EMetricKey["ORDERS"] = "orders";
+    EMetricKey["PAGE_VIEWS"] = "pageviews";
+    EMetricKey["VISITORS"] = "visitors";
+    EMetricKey["BOUNCE_RATE"] = "bounce_rate";
+    EMetricKey["CTR"] = "ctr";
+    EMetricKey["CONVERSION_RATE"] = "conversion_rate";
+    EMetricKey["AVG_TIME_ON_PAGE"] = "average_time_on_page";
+    EMetricKey["ADDED_TO_CART"] = "added_to_cart";
+    EMetricKey["ADD_TO_CART_RATE"] = "added_to_cart_rate";
+    EMetricKey["REACHED_CHECKOUT"] = "sessions_that_reached_checkout";
+    EMetricKey["COMPLETE_CHECKOUT"] = "sessions_that_completed_checkout";
+    EMetricKey["CART_ADDITION"] = "sessions_with_cart_additions";
+    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 = {}));
+
+({
+    [EMetricKey.SESSION]: {
+        title: 'Sessions',
+        content: 'A period during which a visitor interacts with your online store',
+    },
+    [EMetricKey.VISITORS]: {
+        title: 'Visitors',
+        content: 'Number of unique individuals who visit your online store',
+    },
+    [EMetricKey.BOUNCE_RATE]: {
+        title: 'Bounce rate',
+        content: 'Percentage of visitors who leave your store after viewing only one page, without interacting further',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Bounce rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "sessions with a pageview" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total sessions" })] })),
+    },
+    [EMetricKey.CTR]: {
+        title: 'Click-through rate',
+        content: 'Percentage of clicks to open new page, compared to the number of times the page was viewed',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Click-through rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total clicks" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total pageviews" })] })),
+    },
+    [EMetricKey.AVG_TIME_ON_PAGE]: {
+        title: 'Average time on page',
+        content: 'Average duration that visitors spend on a page before clicking to open new page',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Average time on page" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total time on page" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "(total pageviews - total exits)" })] })),
+    },
+    [EMetricKey.PAGE_VIEWS]: {
+        title: 'Pageviews',
+        content: 'Number of times a page on your online store has been viewed by visitors',
+    },
+    [EMetricKey.RPV]: {
+        title: 'Revenue per visitor',
+        content: 'Average revenue generated from each visitor',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Revenue per visitor" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total revenue" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total visitors" })] })),
+    },
+    [EMetricKey.ADDED_TO_CART]: {
+        title: 'Added to cart',
+        content: 'Total number of the event when a customer adds a product to their cart on your online store',
+    },
+    [EMetricKey.REACHED_CHECKOUT]: {
+        title: 'Sessions that reached checkout',
+        content: 'Sessions in your online store in which the checkout page was reached',
+    },
+    [EMetricKey.COMPLETE_CHECKOUT]: {
+        title: 'Sessions that completed checkout',
+        content: 'Sessions in your online store in which a purchase was completed',
+    },
+    [EMetricKey.ORDERS]: {
+        title: 'Orders',
+        content: 'Number of orders that went through this pages',
+    },
+    [EMetricKey.CONVERSION_RATE]: {
+        title: 'Conversion rate',
+        content: 'Percentage of online store sessions that completed an order',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Conversion rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "sessions that completed checkout" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total sessions" })] })),
+    },
+    [EMetricKey.AOV]: {
+        title: 'Average order value',
+        content: 'Average value of orders placed in your online store',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Average order value" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total revenue" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total orders" })] })),
+    },
+    [EMetricKey.REVENUE]: {
+        title: 'Revenue',
+        content: 'Total income generated from sales after discounts',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Revenue" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "gross sales" }), jsx("span", { className: "formula-operator", children: " - " }), jsx("span", { className: "formula-input", children: "discounts" })] })),
+    },
+    [EMetricKey.ADD_TO_CART_RATE]: {
+        title: 'Add to cart rate',
+        content: 'Percentage of sessions in which the customer added item to the cart',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Added to cart rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "sessions with cart additions" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total sessions" })] })),
+    },
+    [EMetricKey.CART_ADDITION]: {
+        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',
+    },
+});
+
+var EAnalyticMode;
+(function (EAnalyticMode) {
+    EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
+    EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
+    EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
+})(EAnalyticMode || (EAnalyticMode = {}));
+
+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 = {}));
+
+[
+    { value: EVisitorType.NEW, label: 'New' },
+    { value: EVisitorType.RETURNING, label: 'Returning' },
+];
+[
+    { value: EDeviceType.DESKTOP, label: 'Desktop' },
+    { value: EDeviceType.TABLET, label: 'Tablet' },
+    { value: EDeviceType.MOBILE, label: 'Mobile' },
+];
+[
+    { 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' },
+];
+
+create((set) => ({
+    currencyRates: null,
+    setCurrencyRates: (rates) => set({ currencyRates: rates }),
+}));
+
+const ConvertMoneyContext = createContext({
+    getTextPrice: (price) => {
+        if (typeof price === 'string')
+            return price;
+        return `${price ?? 0}`;
+    },
+});
+const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
+
+const useAnalyticData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
     const formatData = ({ value, formatter, name }) => {
         return formatAnalyticData({ value, formatter, getTextPrice, name });
     };

package/dist/esm/gemxql.mjs

@@ -3,7 +3,9 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useQuery } from '@tanstack/react-query';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { create } from 'zustand';
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
@@ -947,7 +949,186 @@ const useGemxQlNamedQuery = ({ name, variables, fetcher }, options) => {
 };
 useGemxQlNamedQuery.getKey = (name, variables) => [name, variables];
 
-const useAnalyticData = (getTextPrice) => {
+var EMetricKey;
+(function (EMetricKey) {
+    EMetricKey["SESSION"] = "sessions";
+    EMetricKey["ORDERS"] = "orders";
+    EMetricKey["PAGE_VIEWS"] = "pageviews";
+    EMetricKey["VISITORS"] = "visitors";
+    EMetricKey["BOUNCE_RATE"] = "bounce_rate";
+    EMetricKey["CTR"] = "ctr";
+    EMetricKey["CONVERSION_RATE"] = "conversion_rate";
+    EMetricKey["AVG_TIME_ON_PAGE"] = "average_time_on_page";
+    EMetricKey["ADDED_TO_CART"] = "added_to_cart";
+    EMetricKey["ADD_TO_CART_RATE"] = "added_to_cart_rate";
+    EMetricKey["REACHED_CHECKOUT"] = "sessions_that_reached_checkout";
+    EMetricKey["COMPLETE_CHECKOUT"] = "sessions_that_completed_checkout";
+    EMetricKey["CART_ADDITION"] = "sessions_with_cart_additions";
+    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 = {}));
+
+({
+    [EMetricKey.SESSION]: {
+        title: 'Sessions',
+        content: 'A period during which a visitor interacts with your online store',
+    },
+    [EMetricKey.VISITORS]: {
+        title: 'Visitors',
+        content: 'Number of unique individuals who visit your online store',
+    },
+    [EMetricKey.BOUNCE_RATE]: {
+        title: 'Bounce rate',
+        content: 'Percentage of visitors who leave your store after viewing only one page, without interacting further',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Bounce rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "sessions with a pageview" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total sessions" })] })),
+    },
+    [EMetricKey.CTR]: {
+        title: 'Click-through rate',
+        content: 'Percentage of clicks to open new page, compared to the number of times the page was viewed',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Click-through rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total clicks" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total pageviews" })] })),
+    },
+    [EMetricKey.AVG_TIME_ON_PAGE]: {
+        title: 'Average time on page',
+        content: 'Average duration that visitors spend on a page before clicking to open new page',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Average time on page" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total time on page" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "(total pageviews - total exits)" })] })),
+    },
+    [EMetricKey.PAGE_VIEWS]: {
+        title: 'Pageviews',
+        content: 'Number of times a page on your online store has been viewed by visitors',
+    },
+    [EMetricKey.RPV]: {
+        title: 'Revenue per visitor',
+        content: 'Average revenue generated from each visitor',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Revenue per visitor" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total revenue" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total visitors" })] })),
+    },
+    [EMetricKey.ADDED_TO_CART]: {
+        title: 'Added to cart',
+        content: 'Total number of the event when a customer adds a product to their cart on your online store',
+    },
+    [EMetricKey.REACHED_CHECKOUT]: {
+        title: 'Sessions that reached checkout',
+        content: 'Sessions in your online store in which the checkout page was reached',
+    },
+    [EMetricKey.COMPLETE_CHECKOUT]: {
+        title: 'Sessions that completed checkout',
+        content: 'Sessions in your online store in which a purchase was completed',
+    },
+    [EMetricKey.ORDERS]: {
+        title: 'Orders',
+        content: 'Number of orders that went through this pages',
+    },
+    [EMetricKey.CONVERSION_RATE]: {
+        title: 'Conversion rate',
+        content: 'Percentage of online store sessions that completed an order',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Conversion rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "sessions that completed checkout" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total sessions" })] })),
+    },
+    [EMetricKey.AOV]: {
+        title: 'Average order value',
+        content: 'Average value of orders placed in your online store',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Average order value" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "total revenue" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total orders" })] })),
+    },
+    [EMetricKey.REVENUE]: {
+        title: 'Revenue',
+        content: 'Total income generated from sales after discounts',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Revenue" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "gross sales" }), jsx("span", { className: "formula-operator", children: " - " }), jsx("span", { className: "formula-input", children: "discounts" })] })),
+    },
+    [EMetricKey.ADD_TO_CART_RATE]: {
+        title: 'Add to cart rate',
+        content: 'Percentage of sessions in which the customer added item to the cart',
+        formula: (jsxs(Fragment, { children: [jsx("span", { className: "formula-variable", children: "Added to cart rate" }), jsx("span", { children: " = " }), jsx("span", { className: "formula-input", children: "sessions with cart additions" }), jsx("span", { className: "formula-operator", children: " / " }), jsx("span", { className: "formula-input", children: "total sessions" })] })),
+    },
+    [EMetricKey.CART_ADDITION]: {
+        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',
+    },
+});
+
+var EAnalyticMode;
+(function (EAnalyticMode) {
+    EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
+    EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
+    EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
+})(EAnalyticMode || (EAnalyticMode = {}));
+
+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 = {}));
+
+[
+    { value: EVisitorType.NEW, label: 'New' },
+    { value: EVisitorType.RETURNING, label: 'Returning' },
+];
+[
+    { value: EDeviceType.DESKTOP, label: 'Desktop' },
+    { value: EDeviceType.TABLET, label: 'Tablet' },
+    { value: EDeviceType.MOBILE, label: 'Mobile' },
+];
+[
+    { 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' },
+];
+
+create((set) => ({
+    currencyRates: null,
+    setCurrencyRates: (rates) => set({ currencyRates: rates }),
+}));
+
+const ConvertMoneyContext = createContext({
+    getTextPrice: (price) => {
+        if (typeof price === 'string')
+            return price;
+        return `${price ?? 0}`;
+    },
+});
+const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
+
+const useAnalyticData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
     const formatData = ({ value, formatter, name }) => {
         return formatAnalyticData({ value, formatter, getTextPrice, name });
     };

package/dist/esm/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
+export * from './providers';
 export * from './utils/dayjs';

package/dist/esm/index.js

@@ -8,8 +8,9 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useTranslation } from 'react-i18next';
+import { create } from 'zustand';
+import { useQuery } from '@tanstack/react-query';
 import { PolarisVizProvider, LineChart, DonutChart } from '@shopify/polaris-viz';
-import '@tanstack/react-query';
 
 var EMetricKey;
 (function (EMetricKey) {
@@ -879,6 +880,118 @@ const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
 
+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 useCurrencyRatesStore = create((set) => ({
+    currencyRates: null,
+    setCurrencyRates: (rates) => set({ currencyRates: rates }),
+}));
+
+const SHOPIFY_CURRENCIES_URL = 'https://cdn.shopify.com/s/javascripts/currencies.js';
+const parseCurrencyRates = (scriptText) => {
+    const rates = {};
+    const match = /var Currency=\{rates:\{(.*?)\}\};/s.exec(scriptText);
+    const ratesStr = match?.[1];
+    if (!ratesStr)
+        return rates;
+    const ratePattern = /([A-Z]+):\s*([\d.e+-]+),/g;
+    let m;
+    while ((m = ratePattern.exec(ratesStr)) !== null) {
+        const [, code, value] = m;
+        if (code && value)
+            rates[code] = parseFloat(value);
+    }
+    return rates;
+};
+const fetchCurrencyRates = async () => {
+    const res = await fetch(SHOPIFY_CURRENCIES_URL);
+    if (!res.ok)
+        throw new Error('Failed to fetch currency rates');
+    const text = await res.text();
+    return parseCurrencyRates(text);
+};
+const useFetchCurrencyRates = () => {
+    const setCurrencyRates = useCurrencyRatesStore((state) => state.setCurrencyRates);
+    const { data } = useQuery({
+        queryKey: ['sdk-currency-rates'],
+        queryFn: fetchCurrencyRates,
+        staleTime: 1000 * 60 * 60, // 1 hour — rates don't change often
+    });
+    useEffect(() => {
+        if (data)
+            setCurrencyRates(data);
+    }, [data, setCurrencyRates]);
+};
+
+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,
@@ -1169,7 +1282,8 @@ const readNumeric = (metric, key) => {
     return typeof raw === 'number' ? raw : 0;
 };
 
-const useAnalyticData = (getTextPrice) => {
+const useAnalyticData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
     const formatData = ({ value, formatter, name }) => {
         return formatAnalyticData({ value, formatter, getTextPrice, name });
     };
@@ -2525,4 +2639,4 @@ const GTimePicker = (props) => {
     return (jsxs(InlineStack, { gap: "200", children: [jsx(MainTimePicker, { ...timePickerProps }), isCompare && (jsx(CompareTimePicker, { rangeAddition: timePickerProps.rangeAddition, popoverProps: timePickerProps.popoverProps }))] }));
 };
 
-export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CompareDateTimePickerAlias, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, GSelectableMetricChartCard, GTimePicker, MainDateTimePickerAlias, MetricDonutChartCard, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, SERIES_COLORS, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useVersionDateTimeFilters };
+export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, GSelectableMetricChartCard, GTimePicker, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, SERIES_COLORS, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFetchCurrencyRates, useVersionDateTimeFilters };