@levi-gemcommerce/analytics 0.0.0-test.1

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

@@ -0,0 +1,138 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useChartContext, useTheme, ChartState } from '@shopify/polaris-viz-core';
+import { useSprings, config, easings, animated } from '@react-spring/web';
+import { Arc } from '../../../Arc/Arc.js';
+import { useEffect } from 'react';
+import styles from './DonutSkeleton.module.scss.js';
+
+const ERROR_ANIMATION_PADDING = 40;
+const FULL_CIRCLE = Math.PI * 2;
+const INITIAL_DELAY = 700;
+const RADIUS_PADDING = 20;
+const SECONDARY_DELAY = 200;
+function DonutSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const diameter = Math.min(width, height);
+    const radius = diameter / 2;
+    const selectedTheme = useTheme();
+    const arcThickness = selectedTheme.arc.thickness;
+    const arcs = [
+        {
+            startAngle: 0,
+            endAngle: FULL_CIRCLE * 0.25,
+        },
+        {
+            startAngle: FULL_CIRCLE * 0.25,
+            endAngle: FULL_CIRCLE * 0.45,
+        },
+        {
+            startAngle: FULL_CIRCLE * 0.45,
+            endAngle: FULL_CIRCLE * 0.6,
+        },
+        {
+            startAngle: FULL_CIRCLE * 0.6,
+            endAngle: FULL_CIRCLE,
+        },
+    ];
+    const [springs, animation] = useSprings(arcs.length, () => ({
+        from: {
+            transform: 'translate(0px,0px) rotate(0deg)',
+        },
+        config: config.stiff,
+    }));
+    useEffect(() => {
+        const baseDistance = 82;
+        const floor = {
+            x: baseDistance * -0.1,
+            y: baseDistance * 0.11,
+        };
+        const firstFrame = {
+            delay: INITIAL_DELAY,
+            config: {
+                duration: 600,
+                easing: easings.easeOutBounce,
+            },
+            transform: `translate(
+        ${floor.x}px,
+        ${floor.y}px)
+        rotate(12deg)`,
+        };
+        if (state === ChartState.Error) {
+            animation.start((index) => ({
+                to: async (next) => {
+                    switch (index) {
+                        case 0:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 400,
+                                    easing: easings.easeInExpo,
+                                },
+                                delay: SECONDARY_DELAY,
+                                transform: `translate(
+                  ${baseDistance * 0.28}px,
+                  ${baseDistance * 1.49}px) rotate(-48deg)`,
+                            });
+                            break;
+                        case 1:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 140,
+                                    easing: easings.easeOutExpo,
+                                },
+                                delay: SECONDARY_DELAY + 200,
+                                transform: `translate(
+                  ${baseDistance * 0.62}px,
+                  ${baseDistance * 0.17}px) rotate(55deg)`,
+                            });
+                            break;
+                        case 2:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 190,
+                                    easing: easings.easeInExpo,
+                                },
+                                delay: SECONDARY_DELAY,
+                                transform: `translate(
+                  ${baseDistance * -0.5}px,
+                  ${baseDistance * 0.12}px) rotate(-10deg)`,
+                            });
+                            break;
+                        case 3:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 590,
+                                    easing: easings.easeInExpo,
+                                },
+                                delay: SECONDARY_DELAY * 2,
+                                transform: `translate(
+                  ${0}px,
+                  ${0}px) rotate(-12deg)`,
+                            });
+                            break;
+                    }
+                },
+            }));
+        }
+    }, [animation, height, radius, state]);
+    const minX = -(40 + ERROR_ANIMATION_PADDING);
+    const minY = -40;
+    const viewBoxDimensions = {
+        height: diameter + RADIUS_PADDING,
+        width: diameter + RADIUS_PADDING - minX,
+    };
+    const center = (radius + RADIUS_PADDING) / 2;
+    const transformOrigin = `${center}px ${RADIUS_PADDING * 2}px`;
+    return (jsx("div", { className: styles.DonutWrapper, children: jsxs("div", { className: styles.Donut, children: [jsx("svg", { viewBox: `${minX} ${minY} ${viewBoxDimensions.width} ${viewBoxDimensions.height}`, height: diameter, width: diameter, children: jsx("g", { className: styles.DonutChart, children: springs.map((style, index) => {
+                            return (jsx(animated.g, { style: {
+                                    ...style,
+                                    transformOrigin,
+                                }, children: jsx(Arc, { isAnimated: false, width: diameter, height: diameter, radius: radius, startAngle: arcs[index].startAngle, endAngle: arcs[index].endAngle, color: selectedTheme.grid.color, cornerRadius: selectedTheme.arc.cornerRadius, thickness: arcThickness }) }, `DonutSkeleton-${index}`));
+                        }) }) }), state === ChartState.Error && (jsx("div", { className: styles.ContentWrapper, children: jsx("span", { style: { color: selectedTheme.xAxis.labelColor }, children: errorText }) }))] }) }));
+}
+
+export { DonutSkeleton };

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

@@ -0,0 +1,138 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useChartContext, useTheme, ChartState } from '@shopify/polaris-viz-core';
+import { useSprings, config, easings, animated } from '@react-spring/web';
+import { Arc } from '../../../Arc/Arc.mjs';
+import { useEffect } from 'react';
+import styles from './DonutSkeleton.module.scss.mjs';
+
+const ERROR_ANIMATION_PADDING = 40;
+const FULL_CIRCLE = Math.PI * 2;
+const INITIAL_DELAY = 700;
+const RADIUS_PADDING = 20;
+const SECONDARY_DELAY = 200;
+function DonutSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const diameter = Math.min(width, height);
+    const radius = diameter / 2;
+    const selectedTheme = useTheme();
+    const arcThickness = selectedTheme.arc.thickness;
+    const arcs = [
+        {
+            startAngle: 0,
+            endAngle: FULL_CIRCLE * 0.25,
+        },
+        {
+            startAngle: FULL_CIRCLE * 0.25,
+            endAngle: FULL_CIRCLE * 0.45,
+        },
+        {
+            startAngle: FULL_CIRCLE * 0.45,
+            endAngle: FULL_CIRCLE * 0.6,
+        },
+        {
+            startAngle: FULL_CIRCLE * 0.6,
+            endAngle: FULL_CIRCLE,
+        },
+    ];
+    const [springs, animation] = useSprings(arcs.length, () => ({
+        from: {
+            transform: 'translate(0px,0px) rotate(0deg)',
+        },
+        config: config.stiff,
+    }));
+    useEffect(() => {
+        const baseDistance = 82;
+        const floor = {
+            x: baseDistance * -0.1,
+            y: baseDistance * 0.11,
+        };
+        const firstFrame = {
+            delay: INITIAL_DELAY,
+            config: {
+                duration: 600,
+                easing: easings.easeOutBounce,
+            },
+            transform: `translate(
+        ${floor.x}px,
+        ${floor.y}px)
+        rotate(12deg)`,
+        };
+        if (state === ChartState.Error) {
+            animation.start((index) => ({
+                to: async (next) => {
+                    switch (index) {
+                        case 0:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 400,
+                                    easing: easings.easeInExpo,
+                                },
+                                delay: SECONDARY_DELAY,
+                                transform: `translate(
+                  ${baseDistance * 0.28}px,
+                  ${baseDistance * 1.49}px) rotate(-48deg)`,
+                            });
+                            break;
+                        case 1:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 140,
+                                    easing: easings.easeOutExpo,
+                                },
+                                delay: SECONDARY_DELAY + 200,
+                                transform: `translate(
+                  ${baseDistance * 0.62}px,
+                  ${baseDistance * 0.17}px) rotate(55deg)`,
+                            });
+                            break;
+                        case 2:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 190,
+                                    easing: easings.easeInExpo,
+                                },
+                                delay: SECONDARY_DELAY,
+                                transform: `translate(
+                  ${baseDistance * -0.5}px,
+                  ${baseDistance * 0.12}px) rotate(-10deg)`,
+                            });
+                            break;
+                        case 3:
+                            await next(firstFrame);
+                            await next({
+                                config: {
+                                    duration: 590,
+                                    easing: easings.easeInExpo,
+                                },
+                                delay: SECONDARY_DELAY * 2,
+                                transform: `translate(
+                  ${0}px,
+                  ${0}px) rotate(-12deg)`,
+                            });
+                            break;
+                    }
+                },
+            }));
+        }
+    }, [animation, height, radius, state]);
+    const minX = -(40 + ERROR_ANIMATION_PADDING);
+    const minY = -40;
+    const viewBoxDimensions = {
+        height: diameter + RADIUS_PADDING,
+        width: diameter + RADIUS_PADDING - minX,
+    };
+    const center = (radius + RADIUS_PADDING) / 2;
+    const transformOrigin = `${center}px ${RADIUS_PADDING * 2}px`;
+    return (jsx("div", { className: styles.DonutWrapper, children: jsxs("div", { className: styles.Donut, children: [jsx("svg", { viewBox: `${minX} ${minY} ${viewBoxDimensions.width} ${viewBoxDimensions.height}`, height: diameter, width: diameter, children: jsx("g", { className: styles.DonutChart, children: springs.map((style, index) => {
+                            return (jsx(animated.g, { style: {
+                                    ...style,
+                                    transformOrigin,
+                                }, children: jsx(Arc, { isAnimated: false, width: diameter, height: diameter, radius: radius, startAngle: arcs[index].startAngle, endAngle: arcs[index].endAngle, color: selectedTheme.grid.color, cornerRadius: selectedTheme.arc.cornerRadius, thickness: arcThickness }) }, `DonutSkeleton-${index}`));
+                        }) }) }), state === ChartState.Error && (jsx("div", { className: styles.ContentWrapper, children: jsx("span", { style: { color: selectedTheme.xAxis.labelColor }, children: errorText }) }))] }) }));
+}
+
+export { DonutSkeleton };

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

@@ -0,0 +1,8 @@
+"use client"
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".DonutSkeleton-module_Donut__KOZ2j{overflow:visible;user-select:none}.DonutSkeleton-module_DonutWrapper__S61Tb,.DonutSkeleton-module_Donut__KOZ2j{align-items:center;display:flex;height:100%;position:relative;width:100%}.DonutSkeleton-module_ContentWrapper__hCbc0{align-items:center;display:flex;flex-flow:column nowrap;font-size:20px;height:100%;justify-content:center;pointer-events:none;position:absolute;width:100%}.DonutSkeleton-module_ContentWrapper__hCbc0 span{color:#fff;font-size:11px;max-width:50%;text-align:center}.DonutSkeleton-module_DonutChart__paL7q{outline:none;overflow:visible}.DonutSkeleton-module_DonutChart__paL7q:focus,.DonutSkeleton-module_DonutChart__paL7q:focus-visible{outline:none!important}";
+var styles = {"Donut":"DonutSkeleton-module_Donut__KOZ2j","DonutWrapper":"DonutSkeleton-module_DonutWrapper__S61Tb","ContentWrapper":"DonutSkeleton-module_ContentWrapper__hCbc0","DonutChart":"DonutSkeleton-module_DonutChart__paL7q"};
+styleInject(css_248z);
+
+export { styles as default };

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

@@ -0,0 +1,8 @@
+"use client"
+import styleInject from '../../../../../../../../node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = ".DonutSkeleton-module_Donut__KOZ2j{overflow:visible;user-select:none}.DonutSkeleton-module_DonutWrapper__S61Tb,.DonutSkeleton-module_Donut__KOZ2j{align-items:center;display:flex;height:100%;position:relative;width:100%}.DonutSkeleton-module_ContentWrapper__hCbc0{align-items:center;display:flex;flex-flow:column nowrap;font-size:20px;height:100%;justify-content:center;pointer-events:none;position:absolute;width:100%}.DonutSkeleton-module_ContentWrapper__hCbc0 span{color:#fff;font-size:11px;max-width:50%;text-align:center}.DonutSkeleton-module_DonutChart__paL7q{outline:none;overflow:visible}.DonutSkeleton-module_DonutChart__paL7q:focus,.DonutSkeleton-module_DonutChart__paL7q:focus-visible{outline:none!important}";
+var styles = {"Donut":"DonutSkeleton-module_Donut__KOZ2j","DonutWrapper":"DonutSkeleton-module_DonutWrapper__S61Tb","ContentWrapper":"DonutSkeleton-module_ContentWrapper__hCbc0","DonutChart":"DonutSkeleton-module_DonutChart__paL7q"};
+styleInject(css_248z);
+
+export { styles as default };

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

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

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

@@ -0,0 +1,7 @@
+interface ErrorTextProps {
+    width: number;
+    height: number;
+    errorText: string;
+}
+export declare function ErrorText({ errorText, width, height }: ErrorTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, FONT_SIZE } from '@shopify/polaris-viz-core';
+import { useLabels } from '../../../Labels/hooks/useLabels.js';
+import { TextLine } from '../../../TextLine/TextLine.js';
+
+const TEXT_DROP_SHADOW_SIZE = 3;
+function ErrorText({ errorText, width, height }) {
+    const { chartContainer: { backgroundColor }, } = useTheme();
+    const { lines } = useLabels({
+        allowLineWrap: true,
+        labels: [errorText],
+        targetWidth: width,
+    });
+    return (jsx("g", { style: {
+            transform: `translateY(${Math.max(0, height / 2 - FONT_SIZE / 2)}px)`,
+            filter: `
+        drop-shadow( ${TEXT_DROP_SHADOW_SIZE}px 0px 1px ${backgroundColor})
+        drop-shadow( -${TEXT_DROP_SHADOW_SIZE}px  0px 1px ${backgroundColor})
+        drop-shadow( 0px ${TEXT_DROP_SHADOW_SIZE}px 1px ${backgroundColor})
+        drop-shadow( 0px -${TEXT_DROP_SHADOW_SIZE}px 1px ${backgroundColor})
+      `,
+        }, children: jsx(TextLine, { index: 0, line: lines[0] }) }));
+}
+
+export { ErrorText };

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

@@ -0,0 +1,26 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, FONT_SIZE } from '@shopify/polaris-viz-core';
+import { useLabels } from '../../../Labels/hooks/useLabels.mjs';
+import { TextLine } from '../../../TextLine/TextLine.mjs';
+
+const TEXT_DROP_SHADOW_SIZE = 3;
+function ErrorText({ errorText, width, height }) {
+    const { chartContainer: { backgroundColor }, } = useTheme();
+    const { lines } = useLabels({
+        allowLineWrap: true,
+        labels: [errorText],
+        targetWidth: width,
+    });
+    return (jsx("g", { style: {
+            transform: `translateY(${Math.max(0, height / 2 - FONT_SIZE / 2)}px)`,
+            filter: `
+        drop-shadow( ${TEXT_DROP_SHADOW_SIZE}px 0px 1px ${backgroundColor})
+        drop-shadow( -${TEXT_DROP_SHADOW_SIZE}px  0px 1px ${backgroundColor})
+        drop-shadow( 0px ${TEXT_DROP_SHADOW_SIZE}px 1px ${backgroundColor})
+        drop-shadow( 0px -${TEXT_DROP_SHADOW_SIZE}px 1px ${backgroundColor})
+      `,
+        }, children: jsx(TextLine, { index: 0, line: lines[0] }) }));
+}
+
+export { ErrorText };

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

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

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

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

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

@@ -0,0 +1,40 @@
+"use client"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, useUniqueId, ChartState, changeColorOpacity } from '@shopify/polaris-viz-core';
+import { Bar } from '../../../../shared/Bar/Bar.js';
+import '@react-spring/web';
+import { Fragment } from 'react';
+import { ErrorText } from '../ErrorText/ErrorText.js';
+
+function FunnelSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, } = useTheme();
+    const barsQuantity = 4;
+    const gap = width * 0.05;
+    const innerWidth = width - gap;
+    const segmentWidth = innerWidth / barsQuantity;
+    const barWidth = segmentWidth / 2;
+    const id = useUniqueId('loadingFunnel');
+    const heightGap = (height * 1.3) / barsQuantity;
+    return (jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [state === ChartState.Loading &&
+                Array(barsQuantity)
+                    .fill(null)
+                    .map((_, index) => {
+                    const barHeight = height - heightGap * index;
+                    const nextBarHeight = height - heightGap * (index + 1);
+                    const connector = {
+                        height,
+                        startX: (segmentWidth / 2) * index,
+                        startY: height - barHeight,
+                        nextX: (segmentWidth / 2) * (index + 1),
+                        nextY: height - nextBarHeight,
+                    };
+                    return (jsxs(Fragment, { children: [jsx(Bar, { color: gridColor, x: segmentWidth * index, y: height - barHeight, height: barHeight, width: barWidth }), index !== barsQuantity - 1 && (jsx("path", { style: {
+                                    transform: `translateX(${(segmentWidth / 2) * (index + 1)}px)`,
+                                }, fill: changeColorOpacity(gridColor, 0.2), d: `M${connector.startX} ${connector.startY}
+                    L ${connector.nextX} ${connector.nextY}
+                    V ${connector.height} H ${connector.startX} Z` }))] }, `${id}${index}`));
+                }), state === ChartState.Error && jsx(ErrorText, { errorText: errorText, width: width, height: height })] }));
+}
+
+export { FunnelSkeleton };

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

@@ -0,0 +1,40 @@
+"use client"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useChartContext, useTheme, useUniqueId, ChartState, changeColorOpacity } from '@shopify/polaris-viz-core';
+import { Bar } from '../../../../shared/Bar/Bar.mjs';
+import '@react-spring/web';
+import { Fragment } from 'react';
+import { ErrorText } from '../ErrorText/ErrorText.mjs';
+
+function FunnelSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { grid: { color: gridColor }, } = useTheme();
+    const barsQuantity = 4;
+    const gap = width * 0.05;
+    const innerWidth = width - gap;
+    const segmentWidth = innerWidth / barsQuantity;
+    const barWidth = segmentWidth / 2;
+    const id = useUniqueId('loadingFunnel');
+    const heightGap = (height * 1.3) / barsQuantity;
+    return (jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [state === ChartState.Loading &&
+                Array(barsQuantity)
+                    .fill(null)
+                    .map((_, index) => {
+                    const barHeight = height - heightGap * index;
+                    const nextBarHeight = height - heightGap * (index + 1);
+                    const connector = {
+                        height,
+                        startX: (segmentWidth / 2) * index,
+                        startY: height - barHeight,
+                        nextX: (segmentWidth / 2) * (index + 1),
+                        nextY: height - nextBarHeight,
+                    };
+                    return (jsxs(Fragment, { children: [jsx(Bar, { color: gridColor, x: segmentWidth * index, y: height - barHeight, height: barHeight, width: barWidth }), index !== barsQuantity - 1 && (jsx("path", { style: {
+                                    transform: `translateX(${(segmentWidth / 2) * (index + 1)}px)`,
+                                }, fill: changeColorOpacity(gridColor, 0.2), d: `M${connector.startX} ${connector.startY}
+                    L ${connector.nextX} ${connector.nextY}
+                    V ${connector.height} H ${connector.startX} Z` }))] }, `${id}${index}`));
+                }), state === ChartState.Error && jsx(ErrorText, { errorText: errorText, width: width, height: height })] }));
+}
+
+export { FunnelSkeleton };

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

@@ -0,0 +1 @@
+export * from './FunnelSkeleton';

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

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

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

@@ -0,0 +1,114 @@
+"use client"
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useChartContext, useTheme, paddingStringToObject, ChartState } from '@shopify/polaris-viz-core';
+import { useSprings, animated } from '@react-spring/web';
+import { useEffect, Fragment } from 'react';
+import { ErrorText } from '../ErrorText/ErrorText.js';
+
+const BRICK_HEIGHT = 12;
+const BRICK_WIDTH = 32;
+const INITIAL_DELAY = 200;
+const NUMBER_OF_BRICKS = 5;
+function GridSkeleton({ state, errorText }) {
+    const { containerBounds: { height, width }, } = useChartContext();
+    const { chartContainer: { padding }, grid: { color: gridColor }, } = useTheme();
+    const { paddingLeft, paddingBottom, paddingTop } = paddingStringToObject(padding);
+    const drawableHeight = height - paddingBottom - paddingTop;
+    const ticks = new Array(NUMBER_OF_BRICKS).fill(null).map((_, index) => ({
+        y: index * ((drawableHeight - BRICK_HEIGHT) / (NUMBER_OF_BRICKS - 1)),
+    }));
+    const [springs, animation] = useSprings(ticks.length, () => ({
+        opacity: 1,
+        config: { mass: 1, tension: 350, friction: 22, velocity: 0 },
+        default: {
+            immediate: false,
+        },
+        from: {
+            transform: 'translate(0px,0px) rotate(0deg)',
+        },
+    }));
+    useEffect(() => {
+        const lastTickYPosition = ticks[NUMBER_OF_BRICKS - 1].y;
+        const distanceToFloor = (index) => lastTickYPosition - ticks[index].y;
+        if (state === ChartState.Error) {
+            animation.start((index) => ({
+                to: async (next) => {
+                    switch (index) {
+                        case 0:
+                            await next({
+                                delay: INITIAL_DELAY + 300,
+                                config: { duration: 500 },
+                                transform: `translate(10px,${distanceToFloor(index) - BRICK_HEIGHT * 4.6}px) rotate(52deg)`,
+                            });
+                            await next({
+                                config: { duration: 150 },
+                                transform: `translate(40px,${distanceToFloor(index) - BRICK_HEIGHT * 2}px) rotate(52deg)`,
+                            });
+                            await next({
+                                config: { tension: 400, friction: 40 },
+                                transform: `translate(60px,${distanceToFloor(index) - BRICK_HEIGHT * -0.1}px) rotate(0eg)`,
+                            });
+                            break;
+                        case 1:
+                            await next({
+                                delay: INITIAL_DELAY + 100,
+                                config: { duration: 80 },
+                                transform: `translate(-1px,${ticks[2].y - ticks[index].y - BRICK_HEIGHT}px) rotate(-3deg)`,
+                            });
+                            await next({
+                                config: { duration: 90 },
+                                transform: `translate(-6px,${ticks[2].y - ticks[index].y - BRICK_HEIGHT}px) rotate(-13deg)`,
+                            });
+                            await next({
+                                config: { duration: 390 },
+                                transform: `translate(-4px,${distanceToFloor(index) - BRICK_HEIGHT * 1.7}px) rotate(-23deg)`,
+                            });
+                            await next({
+                                delay: 150,
+                                config: { tension: 500, friction: 100, velocity: 0.03 },
+                                transform: `translate(-10px,${distanceToFloor(index) - BRICK_HEIGHT * 1.1}px) rotate(-40deg)`,
+                            });
+                            break;
+                        case 2:
+                            await next({
+                                config: { duration: 200 },
+                                delay: INITIAL_DELAY + 150,
+                                transform: `translate(0px, 0px) rotate(-105deg)`,
+                            });
+                            await next({
+                                config: { duration: 200 },
+                                transform: `translate(-15px,${distanceToFloor(index) - BRICK_HEIGHT * 2.5}px) rotate(-157deg)`,
+                            });
+                            await next({
+                                delay: 300,
+                                config: { tension: 500, friction: 40, velocity: 0.03 },
+                                transform: `translate(-3px,${distanceToFloor(index) - BRICK_HEIGHT * 2.1}px) rotate(-150deg)`,
+                            });
+                            break;
+                        case 3:
+                            await next({
+                                config: { duration: 200 },
+                                delay: INITIAL_DELAY,
+                                transform: `translate(0px, 0px) rotate(105deg)`,
+                            });
+                            await next({
+                                delay: 0,
+                                config: { tension: 500, friction: 40, velocity: 0.03 },
+                                transform: `translate(8px,${distanceToFloor(index) - BRICK_HEIGHT * 2.4}px) rotate(138deg)`,
+                            });
+                            break;
+                    }
+                },
+            }));
+        }
+    }, [animation, state, ticks]);
+    return (jsx(Fragment, { children: jsxs("svg", { viewBox: `0 0 ${width} ${height}`, children: [springs.map((style, index) => {
+                    const y = ticks[index].y;
+                    return (jsxs("g", { children: [jsx(animated.rect, { style: {
+                                    ...style,
+                                    transformOrigin: `${index === 2 ? BRICK_WIDTH + paddingLeft : paddingLeft}px ${ticks[index].y + BRICK_HEIGHT}px`,
+                                }, x: paddingLeft, y: ticks[index].y, width: BRICK_WIDTH, height: BRICK_HEIGHT, ry: 2, rx: 2, fill: gridColor }), jsx("rect", { x: 0, y: y + 5, width: width, height: 1, fill: gridColor })] }, index));
+                }), state === ChartState.Error && jsx(ErrorText, { errorText: errorText, width: width, height: height })] }) }));
+}
+
+export { GridSkeleton };