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

package/src/shared/charts/components/GPolarisViz/hooks/useReducedLabelIndexes.ts

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-
-export interface Props {
-  dataLength: number;
-  skipEveryNthLabel?: number;
-}
-
-export function useReducedLabelIndexes({ dataLength, skipEveryNthLabel = -1 }: Props) {
-  const visibleIndexesForWideCharts = useMemo(() => {
-    if (dataLength === 0 || skipEveryNthLabel === 1) {
-      return [];
-    }
-
-    return Array(dataLength)
-      .fill(null)
-      .map((_, index) => index)
-      .filter((_, index) => index % skipEveryNthLabel === 0);
-  }, [dataLength, skipEveryNthLabel]);
-
-  return visibleIndexesForWideCharts;
-}

package/src/shared/charts/components/GPolarisViz/hooks/useResizeObserver.ts

@@ -1,39 +0,0 @@
-import type { ResizeObserverEntry } from '@juggle/resize-observer';
-
-import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
-import { useEnhancedEffect } from '@/hooks';
-import { useState } from 'react';
-
-// This default value is used in our tests so that consumers of Polaris Viz don't need to mock or fire a ResizeObserver event
-const defaultEntry =
-  process.env.NODE_ENV === 'test' ? ({ contentRect: { width: 500, height: 500 } } as ResizeObserverEntry) : null;
-
-function resizeObserver(callback: (entries: ResizeObserverEntry[], observer: Polyfill) => void) {
-  if (typeof window === 'undefined') {
-    return Polyfill;
-  }
-
-  return new ((window as any).ResizeObserver || Polyfill)(callback);
-}
-
-export const useResizeObserver = <T extends HTMLElement>(): {
-  ref: T | null;
-  setRef: (node: T | null) => void;
-  entry: ResizeObserverEntry | null | undefined;
-} => {
-  const [ref, setRef] = useState<T | null>(null);
-  const [entry, setEntry] = useState<ResizeObserverEntry | null | undefined>(defaultEntry);
-
-  useEnhancedEffect(() => {
-    if (!ref) {
-      return;
-    }
-    const observer = resizeObserver(([entry]) => setEntry(entry));
-    observer.observe(ref);
-    return () => {
-      observer.disconnect();
-    };
-  }, [ref, setEntry]);
-
-  return { ref, setRef, entry };
-};

package/src/shared/charts/components/GPolarisViz/hooks/useRootContainer.ts

@@ -1,20 +0,0 @@
-import { useRef } from 'react';
-
-export const useRootContainer = (id: string): HTMLElement | null => {
-  const ref = useRef<HTMLElement | null>(null);
-
-  function getRootElem(): HTMLElement | null {
-    if (typeof document === 'undefined') return null;
-    if (!ref.current) {
-      ref.current = document.getElementById(id);
-      if (!ref.current) {
-        ref.current = document.createElement('div');
-        ref.current.id = id;
-        document.body.appendChild(ref.current);
-      }
-    }
-    return ref.current;
-  }
-
-  return getRootElem();
-};

package/src/shared/charts/components/GPolarisViz/hooks/useWatchColorVisionEvents.tsx

@@ -1,35 +0,0 @@
-import type { ColorVisionEventReturn } from '@shopify/polaris-viz';
-
-import { useChartContext } from '@shopify/polaris-viz-core';
-import { useCallbackRef } from './useCallbackRef';
-import { getEventName } from '../utilities';
-import { useEffect } from 'react';
-
-interface Props<T> {
-  type: string;
-  onIndexChange: (event: T) => void;
-  enabled?: boolean;
-}
-
-export function useWatchColorVisionEvents<T extends CustomEvent = ColorVisionEventReturn>({
-  type,
-  onIndexChange,
-  enabled = true,
-}: Props<T>) {
-  const onIndexChangeCallback = useCallbackRef(onIndexChange);
-  const { id } = useChartContext();
-
-  useEffect(() => {
-    if (!id || !enabled) {
-      return;
-    }
-
-    const eventName = getEventName(id, type);
-
-    window.addEventListener(eventName, onIndexChangeCallback as EventListener);
-
-    return () => {
-      window.removeEventListener(eventName, onIndexChangeCallback as EventListener);
-    };
-  }, [id, type, onIndexChangeCallback, enabled]);
-}

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

@@ -1,10 +0,0 @@
-export type { FunnelChartProps as GVizFunnelChartProps } from './components/FunnelChart';
-export { FunnelChart as GVizFunnelChart } from './components/FunnelChart';
-
-export type { FunnelChartNextProps as GVizFunnelChartNextProps } from './components/FunnelChartNext';
-export { FunnelChartNext as GVizFunnelChartNext } from './components/FunnelChartNext';
-export { ChartContainerWrapper as GVizChartContainerWrapper } from './components/FunnelChartNext';
-
-export * as FUNNEL_CHART_NEXT_CONSTANTS from './components/FunnelChartNext/constants';
-
-export { useBarSpringConfig } from './hooks/useBarSpringConfig';

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

@@ -1,89 +0,0 @@
-import {
-  getRoundedRectPath,
-  COLOR_VISION_ACTIVE_OPACITY,
-  COLOR_VISION_FADED_OPACITY,
-  DataType,
-  useTheme,
-} from '@shopify/polaris-viz-core';
-import { useBarSpringConfig } from '../../hooks/useBarSpringConfig';
-import { animated, useSpring } from '@react-spring/web';
-import { ZeroValueLine } from '../ZeroValueLine';
-import { memo, useCallback } from 'react';
-
-export interface BarProps {
-  color: string;
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-  animationDelay?: number;
-  index?: number;
-  isActive?: boolean;
-  ariaLabel?: string;
-  areAllNegative?: boolean;
-  transform?: string;
-}
-
-export const Bar = memo(function Bar({
-  animationDelay = 0,
-  areAllNegative,
-  ariaLabel,
-  color,
-  height,
-  index,
-  isActive = true,
-  transform,
-  width,
-  x,
-  y,
-}: BarProps) {
-  const selectedTheme = useTheme();
-  const borderRadius = `0 ${selectedTheme.bar.borderRadius} ${selectedTheme.bar.borderRadius} 0`;
-
-  const getPath = useCallback(
-    (height = 0, width = 0) => {
-      return getRoundedRectPath({ height, width, borderRadius });
-    },
-    [borderRadius],
-  );
-
-  const springConfig = useBarSpringConfig({ animationDelay });
-
-  const spring = useSpring({
-    from: { pathD: getPath(height, 1) },
-    to: { pathD: getPath(height, width) },
-    ...springConfig,
-  });
-
-  const ariaHidden = !ariaLabel;
-
-  return (
-    <g
-      className={'Group'}
-      aria-hidden={ariaHidden}
-      role="img"
-      aria-label={ariaLabel}
-      transform={`translate(${x}, ${y})`}
-    >
-      {width !== 0 ? (
-        <animated.path
-          d={spring.pathD}
-          data-id={`bar-${index}`}
-          data-index={index}
-          data-type={DataType.Bar}
-          fill={color}
-          aria-hidden="true"
-          style={{
-            transform,
-            opacity: isActive ? COLOR_VISION_ACTIVE_OPACITY : COLOR_VISION_FADED_OPACITY,
-          }}
-          className={'Bar'}
-        />
-      ) : (
-        <animated.g style={{ transform: `translate(${x}px, ${-y}px)` }}>
-          <ZeroValueLine x={x} y={y + height / 2} direction="horizontal" areAllNegative={areAllNegative} />
-        </animated.g>
-      )}
-    </g>
-  );
-});

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

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

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

@@ -1,46 +0,0 @@
-import { useBarSpringConfig } from '../../hooks/useBarSpringConfig';
-import { FUNNEL_CHART_CONNECTOR_GRADIENT_ID } from './constants';
-import { useSpring, animated, to } from '@react-spring/web';
-
-const ANIMATION_DELAY = 150;
-
-interface ConnectorProps {
-  drawableHeight: number;
-  height: number;
-  index: number;
-  nextX: number;
-  nextY: number;
-  startX: number;
-  startY: number;
-}
-
-export function FunnelChartConnector({ drawableHeight, height, index, nextX, nextY, startX, startY }: ConnectorProps) {
-  const springConfig = useBarSpringConfig({
-    animationDelay: (index || 1) * ANIMATION_DELAY,
-  });
-
-  const { animatedStartY, animatedNextY } = useSpring({
-    from: {
-      animatedStartY: drawableHeight,
-      animatedNextY: drawableHeight,
-    },
-    to: {
-      animatedStartY: startY,
-      animatedNextY: nextY,
-    },
-    ...springConfig,
-  });
-
-  return (
-    <animated.path
-      d={to(
-        [animatedStartY, animatedNextY],
-        (startY, nextY) =>
-          `M${startX} ${startY}
-     L ${nextX} ${nextY}
-     V ${height} H ${startX} Z`,
-      )}
-      fill={`url(#${FUNNEL_CHART_CONNECTOR_GRADIENT_ID})`}
-    />
-  );
-}

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartConnector/FunnelChartConnectorGradient.tsx

@@ -1,21 +0,0 @@
-import type { IFunnelChartColors } from '@/shared/charts/components/GFunnelChart/types';
-
-import { FUNNEL_CHART_CONNECTOR_GRADIENT_ID, FUNNEL_CHART_CONNECTOR_GRADIENT } from './constants';
-import { LinearGradientWithStops } from '@shopify/polaris-viz-core';
-
-interface FunnelChartConnectorGradientProps {
-  funnelColors?: IFunnelChartColors;
-}
-
-export function FunnelChartConnectorGradient({ funnelColors }: FunnelChartConnectorGradientProps) {
-  return (
-    <LinearGradientWithStops
-      gradient={funnelColors?.connector ?? FUNNEL_CHART_CONNECTOR_GRADIENT}
-      id={FUNNEL_CHART_CONNECTOR_GRADIENT_ID}
-      x1="100%"
-      x2="0%"
-      y1="0%"
-      y2="0%"
-    />
-  );
-}

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartConnector/constants.ts

@@ -1,11 +0,0 @@
-export const FUNNEL_CHART_CONNECTOR_GRADIENT_ID = 'funnel-chart-connector-gradient';
-export const FUNNEL_CHART_CONNECTOR_GRADIENT = [
-  {
-    color: '#ADC4FC',
-    offset: 0,
-  },
-  {
-    color: '#8BAAF9',
-    offset: 100,
-  },
-];

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

@@ -1,3 +0,0 @@
-export { FunnelChartConnector } from './FunnelChartConnector';
-export { FunnelChartConnectorGradient } from './FunnelChartConnectorGradient';
-export { FUNNEL_CHART_CONNECTOR_GRADIENT } from './constants';

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

@@ -1,100 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { IFunnelChartColors } from '../../../GFunnelChart/types';
-import { InteractiveOverlay } from './components/InteractiveOverlay';
-import { useBarSpringConfig } from '../../hooks/useBarSpringConfig';
-import { AnimatedSegment } from './components/AnimatedSegment';
-import { useChartContext } from '@shopify/polaris-viz-core';
-import { ScaledSegment } from './components/ScaledSegment';
-import { useSpring } from '@react-spring/web';
-import { Fragment, useRef } from 'react';
-
-interface Props {
-  ariaLabel: string;
-  barHeight: number;
-  barWidth: number;
-  children: ReactNode;
-  index: number;
-  isLast: boolean;
-  onMouseEnter?: (index: number) => void;
-  onMouseLeave?: () => void;
-  shouldApplyScaling: boolean;
-  x: number;
-  funnelColors?: IFunnelChartColors;
-}
-
-export function FunnelChartSegment({
-  ariaLabel,
-  barHeight,
-  barWidth,
-  children,
-  index = 0,
-  isLast,
-  onMouseEnter,
-  onMouseLeave,
-  shouldApplyScaling,
-  x,
-  funnelColors,
-}: Props) {
-  const mounted = useRef(false);
-  const { containerBounds } = useChartContext();
-  const isFirst = index === 0;
-  const { height: drawableHeight } = containerBounds ?? {
-    height: 0,
-  };
-
-  const springConfig = useBarSpringConfig({
-    animationDelay: index * 150,
-  });
-
-  const { animatedHeight } = useSpring({
-    from: {
-      animatedHeight: mounted.current ? barHeight : 0,
-    },
-    to: {
-      animatedHeight: barHeight,
-    },
-    ...springConfig,
-  });
-
-  if (shouldApplyScaling && isFirst) {
-    return (
-      <ScaledSegment
-        barHeight={barHeight}
-        barWidth={barWidth}
-        index={index}
-        isLast={isLast}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        x={x}
-        funnelColors={funnelColors}
-      >
-        {children}
-      </ScaledSegment>
-    );
-  }
-
-  return (
-    <Fragment>
-      <AnimatedSegment
-        animatedHeight={animatedHeight}
-        ariaLabel={ariaLabel}
-        barWidth={barWidth}
-        isFirst={isFirst}
-        isLast={isLast}
-        x={x}
-        funnelColors={funnelColors}
-      />
-      <InteractiveOverlay
-        width={barWidth}
-        height={barHeight}
-        index={index}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        x={x}
-        y={drawableHeight - barHeight}
-      />
-      {children}
-    </Fragment>
-  );
-}

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartSegment/components/AnimatedSegment.tsx

@@ -1,50 +0,0 @@
-import type { IFunnelChartColors } from '../../../../GFunnelChart/types';
-import type { SpringValue } from '@react-spring/web';
-
-import { getRoundedRectPath, useChartContext } from '@shopify/polaris-viz-core';
-import { FUNNEL_CHART_SEGMENT_FILL, BORDER_RADIUS } from '../constants';
-import { animated } from '@react-spring/web';
-
-interface AnimatedSegmentProps {
-  animatedHeight: SpringValue<number>;
-  ariaLabel: string;
-  barWidth: number;
-  isFirst: boolean;
-  isLast: boolean;
-  x: number;
-  funnelColors?: IFunnelChartColors;
-}
-
-export function AnimatedSegment({
-  animatedHeight,
-  ariaLabel,
-  barWidth,
-  isFirst,
-  isLast,
-  x,
-  funnelColors,
-}: AnimatedSegmentProps) {
-  const { containerBounds } = useChartContext();
-  const { height: drawableHeight } = containerBounds ?? {
-    height: 0,
-  };
-  const borderRadius = `${isFirst ? BORDER_RADIUS : 0} ${isLast ? BORDER_RADIUS : 0} 0 0`;
-
-  return (
-    <animated.path
-      aria-label={ariaLabel}
-      d={animatedHeight.to((value: number) =>
-        getRoundedRectPath({
-          height: value,
-          width: barWidth,
-          borderRadius,
-        }),
-      )}
-      fill={funnelColors?.segment.fill ?? FUNNEL_CHART_SEGMENT_FILL}
-      style={{
-        transform: animatedHeight.to((value: number) => `translate(${x}px, ${drawableHeight - value}px)`),
-      }}
-      width={barWidth}
-    />
-  );
-}

package/src/shared/charts/components/GPolarisViz/shared/FunnelChartSegment/components/InteractiveOverlay.tsx

@@ -1,34 +0,0 @@
-interface InteractiveOverlayProps {
-  width: number;
-  height: number;
-  index: number;
-  onMouseEnter?: (index: number) => void;
-  onMouseLeave?: () => void;
-  x?: number;
-  y?: number;
-}
-
-export function InteractiveOverlay({
-  width,
-  height,
-  index,
-  onMouseEnter,
-  onMouseLeave,
-  x = 0,
-  y = 0,
-}: InteractiveOverlayProps) {
-  return (
-    <rect
-      x={x}
-      y={y}
-      width={width}
-      height={height}
-      fill="transparent"
-      style={{ outline: 'none' }}
-      onMouseEnter={() => onMouseEnter?.(index)}
-      onMouseLeave={onMouseLeave}
-      onFocus={() => onMouseEnter?.(index)}
-      tabIndex={0}
-    />
-  );
-}