@levi-gemcommerce/analytics 3.0.1-dev.3 → 3.0.1-dev.5

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.tsx

@@ -1,155 +0,0 @@
-import { paddingStringToObject, useTheme, ChartState, useChartContext } from '@shopify/polaris-viz-core';
-import { useSprings, animated } from '@react-spring/web';
-import { Fragment, useEffect } from 'react';
-import { ErrorText } from '../ErrorText';
-
-const BRICK_HEIGHT = 12;
-const BRICK_WIDTH = 32;
-const INITIAL_DELAY = 200;
-const NUMBER_OF_BRICKS = 5;
-
-interface Props {
-  state: ChartState;
-  errorText: string;
-}
-
-export function GridSkeleton({ state, errorText }: Props) {
-  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: number) => 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;
-            default:
-              break;
-          }
-        },
-      }));
-    }
-  }, [animation, state, ticks]);
-
-  return (
-    <Fragment>
-      <svg viewBox={`0 0 ${width} ${height}`}>
-        {springs.map((style, index) => {
-          const y = ticks[index]!.y;
-
-          return (
-            <g key={index}>
-              <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}
-              />
-              <rect x={0} y={y + 5} width={width} height={1} fill={gridColor} />
-            </g>
-          );
-        })}
-        {state === ChartState.Error && <ErrorText errorText={errorText} width={width} height={height} />}
-      </svg>
-    </Fragment>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/GridSkeleton/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/Shimmer/Shimmer.module.scss

@@ -1,33 +0,0 @@
-.Shimmer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: scale(5, 10);
-  animation-name: shimmer;
-  animation-duration: 10s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  background-size: calc(var(--shimmerWidth) * 1) calc(var(--shimmerHeight) * 1);
-  background-position-y: 0;
-  pointer-events: none;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position-x: calc(var(--shimmerWidth) * -1);
-  }
-
-  50% {
-    background-position-x: calc(var(--shimmerWidth) * 2);
-  }
-
-  51% {
-    background-position-x: calc(var(--shimmerWidth) * -1);
-  }
-
-  100% {
-    background-position-x: calc(var(--shimmerWidth) * 2);
-  }
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/Shimmer/Shimmer.tsx

@@ -1,34 +0,0 @@
-import { changeColorOpacity, useChartContext } from '@shopify/polaris-viz-core';
-import { useEffect, useRef } from 'react';
-
-export function Shimmer({ backgroundColor }: { backgroundColor: string }) {
-  const semiTransparentBackground = changeColorOpacity(backgroundColor, 0);
-  const {
-    containerBounds: { height, width },
-  } = useChartContext();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current === null) return;
-    ref.current.style.setProperty('--shimmerWidth', `${width}px`);
-    ref.current.style.setProperty('--shimmerHeight', `${height}px`);
-  }, [width, height]);
-
-  const [min, max] = [width, height];
-  const angle = Math.asin(max / min) / (Math.PI / 180);
-
-  return (
-    <div
-      ref={ref}
-      className={'Shimmer'}
-      style={{
-        backgroundImage: `linear-gradient(-${angle}deg,
-            ${semiTransparentBackground} 10%,
-            ${semiTransparentBackground} 35%,
-            ${backgroundColor} 50%,
-            ${semiTransparentBackground} 65%,
-            ${semiTransparentBackground} 100%)`,
-      }}
-    />
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/Shimmer/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.module.scss

@@ -1,15 +0,0 @@
-.SimpleBarSkeleton {
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  width: 100%;
-}
-.Item {
-  display: grid;
-  grid-template-rows: 16px 40px;
-  grid-template-columns: 20% auto;
-  gap: 20px;
-}
-.Item > *:last-child {
-  grid-column: span 2;
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/SimpleBarSkeleton.tsx

@@ -1,53 +0,0 @@
-import { useTheme, useUniqueId, ChartState, useChartContext } from '@shopify/polaris-viz-core';
-import { ErrorText } from '../ErrorText';
-import { Fragment } from 'react';
-
-import styles from './SimpleBarSkeleton.module.scss';
-
-interface Props {
-  state: ChartState;
-  errorText: string;
-}
-
-export function SimpleBarSkeleton({ state, errorText }: Props) {
-  const {
-    containerBounds: { height, width },
-  } = useChartContext();
-
-  const {
-    grid: { color: gridColor },
-    bar: { borderRadius },
-  } = useTheme();
-
-  const id = useUniqueId('simple-bar-skeleton');
-
-  const BarMarkup = () => (
-    <span
-      style={{
-        display: 'inline-block',
-        background: gridColor,
-        borderRadius,
-      }}
-    />
-  );
-
-  return (
-    <div className={styles.SimpleBarSkeleton}>
-      {state === ChartState.Loading && (
-        <Fragment>
-          {new Array(4).fill(0).map((_, index) => (
-            <div key={`${id}${index}`} className={styles.Item}>
-              <BarMarkup />
-              <BarMarkup />
-            </div>
-          ))}
-        </Fragment>
-      )}
-      {state === ChartState.Error && (
-        <svg viewBox={`0 0 ${width} ${height}`}>
-          <ErrorText errorText={errorText} width={width} height={height} />
-        </svg>
-      )}
-    </div>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleBarSkeleton/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.module.scss

@@ -1,35 +0,0 @@
-.Container {
-  display: flex;
-}
-.Legend {
-  height: 50px;
-  display: flex;
-  gap: 5%;
-  max-width: 60%;
-  margin: 14px 0;
-}
-.LegendItem {
-  width: 100%;
-  display: block;
-  display: grid;
-  grid-template-columns: 16px 1fr;
-  grid-template-rows: 16px;
-  grid-gap: 10px;
-}
-.LegendItem > *:first-child {
-  width: 16px;
-  height: 16px;
-}
-.LegendItem > *:nth-child(2) {
-  height: 16px;
-}
-.LegendItem > *:nth-child(3) {
-  grid-column: 2;
-  height: 16px;
-  width: 80%;
-}
-.LegendItemComponent {
-  border-radius: 2px;
-  height: 16px;
-  width: 100%;
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/SimpleNormalizedSkeleton.tsx

@@ -1,75 +0,0 @@
-import type { Size } from '../../../../types';
-
-import { useTheme, useUniqueId, ChartState, useChartContext } from '@shopify/polaris-viz-core';
-import { ErrorText } from '../ErrorText';
-import { Fragment } from 'react';
-
-import styles from './SimpleNormalizedSkeleton.module.scss';
-
-const SIZE_TO_PX = {
-  small: 16,
-  medium: 36,
-  large: 56,
-};
-
-interface Props {
-  errorText: string;
-  showLegend: boolean;
-  size: Size;
-  state: ChartState;
-}
-
-export function SimpleNormalizedSkeleton({ errorText, showLegend, size, state }: Props) {
-  const {
-    containerBounds: { height, width },
-  } = useChartContext();
-
-  const {
-    grid: { color: gridColor },
-    bar: { borderRadius },
-    chartContainer: { padding },
-  } = useTheme();
-
-  const id = useUniqueId('simple-bar-skeleton');
-
-  return (
-    <div
-      className={styles.Container}
-      style={{
-        padding,
-      }}
-    >
-      {state === ChartState.Loading && (
-        <Fragment>
-          {showLegend && (
-            <div className={styles.Legend}>
-              {new Array(3).fill(0).map((_, index) => (
-                <div key={`${id}${index}`} className={styles.LegendItem}>
-                  {new Array(3).fill(0).map((_, innerIndex) => (
-                    <div
-                      key={`${id}${index}${innerIndex}`}
-                      className={styles.LegendItemComponent}
-                      style={{ background: gridColor }}
-                    />
-                  ))}
-                </div>
-              ))}
-            </div>
-          )}
-          <div
-            style={{
-              background: gridColor,
-              borderRadius,
-              height: SIZE_TO_PX[size],
-            }}
-          />
-        </Fragment>
-      )}
-      {state === ChartState.Error && (
-        <svg viewBox={`0 0 ${width} ${height}`}>
-          <ErrorText errorText={errorText} width={width} height={height} />
-        </svg>
-      )}
-    </div>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SimpleNormalizedSkeleton/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SparkSkeleton/SparkSkeleton.tsx

@@ -1,27 +0,0 @@
-import { useTheme, ChartState, DEFAULT_BORDER_RADIUS, useChartContext } from '@shopify/polaris-viz-core';
-
-import { ErrorText } from '../ErrorText';
-
-interface Props {
-  state: ChartState;
-  errorText: string;
-}
-
-export function SparkSkeleton({ state, errorText }: Props) {
-  const {
-    containerBounds: { height, width },
-  } = useChartContext();
-
-  const {
-    grid: { color: gridColor },
-  } = useTheme();
-
-  return (
-    <svg viewBox={`0 0 ${width} ${height}`}>
-      {state === ChartState.Loading && (
-        <rect x={0} y={0} width={width} height={height} fill={gridColor} rx={DEFAULT_BORDER_RADIUS} />
-      )}
-      {state === ChartState.Error && <ErrorText errorText={errorText} width={width} height={height} />}
-    </svg>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/SparkSkeleton/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/components/index.ts

@@ -1,8 +0,0 @@
-export { Shimmer } from './Shimmer';
-export { GridSkeleton } from './GridSkeleton';
-export { DonutSkeleton } from './DonutSkeleton';
-export { FunnelSkeleton } from './FunnelSkeleton';
-export { ErrorText } from './ErrorText';
-export { SimpleBarSkeleton } from './SimpleBarSkeleton';
-export { SimpleNormalizedSkeleton } from './SimpleNormalizedSkeleton';
-export { SparkSkeleton } from './SparkSkeleton';

package/src/shared/charts/components/GPolarisViz/components/ChartSkeleton/index.ts

@@ -1,9 +0,0 @@
-export { ChartSkeleton } from './ChartSkeleton';
-export type {
-  DonutSkeletonProps,
-  FunnelSkeletonProps,
-  SimpleBarSkeletonProps,
-  SparkSkeletonProps,
-  SimpleNormalizedSkeletonProps,
-} from './ChartSkeleton';
-export type { SkeletonType } from './ChartSkeleton';

package/src/shared/charts/components/GPolarisViz/components/ConicGradientWithStops/ConicGradientWithStops.tsx

@@ -1,27 +0,0 @@
-import type { GradientStop } from '@shopify/polaris-viz-core';
-
-import { createCSSConicGradient } from '../../utilities';
-
-export interface ConicGradientWithStopsProps {
-  gradient: GradientStop[];
-  height: number;
-  width: number;
-  x?: number;
-  y?: number;
-}
-
-export function ConicGradientWithStops({ gradient, height, width, x = 0, y = 0 }: ConicGradientWithStopsProps) {
-  const conicGradientValue = createCSSConicGradient(gradient);
-
-  return (
-    <foreignObject x={x} y={y} width={width} height={height}>
-      <div
-        style={{
-          width: `${width}px`,
-          height: `${height}px`,
-          backgroundImage: conicGradientValue,
-        }}
-      />
-    </foreignObject>
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/ConicGradientWithStops/index.ts

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

package/src/shared/charts/components/GPolarisViz/components/DefaultPreview/DefaultPreview.module.scss

@@ -1,8 +0,0 @@
-.ColorPreview {
-  // border-radius: 100%;
-  display: block;
-  flex: none;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-  overflow: hidden;
-}

package/src/shared/charts/components/GPolarisViz/components/DefaultPreview/DefaultPreview.tsx

@@ -1,25 +0,0 @@
-import type { Color } from '@shopify/polaris-viz-core';
-
-import { getCSSBackgroundFromColor } from '../../utilities/getCSSBackgroundFromColor';
-
-import styles from './DefaultPreview.module.scss';
-
-const ANGLE = 305;
-
-export interface DefaultPreviewProps {
-  color: Color;
-}
-
-const ICON_SIZE = 8;
-const BORDER_RADIUS = '100%';
-
-export function DefaultPreview({ color }: DefaultPreviewProps) {
-  const background = getCSSBackgroundFromColor(color, ANGLE);
-
-  return (
-    <span
-      className={styles.ColorPreview}
-      style={{ background, height: ICON_SIZE, width: ICON_SIZE, borderRadius: BORDER_RADIUS }}
-    />
-  );
-}

package/src/shared/charts/components/GPolarisViz/components/DefaultPreview/index.ts

@@ -1,2 +0,0 @@
-export { DefaultPreview } from './DefaultPreview';
-export type { DefaultPreviewProps } from './DefaultPreview';