@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

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

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

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

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

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

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

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

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

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

@@ -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>
+  );
+};