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

package/src/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionItem.tsx

@@ -1,51 +0,0 @@
-import type { IFunnelSelectionItem } from './type';
-
-import { BlockStack, Icon, InlineStack, Text } from '@shopify/polaris';
-import { CheckIcon } from '@shopify/polaris-icons';
-import { cls } from '@/utils';
-
-interface FunnelSelectionItemProps {
-  item: IFunnelSelectionItem;
-  isSelected: boolean;
-  isChangeFunnel: boolean;
-  onSelectRow: (id: string, parentID: string, locationPath?: string) => void;
-}
-
-export const FunnelSelectionItem = ({ item, isSelected, isChangeFunnel, onSelectRow }: FunnelSelectionItemProps) => {
-  return (
-    <div
-      className={`GPathSelectionItem ${isSelected ? 'GPathSelectionItem--selected' : ''}`}
-      onClick={() => onSelectRow(item.id, item.parentID, item.path)}
-    >
-      <InlineStack align="space-between" blockAlign="center" gap="400">
-        {isChangeFunnel && (
-          <div className={cls('flex-shrink-0 opacity-0', { 'opacity-100': isSelected })}>
-            <Icon source={CheckIcon} tone="base" />
-          </div>
-        )}
-        <div className="min-w-0 flex-1">
-          <BlockStack>
-            <div className="flex items-center h-7">
-              <Text variant="bodyMd" fontWeight="medium" as="p" truncate>
-                {item.title}
-              </Text>
-              {/* <GTooltip content={t('View live')}>
-                <div className="GPathSelectionItem__view-icon" onClick={onClickView}>
-                  <Icon source={ViewIcon} tone="base" />
-                </div>
-              </GTooltip> */}
-            </div>
-            <Text variant="bodyMd" tone="subdued" as="p" truncate>
-              {item.path}
-            </Text>
-          </BlockStack>
-        </div>
-        <div className="w-[50px] text-right">
-          <Text variant="bodySm" fontWeight="medium" as="p">
-            {item.percentage}
-          </Text>
-        </div>
-      </InlineStack>
-    </div>
-  );
-};

package/src/shared/charts/components/GFunnelChart/components/FunnelSelection/FunnelSelectionPopover.tsx

@@ -1,95 +0,0 @@
-import type { IFunnelSelectionItem } from './type';
-
-import { BlockStack, Box, Icon, Popover, Text, TextField } from '@shopify/polaris';
-import { FunnelSelectionContent } from './FunnelSelectionContent';
-import { FunnelSelectionHeader } from './FunnelSelectionHeader';
-import { SearchIcon } from '@shopify/polaris-icons';
-import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
-
-export interface FunnelSelectionPopoverProps {
-  open: boolean;
-  selectedID?: string;
-  activator: React.ReactElement;
-  listFunnelSelection?: IFunnelSelectionItem[];
-  level?: number;
-  onClose: () => void;
-  onAddNextFunnel?: (id: string) => void;
-  onChangeFunnel?: (data: { id: string; parentID: string; selectedID?: string; locationPath?: string }) => void;
-  /**
-   * Notify callback supplied by the host app (e.g. to show a toast). Kept external so the SDK
-   * stays free of app-specific toast/navigation dependencies.
-   */
-  onNotify?: (message: string) => void;
-}
-
-export const FunnelSelectionPopover = (props: FunnelSelectionPopoverProps) => {
-  const { open, activator, selectedID, onClose, level } = props;
-
-  const { t } = useTranslation();
-
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const isChangeFunnel = !!selectedID;
-  const title = isChangeFunnel ? t('Change link') : t('Choose link to add');
-
-  useEffect(() => {
-    if (!open) return;
-    const popoverPane = document.querySelector('.Polaris-Popover__Pane.Polaris-Scrollable');
-    if (popoverPane) {
-      (popoverPane as HTMLElement).style.overflowY = 'hidden';
-      (popoverPane as HTMLElement).style.overflowX = 'hidden';
-    }
-  }, [open]);
-
-  return (
-    <Popover
-      active={open}
-      activator={activator}
-      onClose={onClose}
-      preferredPosition="below"
-      preferredAlignment="center"
-      fluidContent
-      fullHeight
-    >
-      <Popover.Pane>
-        <Box paddingBlock="200" width="400px">
-          <BlockStack gap="300">
-            {/* Header */}
-            <Box paddingInline="300">
-              <BlockStack gap="300">
-                <div className="flex flex-col gap-[2px]">
-                  <Text variant="bodyMd" fontWeight="semibold" as="p">
-                    {title}
-                  </Text>
-                  <Text variant="bodyMd" tone="subdued" fontWeight="medium" as="p">
-                    {level !== 0 ? t('Sorted by number of sessions') : t('Only links with sessions are shown')}
-                  </Text>
-                </div>
-
-                {/* Search Bar */}
-                <TextField
-                  label={t('Search link')}
-                  labelHidden
-                  value={searchQuery}
-                  onChange={setSearchQuery}
-                  placeholder={t('Search link')}
-                  prefix={<Icon source={SearchIcon} />}
-                  clearButton
-                  onClearButtonClick={() => setSearchQuery('')}
-                  autoComplete="off"
-                />
-              </BlockStack>
-            </Box>
-
-            {/* Links List */}
-            <Box>
-              <FunnelSelectionHeader />
-              <FunnelSelectionContent {...props} searchQuery={searchQuery} />
-            </Box>
-          </BlockStack>
-        </Box>
-      </Popover.Pane>
-    </Popover>
-  );
-};

package/src/shared/charts/components/GFunnelChart/components/FunnelSelection/index.ts

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

package/src/shared/charts/components/GFunnelChart/components/FunnelSelection/type.ts

@@ -1,7 +0,0 @@
-export type IFunnelSelectionItem = {
-  id: string;
-  title?: string;
-  path?: string;
-  parentID: string;
-  percentage: string;
-};

package/src/shared/charts/components/GFunnelChart/components/types.ts

@@ -1,24 +0,0 @@
-import type { IFunnelSelectionItem } from './FunnelSelection/type';
-
-export interface IOnChangeFunnelParams {
-  id: string;
-  parentID: string;
-  selectedID?: string;
-  level?: number;
-  locationPath?: string;
-}
-
-export type OnChangeFunnelType = (data: IOnChangeFunnelParams) => void;
-
-export interface IFunnelChartAction {
-  fixedLevel?: number;
-  isDisabledAddICon?: boolean;
-  hideAddIcon?: boolean;
-  lengthDisplayedLevels: number;
-  listFunnelSelection?: IFunnelSelectionItem[];
-  isFetchingNextPage?: boolean;
-  getListFunnelByID?: (data: { level?: number; parentID?: string }) => IFunnelSelectionItem[];
-  onChangeFunnel?: OnChangeFunnelType;
-  onAddNextFunnel?: (id: string) => void;
-  onNotify?: (message: string) => void;
-}

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

@@ -1,4 +0,0 @@
-export * from './GFunnelChart';
-
-export type { IFunnelChartColors } from './types';
-export type { OnChangeFunnelType } from './components/types';

package/src/shared/charts/components/GFunnelChart/types.ts

@@ -1,11 +0,0 @@
-export interface IFunnelChartColors {
-  segment: {
-    fill: string;
-    scaleLight: string;
-    scaleShadow: string;
-  };
-  connector: {
-    color: string;
-    offset: number;
-  }[];
-}

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

@@ -1,7 +0,0 @@
-.Arc {
-  outline: none;
-}
-.Arc:focus,
-.Arc:focus-visible {
-  outline: none !important;
-}

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

@@ -1,135 +0,0 @@
-import type { Color } from '@shopify/polaris-viz-core';
-
-import {
-  ARC_LOAD_ANIMATION_CONFIG,
-  ARC_DATA_CHANGE_ANIMATION_CONFIG,
-  getGradientFromColor,
-  uniqueId,
-  getColorVisionEventAttrs,
-  getColorVisionStylesForActiveIndex,
-  COLOR_VISION_SINGLE_ITEM,
-  useSpringConfig,
-  DataType,
-} from '@shopify/polaris-viz-core';
-import { useSpring, animated, to } from '@react-spring/web';
-import { ARC_PAD_ANGLE } from '../../constants';
-import { classNames } from '../../utilities';
-import { ConicGradientWithStops } from '../ConicGradientWithStops';
-import { Fragment, useMemo } from 'react';
-import { arc } from 'd3-shape';
-
-import styles from './Arc.module.scss';
-
-const ANIMATION_SIZE_BUFFER = 30;
-export interface ArcProps {
-  radius: number;
-  height: number;
-  width: number;
-  startAngle: number;
-  endAngle: number;
-  color: Color;
-  cornerRadius: number;
-  thickness: number;
-  animationDelay?: number;
-  index?: number;
-  isAnimated: boolean;
-  activeIndex?: number;
-}
-
-export function Arc({
-  animationDelay = 100,
-  radius,
-  width,
-  height,
-  startAngle,
-  endAngle,
-  color,
-  cornerRadius,
-  thickness,
-  index = 0,
-  isAnimated,
-  activeIndex = 0,
-}: ArcProps) {
-  const gradientId = useMemo(() => uniqueId('DonutChart'), []);
-  const createArc = arc().cornerRadius(cornerRadius);
-  const gradient = getGradientFromColor(color);
-
-  const springConfig = useSpringConfig({
-    animationDelay: index * animationDelay,
-    shouldAnimate: isAnimated,
-    mountedSpringConfig: ARC_DATA_CHANGE_ANIMATION_CONFIG,
-    unmountedSpringConfig: ARC_LOAD_ANIMATION_CONFIG,
-  });
-
-  const { animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle } =
-    useSpring<{
-      animatedInnerRadius: number;
-      animatedOuterRadius: number;
-      animatedStartAngle: number;
-      animatedEndAngle: number;
-      animatedPadAngle: number;
-    }>({
-      animatedInnerRadius: radius - thickness,
-      animatedOuterRadius: radius,
-      animatedStartAngle: startAngle,
-      animatedEndAngle: endAngle,
-      animatedPadAngle: ARC_PAD_ANGLE,
-      from: {
-        animatedOuterRadius: radius - thickness,
-        animatedInnerRadius: radius - thickness,
-      },
-      ...springConfig,
-    });
-
-  return (
-    <Fragment>
-      <clipPath
-        id={gradientId}
-        transform={`translate(${width / 2 - ANIMATION_SIZE_BUFFER} ${height / 2 - ANIMATION_SIZE_BUFFER})`}
-      >
-        <animated.path
-          className={classNames(styles.Arc)}
-          d={to(
-            [animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle],
-            (animatedInnerRadius, animatedOuterRadius, animatedStartAngle, animatedEndAngle, animatedPadAngle) => {
-              return createArc({
-                innerRadius: animatedInnerRadius,
-                outerRadius: animatedOuterRadius,
-                startAngle: animatedStartAngle,
-                endAngle: animatedEndAngle,
-                padAngle: animatedPadAngle,
-              });
-            },
-          )}
-        />
-      </clipPath>
-      <g
-        style={{
-          ...getColorVisionStylesForActiveIndex({
-            activeIndex,
-            index,
-          }),
-        }}
-        className={classNames(styles.Arc)}
-        {...getColorVisionEventAttrs({
-          type: COLOR_VISION_SINGLE_ITEM,
-          index,
-        })}
-        clipPath={`url(#${gradientId})`}
-        data-type={DataType.Arc}
-        data-index={index}
-        aria-hidden={false}
-        data-start-angle={startAngle}
-        data-end-angle={endAngle}
-      >
-        <ConicGradientWithStops
-          x={width / -2 - ANIMATION_SIZE_BUFFER}
-          y={height / -2 - ANIMATION_SIZE_BUFFER}
-          height={radius * 4}
-          width={radius * 4}
-          gradient={gradient}
-        />
-      </g>
-    </Fragment>
-  );
-}

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

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

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

@@ -1,39 +0,0 @@
-.ChartContainer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  font-family: Inter,
-    -apple-system,
-    'system-ui',
-    'San Francisco',
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    sans-serif;
-  ;
-  font-size: 12px;
-}
-
-.ChartContainer *:focus,
-.ChartContainer *:focus-visible {
-  outline: 2px solid #4b92e5;
-  outline-offset: 2px;
-}
-
-.ContainerBounds {
-  height: 100%;
-  width: 100%;
-}
-
-.Chart {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-
-.Chart svg {
-  overflow: visible;
-  max-width: 100%;
-}

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

@@ -1,150 +0,0 @@
-import type {
-  DataGroup,
-  DataSeries,
-  InternalChartType,
-  ErrorBoundaryResponse,
-  BoundingRect,
-} from '@shopify/polaris-viz-core';
-import type { ChartContextValues } from '@shopify/polaris-viz-core/build/ts/contexts';
-import type { SkeletonType } from '../ChartSkeleton';
-import type { ReactElement } from 'react';
-
-import {
-  uniqueId,
-  ChartContext,
-  isLargeDataSet,
-  usePolarisVizContext,
-  isTouchDevice,
-  getComparisonSeriesIndexes,
-  useTheme,
-} from '@shopify/polaris-viz-core';
-import { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion';
-import { useContainerBounds } from './hooks/useContainerBounds';
-import { ChartErrorBoundary } from '../ChartErrorBoundary';
-import { getChartId } from '../../utilities/getChartId';
-import { EMPTY_BOUNDS } from '../../constants';
-import { useState, useMemo } from 'react';
-
-import characterWidthOffsets from '../../data/character-width-offsets.json';
-import characterWidths from '../../data/character-widths.json';
-import styles from './ChartContainer.module.scss';
-
-export interface Props {
-  children: ReactElement;
-  data: DataSeries[] | DataGroup[];
-  id: string | undefined;
-  isAnimated: boolean;
-  theme: string;
-  onError?: ErrorBoundaryResponse;
-  scrollContainer?: Element | null;
-  sparkChart?: boolean;
-  skeletonType?: SkeletonType;
-  type?: InternalChartType;
-  height?: string | number;
-}
-
-export const ChartContainer = (props: Props) => {
-  const id = props.id ?? uniqueId('chart');
-
-  const { prefersReducedMotion } = usePrefersReducedMotion();
-  const [isPrinting, setIsPrinting] = useState(false);
-  const { onError: onErrorProvider } = usePolarisVizContext();
-
-  const dataTooBigToAnimate = useMemo(() => {
-    return isLargeDataSet(props.data, props.type);
-  }, [props.data, props.type]);
-
-  const { containerBounds, updateContainerBounds, setRef } = useContainerBounds({
-    onIsPrintingChange: setIsPrinting,
-    scrollContainer: props.scrollContainer,
-    sparkChart: props.sparkChart,
-  });
-
-  const value: ChartContextValues = useMemo(() => {
-    const shouldAnimate = props.isAnimated && !prefersReducedMotion && !dataTooBigToAnimate;
-    const printFriendlyTheme = isPrinting ? 'Print' : props.theme;
-
-    const comparisonSeriesIndexes = getComparisonSeriesIndexes(props.data);
-
-    const comparisonIndexes = comparisonSeriesIndexes.map(({ comparisonIndex }) => comparisonIndex);
-
-    return {
-      shouldAnimate,
-      id,
-      characterWidths,
-      characterWidthOffsets,
-      theme: printFriendlyTheme,
-      isTouchDevice: typeof window === 'undefined' ? false : isTouchDevice(),
-      isPerformanceImpacted: dataTooBigToAnimate,
-      scrollContainer: props.scrollContainer,
-      containerBounds: containerBounds ?? EMPTY_BOUNDS,
-      comparisonSeriesIndexes,
-      comparisonIndexes,
-    };
-  }, [
-    id,
-    isPrinting,
-    prefersReducedMotion,
-    props.isAnimated,
-    props.theme,
-    dataTooBigToAnimate,
-    props.scrollContainer,
-    containerBounds,
-    props.data,
-  ]);
-
-  const { chartContainer, grid } = useTheme(value.theme);
-
-  // If there is no vertical overflow and a custom padding is not defined,
-  // add padding so that the top y-axis label is not cut off
-  const padding = !grid.verticalOverflow && chartContainer.padding == null ? '3px 0 0 0' : chartContainer.padding;
-
-  const minHeight = (props.height ?? props.sparkChart) ? chartContainer.sparkChartMinHeight : chartContainer.minHeight;
-  return (
-    <ChartContext.Provider value={value}>
-      <div
-        className={styles.ChartContainer}
-        style={{
-          background: chartContainer.backgroundColor,
-          padding,
-          borderRadius: chartContainer.borderRadius,
-        }}
-        id={getChartId(value.id)}
-      >
-        <div
-          className={styles.ContainerBounds}
-          ref={setRef}
-          style={{
-            minHeight,
-          }}
-          onMouseEnter={updateContainerBounds}
-          onFocus={updateContainerBounds}
-          onTouchStart={updateContainerBounds}
-        >
-          {!hasValidBounds(value.containerBounds) ? null : (
-            <ChartErrorBoundary
-              type={props.skeletonType ?? 'Default'}
-              containerBounds={value.containerBounds}
-              data={props.data}
-              onError={props.onError ?? onErrorProvider}
-            >
-              <div
-                className={styles.Chart}
-                style={{
-                  height: props.height ?? value.containerBounds.height,
-                  width: value.containerBounds.width,
-                }}
-              >
-                {props.children}
-              </div>
-            </ChartErrorBoundary>
-          )}
-        </div>
-      </div>
-    </ChartContext.Provider>
-  );
-};
-
-function hasValidBounds(containerBounds: BoundingRect) {
-  return containerBounds.width > 0 && containerBounds.height > 0;
-}

package/src/shared/charts/components/GPolarisViz/components/ChartContainer/hooks/useContainerBounds.ts

@@ -1,113 +0,0 @@
-import { useCallback, useState, type Dispatch, type SetStateAction } from 'react';
-
-import { useTheme, usePrevious, type BoundingRect } from '@shopify/polaris-viz-core';
-import { useDebouncedCallback } from '../../../hooks/useDebouncedCallback';
-import { useResizeObserver, usePrintResizing } from '../../../hooks';
-import { useEnhancedEffect } from '@/hooks';
-
-export function useContainerBounds({
-  onIsPrintingChange,
-  scrollContainer,
-  sparkChart,
-}: {
-  onIsPrintingChange: Dispatch<SetStateAction<boolean>>;
-  scrollContainer?: Element | null;
-  sparkChart?: boolean;
-}) {
-  const { chartContainer } = useTheme();
-
-  const { ref, setRef, entry } = useResizeObserver();
-
-  const previousEntry = usePrevious(entry);
-
-  const [containerBounds, setContainerBounds] = useState<BoundingRect | null>(null);
-
-  usePrintResizing({
-    ref,
-    setContainerBounds: setContainerBounds as any,
-    onIsPrintingChange,
-  });
-
-  const updateDimensions = useCallback(() => {
-    if (
-      (previousEntry?.contentRect.width === entry?.contentRect.width &&
-        previousEntry?.contentRect.height === entry?.contentRect.height) ||
-      entry == null
-    ) {
-      return;
-    }
-
-    const { width, height } = entry.contentRect;
-    const { x, y } = entry.target.getBoundingClientRect();
-
-    const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
-
-    setContainerBounds({ width, height, x, y: y + scrollY });
-  }, [entry, previousEntry?.contentRect, scrollContainer]);
-
-  const debouncedUpdateDimensions = useDebouncedCallback(() => {
-    updateDimensions();
-  }, 100);
-
-  useEnhancedEffect(() => {
-    updateDimensions();
-
-    if (containerBounds === null) {
-      setContainerBounds({
-        width: 0,
-        height: sparkChart ? chartContainer.sparkChartMinHeight : chartContainer.minHeight,
-        x: 0,
-        y: 0,
-      });
-    }
-
-    const isServer = typeof window === 'undefined';
-
-    if (!isServer) {
-      window.addEventListener('resize', debouncedUpdateDimensions);
-    }
-
-    return () => {
-      if (!isServer) {
-        window.removeEventListener('resize', debouncedUpdateDimensions);
-      }
-    };
-  }, [
-    entry,
-    updateDimensions,
-    debouncedUpdateDimensions,
-    containerBounds,
-    chartContainer.minHeight,
-    sparkChart,
-    chartContainer.sparkChartMinHeight,
-  ]);
-
-  const updateContainerBounds = useCallback(() => {
-    if (ref == null) {
-      return;
-    }
-
-    const scrollY = scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
-
-    const bounds = ref.getBoundingClientRect();
-
-    setContainerBounds((prev) => {
-      if (bounds.y === prev?.y && bounds.x === prev?.x) {
-        return prev;
-      }
-
-      return {
-        width: bounds.width,
-        height: bounds.height,
-        x: bounds.x,
-        y: bounds.y + scrollY,
-      };
-    });
-  }, [ref, scrollContainer]);
-
-  return {
-    containerBounds,
-    updateContainerBounds,
-    setRef,
-  };
-}

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

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

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

@@ -1,18 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-
-import styles from './ChartElements.module.scss';
-
-interface ChartDivProps {
-  height: number | string;
-  width: number | string;
-  style?: CSSProperties;
-  children: ReactNode;
-}
-
-export function ChartDiv({ children, height, width, style = {} }: ChartDivProps) {
-  return (
-    <div className={styles.ChartContainer} style={{ height, width, ...style }}>
-      {children}
-    </div>
-  );
-}