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

package/src/shared/charts/components/ComboChart.tsx

@@ -1,108 +0,0 @@
-import type { GComboChartProps } from '@/shared/charts';
-
-import { GComboChart } from '@/shared/charts';
-
-export const CampaignComboChart = () => {
-  const data: GComboChartProps['data'] = [
-    {
-      shape: 'Bar',
-      name: 'Total Sales',
-      series: [
-        {
-          name: 'Variant',
-          data: [
-            {
-              value: 100,
-              key: 'Sessions',
-            },
-            {
-              value: 80,
-              key: 'Added to cart',
-            },
-            {
-              value: 50,
-              key: 'Reached checkout`',
-            },
-            {
-              value: 10,
-              key: 'Completed checkout',
-            },
-          ],
-          color: '#2C7DFF',
-        },
-        {
-          name: 'Control',
-          data: [
-            {
-              value: 100,
-              key: 'Sessions',
-            },
-            {
-              value: 70,
-              key: 'Added to cart',
-            },
-            {
-              value: 35,
-              key: 'Reached checkout`',
-            },
-            {
-              value: 15,
-              key: 'Completed checkout',
-            },
-          ],
-          color: '#F34A70',
-        },
-      ],
-    },
-    {
-      shape: 'Line',
-      name: 'Total Sessions',
-      series: [
-        {
-          name: 'Control',
-          data: [
-            {
-              value: 100,
-              key: 'Sessions',
-            },
-            {
-              value: 80,
-              key: 'Added to cart',
-            },
-            {
-              value: 50,
-              key: 'Reached checkout`',
-            },
-            {
-              value: 10,
-              key: 'Completed checkout',
-            },
-          ],
-        },
-        {
-          name: 'Variant',
-          data: [
-            {
-              value: 100,
-              key: 'Sessions',
-            },
-            {
-              value: 70,
-              key: 'Added to cart',
-            },
-            {
-              value: 35,
-              key: 'Reached checkout`',
-            },
-            {
-              value: 15,
-              key: 'Completed checkout',
-            },
-          ],
-          isComparison: true,
-        },
-      ],
-    },
-  ];
-  return <GComboChart data={data} />;
-};

package/src/shared/charts/components/GBarChart.tsx

@@ -1,96 +0,0 @@
-import type { BarChartProps, RenderTooltipContentData } from '@shopify/polaris-viz';
-import type { IAnalyticMetric } from '@/types';
-
-import { BlockStack, Box, Card, InlineStack, Text } from '@shopify/polaris';
-import { GChartProvider } from '../contexts/GChartProvider';
-import { numberWithCommas } from '@/utils';
-import { BarChart } from '@shopify/polaris-viz';
-import { useTranslation } from 'react-i18next';
-
-export interface GBarChartProps extends BarChartProps {
-  tooltipTitle?: string;
-  loading?: boolean;
-}
-export const GBarChart: React.FC<GBarChartProps> = ({ tooltipTitle, tooltipOptions, ...barChartProps }) => {
-  // if (loading) return <GSkeletonDisplayText height="323px" />; // TODO: Release 1.2.0 - uncomment this
-
-  return (
-    <Box paddingInlineEnd={'300'} paddingInlineStart={'050'}>
-      <GChartProvider minHeight={323}>
-        <BarChart
-          theme="Light"
-          renderLegendContent={() => null}
-          tooltipOptions={{
-            titleFormatter: () => tooltipTitle ?? 'Metric',
-            valueFormatter: (value) => numberWithCommas(`${value}`),
-            // renderTooltipContent: (data) => <GBarChartTooltip data={data} />,
-            ...tooltipOptions,
-          }}
-          maxSeries={20}
-          {...barChartProps}
-        />
-      </GChartProvider>
-    </Box>
-  );
-};
-
-export interface GBarChartTooltipProps {
-  data: RenderTooltipContentData;
-  metrics?: IAnalyticMetric[];
-  metricsPrevious?: IAnalyticMetric[];
-}
-// TODO: implement
-export const GBarChartTooltip: React.FC<GBarChartTooltipProps> = ({ data }) => {
-  const { t } = useTranslation();
-
-  const activeIndex = data?.activeIndex ?? 0;
-  const dataA = data?.data?.[0]?.data?.[activeIndex];
-  const dataB = data?.data?.[1]?.data?.[activeIndex];
-
-  // Extract numeric values for comparison
-  const valueA = Number(dataA?.value || 0);
-  const valueB = Number(dataB?.value || 0);
-
-  return (
-    <div className="w-fit min-w-[175px]">
-      <Card padding={'200'}>
-        <BlockStack gap={'100'}>
-          <Text as="p" variant="bodySm" fontWeight="semibold">
-            {data.formatters?.titleFormatter?.(data.title || '') || data.title}
-          </Text>
-          <BlockStack gap={'200'}>
-            <InlineStack gap={'200'} align="space-between" blockAlign="center">
-              <InlineStack gap={'150'} blockAlign="center">
-                <div className="bg-variant-a h-[8px] w-[8px] rounded-[10px]"></div>
-                <Text as="p" variant="bodySm" tone="subdued">
-                  {t('Control')}
-                </Text>
-              </InlineStack>
-              <InlineStack blockAlign="center" gap="100">
-                <Text as="span" variant="headingSm">
-                  {valueA}
-                </Text>
-                {/* <IncreasePercentage increase={increaseA} /> */}
-              </InlineStack>
-            </InlineStack>
-
-            <InlineStack gap={'200'} align="space-between" blockAlign="center">
-              <InlineStack gap={'150'} blockAlign="center">
-                <div className="bg-variant-b h-[8px] w-[8px] rounded-[10px]"></div>
-                <Text as="p" variant="bodySm" tone="subdued">
-                  {t('Variant')}
-                </Text>
-              </InlineStack>
-              <InlineStack blockAlign="center" gap="100">
-                <Text as="span" variant="headingSm">
-                  {valueB}
-                </Text>
-                {/* <IncreasePercentage increase={increaseB} /> */}
-              </InlineStack>
-            </InlineStack>
-          </BlockStack>
-        </BlockStack>
-      </Card>
-    </div>
-  );
-};

package/src/shared/charts/components/GComboChart.tsx

@@ -1,15 +0,0 @@
-import type { ComboChartProps } from '@shopify/polaris-viz';
-
-import { GChartProvider } from '../contexts/GChartProvider';
-import { ComboChart } from '@shopify/polaris-viz';
-
-export interface GComboChartProps extends ComboChartProps {
-  tooltipTitle?: string;
-}
-export const GComboChart = ({ tooltipTitle: _tooltipTitle, ...comboChartProps }: GComboChartProps) => {
-  return (
-    <GChartProvider>
-      <ComboChart theme="Light" renderLegendContent={() => null} {...comboChartProps} />
-    </GChartProvider>
-  );
-};

package/src/shared/charts/components/GDonutChart.tsx

@@ -1,25 +0,0 @@
-import { DonutChart, type DonutChartProps } from '@shopify/polaris-viz';
-import { GSkeletonDisplayText } from '@/shared/components';
-import { GChartProvider } from '../contexts/GChartProvider';
-import { Box } from '@shopify/polaris';
-
-export interface GDonutChartProps extends DonutChartProps {
-  loading?: boolean;
-}
-export const GDonutChart: React.FC<GDonutChartProps> = ({ data, loading }) => {
-  if (loading) return <GSkeletonDisplayText height="92px" />;
-
-  return (
-    <Box paddingInlineEnd={'300'} paddingInlineStart={'050'}>
-      <GChartProvider minHeight={323}>
-        <DonutChart
-          theme="Light"
-          seriesNameFormatter={(x) => `${x}`}
-          legendPosition="right"
-          errorText="Something went wrong"
-          data={data}
-        />
-      </GChartProvider>
-    </Box>
-  );
-};

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

@@ -1,34 +0,0 @@
-import type { GDataSeries } from '@/shared/charts/types';
-import type { IFunnelChartAction } from './components/types';
-import type { IFunnelChartColors } from './types';
-
-import { GVizChartContainerWrapper, GVizFunnelChartNext } from '@/shared/charts';
-import { FunnelChartAction } from './components/FunnelChartAction';
-import { BlockStack } from '@shopify/polaris';
-import { formatPercentage } from '@/utils';
-
-interface GAnalyticFunnelChartProps {
-  dataSeries: GDataSeries[];
-  actionProps?: IFunnelChartAction;
-  funnelColors?: IFunnelChartColors;
-}
-
-export const GFunnelChart: React.FC<GAnalyticFunnelChartProps> = ({ dataSeries, actionProps, funnelColors }) => {
-  return (
-    <BlockStack gap="200">
-      <GVizChartContainerWrapper height={400} props={{ data: dataSeries }}>
-        <GVizFunnelChartNext
-          data={dataSeries}
-          showPercentages={true}
-          percentageFormatter={formatPercentage}
-          isShowFirstLabel={true}
-          funnelColors={funnelColors}
-        />
-      </GVizChartContainerWrapper>
-
-      <GVizChartContainerWrapper props={{ data: dataSeries }} height={'auto'}>
-        <FunnelChartAction dataSeries={dataSeries} actionProps={actionProps} />
-      </GVizChartContainerWrapper>
-    </BlockStack>
-  );
-};

package/src/shared/charts/components/GFunnelChart/components/FunnelChartAction.tsx

@@ -1,67 +0,0 @@
-import type { GDataSeries } from '@/shared/charts/types';
-import type { IFunnelChartAction } from './types';
-
-import { FUNNEL_CHART_NEXT_CONSTANTS } from '@/shared/charts';
-import { Box, InlineGrid } from '@shopify/polaris';
-import { useChartContext } from '@shopify/polaris-viz-core';
-import { scaleBand } from 'd3-scale';
-import { FunnelChartActionWrapper } from './FunnelChartActionWrapper';
-
-export interface FunnelChartActionProps {
-  dataSeries: GDataSeries[];
-  actionProps?: IFunnelChartAction;
-}
-
-export const FunnelChartAction: React.FC<FunnelChartActionProps> = ({ dataSeries, actionProps }) => {
-  const fixedLevel = actionProps?.fixedLevel ?? 0;
-
-  const { containerBounds } = useChartContext();
-  const { LINE_OFFSET, LINE_WIDTH, SEGMENT_WIDTH_RATIO, GAP } = FUNNEL_CHART_NEXT_CONSTANTS;
-
-  const drawableWidth = containerBounds?.width ?? 0;
-  const dataPoints = dataSeries[0]?.data ?? [];
-
-  // Layout math below relies on at least two steps (rectX[0]/rectX[1]); bail out on loading/empty/single-step.
-  if (dataPoints.length < 2) return null;
-
-  const xValues = dataPoints.map(({ key }) => key) as string[];
-
-  const totalStepWidth = drawableWidth / xValues.length;
-  const connectorWidth = totalStepWidth * (1 - SEGMENT_WIDTH_RATIO);
-  const drawableWidthWithLastConnector = drawableWidth + connectorWidth;
-
-  const xScale = scaleBand().domain(xValues).range([0, drawableWidthWithLastConnector]);
-  const sectionWidth = xScale.bandwidth();
-  const barWidth = sectionWidth * SEGMENT_WIDTH_RATIO;
-
-  const rectX = dataPoints.map((dataPoint) => {
-    const xPosition = xScale(dataPoint.key.toString());
-    const x = xPosition == null ? 0 : xPosition;
-    const rectX = x - (LINE_OFFSET - LINE_WIDTH);
-    const startX = x + barWidth + GAP;
-
-    return { rectX, startX };
-  });
-
-  const columnWrapper = dataPoints.map(() => `${rectX[1]!.rectX}px`).join(' ');
-  const columnItem = `${rectX[0]!.startX}px ${rectX[1]!.rectX - rectX[0]!.startX}px`;
-  return (
-    <Box>
-      <InlineGrid columns={columnWrapper} gap={'050'}>
-        {dataPoints.map((dataPoint, index: number) => {
-          return (
-            <InlineGrid columns={columnItem} key={`${dataPoint.key}-${index}`} alignItems="center">
-              <FunnelChartActionWrapper
-                level={index}
-                dataPoint={dataPoint}
-                isLastLevel={index === dataPoints.length - 1}
-                isFinalFixedLevel={index >= dataPoints.length - fixedLevel}
-                actionProps={actionProps}
-              />
-            </InlineGrid>
-          );
-        })}
-      </InlineGrid>
-    </Box>
-  );
-};

package/src/shared/charts/components/GFunnelChart/components/FunnelChartActionIcon.tsx

@@ -1,60 +0,0 @@
-import type { IFunnelChartAction } from './types';
-
-import { ArrowRightIcon, PlusIcon } from '@shopify/polaris-icons';
-import { FunnelSelectionPopover } from './FunnelSelection';
-import { useWindowSize } from '@/hooks';
-import { Button, Icon } from '@shopify/polaris';
-import { useTranslation } from 'react-i18next';
-import { GTooltip } from '@/shared/components';
-import { useState } from 'react';
-
-interface FunnelChartActionIconProps {
-  level: number;
-  isLastLevel: boolean;
-  isFinalFixedLevel: boolean;
-  actionProps?: IFunnelChartAction;
-}
-
-export const FunnelChartActionIcon = ({
-  level,
-  isLastLevel,
-  isFinalFixedLevel,
-  actionProps,
-}: FunnelChartActionIconProps) => {
-  const { t } = useTranslation();
-  const { isMobileView } = useWindowSize();
-  const { listFunnelSelection, onAddNextFunnel, onNotify, isDisabledAddICon, hideAddIcon } = actionProps || {};
-
-  const lengthDisplayedLevels = actionProps?.lengthDisplayedLevels || 0;
-
-  const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
-
-  if (isLastLevel) return;
-
-  if (level < lengthDisplayedLevels || isFinalFixedLevel) {
-    return <Icon source={ArrowRightIcon} />;
-  }
-
-  if (isMobileView || hideAddIcon) return null;
-
-  const tooltip = isDisabledAddICon ? t('Funnel step limit reached.') : t('Add funnel step');
-
-  return (
-    <FunnelSelectionPopover
-      open={isOpenPathSelectionPopover}
-      onClose={() => setIsOpenPathSelectionPopover(false)}
-      listFunnelSelection={listFunnelSelection}
-      onAddNextFunnel={onAddNextFunnel}
-      onNotify={onNotify}
-      activator={
-        <GTooltip content={tooltip}>
-          <Button
-            icon={<Icon source={PlusIcon} />}
-            onClick={() => setIsOpenPathSelectionPopover((prev) => !prev)}
-            disabled={isDisabledAddICon}
-          />
-        </GTooltip>
-      }
-    />
-  );
-};

package/src/shared/charts/components/GFunnelChart/components/FunnelChartActionWrapper.tsx

@@ -1,100 +0,0 @@
-import type { GDataPoint } from '@/shared/charts/types';
-import type { GTooltipCardData } from '@/shared/components';
-import type { IFunnelChartAction } from './types';
-
-import { GTooltipCard } from '@/shared/components';
-import { BlockStack, Icon, InlineStack, Text } from '@shopify/polaris';
-import { ChevronDownIcon, ChevronUpIcon } from '@shopify/polaris-icons';
-import { Fragment, useMemo, useState } from 'react';
-import { FunnelChartActionIcon } from './FunnelChartActionIcon';
-import { FunnelSelectionPopover } from './FunnelSelection';
-
-interface FunnelChartActionWrapperProps {
-  dataPoint: GDataPoint;
-  level: number;
-  isLastLevel: boolean;
-  isFinalFixedLevel: boolean;
-  actionProps?: IFunnelChartAction;
-}
-
-export const ActionLabel = ({ labelTooltip, title }: { labelTooltip?: GTooltipCardData; title: string }) => {
-  const content = (
-    <Text alignment="center" as="p" fontWeight="medium" truncate>
-      {title}
-    </Text>
-  );
-
-  if (!labelTooltip) {
-    return content;
-  }
-  return (
-    <div className="min-w-0">
-      <GTooltipCard tooltip={labelTooltip}>{content}</GTooltipCard>
-    </div>
-  );
-};
-
-export const FunnelChartActionWrapper: React.FC<FunnelChartActionWrapperProps> = (props) => {
-  const { dataPoint, actionProps, level, isLastLevel, isFinalFixedLevel } = props;
-  const { parentID, id } = dataPoint;
-
-  const { getListFunnelByID, onChangeFunnel } = actionProps || {};
-
-  const availableChildPages = useMemo(
-    () => getListFunnelByID?.({ level, parentID }),
-    [level, parentID, getListFunnelByID],
-  );
-
-  const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
-
-  const title = useMemo(() => {
-    return dataPoint.title || dataPoint.key.toString().split('-')[0]!;
-  }, [dataPoint.key, dataPoint.title]);
-
-  return (
-    <Fragment>
-      <InlineStack align="center">
-        {availableChildPages && availableChildPages.length > 1 ? (
-          <div className="overflow-hidden">
-            <FunnelSelectionPopover
-              open={isOpenPathSelectionPopover}
-              listFunnelSelection={availableChildPages}
-              selectedID={id}
-              onClose={() => setIsOpenPathSelectionPopover(false)}
-              onChangeFunnel={(data) => onChangeFunnel?.({ ...data, level })}
-              activator={
-                <div
-                  className="cursor-pointer"
-                  onClick={() => setIsOpenPathSelectionPopover(!isOpenPathSelectionPopover)}
-                >
-                  <InlineStack blockAlign="center" gap="100">
-                    <div className="min-w-0 flex-1">
-                      <Text as="p" fontWeight="medium" truncate>
-                        {`${title}`}
-                      </Text>
-                    </div>
-                    <Icon source={isOpenPathSelectionPopover ? ChevronUpIcon : ChevronDownIcon} />
-                  </InlineStack>
-                </div>
-              }
-              level={level}
-            />
-          </div>
-        ) : (
-          <ActionLabel labelTooltip={dataPoint.labelTooltip} title={title} />
-        )}
-      </InlineStack>
-
-      <BlockStack align="center" inlineAlign="center">
-        <InlineStack gap="200">
-          <FunnelChartActionIcon
-            level={level}
-            isLastLevel={isLastLevel}
-            isFinalFixedLevel={isFinalFixedLevel}
-            actionProps={actionProps}
-          />
-        </InlineStack>
-      </BlockStack>
-    </Fragment>
-  );
-};

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

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

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