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

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

@@ -1,21 +0,0 @@
-.ChartContainer {
-  position: relative;
-  user-select: none;
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-.SVG {
-  overflow: visible;
-  max-width: 100%;
-  min-width: 0;
-}
-.SVG [data-color-vision-event-watch='true'] {
-  outline: none;
-}
-.SVG [data-color-vision-event-watch='true']:focus,
-.SVG [data-color-vision-event-watch='true']:focus-visible {
-  outline: none !important;
-}

package/src/shared/charts/components/GPolarisViz/components/ChartElements/ChartSVG.tsx

@@ -1,40 +0,0 @@
-import type { AriaRole, Dispatch, ReactNode, SetStateAction } from 'react';
-
-import { XMLNS } from '@shopify/polaris-viz-core';
-
-import styles from './ChartElements.module.scss';
-
-interface ChartSVGProps {
-  children: ReactNode;
-  height: number;
-  width: number;
-  setRef?: Dispatch<SetStateAction<SVGSVGElement | null>>;
-  role?: AriaRole;
-  emptyStateText?: string;
-  emptyState?: boolean;
-}
-
-export function ChartSVG({
-  width,
-  setRef,
-  role = 'list',
-  height,
-  emptyStateText,
-  emptyState = false,
-  children,
-}: ChartSVGProps) {
-  return (
-    <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}
-    </svg>
-  );
-}

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

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

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

@@ -1,56 +0,0 @@
-import type { BoundingRect, DataGroup, DataSeries, ErrorBoundaryResponse } from '@shopify/polaris-viz-core';
-import { ChartState } from '@shopify/polaris-viz-core';
-import type { ErrorInfo, ReactNode } from 'react';
-import { Component } from 'react';
-
-import type { SkeletonType } from '../ChartSkeleton';
-import { ChartSkeleton } from '../ChartSkeleton';
-
-import { checkForMismatchedData } from './utilities/checkForMismatchedData';
-
-interface ErrorBoundaryProps {
-  containerBounds: BoundingRect;
-  data: DataSeries[] | DataGroup[];
-  type: SkeletonType;
-  children?: ReactNode;
-  onError?: ErrorBoundaryResponse;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-}
-
-export class ChartErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  static getDerivedStateFromError(_: Error) {
-    return { hasError: true };
-  }
-
-  state: ErrorBoundaryState = { hasError: false };
-
-  constructor(props: any) {
-    super(props);
-  }
-
-  onError = (error: Error, errorInfo: 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: Error, errorInfo: ErrorInfo) {
-    this.onError(error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return <ChartSkeleton type={this.props.type} state={ChartState.Error} />;
-    }
-
-    return this.props.children;
-  }
-}

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

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

package/src/shared/charts/components/GPolarisViz/components/ChartErrorBoundary/utilities/checkForMismatchedData.ts

@@ -1,34 +0,0 @@
-import type { DataGroup, DataSeries } from '@shopify/polaris-viz-core';
-import { isDataGroupArray } from '@shopify/polaris-viz-core';
-
-export function checkForMismatchedData(data: DataSeries[] | DataGroup[]) {
-  if (data == null || data.length === 0) {
-    return;
-  }
-
-  if (isDataGroupArray(data)) {
-    checkDataGroup(data as DataGroup[]);
-  } else {
-    checkDataSeries(data as DataSeries[]);
-  }
-}
-
-function checkDataSeries(data: DataSeries[], 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: DataGroup[]) {
-  group.some(({ series }) => checkDataSeries(series, 'DataGroup'));
-}

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

@@ -1,6 +0,0 @@
-.Container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}

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

@@ -1,96 +0,0 @@
-import { ChartState, useChartContext, useTheme } from '@shopify/polaris-viz-core';
-
-import {
-  GridSkeleton,
-  DonutSkeleton,
-  FunnelSkeleton,
-  Shimmer,
-  SimpleBarSkeleton,
-  SimpleNormalizedSkeleton,
-  SparkSkeleton,
-} from './components';
-
-import styles from './ChartSkeleton.module.scss';
-
-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 function ChartSkeleton(props: 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 <DonutSkeleton state={state} errorText={errorText} />;
-      case 'Funnel':
-        return <FunnelSkeleton state={state} errorText={errorText} />;
-      case 'SimpleBar':
-        return <SimpleBarSkeleton state={state} errorText={errorText} />;
-      case 'SimpleNormalized': {
-        const { showLegend = true, size = 'small' } = props;
-        return <SimpleNormalizedSkeleton state={state} errorText={errorText} showLegend={showLegend} size={size} />;
-      }
-      case 'Spark':
-        return <SparkSkeleton state={state} errorText={errorText} />;
-
-      default:
-        return <GridSkeleton state={state} errorText={errorText} />;
-    }
-  };
-
-  if (containerBounds.width === 0) return null;
-
-  return (
-    <div className={styles.Container}>
-      <SkeletonMarkup />
-      {state === ChartState.Loading && <Shimmer backgroundColor={backgroundColor} />}
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-.Donut {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  user-select: none;
-  align-items: center;
-}
-.DonutWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-.ContentWrapper {
-  position: absolute;
-  justify-content: center;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  font-size: 20px;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-}
-.ContentWrapper span {
-  max-width: 50%;
-  text-align: center;
-  color: white;
-  font-size: 11px;
-}
-.DonutChart {
-  outline: none;
-  overflow: visible;
-}
-.DonutChart:focus,
-.DonutChart:focus-visible {
-  outline: none !important;
-}

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

@@ -1,193 +0,0 @@
-import { ChartState, useChartContext, useTheme } from '@shopify/polaris-viz-core';
-import { useSprings, animated, config, easings } from '@react-spring/web';
-import { Arc } from '../../../Arc';
-import { useEffect } from 'react';
-
-import styles from './DonutSkeleton.module.scss';
-
-const ERROR_ANIMATION_PADDING = 40;
-const FULL_CIRCLE = Math.PI * 2;
-const INITIAL_DELAY = 700;
-const RADIUS_PADDING = 20;
-const SECONDARY_DELAY = 200;
-
-interface Props {
-  state: ChartState;
-  errorText: string;
-}
-
-export function DonutSkeleton({ state, errorText }: Props) {
-  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;
-            default:
-              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 (
-    <div className={styles.DonutWrapper}>
-      <div className={styles.Donut}>
-        <svg
-          viewBox={`${minX} ${minY} ${viewBoxDimensions.width} ${viewBoxDimensions.height}`}
-          height={diameter}
-          width={diameter}
-        >
-          <g className={styles.DonutChart}>
-            {springs.map((style, index) => {
-              return (
-                <animated.g
-                  style={{
-                    ...style,
-                    transformOrigin,
-                  }}
-                  key={`DonutSkeleton-${index}`}
-                >
-                  <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}
-                  />
-                </animated.g>
-              );
-            })}
-          </g>
-        </svg>
-        {state === ChartState.Error && (
-          <div className={styles.ContentWrapper}>
-            <span style={{ color: selectedTheme.xAxis.labelColor }}>{errorText}</span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

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

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

@@ -1,40 +0,0 @@
-import { FONT_SIZE, useTheme } from '@shopify/polaris-viz-core';
-
-import { useLabels } from '../../../Labels/hooks';
-import { TextLine } from '../../../TextLine';
-
-const TEXT_DROP_SHADOW_SIZE = 3;
-
-interface ErrorTextProps {
-  width: number;
-  height: number;
-  errorText: string;
-}
-
-export function ErrorText({ errorText, width, height }: ErrorTextProps) {
-  const {
-    chartContainer: { backgroundColor },
-  } = useTheme();
-
-  const { lines } = useLabels({
-    allowLineWrap: true,
-    labels: [errorText],
-    targetWidth: width,
-  });
-
-  return (
-    <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})
-      `,
-      }}
-    >
-      <TextLine index={0} line={lines[0]!} />
-    </g>
-  );
-}

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

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

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

@@ -1,69 +0,0 @@
-import { useTheme, useUniqueId, changeColorOpacity, ChartState, useChartContext } from '@shopify/polaris-viz-core';
-import { Bar } from '../../../../shared';
-import { ErrorText } from '../ErrorText';
-import { Fragment } from 'react';
-
-interface Props {
-  state: ChartState;
-  errorText: string;
-}
-
-export function FunnelSkeleton({ state, errorText }: Props) {
-  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 (
-    <svg viewBox={`0 0 ${width} ${height}`}>
-      {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 (
-              <Fragment key={`${id}${index}`}>
-                <Bar
-                  color={gridColor}
-                  x={segmentWidth * index}
-                  y={height - barHeight}
-                  height={barHeight}
-                  width={barWidth}
-                />
-                {index !== barsQuantity - 1 && (
-                  <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`}
-                  />
-                )}
-              </Fragment>
-            );
-          })}
-      {state === ChartState.Error && <ErrorText errorText={errorText} width={width} height={height} />}
-    </svg>
-  );
-}

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

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