@levi-gemcommerce/analytics 2.0.4-dev.1 → 2.1.0-test.0

package/dist/esm/shared/charts/components/GPolarisViz/components/Arc/Arc.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { uniqueId, getGradientFromColor, useSpringConfig, ARC_DATA_CHANGE_ANIMATION_CONFIG, ARC_LOAD_ANIMATION_CONFIG, getColorVisionStylesForActiveIndex, getColorVisionEventAttrs, COLOR_VISION_SINGLE_ITEM, DataType } from '@shopify/polaris-viz-core';
+import { ConicGradientWithStops } from '../ConicGradientWithStops/ConicGradientWithStops.js';
+import { useSpring, animated, to } from '@react-spring/web';
+import { ARC_PAD_ANGLE } from '../../constants.js';
+import { classNames } from '../../utilities/classnames.js';
+import { useMemo, Fragment } from 'react';
+import { arc } from 'd3-shape';
+import styles from './Arc.module.scss.js';
+
+const ANIMATION_SIZE_BUFFER = 30;
+function Arc({ animationDelay = 100, radius, width, height, startAngle, endAngle, color, cornerRadius, thickness, index = 0, isAnimated, activeIndex = 0, }) {
+    const gradientId = useMemo(() => uniqueId('DonutChart'), []);
+    const createArc = arc().cornerRadius(cornerRadius);
+    const gradient = getGradientFromColor(color);
+    const springConfig = useSpringConfig({
+        animationDelay: index * animationDelay,
+        shouldAnimate: isAnimated,
+        mountedSpringConfig: ARC_DATA_CHANGE_ANIMATION_CONFIG,
+        unmountedSpringConfig: ARC_LOAD_ANIMATION_CONFIG,
+    });
+    const { animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle, } = useSpring({
+        animatedInnerRadius: radius - thickness,
+        animatedOuterRadius: radius,
+        animatedStartAngle: startAngle,
+        animatedEndAngle: endAngle,
+        animatedPadAngle: ARC_PAD_ANGLE,
+        from: {
+            animatedOuterRadius: radius - thickness,
+            animatedInnerRadius: radius - thickness,
+        },
+        ...springConfig,
+    });
+    return (jsxs(Fragment, { children: [jsx("clipPath", { id: gradientId, transform: `translate(${width / 2 - ANIMATION_SIZE_BUFFER} ${height / 2 - ANIMATION_SIZE_BUFFER})`, children: jsx(animated.path, { className: classNames(styles.Arc), d: to([
+                        animatedInnerRadius,
+                        animatedOuterRadius,
+                        animatedStartAngle,
+                        animatedEndAngle,
+                        animatedPadAngle,
+                    ], (animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle) => {
+                        return createArc({
+                            innerRadius: animatedInnerRadius,
+                            outerRadius: animatedOuterRadius,
+                            startAngle: animatedStartAngle,
+                            endAngle: animatedEndAngle,
+                            padAngle: animatedPadAngle,
+                        });
+                    }) }) }), jsx("g", { style: {
+                    ...getColorVisionStylesForActiveIndex({
+                        activeIndex,
+                        index,
+                    }),
+                }, className: classNames(styles.Arc), ...getColorVisionEventAttrs({
+                    type: COLOR_VISION_SINGLE_ITEM,
+                    index,
+                }), clipPath: `url(#${gradientId})`, "data-type": DataType.Arc, "data-index": index, "aria-hidden": false, "data-start-angle": startAngle, "data-end-angle": endAngle, children: jsx(ConicGradientWithStops, { x: width / -2 - ANIMATION_SIZE_BUFFER, y: height / -2 - ANIMATION_SIZE_BUFFER, height: radius * 4, width: radius * 4, gradient: gradient }) })] }));
+}
+
+export { Arc };

package/dist/esm/shared/charts/components/GPolarisViz/components/Arc/Arc.mjs

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { uniqueId, getGradientFromColor, useSpringConfig, ARC_DATA_CHANGE_ANIMATION_CONFIG, ARC_LOAD_ANIMATION_CONFIG, getColorVisionStylesForActiveIndex, getColorVisionEventAttrs, COLOR_VISION_SINGLE_ITEM, DataType } from '@shopify/polaris-viz-core';
+import { ConicGradientWithStops } from '../ConicGradientWithStops/ConicGradientWithStops.mjs';
+import { useSpring, animated, to } from '@react-spring/web';
+import { ARC_PAD_ANGLE } from '../../constants.mjs';
+import { classNames } from '../../utilities/classnames.mjs';
+import { useMemo, Fragment } from 'react';
+import { arc } from 'd3-shape';
+import styles from './Arc.module.scss.mjs';
+
+const ANIMATION_SIZE_BUFFER = 30;
+function Arc({ animationDelay = 100, radius, width, height, startAngle, endAngle, color, cornerRadius, thickness, index = 0, isAnimated, activeIndex = 0, }) {
+    const gradientId = useMemo(() => uniqueId('DonutChart'), []);
+    const createArc = arc().cornerRadius(cornerRadius);
+    const gradient = getGradientFromColor(color);
+    const springConfig = useSpringConfig({
+        animationDelay: index * animationDelay,
+        shouldAnimate: isAnimated,
+        mountedSpringConfig: ARC_DATA_CHANGE_ANIMATION_CONFIG,
+        unmountedSpringConfig: ARC_LOAD_ANIMATION_CONFIG,
+    });
+    const { animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle, } = useSpring({
+        animatedInnerRadius: radius - thickness,
+        animatedOuterRadius: radius,
+        animatedStartAngle: startAngle,
+        animatedEndAngle: endAngle,
+        animatedPadAngle: ARC_PAD_ANGLE,
+        from: {
+            animatedOuterRadius: radius - thickness,
+            animatedInnerRadius: radius - thickness,
+        },
+        ...springConfig,
+    });
+    return (jsxs(Fragment, { children: [jsx("clipPath", { id: gradientId, transform: `translate(${width / 2 - ANIMATION_SIZE_BUFFER} ${height / 2 - ANIMATION_SIZE_BUFFER})`, children: jsx(animated.path, { className: classNames(styles.Arc), d: to([
+                        animatedInnerRadius,
+                        animatedOuterRadius,
+                        animatedStartAngle,
+                        animatedEndAngle,
+                        animatedPadAngle,
+                    ], (animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle) => {
+                        return createArc({
+                            innerRadius: animatedInnerRadius,
+                            outerRadius: animatedOuterRadius,
+                            startAngle: animatedStartAngle,
+                            endAngle: animatedEndAngle,
+                            padAngle: animatedPadAngle,
+                        });
+                    }) }) }), jsx("g", { style: {
+                    ...getColorVisionStylesForActiveIndex({
+                        activeIndex,
+                        index,
+                    }),
+                }, className: classNames(styles.Arc), ...getColorVisionEventAttrs({
+                    type: COLOR_VISION_SINGLE_ITEM,
+                    index,
+                }), clipPath: `url(#${gradientId})`, "data-type": DataType.Arc, "data-index": index, "aria-hidden": false, "data-start-angle": startAngle, "data-end-angle": endAngle, children: jsx(ConicGradientWithStops, { x: width / -2 - ANIMATION_SIZE_BUFFER, y: height / -2 - ANIMATION_SIZE_BUFFER, height: radius * 4, width: radius * 4, gradient: gradient }) })] }));
+}
+
+export { Arc };

package/dist/esm/shared/charts/components/GPolarisViz/components/Arc/Arc.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Arc-module_Arc__0V6fz{outline:none}.Arc-module_Arc__0V6fz:focus,.Arc-module_Arc__0V6fz:focus-visible{outline:none!important}";
+var styles = {"Arc":"Arc-module_Arc__0V6fz"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/Arc/Arc.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".Arc-module_Arc__0V6fz{outline:none}.Arc-module_Arc__0V6fz:focus,.Arc-module_Arc__0V6fz:focus-visible{outline:none!important}";
+var styles = {"Arc":"Arc-module_Arc__0V6fz"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartContainer/ChartContainer.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { uniqueId, usePolarisVizContext, isLargeDataSet, getComparisonSeriesIndexes, isTouchDevice, useTheme, ChartContext } from '@shopify/polaris-viz-core';
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion.js';
+import { useContainerBounds } from './hooks/useContainerBounds.js';
+import { ChartErrorBoundary } from '../ChartErrorBoundary/ChartErrorBoundary.js';
+import { getChartId } from '../../utilities/getChartId.js';
+import { EMPTY_BOUNDS } from '../../constants.js';
+import { useState, useMemo } from 'react';
+import characterWidthOffsets from '../../data/character-width-offsets.json.js';
+import characterWidths from '../../data/character-widths.json.js';
+import styles from './ChartContainer.module.scss.js';
+
+const ChartContainer = (props) => {
+    const id = props.id ?? uniqueId('chart');
+    const { prefersReducedMotion } = usePrefersReducedMotion();
+    const [isPrinting, setIsPrinting] = useState(false);
+    const { onError: onErrorProvider } = usePolarisVizContext();
+    const dataTooBigToAnimate = useMemo(() => {
+        return isLargeDataSet(props.data, props.type);
+    }, [props.data, props.type]);
+    const { containerBounds, updateContainerBounds, setRef } = useContainerBounds({
+        onIsPrintingChange: setIsPrinting,
+        scrollContainer: props.scrollContainer,
+        sparkChart: props.sparkChart,
+    });
+    const value = useMemo(() => {
+        const shouldAnimate = props.isAnimated && !prefersReducedMotion && !dataTooBigToAnimate;
+        const printFriendlyTheme = isPrinting ? 'Print' : props.theme;
+        const comparisonSeriesIndexes = getComparisonSeriesIndexes(props.data);
+        const comparisonIndexes = comparisonSeriesIndexes.map(({ comparisonIndex }) => comparisonIndex);
+        return {
+            shouldAnimate,
+            id,
+            characterWidths,
+            characterWidthOffsets,
+            theme: printFriendlyTheme,
+            isTouchDevice: typeof window === 'undefined' ? false : isTouchDevice(),
+            isPerformanceImpacted: dataTooBigToAnimate,
+            scrollContainer: props.scrollContainer,
+            containerBounds: containerBounds ?? EMPTY_BOUNDS,
+            comparisonSeriesIndexes,
+            comparisonIndexes,
+        };
+    }, [
+        id,
+        isPrinting,
+        prefersReducedMotion,
+        props.isAnimated,
+        props.theme,
+        dataTooBigToAnimate,
+        props.scrollContainer,
+        containerBounds,
+        props.data,
+    ]);
+    const { chartContainer, grid } = useTheme(value.theme);
+    // If there is no vertical overflow and a custom padding is not defined,
+    // add padding so that the top y-axis label is not cut off
+    const padding = !grid.verticalOverflow && chartContainer.padding == null ? '3px 0 0 0' : chartContainer.padding;
+    const minHeight = (props.height ?? props.sparkChart)
+        ? chartContainer.sparkChartMinHeight
+        : chartContainer.minHeight;
+    return (jsx(ChartContext.Provider, { value: value, children: jsx("div", { className: styles.ChartContainer, style: {
+                background: chartContainer.backgroundColor,
+                padding,
+                borderRadius: chartContainer.borderRadius,
+            }, id: getChartId(value.id), children: jsx("div", { className: styles.ContainerBounds, ref: setRef, style: {
+                    minHeight,
+                }, onMouseEnter: updateContainerBounds, onFocus: updateContainerBounds, onTouchStart: updateContainerBounds, children: !hasValidBounds(value.containerBounds) ? null : (jsx(ChartErrorBoundary, { type: props.skeletonType ?? 'Default', containerBounds: value.containerBounds, data: props.data, onError: props.onError ?? onErrorProvider, children: jsx("div", { className: styles.Chart, style: {
+                            height: props.height ?? value.containerBounds.height,
+                            width: value.containerBounds.width,
+                        }, children: props.children }) })) }) }) }));
+};
+function hasValidBounds(containerBounds) {
+    return containerBounds.width > 0 && containerBounds.height > 0;
+}
+
+export { ChartContainer };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartContainer/ChartContainer.mjs

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { uniqueId, usePolarisVizContext, isLargeDataSet, getComparisonSeriesIndexes, isTouchDevice, useTheme, ChartContext } from '@shopify/polaris-viz-core';
+import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion.mjs';
+import { useContainerBounds } from './hooks/useContainerBounds.mjs';
+import { ChartErrorBoundary } from '../ChartErrorBoundary/ChartErrorBoundary.mjs';
+import { getChartId } from '../../utilities/getChartId.mjs';
+import { EMPTY_BOUNDS } from '../../constants.mjs';
+import { useState, useMemo } from 'react';
+import characterWidthOffsets from '../../data/character-width-offsets.json.mjs';
+import characterWidths from '../../data/character-widths.json.mjs';
+import styles from './ChartContainer.module.scss.mjs';
+
+const ChartContainer = (props) => {
+    const id = props.id ?? uniqueId('chart');
+    const { prefersReducedMotion } = usePrefersReducedMotion();
+    const [isPrinting, setIsPrinting] = useState(false);
+    const { onError: onErrorProvider } = usePolarisVizContext();
+    const dataTooBigToAnimate = useMemo(() => {
+        return isLargeDataSet(props.data, props.type);
+    }, [props.data, props.type]);
+    const { containerBounds, updateContainerBounds, setRef } = useContainerBounds({
+        onIsPrintingChange: setIsPrinting,
+        scrollContainer: props.scrollContainer,
+        sparkChart: props.sparkChart,
+    });
+    const value = useMemo(() => {
+        const shouldAnimate = props.isAnimated && !prefersReducedMotion && !dataTooBigToAnimate;
+        const printFriendlyTheme = isPrinting ? 'Print' : props.theme;
+        const comparisonSeriesIndexes = getComparisonSeriesIndexes(props.data);
+        const comparisonIndexes = comparisonSeriesIndexes.map(({ comparisonIndex }) => comparisonIndex);
+        return {
+            shouldAnimate,
+            id,
+            characterWidths,
+            characterWidthOffsets,
+            theme: printFriendlyTheme,
+            isTouchDevice: typeof window === 'undefined' ? false : isTouchDevice(),
+            isPerformanceImpacted: dataTooBigToAnimate,
+            scrollContainer: props.scrollContainer,
+            containerBounds: containerBounds ?? EMPTY_BOUNDS,
+            comparisonSeriesIndexes,
+            comparisonIndexes,
+        };
+    }, [
+        id,
+        isPrinting,
+        prefersReducedMotion,
+        props.isAnimated,
+        props.theme,
+        dataTooBigToAnimate,
+        props.scrollContainer,
+        containerBounds,
+        props.data,
+    ]);
+    const { chartContainer, grid } = useTheme(value.theme);
+    // If there is no vertical overflow and a custom padding is not defined,
+    // add padding so that the top y-axis label is not cut off
+    const padding = !grid.verticalOverflow && chartContainer.padding == null ? '3px 0 0 0' : chartContainer.padding;
+    const minHeight = (props.height ?? props.sparkChart)
+        ? chartContainer.sparkChartMinHeight
+        : chartContainer.minHeight;
+    return (jsx(ChartContext.Provider, { value: value, children: jsx("div", { className: styles.ChartContainer, style: {
+                background: chartContainer.backgroundColor,
+                padding,
+                borderRadius: chartContainer.borderRadius,
+            }, id: getChartId(value.id), children: jsx("div", { className: styles.ContainerBounds, ref: setRef, style: {
+                    minHeight,
+                }, onMouseEnter: updateContainerBounds, onFocus: updateContainerBounds, onTouchStart: updateContainerBounds, children: !hasValidBounds(value.containerBounds) ? null : (jsx(ChartErrorBoundary, { type: props.skeletonType ?? 'Default', containerBounds: value.containerBounds, data: props.data, onError: props.onError ?? onErrorProvider, children: jsx("div", { className: styles.Chart, style: {
+                            height: props.height ?? value.containerBounds.height,
+                            width: value.containerBounds.width,
+                        }, children: props.children }) })) }) }) }));
+};
+function hasValidBounds(containerBounds) {
+    return containerBounds.width > 0 && containerBounds.height > 0;
+}
+
+export { ChartContainer };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartContainer/ChartContainer.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ChartContainer-module_ChartContainer__1Fc-v{box-sizing:border-box;font-family:Inter,-apple-system,\"system-ui\",San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:12px;height:100%;position:relative;width:100%}.ChartContainer-module_ChartContainer__1Fc-v :focus,.ChartContainer-module_ChartContainer__1Fc-v :focus-visible{outline:2px solid #4b92e5;outline-offset:2px}.ChartContainer-module_ContainerBounds__52Ru1{height:100%;width:100%}.ChartContainer-module_Chart__6am22{display:flex;flex-direction:column;height:100%;width:100%}.ChartContainer-module_Chart__6am22 svg{max-width:100%;overflow:visible}";
+var styles = {"ChartContainer":"ChartContainer-module_ChartContainer__1Fc-v","ContainerBounds":"ChartContainer-module_ContainerBounds__52Ru1","Chart":"ChartContainer-module_Chart__6am22"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartContainer/ChartContainer.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".ChartContainer-module_ChartContainer__1Fc-v{box-sizing:border-box;font-family:Inter,-apple-system,\"system-ui\",San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:12px;height:100%;position:relative;width:100%}.ChartContainer-module_ChartContainer__1Fc-v :focus,.ChartContainer-module_ChartContainer__1Fc-v :focus-visible{outline:2px solid #4b92e5;outline-offset:2px}.ChartContainer-module_ContainerBounds__52Ru1{height:100%;width:100%}.ChartContainer-module_Chart__6am22{display:flex;flex-direction:column;height:100%;width:100%}.ChartContainer-module_Chart__6am22 svg{max-width:100%;overflow:visible}";
+var styles = {"ChartContainer":"ChartContainer-module_ChartContainer__1Fc-v","ContainerBounds":"ChartContainer-module_ContainerBounds__52Ru1","Chart":"ChartContainer-module_Chart__6am22"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartContainer/hooks/useContainerBounds.js

@@ -0,0 +1,103 @@
+import { useState, useCallback } from 'react';
+import { useTheme, usePrevious } from '@shopify/polaris-viz-core';
+import { useDebouncedCallback } from '../../../hooks/useDebouncedCallback.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver.js';
+import { usePrintResizing } from '../../../hooks/usePrintResizing.js';
+import { useEnhancedEffect } from '../../../../../../../hooks/useEnhancedEffect.js';
+import '../../../../../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../../../../utils/dayjs.js';
+import '../../../../../../../utils/analytics.js';
+import '../../../../../../../types/template.js';
+import '../../../../../../../core/gemxql/types/analytic-data.js';
+import '../../../../../../../core/gemxql/types/analytic-source.js';
+import '../../../../../../../core/gemxql/types/extra-condition.js';
+import '../../../../../../../core/gemxql/types/field-filters.js';
+import '../../../../../../../core/gemxql/types/field-operators.js';
+import '../../../../../../../core/gemxql/types/group-with-clause.js';
+import '../../../../../../../core/gemxql/types/order-by.js';
+import '../../../../../../../core/gemxql/types/page-fields.js';
+import '../../../../../../../core/gemxql/types/row-reader-mode.js';
+import '../../../../../../../core/gemxql/types/time-dimension.js';
+import '../../../../../../../providers/ConvertMoneyProvider.js';
+import '../../../../../../components/GPagination/GPagination.js';
+
+function useContainerBounds({ onIsPrintingChange, scrollContainer, sparkChart, }) {
+    const { chartContainer } = useTheme();
+    const { ref, setRef, entry } = useResizeObserver();
+    const previousEntry = usePrevious(entry);
+    const [containerBounds, setContainerBounds] = useState(null);
+    usePrintResizing({
+        ref,
+        setContainerBounds: setContainerBounds,
+        onIsPrintingChange,
+    });
+    const updateDimensions = useCallback(() => {
+        if ((previousEntry?.contentRect.width === entry?.contentRect.width &&
+            previousEntry?.contentRect.height === entry?.contentRect.height) ||
+            entry == null) {
+            return;
+        }
+        const { width, height } = entry.contentRect;
+        const { x, y } = entry.target.getBoundingClientRect();
+        const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
+        setContainerBounds({ width, height, x, y: y + scrollY });
+    }, [entry, previousEntry?.contentRect, scrollContainer]);
+    const debouncedUpdateDimensions = useDebouncedCallback(() => {
+        updateDimensions();
+    }, 100);
+    useEnhancedEffect(() => {
+        updateDimensions();
+        if (containerBounds === null) {
+            setContainerBounds({
+                width: 0,
+                height: sparkChart ? chartContainer.sparkChartMinHeight : chartContainer.minHeight,
+                x: 0,
+                y: 0,
+            });
+        }
+        const isServer = typeof window === 'undefined';
+        if (!isServer) {
+            window.addEventListener('resize', debouncedUpdateDimensions);
+        }
+        return () => {
+            if (!isServer) {
+                window.removeEventListener('resize', debouncedUpdateDimensions);
+            }
+        };
+    }, [
+        entry,
+        updateDimensions,
+        debouncedUpdateDimensions,
+        containerBounds,
+        chartContainer.minHeight,
+        sparkChart,
+        chartContainer.sparkChartMinHeight,
+    ]);
+    const updateContainerBounds = useCallback(() => {
+        if (ref == null) {
+            return;
+        }
+        const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
+        const bounds = ref.getBoundingClientRect();
+        setContainerBounds((prev) => {
+            if (bounds.y === prev?.y && bounds.x === prev?.x) {
+                return prev;
+            }
+            return {
+                width: bounds.width,
+                height: bounds.height,
+                x: bounds.x,
+                y: bounds.y + scrollY,
+            };
+        });
+    }, [ref, scrollContainer]);
+    return {
+        containerBounds,
+        updateContainerBounds,
+        setRef,
+    };
+}
+
+export { useContainerBounds };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartContainer/hooks/useContainerBounds.mjs

@@ -0,0 +1,103 @@
+import { useState, useCallback } from 'react';
+import { useTheme, usePrevious } from '@shopify/polaris-viz-core';
+import { useDebouncedCallback } from '../../../hooks/useDebouncedCallback.mjs';
+import { useResizeObserver } from '../../../hooks/useResizeObserver.mjs';
+import { usePrintResizing } from '../../../hooks/usePrintResizing.mjs';
+import { useEnhancedEffect } from '../../../../../../../hooks/useEnhancedEffect.mjs';
+import '../../../../../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../../../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../../../../../utils/dayjs.mjs';
+import '../../../../../../../utils/analytics.mjs';
+import '../../../../../../../types/template.mjs';
+import '../../../../../../../core/gemxql/types/analytic-data.mjs';
+import '../../../../../../../core/gemxql/types/analytic-source.mjs';
+import '../../../../../../../core/gemxql/types/extra-condition.mjs';
+import '../../../../../../../core/gemxql/types/field-filters.mjs';
+import '../../../../../../../core/gemxql/types/field-operators.mjs';
+import '../../../../../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../../../../../core/gemxql/types/order-by.mjs';
+import '../../../../../../../core/gemxql/types/page-fields.mjs';
+import '../../../../../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../../../../../core/gemxql/types/time-dimension.mjs';
+import '../../../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../../../components/GPagination/GPagination.mjs';
+
+function useContainerBounds({ onIsPrintingChange, scrollContainer, sparkChart, }) {
+    const { chartContainer } = useTheme();
+    const { ref, setRef, entry } = useResizeObserver();
+    const previousEntry = usePrevious(entry);
+    const [containerBounds, setContainerBounds] = useState(null);
+    usePrintResizing({
+        ref,
+        setContainerBounds: setContainerBounds,
+        onIsPrintingChange,
+    });
+    const updateDimensions = useCallback(() => {
+        if ((previousEntry?.contentRect.width === entry?.contentRect.width &&
+            previousEntry?.contentRect.height === entry?.contentRect.height) ||
+            entry == null) {
+            return;
+        }
+        const { width, height } = entry.contentRect;
+        const { x, y } = entry.target.getBoundingClientRect();
+        const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
+        setContainerBounds({ width, height, x, y: y + scrollY });
+    }, [entry, previousEntry?.contentRect, scrollContainer]);
+    const debouncedUpdateDimensions = useDebouncedCallback(() => {
+        updateDimensions();
+    }, 100);
+    useEnhancedEffect(() => {
+        updateDimensions();
+        if (containerBounds === null) {
+            setContainerBounds({
+                width: 0,
+                height: sparkChart ? chartContainer.sparkChartMinHeight : chartContainer.minHeight,
+                x: 0,
+                y: 0,
+            });
+        }
+        const isServer = typeof window === 'undefined';
+        if (!isServer) {
+            window.addEventListener('resize', debouncedUpdateDimensions);
+        }
+        return () => {
+            if (!isServer) {
+                window.removeEventListener('resize', debouncedUpdateDimensions);
+            }
+        };
+    }, [
+        entry,
+        updateDimensions,
+        debouncedUpdateDimensions,
+        containerBounds,
+        chartContainer.minHeight,
+        sparkChart,
+        chartContainer.sparkChartMinHeight,
+    ]);
+    const updateContainerBounds = useCallback(() => {
+        if (ref == null) {
+            return;
+        }
+        const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
+        const bounds = ref.getBoundingClientRect();
+        setContainerBounds((prev) => {
+            if (bounds.y === prev?.y && bounds.x === prev?.x) {
+                return prev;
+            }
+            return {
+                width: bounds.width,
+                height: bounds.height,
+                x: bounds.x,
+                y: bounds.y + scrollY,
+            };
+        });
+    }, [ref, scrollContainer]);
+    return {
+        containerBounds,
+        updateContainerBounds,
+        setRef,
+    };
+}
+
+export { useContainerBounds };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/ChartDiv.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './ChartElements.module.scss.js';
+
+function ChartDiv({ children, height, width, style = {} }) {
+    return (jsx("div", { className: styles.ChartContainer, style: { height, width, ...style }, children: children }));
+}
+
+export { ChartDiv };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/ChartDiv.mjs

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './ChartElements.module.scss.mjs';
+
+function ChartDiv({ children, height, width, style = {} }) {
+    return (jsx("div", { className: styles.ChartContainer, style: { height, width, ...style }, children: children }));
+}
+
+export { ChartDiv };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/ChartElements.module.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ChartElements-module_ChartContainer__pmked{display:flex;flex-direction:column;height:100%;max-width:100%;position:relative;user-select:none;width:100%}.ChartElements-module_SVG__Q2SX4{max-width:100%;min-width:0;overflow:visible}.ChartElements-module_SVG__Q2SX4 [data-color-vision-event-watch=true]{outline:none}.ChartElements-module_SVG__Q2SX4 [data-color-vision-event-watch=true]:focus,.ChartElements-module_SVG__Q2SX4 [data-color-vision-event-watch=true]:focus-visible{outline:none!important}";
+var styles = {"ChartContainer":"ChartElements-module_ChartContainer__pmked","SVG":"ChartElements-module_SVG__Q2SX4"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/ChartElements.module.scss.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".ChartElements-module_ChartContainer__pmked{display:flex;flex-direction:column;height:100%;max-width:100%;position:relative;user-select:none;width:100%}.ChartElements-module_SVG__Q2SX4{max-width:100%;min-width:0;overflow:visible}.ChartElements-module_SVG__Q2SX4 [data-color-vision-event-watch=true]{outline:none}.ChartElements-module_SVG__Q2SX4 [data-color-vision-event-watch=true]:focus,.ChartElements-module_SVG__Q2SX4 [data-color-vision-event-watch=true]:focus-visible{outline:none!important}";
+var styles = {"ChartContainer":"ChartElements-module_ChartContainer__pmked","SVG":"ChartElements-module_SVG__Q2SX4"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/ChartSVG.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { XMLNS } from '@shopify/polaris-viz-core';
+import styles from './ChartElements.module.scss.js';
+
+function ChartSVG({ width, setRef, role = 'list', height, emptyStateText, emptyState = false, children, }) {
+    return (jsx("svg", { viewBox: `0 0 ${width} ${height}`, xmlns: XMLNS, width: width, height: height, className: styles.SVG, role: emptyState ? 'img' : role, "aria-label": emptyState ? emptyStateText : undefined, ref: setRef, children: children }));
+}
+
+export { ChartSVG };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/ChartSVG.mjs

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { XMLNS } from '@shopify/polaris-viz-core';
+import styles from './ChartElements.module.scss.mjs';
+
+function ChartSVG({ width, setRef, role = 'list', height, emptyStateText, emptyState = false, children, }) {
+    return (jsx("svg", { viewBox: `0 0 ${width} ${height}`, xmlns: XMLNS, width: width, height: height, className: styles.SVG, role: emptyState ? 'img' : role, "aria-label": emptyState ? emptyStateText : undefined, ref: setRef, children: children }));
+}
+
+export { ChartSVG };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/index.d.ts

@@ -1,5 +1,5 @@
-import { ChartDiv } from './ChartDiv';
 import { ChartSVG } from './ChartSVG';
+import { ChartDiv } from './ChartDiv';
 export declare const ChartElements: {
     Div: typeof ChartDiv;
     Svg: typeof ChartSVG;

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/index.js

@@ -0,0 +1,9 @@
+import { ChartSVG } from './ChartSVG.js';
+import { ChartDiv } from './ChartDiv.js';
+
+const ChartElements = {
+    Div: ChartDiv,
+    Svg: ChartSVG,
+};
+
+export { ChartElements };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartElements/index.mjs

@@ -0,0 +1,9 @@
+import { ChartSVG } from './ChartSVG.mjs';
+import { ChartDiv } from './ChartDiv.mjs';
+
+const ChartElements = {
+    Div: ChartDiv,
+    Svg: ChartSVG,
+};
+
+export { ChartElements };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartErrorBoundary/ChartErrorBoundary.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChartState } from '@shopify/polaris-viz-core';
+import { Component } from 'react';
+import { ChartSkeleton } from '../ChartSkeleton/ChartSkeleton.js';
+import { checkForMismatchedData } from './utilities/checkForMismatchedData.js';
+
+class ChartErrorBoundary extends Component {
+    static getDerivedStateFromError(_) {
+        return { hasError: true };
+    }
+    state = { hasError: false };
+    constructor(props) {
+        super(props);
+    }
+    onError = (error, errorInfo) => {
+        checkForMismatchedData(this.props.data);
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error({ error, errorInfo });
+        }
+    };
+    componentDidCatch(error, errorInfo) {
+        this.onError(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return jsx(ChartSkeleton, { type: this.props.type, state: ChartState.Error });
+        }
+        return this.props.children;
+    }
+}
+
+export { ChartErrorBoundary };