@levi-gemcommerce/analytics 0.0.0-test.1

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

@@ -0,0 +1,104 @@
+"use client"
+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 '../../../../../../../providers/ConvertMoneyProvider.js';
+import '../../../../../../../core/gemxql/constants/row-reader-mode.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 '../../../../../../../utils/dayjs.js';
+import '../../../../../../../utils/analytics.js';
+import '../../../../../../../types/template.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,104 @@
+"use client"
+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 '../../../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../../../../core/gemxql/constants/row-reader-mode.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 '../../../../../../../utils/dayjs.mjs';
+import '../../../../../../../utils/analytics.mjs';
+import '../../../../../../../types/template.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/ChartContainer/index.d.ts

@@ -0,0 +1 @@
+export { ChartContainer } from './ChartContainer';

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

@@ -0,0 +1,9 @@
+import type { CSSProperties, ReactNode } from 'react';
+interface ChartDivProps {
+    height: number | string;
+    width: number | string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+export declare function ChartDiv({ children, height, width, style }: ChartDivProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+"use client"
+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,9 @@
+"use client"
+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,8 @@
+"use client"
+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,8 @@
+"use client"
+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.d.ts

@@ -0,0 +1,12 @@
+import type { AriaRole, Dispatch, ReactNode, SetStateAction } from 'react';
+interface ChartSVGProps {
+    children: ReactNode;
+    height: number;
+    width: number;
+    setRef?: Dispatch<SetStateAction<SVGSVGElement | null>>;
+    role?: AriaRole;
+    emptyStateText?: string;
+    emptyState?: boolean;
+}
+export declare function ChartSVG({ width, setRef, role, height, emptyStateText, emptyState, children, }: ChartSVGProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+"use client"
+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,10 @@
+"use client"
+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

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

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

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

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

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

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartErrorBoundary/ChartErrorBoundary.d.ts

@@ -0,0 +1,25 @@
+import type { BoundingRect, DataGroup, DataSeries, ErrorBoundaryResponse } from '@shopify/polaris-viz-core';
+import type { ErrorInfo, ReactNode } from 'react';
+import { Component } from 'react';
+import type { SkeletonType } from '../ChartSkeleton';
+interface ErrorBoundaryProps {
+    containerBounds: BoundingRect;
+    data: DataSeries[] | DataGroup[];
+    type: SkeletonType;
+    children?: ReactNode;
+    onError?: ErrorBoundaryResponse;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+export declare class ChartErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static getDerivedStateFromError(_: Error): {
+        hasError: boolean;
+    };
+    state: ErrorBoundaryState;
+    constructor(props: any);
+    onError: (error: Error, errorInfo: ErrorInfo) => void;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

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

@@ -0,0 +1,37 @@
+"use client"
+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 };

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

@@ -0,0 +1,37 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { ChartState } from '@shopify/polaris-viz-core';
+import { Component } from 'react';
+import { ChartSkeleton } from '../ChartSkeleton/ChartSkeleton.mjs';
+import { checkForMismatchedData } from './utilities/checkForMismatchedData.mjs';
+
+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 };

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

@@ -0,0 +1 @@
+export { ChartErrorBoundary } from './ChartErrorBoundary';

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartErrorBoundary/utilities/checkForMismatchedData.d.ts

@@ -0,0 +1,2 @@
+import type { DataGroup, DataSeries } from '@shopify/polaris-viz-core';
+export declare function checkForMismatchedData(data: DataSeries[] | DataGroup[]): void;

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

@@ -0,0 +1,30 @@
+"use client"
+import { isDataGroupArray } from '@shopify/polaris-viz-core';
+
+function checkForMismatchedData(data) {
+    if (data == null || data.length === 0) {
+        return;
+    }
+    if (isDataGroupArray(data)) {
+        checkDataGroup(data);
+    }
+    else {
+        checkDataSeries(data);
+    }
+}
+function checkDataSeries(data, type = 'DataSeries') {
+    if (data[0]?.data == null) {
+        return false;
+    }
+    const firstSetLength = data[0].data.length;
+    const hasMismatchedData = data.some((series) => series.data.length !== firstSetLength);
+    if (hasMismatchedData) {
+        console.warn(`The ${type}[] provided does not have equal series values.`, data);
+        return true;
+    }
+}
+function checkDataGroup(group) {
+    group.some(({ series }) => checkDataSeries(series, 'DataGroup'));
+}
+
+export { checkForMismatchedData };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartErrorBoundary/utilities/checkForMismatchedData.mjs

@@ -0,0 +1,30 @@
+"use client"
+import { isDataGroupArray } from '@shopify/polaris-viz-core';
+
+function checkForMismatchedData(data) {
+    if (data == null || data.length === 0) {
+        return;
+    }
+    if (isDataGroupArray(data)) {
+        checkDataGroup(data);
+    }
+    else {
+        checkDataSeries(data);
+    }
+}
+function checkDataSeries(data, type = 'DataSeries') {
+    if (data[0]?.data == null) {
+        return false;
+    }
+    const firstSetLength = data[0].data.length;
+    const hasMismatchedData = data.some((series) => series.data.length !== firstSetLength);
+    if (hasMismatchedData) {
+        console.warn(`The ${type}[] provided does not have equal series values.`, data);
+        return true;
+    }
+}
+function checkDataGroup(group) {
+    group.some(({ series }) => checkDataSeries(series, 'DataGroup'));
+}
+
+export { checkForMismatchedData };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/ChartSkeleton.d.ts

@@ -0,0 +1,31 @@
+import { ChartState } from '@shopify/polaris-viz-core';
+export type Size = 'small' | 'medium' | 'large';
+export type SkeletonType = 'Default' | 'Donut' | 'Funnel' | 'SimpleBar' | 'Spark' | 'SimpleNormalized';
+interface ChartSkeletonProps {
+    errorText?: string;
+    state?: ChartState;
+    theme?: string;
+}
+interface DefaultSkeletonProps extends ChartSkeletonProps {
+    type?: 'Default';
+}
+export interface DonutSkeletonProps extends ChartSkeletonProps {
+    type: 'Donut';
+}
+export interface FunnelSkeletonProps extends ChartSkeletonProps {
+    type: 'Funnel';
+}
+export interface SimpleBarSkeletonProps extends ChartSkeletonProps {
+    type: 'SimpleBar';
+}
+export interface SparkSkeletonProps extends ChartSkeletonProps {
+    type: 'Spark';
+}
+export interface SimpleNormalizedSkeletonProps extends ChartSkeletonProps {
+    type: 'SimpleNormalized';
+    showLegend?: boolean;
+    size?: Size;
+}
+export type Props = DefaultSkeletonProps | DonutSkeletonProps | FunnelSkeletonProps | SimpleBarSkeletonProps | SimpleNormalizedSkeletonProps | SparkSkeletonProps;
+export declare function ChartSkeleton(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,42 @@
+"use client"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, ChartState, useTheme } from '@shopify/polaris-viz-core';
+import { Shimmer } from './components/Shimmer/Shimmer.js';
+import { GridSkeleton } from './components/GridSkeleton/GridSkeleton.js';
+import { DonutSkeleton } from './components/DonutSkeleton/DonutSkeleton.js';
+import { FunnelSkeleton } from './components/FunnelSkeleton/FunnelSkeleton.js';
+import '../../constants.js';
+import 'react';
+import { SimpleBarSkeleton } from './components/SimpleBarSkeleton/SimpleBarSkeleton.js';
+import { SimpleNormalizedSkeleton } from './components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.js';
+import { SparkSkeleton } from './components/SparkSkeleton/SparkSkeleton.js';
+import styles from './ChartSkeleton.module.scss.js';
+
+function ChartSkeleton(props) {
+    const { containerBounds } = useChartContext();
+    const { errorText = 'Could not load the chart', state = ChartState.Loading, theme, type } = props;
+    const { chartContainer: { backgroundColor }, } = useTheme(theme);
+    const SkeletonMarkup = () => {
+        switch (type) {
+            case 'Donut':
+                return jsx(DonutSkeleton, { state: state, errorText: errorText });
+            case 'Funnel':
+                return jsx(FunnelSkeleton, { state: state, errorText: errorText });
+            case 'SimpleBar':
+                return jsx(SimpleBarSkeleton, { state: state, errorText: errorText });
+            case 'SimpleNormalized': {
+                const { showLegend = true, size = 'small' } = props;
+                return jsx(SimpleNormalizedSkeleton, { state: state, errorText: errorText, showLegend: showLegend, size: size });
+            }
+            case 'Spark':
+                return jsx(SparkSkeleton, { state: state, errorText: errorText });
+            default:
+                return jsx(GridSkeleton, { state: state, errorText: errorText });
+        }
+    };
+    if (containerBounds.width === 0)
+        return null;
+    return (jsxs("div", { className: styles.Container, children: [jsx(SkeletonMarkup, {}), state === ChartState.Loading && jsx(Shimmer, { backgroundColor: backgroundColor })] }));
+}
+
+export { ChartSkeleton };

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

@@ -0,0 +1,42 @@
+"use client"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, ChartState, useTheme } from '@shopify/polaris-viz-core';
+import { Shimmer } from './components/Shimmer/Shimmer.mjs';
+import { GridSkeleton } from './components/GridSkeleton/GridSkeleton.mjs';
+import { DonutSkeleton } from './components/DonutSkeleton/DonutSkeleton.mjs';
+import { FunnelSkeleton } from './components/FunnelSkeleton/FunnelSkeleton.mjs';
+import '../../constants.mjs';
+import 'react';
+import { SimpleBarSkeleton } from './components/SimpleBarSkeleton/SimpleBarSkeleton.mjs';
+import { SimpleNormalizedSkeleton } from './components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.mjs';
+import { SparkSkeleton } from './components/SparkSkeleton/SparkSkeleton.mjs';
+import styles from './ChartSkeleton.module.scss.mjs';
+
+function ChartSkeleton(props) {
+    const { containerBounds } = useChartContext();
+    const { errorText = 'Could not load the chart', state = ChartState.Loading, theme, type } = props;
+    const { chartContainer: { backgroundColor }, } = useTheme(theme);
+    const SkeletonMarkup = () => {
+        switch (type) {
+            case 'Donut':
+                return jsx(DonutSkeleton, { state: state, errorText: errorText });
+            case 'Funnel':
+                return jsx(FunnelSkeleton, { state: state, errorText: errorText });
+            case 'SimpleBar':
+                return jsx(SimpleBarSkeleton, { state: state, errorText: errorText });
+            case 'SimpleNormalized': {
+                const { showLegend = true, size = 'small' } = props;
+                return jsx(SimpleNormalizedSkeleton, { state: state, errorText: errorText, showLegend: showLegend, size: size });
+            }
+            case 'Spark':
+                return jsx(SparkSkeleton, { state: state, errorText: errorText });
+            default:
+                return jsx(GridSkeleton, { state: state, errorText: errorText });
+        }
+    };
+    if (containerBounds.width === 0)
+        return null;
+    return (jsxs("div", { className: styles.Container, children: [jsx(SkeletonMarkup, {}), state === ChartState.Loading && jsx(Shimmer, { backgroundColor: backgroundColor })] }));
+}
+
+export { ChartSkeleton };

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

@@ -0,0 +1,8 @@
+"use client"
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ChartSkeleton-module_Container__Xaw64{height:100%;overflow:hidden;position:relative;width:100%}";
+var styles = {"Container":"ChartSkeleton-module_Container__Xaw64"};
+styleInject(css_248z);
+
+export { styles as default };

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

@@ -0,0 +1,8 @@
+"use client"
+import styleInject from '../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".ChartSkeleton-module_Container__Xaw64{height:100%;overflow:hidden;position:relative;width:100%}";
+var styles = {"Container":"ChartSkeleton-module_Container__Xaw64"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/DonutSkeleton/DonutSkeleton.d.ts

@@ -0,0 +1,7 @@
+import { ChartState } from '@shopify/polaris-viz-core';
+interface Props {
+    state: ChartState;
+    errorText: string;
+}
+export declare function DonutSkeleton({ state, errorText }: Props): import("react/jsx-runtime").JSX.Element;
+export {};