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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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