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

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

@@ -0,0 +1,92 @@
+import type { FunnelSelectionPopoverProps } from './FunnelSelectionPopover';
+
+import { FunnelSelectionItem } from './FunnelSelectionItem';
+import { Box, Scrollable, Text } from '@shopify/polaris';
+import { usePopoverResizeObserver } from '@/hooks';
+import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
+
+interface FunnelSelectionContentProps extends FunnelSelectionPopoverProps {
+  searchQuery: string;
+}
+export const FunnelSelectionContent = ({
+  open,
+  selectedID,
+  onClose,
+  onAddNextFunnel,
+  onChangeFunnel,
+  onNotify,
+  searchQuery,
+  listFunnelSelection,
+}: FunnelSelectionContentProps) => {
+  const { t } = useTranslation();
+
+  const [maxHeight, setMaxHeight] = useState(218);
+
+  const isChangeFunnel = !!selectedID;
+
+  const filteredListFunnelSelection = listFunnelSelection?.filter(
+    (link) =>
+      link.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      link.path?.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  usePopoverResizeObserver({
+    active: open,
+    onHeightChange: (PopoverHeight) => {
+      const headerAndFooterHeight = 110;
+      const contentHeight = PopoverHeight - headerAndFooterHeight;
+      if (contentHeight < 218) {
+        setMaxHeight(contentHeight);
+      }
+    },
+  });
+
+  const onSelectRow = (id: string, parentID: string, locationPath?: string) => {
+    if (selectedID === id) {
+      onClose();
+      return;
+    }
+
+    if (isChangeFunnel) {
+      onChangeFunnel?.({ id, parentID, selectedID, locationPath });
+      onNotify?.(t('Link changed'));
+    } else {
+      onAddNextFunnel?.(id);
+    }
+    onClose();
+  };
+
+  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 (
+    <Scrollable vertical scrollbarWidth="thin" style={{ maxHeight: `${maxHeight}px` }}>
+      <Box>
+        {filteredListFunnelSelection && filteredListFunnelSelection.length > 0 ? (
+          filteredListFunnelSelection.map((item, index) => (
+            <FunnelSelectionItem
+              key={index}
+              item={item}
+              isSelected={selectedID === item.id}
+              onSelectRow={onSelectRow}
+              isChangeFunnel={isChangeFunnel}
+            />
+          ))
+        ) : (
+          <Box padding="300">
+            <Text variant="bodyMd" tone="subdued" alignment="center" as="p">
+              {searchQuery ? t('No links found') : t('No links available')}
+            </Text>
+          </Box>
+        )}
+      </Box>
+    </Scrollable>
+  );
+};

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

@@ -0,0 +1,54 @@
+import type { IconSource } from '@shopify/polaris';
+
+import { Icon, InlineGrid, Text } from '@shopify/polaris';
+import { ArrowDownIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import { cls } from '@/utils';
+
+export const FunnelSelectionHeader = () => {
+  const { t } = useTranslation();
+
+  const getHeaderItems = (): HeaderItemProps[] => {
+    return [
+      { title: t('Page title'), align: 'start' },
+      {
+        title: t('Sessions'),
+        align: 'end',
+        icon: ArrowDownIcon,
+      },
+    ];
+  };
+
+  return (
+    <InlineGrid columns={'1fr 1fr'}>
+      {getHeaderItems().map((item) => (
+        <HeaderItem key={item.title} {...item} />
+      ))}
+    </InlineGrid>
+  );
+};
+
+interface HeaderItemProps {
+  title: string;
+  align: 'start' | 'end';
+  icon?: IconSource;
+}
+const HeaderItem = ({ title, align, icon }: HeaderItemProps) => {
+  return (
+    <div
+      className={cls('py-2.5 px-3 bg-[#f7f7f7] flex items-center gap-1', {
+        'pr-[5px]': !!icon,
+      })}
+      style={{ justifyContent: align }}
+    >
+      <Text as="span" variant="bodySm" fontWeight="medium" tone="subdued">
+        {title}
+      </Text>
+      {icon && (
+        <span>
+          <Icon tone={'subdued'} source={icon} />
+        </span>
+      )}
+    </div>
+  );
+};

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

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

@@ -0,0 +1,95 @@
+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/type.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,135 @@
+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/ChartContainer/ChartContainer.module.scss

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

@@ -0,0 +1,150 @@
+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;
+}