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

package/src/shared/reports/ui/ReportTable/components/Header/SummaryRow.tsx

@@ -1,69 +0,0 @@
-import type { IReportColumn, ReportRowType } from '@/shared/reports/common/Visualization/types';
-import type { IReportHeaderSummary } from './WrapperHeader';
-import type { ReportColumnLayoutMap } from '../../types';
-
-import { getPreviousTotalColumnName, getTotalColumnName } from '@/shared/reports/common/Visualization/utils';
-import { getColumnLayoutStyles } from '../../utils';
-import { useTranslation } from 'react-i18next';
-import { SummaryCell } from './SummaryCell';
-import { useReportData } from '../../hooks';
-
-interface SummaryRowProps {
-  columns: IReportColumn[];
-  row?: ReportRowType;
-  dimensions: string[];
-  summary?: IReportHeaderSummary;
-  columnLayoutMap: ReportColumnLayoutMap;
-}
-
-export const SummaryRow = ({ columns, row, dimensions, summary, columnLayoutMap }: SummaryRowProps) => {
-  const { t } = useTranslation();
-  const { showPrevious, previousContent, content } = summary || {};
-  const { formatData } = useReportData();
-
-  if (summary?.hide || !dimensions.length) return null;
-
-  const getCellValue = (columnName: string, index: number, formatter: string) => {
-    const layout = columnLayoutMap[columnName];
-    if (index === 0)
-      return (
-        <SummaryCell
-          currentValue={content || t('Summary')}
-          showPrevious={showPrevious}
-          previousValue={previousContent}
-          columnLayout={layout!}
-        />
-      );
-
-    const isDimensionCol = dimensions.includes(columnName);
-    if (isDimensionCol) return '';
-
-    const cellValue = row?.[getTotalColumnName(columnName)];
-    const previousValue = row?.[getPreviousTotalColumnName(columnName)];
-    const formattedValue =
-      cellValue == null ? cellValue : formatData({ value: cellValue, formatter, name: columnName });
-    const formattedPreviousValue =
-      previousValue == null ? previousValue : formatData({ value: previousValue, formatter, name: columnName });
-
-    if (typeof formattedValue === 'object') return '';
-
-    return (
-      <SummaryCell
-        currentValue={formattedValue}
-        showPrevious={showPrevious}
-        previousValue={formattedPreviousValue}
-        columnLayout={layout!}
-      />
-    );
-  };
-
-  return (
-    <div className="GReportTable__Summary-Row">
-      {columns.map(({ name, dataType }, index) => (
-        <div key={name} className="GReportTable__Summary-Cell" style={getColumnLayoutStyles(columnLayoutMap[name]!)}>
-          {getCellValue(name, index, dataType)}
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/shared/reports/ui/ReportTable/components/Header/WrapperHeader.tsx

@@ -1,54 +0,0 @@
-import type { IReportColumn, ReportRowType } from '@/shared/reports/common/Visualization/types';
-import type { OrderByFields, ReportColumnLayoutMap } from '../../types';
-
-import { SummaryRow } from './SummaryRow';
-import { forwardRef } from 'react';
-import { Header } from './Header';
-
-export interface IReportHeaderSummary {
-  content?: string;
-  hide?: boolean;
-  previousContent?: string;
-  showPrevious?: boolean;
-}
-
-interface WrapperHeaderProps {
-  columns: IReportColumn[];
-  dimensions: string[];
-  row?: ReportRowType;
-  columnLayoutMap: ReportColumnLayoutMap;
-  activeColumn?: string;
-  orderBy?: OrderByFields;
-  summary?: IReportHeaderSummary;
-  minWidth?: number;
-  onChangeOrderBy?: (field: string) => void;
-}
-
-export const WrapperHeader = forwardRef<HTMLDivElement, WrapperHeaderProps>(
-  ({ columns, dimensions, row, columnLayoutMap, activeColumn, orderBy, summary, minWidth, onChangeOrderBy }, ref) => {
-    return (
-      <div className="GReportTable__StickyHeader" ref={ref}>
-        <div style={{ minWidth }}>
-          <Header
-            columns={columns}
-            columnLayoutMap={columnLayoutMap}
-            activeColumn={activeColumn}
-            orderBy={orderBy}
-            showSummary={!summary?.hide && !!dimensions.length}
-            onChangeOrderBy={onChangeOrderBy}
-          />
-
-          <SummaryRow
-            columns={columns}
-            row={row}
-            dimensions={dimensions}
-            summary={summary}
-            columnLayoutMap={columnLayoutMap}
-          />
-        </div>
-      </div>
-    );
-  },
-);
-
-WrapperHeader.displayName = 'WrapperHeader';

package/src/shared/reports/ui/ReportTable/components/Header/index.ts

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

package/src/shared/reports/ui/ReportTable/components/index.ts

@@ -1,2 +0,0 @@
-export * from './Body';
-export * from './Header';

package/src/shared/reports/ui/ReportTable/constants/index.ts

@@ -1,2 +0,0 @@
-export * from './order';
-export * from './table';

package/src/shared/reports/ui/ReportTable/constants/order.ts

@@ -1,30 +0,0 @@
-import type { OrderDirectionType, OrderTooltipType } from '../types';
-import { EDimensionKey } from '../types/dimension';
-
-export enum ETooltipCategory {
-  ALPHABETICAL = 'ALPHABETICAL',
-  NUMERIC = 'NUMERIC',
-  DATE = 'DATE',
-}
-
-export const TooltipPresets: Record<ETooltipCategory, Record<OrderDirectionType, string>> = {
-  [ETooltipCategory.ALPHABETICAL]: { ASC: 'A-Z', DESC: 'Z-A' },
-  [ETooltipCategory.NUMERIC]: { ASC: 'Lowest first', DESC: 'Highest first' },
-  [ETooltipCategory.DATE]: { ASC: 'Oldest first', DESC: 'Newest first' },
-};
-
-export const DEFAULT_TOOLTIP = TooltipPresets[ETooltipCategory.NUMERIC];
-
-export const reportOrderTooltip: OrderTooltipType = {
-  day: TooltipPresets[ETooltipCategory.DATE],
-  order_date: TooltipPresets[ETooltipCategory.DATE],
-  month: TooltipPresets[ETooltipCategory.DATE],
-  year: TooltipPresets[ETooltipCategory.DATE],
-  hour: TooltipPresets[ETooltipCategory.DATE],
-  quarter: TooltipPresets[ETooltipCategory.DATE],
-  week: TooltipPresets[ETooltipCategory.DATE],
-  [EDimensionKey.DEVICE]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-  [EDimensionKey.VISITOR]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-  [EDimensionKey.VERSION]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-  [EDimensionKey.TRAFFIC_SOURCE]: TooltipPresets[ETooltipCategory.ALPHABETICAL],
-};

package/src/shared/reports/ui/ReportTable/constants/table.ts

@@ -1,17 +0,0 @@
-import type { ReportColumnLayout } from '../types';
-
-export const DEFAULT_DIMENSION_LAYOUT: ReportColumnLayout = {
-  width: '200px',
-  minWidth: '200px',
-  align: 'start',
-  paddingRight: '28px',
-  headerPaddingRight: '0',
-};
-
-export const DEFAULT_METRIC_LAYOUT: ReportColumnLayout = {
-  minWidth: '140px',
-  align: 'end',
-  paddingRight: '28px',
-  headerPaddingRight: '0',
-};
-export const IS_TOTAL_ROW_FIELD = 'isTotalRow';

package/src/shared/reports/ui/ReportTable/context/ReportTableActionsContext.tsx

@@ -1,28 +0,0 @@
-import { createContext, useContext } from 'react';
-
-interface ReportTableActionsContextValue {
-  onViewOrderJourney?: (orderId: string, gxId?: string) => void;
-  onViewOrderDetails?: (orderId: string) => void;
-  onViewAllStoreOrders?: () => void;
-}
-
-const ReportTableActionsContext = createContext<ReportTableActionsContextValue>({});
-
-interface ReportTableActionsProviderProps extends ReportTableActionsContextValue {
-  children: React.ReactNode;
-}
-
-export const ReportTableActionsProvider = ({
-  children,
-  onViewOrderJourney,
-  onViewOrderDetails,
-  onViewAllStoreOrders,
-}: ReportTableActionsProviderProps) => {
-  return (
-    <ReportTableActionsContext.Provider value={{ onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders }}>
-      {children}
-    </ReportTableActionsContext.Provider>
-  );
-};
-
-export const useReportTableActionsContext = () => useContext(ReportTableActionsContext);

package/src/shared/reports/ui/ReportTable/helpers/format.ts

@@ -1,29 +0,0 @@
-import { dayjsTz } from '@/utils';
-
-export const formatReportTableDate = (dateString: string | number | null) => {
-  if (!dateString) return 'None';
-
-  const date = dayjsTz(dateString);
-  const now = dayjsTz();
-  const yesterday = dayjsTz().subtract(1, 'day');
-
-  const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
-  const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
-
-  if (isToday) {
-    return `Today at ${date.format('HH:mm')}`;
-  }
-
-  if (isYesterday) {
-    return `Yesterday at ${date.format('HH:mm')}`;
-  }
-
-  const daysDiff = now.diff(date, 'day');
-  const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
-
-  if (isWithinWeek) {
-    return `${date.format('dddd')} at ${date.format('HH:mm')}`;
-  }
-
-  return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
-};

package/src/shared/reports/ui/ReportTable/helpers/index.ts

@@ -1,2 +0,0 @@
-export * from './report';
-export * from './format';

package/src/shared/reports/ui/ReportTable/helpers/report.ts

@@ -1,7 +0,0 @@
-import type { OrderDirectionType } from './../types';
-
-import { EOrderDirectionType } from './../types';
-
-export const isOrderDirectionType = (direction: string): direction is OrderDirectionType => {
-  return direction === EOrderDirectionType.ASC || direction === EOrderDirectionType.DESC;
-};

package/src/shared/reports/ui/ReportTable/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from './useReportTable';
-export * from './useSyncedScroll';
-export * from './useReportTableCell';

package/src/shared/reports/ui/ReportTable/hooks/useReportTable.ts

@@ -1,172 +0,0 @@
-import {
-  getTotalColumnNameByDimensions,
-  getPreviousColumnName,
-  getPreviousTotalColumnNameByDimensions,
-} from '@/shared/reports/common';
-import { IS_TOTAL_ROW_FIELD } from '../constants';
-import { useCallback, useMemo } from 'react';
-import type { IReportTable, IReportColumn, ReportRowType } from '@/shared/reports/common/Visualization/types';
-
-interface UseReportTableProps {
-  dimensions: string[];
-  tableData: IReportTable;
-  metrics: string[];
-}
-
-export const useReportTable = ({ dimensions, tableData, metrics }: UseReportTableProps) => {
-  const columnsByName = useMemo(() => {
-    return tableData.columns.reduce(
-      (lookup, column) => {
-        lookup[column.name] = column;
-        return lookup;
-      },
-      {} as Record<string, IReportColumn>,
-    );
-  }, [tableData.columns]);
-
-  const mainColumns = useMemo(() => {
-    return [...dimensions, ...metrics]
-      .map((columnName) => columnsByName[columnName])
-      .filter(Boolean) as IReportColumn[];
-  }, [dimensions, metrics, columnsByName]);
-
-  const compareColumnsByMainColumn = useMemo(() => {
-    const compareColumns: Record<string, IReportColumn> = {};
-
-    mainColumns.forEach(({ name }) => {
-      const compareColumnName = getPreviousColumnName(name);
-      if (!columnsByName[compareColumnName]) return;
-
-      compareColumns[name] = columnsByName[compareColumnName];
-    });
-    return compareColumns;
-  }, [mainColumns, columnsByName]);
-
-  const areDimensionsEqual = useCallback(
-    (row1: ReportRowType | undefined, row2: ReportRowType | undefined, depth: number) => {
-      if (!row1 || !row2) return false;
-      return dimensions.slice(0, depth + 1).every((dim) => row1[dim] === row2[dim]);
-    },
-    [dimensions],
-  );
-
-  const getSubtotalCellValue = useCallback(
-    (data: {
-      currentRow: ReportRowType;
-      column: IReportColumn;
-      columnIndex: number;
-      dimensionIndex: number;
-      compareColumn?: IReportColumn;
-    }) => {
-      const { currentRow, column, columnIndex, dimensionIndex, compareColumn } = data;
-      const isDimension = dimensions.includes(column.name);
-
-      if (columnIndex === dimensionIndex + 1) {
-        return {
-          cellValue: 'Total',
-          compareCellValue: '',
-        };
-      }
-
-      //handle metric
-      if (!isDimension) {
-        return {
-          cellValue: currentRow[getTotalColumnNameByDimensions(dimensions, column.name, dimensionIndex)],
-          compareCellValue: compareColumn
-            ? currentRow[getPreviousTotalColumnNameByDimensions(dimensions, column.name, dimensionIndex)]
-            : '',
-        };
-      }
-
-      //handle dimension
-      const dimensionDepth = dimensions.indexOf(column.name);
-      if (dimensionDepth > dimensionIndex) {
-        return { cellValue: '', compareCellValue: '' };
-      }
-
-      return {
-        cellValue: currentRow[column.name],
-        compareCellValue: compareColumn ? currentRow[compareColumn.name] : '',
-      };
-    },
-    [dimensions],
-  );
-
-  const createSubtotalRowAtLevel = useCallback(
-    (currentRow: ReportRowType, dimensionIndex: number) => {
-      const subtotalRow: ReportRowType = {};
-
-      mainColumns.forEach((column, columnIndex) => {
-        const compareColumn = compareColumnsByMainColumn[column.name];
-        const { cellValue, compareCellValue } = getSubtotalCellValue({
-          currentRow,
-          column,
-          columnIndex,
-          dimensionIndex,
-          compareColumn,
-        });
-
-        subtotalRow[column.name] = cellValue;
-        if (compareColumn) subtotalRow[compareColumn.name] = compareCellValue;
-      });
-
-      subtotalRow[IS_TOTAL_ROW_FIELD] = 'true';
-      return subtotalRow;
-    },
-    [mainColumns, compareColumnsByMainColumn, getSubtotalCellValue],
-  );
-
-  const shouldInsertSubtotal = useCallback(
-    (data: {
-      currentRow: ReportRowType;
-      nextRow: ReportRowType | undefined;
-      previousRow: ReportRowType | undefined;
-      dimensionIndex: number;
-    }) => {
-      const { currentRow, nextRow, previousRow, dimensionIndex } = data;
-      const matchesNext = areDimensionsEqual(currentRow, nextRow, dimensionIndex);
-      const matchesPrevious = areDimensionsEqual(currentRow, previousRow, dimensionIndex);
-
-      return matchesNext && !matchesPrevious;
-    },
-    [areDimensionsEqual],
-  );
-
-  const generateSubtotalRows = useCallback(
-    (data: { currentRow: ReportRowType; nextRow?: ReportRowType; previousRow?: ReportRowType }) => {
-      const { currentRow, nextRow, previousRow } = data;
-      const subtotals: ReportRowType[] = [];
-      const subtotalLevels = dimensions.slice(0, -1);
-
-      subtotalLevels.forEach((_, dimensionIndex) => {
-        if (shouldInsertSubtotal({ currentRow, nextRow, previousRow, dimensionIndex })) {
-          const subtotalRow = createSubtotalRowAtLevel(currentRow, dimensionIndex);
-          subtotals.push(subtotalRow);
-        }
-      });
-
-      return [...subtotals, currentRow];
-    },
-    [createSubtotalRowAtLevel, dimensions, shouldInsertSubtotal],
-  );
-
-  const buildTableWithSubtotals = useCallback(() => {
-    const rows: ReportRowType[] = [];
-
-    tableData.rows.forEach((row, index) => {
-      const nextRow = tableData.rows[index + 1];
-      const previousRow = tableData.rows[index - 1];
-      rows.push(...generateSubtotalRows({ currentRow: row, nextRow, previousRow }));
-    });
-
-    return rows;
-  }, [tableData.rows, generateSubtotalRows]);
-
-  const rowsWithSubtotals = useMemo(() => buildTableWithSubtotals(), [buildTableWithSubtotals]);
-
-  return {
-    columns: mainColumns,
-    rows: rowsWithSubtotals,
-    columnsByName,
-  };
-};

package/src/shared/reports/ui/ReportTable/hooks/useReportTableCell.tsx

@@ -1,28 +0,0 @@
-import type { ReportValueType } from '@/shared/reports/common/Visualization/types';
-import { formatReportData } from '../utils';
-import { useConvertMoneyContext } from '@/providers';
-
-export const useReportData = () => {
-  const { getTextPrice } = useConvertMoneyContext();
-
-  const formatData = ({
-    value,
-    formatter,
-    name,
-  }: {
-    value: ReportValueType;
-    formatter?: string;
-    name: string;
-  }): ReportValueType => {
-    return formatReportData({
-      value,
-      formatter,
-      getTextPrice,
-      name,
-    });
-  };
-
-  return {
-    formatData,
-  };
-};

package/src/shared/reports/ui/ReportTable/hooks/useSyncedScroll.ts

@@ -1,81 +0,0 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
-import { useEffect, useRef } from 'react';
-
-interface IUseSyncedScrollProps {
-  columns: IReportColumn[];
-}
-
-const SCROLL_THRESHOLD = 2;
-export const useSyncedScroll = ({ columns }: IUseSyncedScrollProps) => {
-  const headerRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const scrollbarContainerRef = useRef<HTMLDivElement>(null);
-  const leftShadowRef = useRef<HTMLDivElement>(null);
-  const rightShadowRef = useRef<HTMLDivElement>(null);
-
-  const updateShadows = (left: number, source: HTMLElement) => {
-    if (!leftShadowRef.current || !rightShadowRef.current) return;
-    leftShadowRef.current.style.opacity = left > 0 ? '1' : '0';
-    rightShadowRef.current.style.opacity = left < source.scrollWidth - source.clientWidth - 2 ? '1' : '0';
-  };
-
-  const syncScroll = (source: HTMLElement, targets: HTMLElement[]) => {
-    const handler = () => {
-      const left = source.scrollLeft;
-      targets.forEach((t) => {
-        if (t.scrollLeft !== left) t.scrollLeft = left;
-      });
-
-      updateShadows(left, source);
-    };
-    source.addEventListener('scroll', handler);
-    return () => source.removeEventListener('scroll', handler);
-  };
-
-  const updateScrollWidth = (body: HTMLElement, scrollbarContent: HTMLElement, scrollbar: HTMLElement) => {
-    const width = body.scrollWidth;
-    const needScroll = width - body.clientWidth > SCROLL_THRESHOLD;
-
-    // update width
-    scrollbarContent.style.width = `${width}px`;
-    // show/hide fake scrollbar directly
-    if (!scrollbarContainerRef.current) return;
-    scrollbar.style.display = needScroll ? 'block' : 'none';
-    scrollbarContainerRef.current.style.borderTop = needScroll ? 'none' : '1px solid var(--p-color-border-secondary)';
-  };
-
-  const updateLayoutState = (body: HTMLElement, scrollbarContent: HTMLElement, scrollbar: HTMLElement) => {
-    updateScrollWidth(body, scrollbarContent, scrollbar);
-    updateShadows(scrollbar.scrollLeft, scrollbar);
-  };
-
-  useEffect(() => {
-    const header = headerRef.current;
-    const body = bodyRef.current;
-    const scrollbarContainer = scrollbarContainerRef.current;
-    const scrollbar = scrollbarContainer?.querySelector('.GReportTable__ScrollBar') as HTMLDivElement | null;
-    const scrollbarContent = scrollbarContainer?.querySelector(
-      '.GReportTable__ScrollBarContent',
-    ) as HTMLDivElement | null;
-
-    if (!body || !scrollbarContainer || !scrollbar || !scrollbarContent || !header) return;
-
-    const cleanups: (() => void)[] = [];
-    cleanups.push(syncScroll(scrollbar, [body, header]));
-    cleanups.push(syncScroll(body, [scrollbar, header]));
-    cleanups.push(syncScroll(header, [scrollbar, body]));
-
-    const resizeObserver = new ResizeObserver(() => updateLayoutState(body, scrollbarContent, scrollbar));
-    resizeObserver.observe(body);
-
-    updateLayoutState(body, scrollbarContent, scrollbar);
-
-    return () => {
-      cleanups.forEach((cleanup) => cleanup());
-      resizeObserver.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bodyRef.current, columns]);
-
-  return { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef };
-};

package/src/shared/reports/ui/ReportTable/index.ts

@@ -1,4 +0,0 @@
-export * from './ReportTable';
-export * from './ReportTableSkeleton';
-
-export * from './helpers';

package/src/shared/reports/ui/ReportTable/types/dimension.ts

@@ -1,8 +0,0 @@
-export enum EDimensionKey {
-  TIME = 'time',
-  EXPERIMENT_ID = 'experiment_id',
-  VERSION = 'version',
-  VISITOR = 'visitor_type',
-  TRAFFIC_SOURCE = 'traffic_source',
-  DEVICE = 'device',
-}

package/src/shared/reports/ui/ReportTable/types/index.ts

@@ -1,43 +0,0 @@
-import type { IReportTable, ReportRowType, ReportValueType } from '@/shared/reports/common/Visualization/types/report';
-
-export interface ReportColumnLayout {
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  paddingInline?: string;
-  paddingRight?: string;
-  columnFirstPaddingInline?: string;
-  columnWrapperWidth?: string;
-  align?: 'start' | 'center' | 'end';
-  headerPaddingRight?: string;
-  dimensionBoxShadow?: string;
-  borderRightWidth?: string;
-}
-
-export type ReportColumnLayoutMap = Record<string, ReportColumnLayout>;
-
-export enum EOrderDirectionType {
-  ASC = 'ASC',
-  DESC = 'DESC',
-}
-export type OrderDirectionType = EOrderDirectionType.ASC | EOrderDirectionType.DESC;
-export type OrderByType = {
-  field: string;
-  direction: OrderDirectionType;
-};
-
-export type OrderByFields = Record<string, OrderByType>;
-
-export type OrderTooltipType = Record<string, Record<OrderDirectionType, string>>;
-
-export type OrderCellProps = {
-  orderList: IReportTable<ReportValueType>;
-  isFetching: boolean;
-  onClickOrderCell: (data: { row?: ReportRowType; isPrevious?: boolean }) => void;
-};
-
-export interface CampaignsCellProps {
-  orderId: string;
-  gxId: string;
-  isHideCampaignContent: boolean;
-}

package/src/shared/reports/ui/ReportTable/types/order.ts

@@ -1,15 +0,0 @@
-export interface IOrderItem {
-  image_url: string;
-  product_title: string;
-  properties: string;
-  quantity: string;
-  title: string;
-}
-
-export interface IOrderExperiment {
-  campaign_group_name: string;
-  campaign_group_id: string;
-  campaign_name: string;
-  campaign_id: string;
-  version: string;
-}

package/src/shared/reports/ui/ReportTable/types/report-columns.ts

@@ -1,11 +0,0 @@
-export enum EReportColumnKey {
-  ORDER_ID = 'order_id',
-  GEMX_ID = 'gx_id',
-  ORDER_DATE = 'order_date',
-  TOTAL = 'total_price',
-  CAMPAIGNS = 'experiments',
-  TRAFFIC_SOURCE = 'traffic_source',
-  ITEMS = 'items',
-  DEVICE = 'device',
-  VISITOR = 'visitor_type',
-}