@levi-gemcommerce/analytics 1.0.0-dev.15 → 1.0.0-dev.17

package/dist/esm/index.js

@@ -1,15 +1,17 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip, Button, BlockStack, Checkbox, RadioButton, Popover, ActionList, Link, SkeletonDisplayText, List, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup } from '@shopify/polaris';
-import React, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
+import * as React from 'react';
+import React__default, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
 import dayjs from 'dayjs';
 export { default as dayjs } from 'dayjs';
 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) {
@@ -199,9 +201,9 @@ const DEFAULT_CURRENCY_ANALYTIC = 'USD';
 var THUMB_PRODUCT_DEFAULT = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSI5MCIKICBoZWlnaHQ9IjcyIgogIHZpZXdCb3g9IjAgMCA5MCA3MiIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNDguNzUgMzQuNUM0OS45OTI2IDM0LjUgNTEgMzMuNDkyNiA1MSAzMi4yNUM1MSAzMS4wMDc0IDQ5Ljk5MjYgMzAgNDguNzUgMzBDNDcuNTA3NCAzMCA0Ni41IDMxLjAwNzQgNDYuNSAzMi4yNUM0Ni41IDMzLjQ5MjYgNDcuNTA3NCAzNC41IDQ4Ljc1IDM0LjVaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgogIDxwYXRoCiAgICBmaWxsUnVsZT0iZXZlbm9kZCIKICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgZD0iTTQzLjUyNjggMjYuMjVINDYuNDczMkM0Ny42OTI0IDI2LjI1IDQ4LjY3NTggMjYuMjUgNDkuNDcyMiAyNi4zMTVDNTAuMjkyMiAyNi4zODIgNTEuMDEyNCAyNi41MjM2IDUxLjY3ODcgMjYuODYzMUM1Mi43MzcxIDI3LjQwMjQgNTMuNTk3NiAyOC4yNjI5IDU0LjEzNjkgMjkuMzIxM0M1NC40NzY0IDI5Ljk4NzYgNTQuNjE4IDMwLjcwNzggNTQuNjg1IDMxLjUyNzhDNTQuNzUgMzIuMzI0MiA1NC43NSAzMy4zMDc2IDU0Ljc1IDM0LjUyNjhWMzcuNDczMkM1NC43NSAzOC42OTI0IDU0Ljc1IDM5LjY3NTggNTQuNjg1IDQwLjQ3MjJDNTQuNjE4IDQxLjI5MjIgNTQuNDc2NCA0Mi4wMTI0IDU0LjEzNjkgNDIuNjc4N0M1My41OTc2IDQzLjczNzEgNTIuNzM3MSA0NC41OTc2IDUxLjY3ODcgNDUuMTM2OUM1MS4wMTI0IDQ1LjQ3NjQgNTAuMjkyMiA0NS42MTggNDkuNDcyMiA0NS42ODVDNDguNjc1OCA0NS43NSA0Ny42OTI0IDQ1Ljc1IDQ2LjQ3MzIgNDUuNzVINDMuNTI2OEM0Mi4zMDc2IDQ1Ljc1IDQxLjMyNDIgNDUuNzUgNDAuNTI3OCA0NS42ODVDMzkuNzA3OCA0NS42MTggMzguOTg3NiA0NS40NzY0IDM4LjMyMTMgNDUuMTM2OUMzNy4yNjI5IDQ0LjU5NzYgMzYuNDAyNCA0My43MzcxIDM1Ljg2MzEgNDIuNjc4N0MzNS41MjM2IDQyLjAxMjQgMzUuMzgyIDQxLjI5MjIgMzUuMzE1IDQwLjQ3MjJDMzUuMjUgMzkuNjc1OCAzNS4yNSAzOC42OTI0IDM1LjI1IDM3LjQ3MzJWMzQuNTI2OEMzNS4yNSAzMy4zMDc2IDM1LjI1IDMyLjMyNDIgMzUuMzE1IDMxLjUyNzhDMzUuMzgyIDMwLjcwNzggMzUuNTIzNiAyOS45ODc2IDM1Ljg2MzEgMjkuMzIxM0MzNi40MDI0IDI4LjI2MjkgMzcuMjYyOSAyNy40MDI0IDM4LjMyMTMgMjYuODYzMUMzOC45ODc2IDI2LjUyMzYgMzkuNzA3OCAyNi4zODIgNDAuNTI3OCAyNi4zMTVDNDEuMzI0MiAyNi4yNSA0Mi4zMDc2IDI2LjI1IDQzLjUyNjggMjYuMjVaTTQwLjcxMSAyOC41NTc2QzQwLjAzMDIgMjguNjEzMiAzOS42MzkxIDI4LjcxNjkgMzkuMzQyOCAyOC44Njc5QzM4LjcwNzcgMjkuMTkxNCAzOC4xOTE0IDI5LjcwNzcgMzcuODY3OSAzMC4zNDI4QzM3LjcxNjkgMzAuNjM5MSAzNy42MTMyIDMxLjAzMDIgMzcuNTU3NiAzMS43MTFDMzcuNTAwOSAzMi40MDUgMzcuNSAzMy4yOTYzIDM3LjUgMzQuNTc1VjM2LjcxNzdMMzguNTg0MiAzNS40MTY3QzM5LjU3MjQgMzQuMjMwOSA0MS4zNjU1IDM0LjE0OTYgNDIuNDU2OSAzNS4yNDFMNDYuNSAzOS4yODQxTDQ4LjI2OTQgMzcuNTE0NkM0OS4zNzU3IDM2LjQwODMgNTEuMTk4IDM2LjUwOTMgNTIuMTc1NCAzNy43MzA5TDUyLjQ5OTUgMzguMTM2MUM1Mi41IDM3LjkxMzEgNTIuNSAzNy42NzY1IDUyLjUgMzcuNDI1VjM0LjU3NUM1Mi41IDMzLjI5NjMgNTIuNDk5MSAzMi40MDUgNTIuNDQyNCAzMS43MTFDNTIuMzg2OCAzMS4wMzAyIDUyLjI4MzEgMzAuNjM5MSA1Mi4xMzIxIDMwLjM0MjhDNTEuODA4NiAyOS43MDc3IDUxLjI5MjMgMjkuMTkxNCA1MC42NTcyIDI4Ljg2NzlDNTAuMzYwOSAyOC43MTY5IDQ5Ljk2OTggMjguNjEzMiA0OS4yODkgMjguNTU3NkM0OC41OTUgMjguNTAwOSA0Ny43MDM3IDI4LjUgNDYuNDI1IDI4LjVINDMuNTc1QzQyLjI5NjMgMjguNSA0MS40MDUgMjguNTAwOSA0MC43MTEgMjguNTU3NlpNMzcuNTU3NiA0MC4yODlDMzcuNTU0MyA0MC4yNDkyIDM3LjU1MTMgNDAuMjA4OCAzNy41NDg0IDQwLjE2NzhDMzcuNTcxMSA0MC4xNDQ4IDM3LjU5MzEgNDAuMTIwNiAzNy42MTQyIDQwLjA5NTNMNDAuMzEyNyAzNi44NTcxQzQwLjQ1MzkgMzYuNjg3NyA0MC43MSAzNi42NzYxIDQwLjg2NTkgMzYuODMyTDQ1LjcwNDUgNDEuNjcwNkM0Ni4xNDM4IDQyLjEwOTkgNDYuODU2MSA0Mi4xMDk5IDQ3LjI5NTUgNDEuNjcwNkw0OS44NjA0IDM5LjEwNTZDNTAuMDE4NSAzOC45NDc2IDUwLjI3ODggMzguOTYyIDUwLjQxODQgMzkuMTM2NUw1Mi4yMzc3IDQxLjQxMDdDNTIuMjA1NiA0MS41MDEgNTIuMTcwNCA0MS41ODIyIDUyLjEzMjEgNDEuNjU3MkM1MS44MDg2IDQyLjI5MjMgNTEuMjkyMyA0Mi44MDg2IDUwLjY1NzIgNDMuMTMyMUM1MC4zNjA5IDQzLjI4MzEgNDkuOTY5OCA0My4zODY4IDQ5LjI4OSA0My40NDI0QzQ4LjU5NSA0My40OTkxIDQ3LjcwMzcgNDMuNSA0Ni40MjUgNDMuNUg0My41NzVDNDIuMjk2MyA0My41IDQxLjQwNSA0My40OTkxIDQwLjcxMSA0My40NDI0QzQwLjAzMDIgNDMuMzg2OCAzOS42MzkxIDQzLjI4MzEgMzkuMzQyOCA0My4xMzIxQzM4LjcwNzcgNDIuODA4NiAzOC4xOTE0IDQyLjI5MjMgMzcuODY3OSA0MS42NTcyQzM3LjcxNjkgNDEuMzYwOSAzNy42MTMyIDQwLjk2OTggMzcuNTU3NiA0MC4yODlaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgo8L3N2Zz4K";
 
 var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"
   }));
@@ -209,9 +211,9 @@ var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
 SvgArrowRightIcon.displayName = "ArrowRightIcon";
 
 var SvgCalendarIcon = function SvgCalendarIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.464c0 .813 0 1.469.043 2 .045.546.14 1.026.366 1.47a3.75 3.75 0 0 0 1.639 1.64c.444.226.924.32 1.47.365.531.043 1.187.043 2 .043h3.383c.323 0 .542 0 .735-.02a3.75 3.75 0 0 0 3.344-3.344c.02-.193.02-.412.02-.735v-2.883c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.521 1.995c.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h1.9c.853 0 1.447 0 1.91.038.453.037.714.107.912.207.423.216.767.56.983.984.1.197.17.458.207.912.014.18.024.38.029.609h-9.982c.006-.228.015-.429.03-.61.036-.453.106-.714.206-.911a2.25 2.25 0 0 1 .984-.984Zm-1.229 4.005v1.2c0 .853 0 1.447.038 1.91.037.453.107.714.207.912.216.423.56.767.984.983.197.1.458.17.912.207.462.037 1.057.038 1.909.038h3.306c.385 0 .52-.001.626-.012a2.25 2.25 0 0 0 2.006-2.006c.011-.106.012-.241.012-.626v-2.606h-10Z"
   }));
@@ -219,9 +221,9 @@ var SvgCalendarIcon = function SvgCalendarIcon(props) {
 SvgCalendarIcon.displayName = "CalendarIcon";
 
 var SvgCheckIcon = function SvgCheckIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"
   }));
@@ -229,9 +231,9 @@ var SvgCheckIcon = function SvgCheckIcon(props) {
 SvgCheckIcon.displayName = "CheckIcon";
 
 var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
   }));
@@ -239,9 +241,9 @@ var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
 SvgChevronDownIcon.displayName = "ChevronDownIcon";
 
 var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
   }));
@@ -249,9 +251,9 @@ var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
 SvgChevronRightIcon.displayName = "ChevronRightIcon";
 
 var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z"
   }));
@@ -879,6 +881,118 @@ const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
 
+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 getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
+    if (typeof price === 'string')
+        return price;
+    if (typeof price !== 'number')
+        return;
+    // Support legacy 3rd arg as locale string
+    const opts = typeof options === 'string' ? { locale: options } : options;
+    const locale = opts?.locale ?? 'en-US';
+    if (price >= 1_000_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000_000)}B`;
+    }
+    if (price >= 1_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000)}M`;
+    }
+    if (opts?.compact && Math.abs(price) >= 1_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        }).format(price / 1_000)}K`;
+    }
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(price);
+};
+
+const ConvertMoneyContext = createContext({
+    getTextPrice: (price) => {
+        if (typeof price === 'string')
+            return price;
+        return `${price ?? 0}`;
+    },
+});
+const convertAmount = (amount, from, to, rates) => {
+    if (from === to || !rates[from] || !rates[to])
+        return amount;
+    const converted = (amount * rates[from]) / rates[to];
+    return converted ? Number(converted.toFixed(2)) : amount;
+};
+const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }) => {
+    useFetchCurrencyRates();
+    const currencyRates = useCurrencyRatesStore((state) => state.currencyRates);
+    const getTextPrice = useCallback((price, _hasCurrency, options) => {
+        if (typeof price === 'string')
+            return price;
+        if (typeof price !== 'number')
+            return '0';
+        if (!currency)
+            return price.toString();
+        const converted = currencyRates
+            ? convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates)
+            : price;
+        return trimDecimalZeros(getPriceByCurrency(converted, currency, { locale, compact: options?.compact }) ?? '0');
+    }, [currency, locale, currencyRates]);
+    const value = useMemo(() => ({ getTextPrice }), [getTextPrice]);
+    return jsx(ConvertMoneyContext.Provider, { value: value, children: children });
+};
+const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
+
 const LINE_SERIES_COLORS = {
     comparison: SERIES_COLORS.comparison,
     single: SERIES_COLORS.current,
@@ -900,19 +1014,7 @@ const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesCol
         }, children: children }));
 };
 
-/**
- * Returns a stateful value, and a set of memoized functions to toggle it,
- * set it to true and set it to false
- */
-function useToggle(initialState) {
-    const [value, setState] = useState(initialState);
-    return {
-        value,
-        toggle: useCallback(() => setState((state) => !state), []),
-        setTrue: useCallback(() => setState(true), []),
-        setFalse: useCallback(() => setState(false), []),
-    };
-}
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
@@ -1169,8 +1271,10 @@ const readNumeric = (metric, key) => {
     return typeof raw === 'number' ? raw : 0;
 };
 
-const useAnalyticData = (getTextPrice) => {
+const useAnalyticData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
     const formatData = ({ value, formatter, name }) => {
+        console.log({ value, formatter, getTextPrice, name });
         return formatAnalyticData({ value, formatter, getTextPrice, name });
     };
     const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
@@ -1209,6 +1313,49 @@ const useFormatLineChartData = ({ metricKey, columnTypes }) => {
     return { formatValue, yAxisOptions };
 };
 
+const usePopoverResizeObserver = ({ active, onHeightChange, selector = '.Polaris-Popover__Content--fluidContent', }) => {
+    useEffect(() => {
+        if (!active)
+            return;
+        let resizeObserver = null;
+        const setupResizeObserver = () => {
+            const popoverContent = document.querySelector(selector);
+            if (popoverContent && !resizeObserver) {
+                resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const { height } = entry.contentRect;
+                        onHeightChange?.(height);
+                    }
+                });
+                resizeObserver.observe(popoverContent);
+            }
+        };
+        setTimeout(() => {
+            setupResizeObserver();
+        }, 200);
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+        };
+    }, [active, selector]);
+};
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
+    return {
+        value,
+        toggle: useCallback(() => setState((state) => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
+    };
+}
+
 const useWindowSize = () => {
     const [windowSize, setWindowSize] = useState(() => ({
         width: typeof window !== 'undefined' ? window.innerWidth : 0,
@@ -2525,4 +2672,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, useEnhancedEffect, useFetchCurrencyRates, useFormatLineChartData, usePopoverResizeObserver, useToggle, useVersionDateTimeFilters, useWindowSize };

package/dist/esm/index.mjs

@@ -1,15 +1,17 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip, Button, BlockStack, Checkbox, RadioButton, Popover, ActionList, Link, SkeletonDisplayText, List, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup } from '@shopify/polaris';
-import React, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
+import * as React from 'react';
+import React__default, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
 import dayjs from 'dayjs';
 export { default as dayjs } from 'dayjs';
 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) {
@@ -199,9 +201,9 @@ const DEFAULT_CURRENCY_ANALYTIC = 'USD';
 var THUMB_PRODUCT_DEFAULT = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSI5MCIKICBoZWlnaHQ9IjcyIgogIHZpZXdCb3g9IjAgMCA5MCA3MiIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNDguNzUgMzQuNUM0OS45OTI2IDM0LjUgNTEgMzMuNDkyNiA1MSAzMi4yNUM1MSAzMS4wMDc0IDQ5Ljk5MjYgMzAgNDguNzUgMzBDNDcuNTA3NCAzMCA0Ni41IDMxLjAwNzQgNDYuNSAzMi4yNUM0Ni41IDMzLjQ5MjYgNDcuNTA3NCAzNC41IDQ4Ljc1IDM0LjVaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgogIDxwYXRoCiAgICBmaWxsUnVsZT0iZXZlbm9kZCIKICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgZD0iTTQzLjUyNjggMjYuMjVINDYuNDczMkM0Ny42OTI0IDI2LjI1IDQ4LjY3NTggMjYuMjUgNDkuNDcyMiAyNi4zMTVDNTAuMjkyMiAyNi4zODIgNTEuMDEyNCAyNi41MjM2IDUxLjY3ODcgMjYuODYzMUM1Mi43MzcxIDI3LjQwMjQgNTMuNTk3NiAyOC4yNjI5IDU0LjEzNjkgMjkuMzIxM0M1NC40NzY0IDI5Ljk4NzYgNTQuNjE4IDMwLjcwNzggNTQuNjg1IDMxLjUyNzhDNTQuNzUgMzIuMzI0MiA1NC43NSAzMy4zMDc2IDU0Ljc1IDM0LjUyNjhWMzcuNDczMkM1NC43NSAzOC42OTI0IDU0Ljc1IDM5LjY3NTggNTQuNjg1IDQwLjQ3MjJDNTQuNjE4IDQxLjI5MjIgNTQuNDc2NCA0Mi4wMTI0IDU0LjEzNjkgNDIuNjc4N0M1My41OTc2IDQzLjczNzEgNTIuNzM3MSA0NC41OTc2IDUxLjY3ODcgNDUuMTM2OUM1MS4wMTI0IDQ1LjQ3NjQgNTAuMjkyMiA0NS42MTggNDkuNDcyMiA0NS42ODVDNDguNjc1OCA0NS43NSA0Ny42OTI0IDQ1Ljc1IDQ2LjQ3MzIgNDUuNzVINDMuNTI2OEM0Mi4zMDc2IDQ1Ljc1IDQxLjMyNDIgNDUuNzUgNDAuNTI3OCA0NS42ODVDMzkuNzA3OCA0NS42MTggMzguOTg3NiA0NS40NzY0IDM4LjMyMTMgNDUuMTM2OUMzNy4yNjI5IDQ0LjU5NzYgMzYuNDAyNCA0My43MzcxIDM1Ljg2MzEgNDIuNjc4N0MzNS41MjM2IDQyLjAxMjQgMzUuMzgyIDQxLjI5MjIgMzUuMzE1IDQwLjQ3MjJDMzUuMjUgMzkuNjc1OCAzNS4yNSAzOC42OTI0IDM1LjI1IDM3LjQ3MzJWMzQuNTI2OEMzNS4yNSAzMy4zMDc2IDM1LjI1IDMyLjMyNDIgMzUuMzE1IDMxLjUyNzhDMzUuMzgyIDMwLjcwNzggMzUuNTIzNiAyOS45ODc2IDM1Ljg2MzEgMjkuMzIxM0MzNi40MDI0IDI4LjI2MjkgMzcuMjYyOSAyNy40MDI0IDM4LjMyMTMgMjYuODYzMUMzOC45ODc2IDI2LjUyMzYgMzkuNzA3OCAyNi4zODIgNDAuNTI3OCAyNi4zMTVDNDEuMzI0MiAyNi4yNSA0Mi4zMDc2IDI2LjI1IDQzLjUyNjggMjYuMjVaTTQwLjcxMSAyOC41NTc2QzQwLjAzMDIgMjguNjEzMiAzOS42MzkxIDI4LjcxNjkgMzkuMzQyOCAyOC44Njc5QzM4LjcwNzcgMjkuMTkxNCAzOC4xOTE0IDI5LjcwNzcgMzcuODY3OSAzMC4zNDI4QzM3LjcxNjkgMzAuNjM5MSAzNy42MTMyIDMxLjAzMDIgMzcuNTU3NiAzMS43MTFDMzcuNTAwOSAzMi40MDUgMzcuNSAzMy4yOTYzIDM3LjUgMzQuNTc1VjM2LjcxNzdMMzguNTg0MiAzNS40MTY3QzM5LjU3MjQgMzQuMjMwOSA0MS4zNjU1IDM0LjE0OTYgNDIuNDU2OSAzNS4yNDFMNDYuNSAzOS4yODQxTDQ4LjI2OTQgMzcuNTE0NkM0OS4zNzU3IDM2LjQwODMgNTEuMTk4IDM2LjUwOTMgNTIuMTc1NCAzNy43MzA5TDUyLjQ5OTUgMzguMTM2MUM1Mi41IDM3LjkxMzEgNTIuNSAzNy42NzY1IDUyLjUgMzcuNDI1VjM0LjU3NUM1Mi41IDMzLjI5NjMgNTIuNDk5MSAzMi40MDUgNTIuNDQyNCAzMS43MTFDNTIuMzg2OCAzMS4wMzAyIDUyLjI4MzEgMzAuNjM5MSA1Mi4xMzIxIDMwLjM0MjhDNTEuODA4NiAyOS43MDc3IDUxLjI5MjMgMjkuMTkxNCA1MC42NTcyIDI4Ljg2NzlDNTAuMzYwOSAyOC43MTY5IDQ5Ljk2OTggMjguNjEzMiA0OS4yODkgMjguNTU3NkM0OC41OTUgMjguNTAwOSA0Ny43MDM3IDI4LjUgNDYuNDI1IDI4LjVINDMuNTc1QzQyLjI5NjMgMjguNSA0MS40MDUgMjguNTAwOSA0MC43MTEgMjguNTU3NlpNMzcuNTU3NiA0MC4yODlDMzcuNTU0MyA0MC4yNDkyIDM3LjU1MTMgNDAuMjA4OCAzNy41NDg0IDQwLjE2NzhDMzcuNTcxMSA0MC4xNDQ4IDM3LjU5MzEgNDAuMTIwNiAzNy42MTQyIDQwLjA5NTNMNDAuMzEyNyAzNi44NTcxQzQwLjQ1MzkgMzYuNjg3NyA0MC43MSAzNi42NzYxIDQwLjg2NTkgMzYuODMyTDQ1LjcwNDUgNDEuNjcwNkM0Ni4xNDM4IDQyLjEwOTkgNDYuODU2MSA0Mi4xMDk5IDQ3LjI5NTUgNDEuNjcwNkw0OS44NjA0IDM5LjEwNTZDNTAuMDE4NSAzOC45NDc2IDUwLjI3ODggMzguOTYyIDUwLjQxODQgMzkuMTM2NUw1Mi4yMzc3IDQxLjQxMDdDNTIuMjA1NiA0MS41MDEgNTIuMTcwNCA0MS41ODIyIDUyLjEzMjEgNDEuNjU3MkM1MS44MDg2IDQyLjI5MjMgNTEuMjkyMyA0Mi44MDg2IDUwLjY1NzIgNDMuMTMyMUM1MC4zNjA5IDQzLjI4MzEgNDkuOTY5OCA0My4zODY4IDQ5LjI4OSA0My40NDI0QzQ4LjU5NSA0My40OTkxIDQ3LjcwMzcgNDMuNSA0Ni40MjUgNDMuNUg0My41NzVDNDIuMjk2MyA0My41IDQxLjQwNSA0My40OTkxIDQwLjcxMSA0My40NDI0QzQwLjAzMDIgNDMuMzg2OCAzOS42MzkxIDQzLjI4MzEgMzkuMzQyOCA0My4xMzIxQzM4LjcwNzcgNDIuODA4NiAzOC4xOTE0IDQyLjI5MjMgMzcuODY3OSA0MS42NTcyQzM3LjcxNjkgNDEuMzYwOSAzNy42MTMyIDQwLjk2OTggMzcuNTU3NiA0MC4yODlaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgo8L3N2Zz4K";
 
 var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"
   }));
@@ -209,9 +211,9 @@ var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
 SvgArrowRightIcon.displayName = "ArrowRightIcon";
 
 var SvgCalendarIcon = function SvgCalendarIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.464c0 .813 0 1.469.043 2 .045.546.14 1.026.366 1.47a3.75 3.75 0 0 0 1.639 1.64c.444.226.924.32 1.47.365.531.043 1.187.043 2 .043h3.383c.323 0 .542 0 .735-.02a3.75 3.75 0 0 0 3.344-3.344c.02-.193.02-.412.02-.735v-2.883c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.521 1.995c.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h1.9c.853 0 1.447 0 1.91.038.453.037.714.107.912.207.423.216.767.56.983.984.1.197.17.458.207.912.014.18.024.38.029.609h-9.982c.006-.228.015-.429.03-.61.036-.453.106-.714.206-.911a2.25 2.25 0 0 1 .984-.984Zm-1.229 4.005v1.2c0 .853 0 1.447.038 1.91.037.453.107.714.207.912.216.423.56.767.984.983.197.1.458.17.912.207.462.037 1.057.038 1.909.038h3.306c.385 0 .52-.001.626-.012a2.25 2.25 0 0 0 2.006-2.006c.011-.106.012-.241.012-.626v-2.606h-10Z"
   }));
@@ -219,9 +221,9 @@ var SvgCalendarIcon = function SvgCalendarIcon(props) {
 SvgCalendarIcon.displayName = "CalendarIcon";
 
 var SvgCheckIcon = function SvgCheckIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"
   }));
@@ -229,9 +231,9 @@ var SvgCheckIcon = function SvgCheckIcon(props) {
 SvgCheckIcon.displayName = "CheckIcon";
 
 var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
   }));
@@ -239,9 +241,9 @@ var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
 SvgChevronDownIcon.displayName = "ChevronDownIcon";
 
 var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
   }));
@@ -249,9 +251,9 @@ var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
 SvgChevronRightIcon.displayName = "ChevronRightIcon";
 
 var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     d: "M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z"
   }));
@@ -879,6 +881,118 @@ const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
 
+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 getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
+    if (typeof price === 'string')
+        return price;
+    if (typeof price !== 'number')
+        return;
+    // Support legacy 3rd arg as locale string
+    const opts = typeof options === 'string' ? { locale: options } : options;
+    const locale = opts?.locale ?? 'en-US';
+    if (price >= 1_000_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000_000)}B`;
+    }
+    if (price >= 1_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000)}M`;
+    }
+    if (opts?.compact && Math.abs(price) >= 1_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        }).format(price / 1_000)}K`;
+    }
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(price);
+};
+
+const ConvertMoneyContext = createContext({
+    getTextPrice: (price) => {
+        if (typeof price === 'string')
+            return price;
+        return `${price ?? 0}`;
+    },
+});
+const convertAmount = (amount, from, to, rates) => {
+    if (from === to || !rates[from] || !rates[to])
+        return amount;
+    const converted = (amount * rates[from]) / rates[to];
+    return converted ? Number(converted.toFixed(2)) : amount;
+};
+const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }) => {
+    useFetchCurrencyRates();
+    const currencyRates = useCurrencyRatesStore((state) => state.currencyRates);
+    const getTextPrice = useCallback((price, _hasCurrency, options) => {
+        if (typeof price === 'string')
+            return price;
+        if (typeof price !== 'number')
+            return '0';
+        if (!currency)
+            return price.toString();
+        const converted = currencyRates
+            ? convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates)
+            : price;
+        return trimDecimalZeros(getPriceByCurrency(converted, currency, { locale, compact: options?.compact }) ?? '0');
+    }, [currency, locale, currencyRates]);
+    const value = useMemo(() => ({ getTextPrice }), [getTextPrice]);
+    return jsx(ConvertMoneyContext.Provider, { value: value, children: children });
+};
+const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
+
 const LINE_SERIES_COLORS = {
     comparison: SERIES_COLORS.comparison,
     single: SERIES_COLORS.current,
@@ -900,19 +1014,7 @@ const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesCol
         }, children: children }));
 };
 
-/**
- * Returns a stateful value, and a set of memoized functions to toggle it,
- * set it to true and set it to false
- */
-function useToggle(initialState) {
-    const [value, setState] = useState(initialState);
-    return {
-        value,
-        toggle: useCallback(() => setState((state) => !state), []),
-        setTrue: useCallback(() => setState(true), []),
-        setFalse: useCallback(() => setState(false), []),
-    };
-}
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
@@ -1169,8 +1271,10 @@ const readNumeric = (metric, key) => {
     return typeof raw === 'number' ? raw : 0;
 };
 
-const useAnalyticData = (getTextPrice) => {
+const useAnalyticData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
     const formatData = ({ value, formatter, name }) => {
+        console.log({ value, formatter, getTextPrice, name });
         return formatAnalyticData({ value, formatter, getTextPrice, name });
     };
     const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
@@ -1209,6 +1313,49 @@ const useFormatLineChartData = ({ metricKey, columnTypes }) => {
     return { formatValue, yAxisOptions };
 };
 
+const usePopoverResizeObserver = ({ active, onHeightChange, selector = '.Polaris-Popover__Content--fluidContent', }) => {
+    useEffect(() => {
+        if (!active)
+            return;
+        let resizeObserver = null;
+        const setupResizeObserver = () => {
+            const popoverContent = document.querySelector(selector);
+            if (popoverContent && !resizeObserver) {
+                resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const { height } = entry.contentRect;
+                        onHeightChange?.(height);
+                    }
+                });
+                resizeObserver.observe(popoverContent);
+            }
+        };
+        setTimeout(() => {
+            setupResizeObserver();
+        }, 200);
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+        };
+    }, [active, selector]);
+};
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
+    return {
+        value,
+        toggle: useCallback(() => setState((state) => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
+    };
+}
+
 const useWindowSize = () => {
     const [windowSize, setWindowSize] = useState(() => ({
         width: typeof window !== 'undefined' ? window.innerWidth : 0,
@@ -2525,4 +2672,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, useEnhancedEffect, useFetchCurrencyRates, useFormatLineChartData, usePopoverResizeObserver, useToggle, useVersionDateTimeFilters, useWindowSize };

package/dist/esm/providers/ConvertMoneyProvider.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { IGetTextPrice } from '@/core/gemxql/helpers/formatAnalyticData';
+interface IConvertMoneyContext {
+    getTextPrice: IGetTextPrice;
+}
+export interface IProps {
+    children: ReactNode;
+    currency?: string;
+    locale?: string;
+}
+export declare const ConvertMoneyProvider: ({ children, currency, locale }: IProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useConvertMoneyContext: () => IConvertMoneyContext;
+export {};

package/dist/esm/providers/currencyRatesStore.d.ts

@@ -0,0 +1,7 @@
+export type ICurrencyRates = Record<string, number>;
+interface ICurrencyRatesStore {
+    currencyRates: ICurrencyRates | null;
+    setCurrencyRates: (rates: ICurrencyRates) => void;
+}
+export declare const useCurrencyRatesStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ICurrencyRatesStore>>;
+export {};

package/dist/esm/providers/index.d.ts

@@ -1 +1,3 @@
+export { ConvertMoneyProvider, useConvertMoneyContext } from './ConvertMoneyProvider';
+export type { IProps as IConvertMoneyProviderProps } from './ConvertMoneyProvider';
 export { MetricChartProvider } from './MetricChartProvider';

package/dist/esm/providers/useFetchCurrencyRates.d.ts

@@ -0,0 +1 @@
+export declare const useFetchCurrencyRates: () => void;

package/dist/esm/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getDonutChartTooltipPosition.d.ts

@@ -4,5 +4,5 @@ interface Props extends Pick<TooltipPositionParams, 'event' | 'eventType' | 'ind
     containerBounds: BoundingRect;
     parentElement: SVGSVGElement | null;
 }
-export declare function getDonutChartTooltipPosition({ containerBounds, event, eventType, index, parentElement }: Props): import("../types").TooltipPosition;
+export declare function getDonutChartTooltipPosition({ containerBounds, event, eventType, index, parentElement }: Props): import("..").TooltipPosition;
 export {};