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

package/dist/esm/components/GTimePicker/hooks/useDateTimeFilter.d.ts

@@ -4,14 +4,14 @@ export declare const useDateTimeFilter: () => {
     LAST_7_DAYS_DATE_RANGE: {
         since: string | number;
         until: string | number;
-        getDateRange: (date: import("dayjs").Dayjs) => import("../types").IDateTimeFilterValue;
+        getDateRange: (date: import("dayjs").Dayjs) => import("..").IDateTimeFilterValue;
         title: string;
         alias: string;
     };
     LAST_30_DAYS_DATE_RANGE: {
         since: string | number;
         until: string | number;
-        getDateRange: (date: import("dayjs").Dayjs) => import("../types").IDateTimeFilterValue;
+        getDateRange: (date: import("dayjs").Dayjs) => import("..").IDateTimeFilterValue;
         title: string;
         alias: string;
     };

package/dist/esm/core/gemxql/helpers/extractQueryData.d.ts

@@ -1,5 +1,5 @@
 import type { GemxQlQueryResponse, TableDataType } from '../graphql';
 export type ColumnTypesMap = Record<string, TableDataType>;
 export declare const extractQueryRows: (response?: GemxQlQueryResponse) => Record<string, unknown>[];
-export declare const extractQueryColumns: (response?: GemxQlQueryResponse) => import("../graphql").Maybe<Pick<import("../graphql").IColumn, "dataType" | "displayName" | "name">>[];
+export declare const extractQueryColumns: (response?: GemxQlQueryResponse) => import("..").Maybe<Pick<import("..").IColumn, "dataType" | "displayName" | "name">>[];
 export declare const extractColumnTypes: (response?: GemxQlQueryResponse) => ColumnTypesMap;

package/dist/esm/gemxql.js

@@ -4,8 +4,8 @@ import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useQuery } from '@tanstack/react-query';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { create } from 'zustand';
+import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
@@ -1130,6 +1130,7 @@ const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
 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, }) => {

package/dist/esm/gemxql.mjs

@@ -4,8 +4,8 @@ import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
 import { useQuery } from '@tanstack/react-query';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 import { create } from 'zustand';
+import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
 
 const NONE_VALUE = 'None';
 const PLACEHOLDER_VALUE = '-';
@@ -1130,6 +1130,7 @@ const useConvertMoneyContext = () => useContext(ConvertMoneyContext);
 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, }) => {

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

@@ -1,5 +1,6 @@
 export { useEnhancedEffect } from './useEnhancedEffect';
-export { useToggle } from './useToggle';
+export { useFetchCurrencyRates } from './useFetchCurrencyRates';
 export { useFormatLineChartData } from './useFormatLineChartData';
 export { usePopoverResizeObserver } from './usePopoverResizeObserver';
+export { useToggle } from './useToggle';
 export { useWindowSize } from './useWindowSize';

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

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

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -1,7 +1,8 @@
 "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';
@@ -200,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"
   }));
@@ -210,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"
   }));
@@ -220,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"
   }));
@@ -230,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"
   }));
@@ -240,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"
   }));
@@ -250,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"
   }));
@@ -880,44 +881,6 @@ 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 }),
@@ -959,6 +922,44 @@ const useFetchCurrencyRates = () => {
     }, [data, setCurrencyRates]);
 };
 
+const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
+    if (typeof price === 'string')
+        return price;
+    if (typeof price !== 'number')
+        return;
+    // Support legacy 3rd arg as locale string
+    const opts = typeof options === 'string' ? { locale: options } : options;
+    const locale = opts?.locale ?? 'en-US';
+    if (price >= 1_000_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000_000)}B`;
+    }
+    if (price >= 1_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000)}M`;
+    }
+    if (opts?.compact && Math.abs(price) >= 1_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        }).format(price / 1_000)}K`;
+    }
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(price);
+};
+
 const ConvertMoneyContext = createContext({
     getTextPrice: (price) => {
         if (typeof price === 'string')
@@ -1013,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 = '-';
@@ -1285,6 +1274,7 @@ const readNumeric = (metric, key) => {
 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, }) => {
@@ -1323,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,
@@ -2639,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, 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 };
+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,7 +1,8 @@
 "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';
@@ -200,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"
   }));
@@ -210,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"
   }));
@@ -220,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"
   }));
@@ -230,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"
   }));
@@ -240,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"
   }));
@@ -250,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"
   }));
@@ -880,44 +881,6 @@ 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 }),
@@ -959,6 +922,44 @@ const useFetchCurrencyRates = () => {
     }, [data, setCurrencyRates]);
 };
 
+const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
+    if (typeof price === 'string')
+        return price;
+    if (typeof price !== 'number')
+        return;
+    // Support legacy 3rd arg as locale string
+    const opts = typeof options === 'string' ? { locale: options } : options;
+    const locale = opts?.locale ?? 'en-US';
+    if (price >= 1_000_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000_000)}B`;
+    }
+    if (price >= 1_000_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(price / 1_000_000)}M`;
+    }
+    if (opts?.compact && Math.abs(price) >= 1_000) {
+        return `${new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        }).format(price / 1_000)}K`;
+    }
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(price);
+};
+
 const ConvertMoneyContext = createContext({
     getTextPrice: (price) => {
         if (typeof price === 'string')
@@ -1013,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 = '-';
@@ -1285,6 +1274,7 @@ const readNumeric = (metric, key) => {
 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, }) => {
@@ -1323,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,
@@ -2639,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, 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 };
+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/index.d.ts

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

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 {};

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

@@ -7,5 +7,5 @@ interface Props extends Omit<TooltipPositionParams, 'xScale'> {
     scrollY: number;
     xScale: ScaleLinear<number, number>;
 }
-export declare function getLineChartTooltipPosition({ containerBounds, chartBounds, data, event, eventType, index, isTouchDevice, longestSeriesIndex, scrollY, xScale, }: Props): import("../types").TooltipPosition;
+export declare function getLineChartTooltipPosition({ containerBounds, chartBounds, data, event, eventType, index, isTouchDevice, longestSeriesIndex, scrollY, xScale, }: Props): import("..").TooltipPosition;
 export {};

package/dist/esm/stores/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 {};