@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

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

@@ -0,0 +1,155 @@
+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

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

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

@@ -0,0 +1,33 @@
+.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

@@ -0,0 +1,34 @@
+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

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

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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,53 @@
+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

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

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

@@ -0,0 +1,35 @@
+.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

@@ -0,0 +1,75 @@
+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

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

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

@@ -0,0 +1,27 @@
+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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,27 @@
+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

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

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

@@ -0,0 +1,8 @@
+.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

@@ -0,0 +1,25 @@
+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

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