@levi-gemcommerce/analytics 0.0.0-test.1

package/dist/esm/shared/reports/ui/ReportTable/constants/table.js

@@ -0,0 +1,17 @@
+"use client"
+const DEFAULT_DIMENSION_LAYOUT = {
+    width: '200px',
+    minWidth: '200px',
+    align: 'start',
+    paddingRight: '28px',
+    headerPaddingRight: '0',
+};
+const DEFAULT_METRIC_LAYOUT = {
+    minWidth: '140px',
+    align: 'end',
+    paddingRight: '28px',
+    headerPaddingRight: '0',
+};
+const IS_TOTAL_ROW_FIELD = 'isTotalRow';
+
+export { DEFAULT_DIMENSION_LAYOUT, DEFAULT_METRIC_LAYOUT, IS_TOTAL_ROW_FIELD };

package/dist/esm/shared/reports/ui/ReportTable/constants/table.mjs

@@ -0,0 +1,17 @@
+"use client"
+const DEFAULT_DIMENSION_LAYOUT = {
+    width: '200px',
+    minWidth: '200px',
+    align: 'start',
+    paddingRight: '28px',
+    headerPaddingRight: '0',
+};
+const DEFAULT_METRIC_LAYOUT = {
+    minWidth: '140px',
+    align: 'end',
+    paddingRight: '28px',
+    headerPaddingRight: '0',
+};
+const IS_TOTAL_ROW_FIELD = 'isTotalRow';
+
+export { DEFAULT_DIMENSION_LAYOUT, DEFAULT_METRIC_LAYOUT, IS_TOTAL_ROW_FIELD };

package/dist/esm/shared/reports/ui/ReportTable/context/ReportTableActionsContext.d.ts

@@ -0,0 +1,11 @@
+interface ReportTableActionsContextValue {
+    onViewOrderJourney?: (orderId: string) => void;
+    onViewOrderDetails?: (orderId: string) => void;
+    onViewAllStoreOrders?: () => void;
+}
+interface ReportTableActionsProviderProps extends ReportTableActionsContextValue {
+    children: React.ReactNode;
+}
+export declare const ReportTableActionsProvider: ({ children, onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders, }: ReportTableActionsProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useReportTableActionsContext: () => ReportTableActionsContextValue;
+export {};

package/dist/esm/shared/reports/ui/ReportTable/context/ReportTableActionsContext.js

@@ -0,0 +1,11 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const ReportTableActionsContext = createContext({});
+const ReportTableActionsProvider = ({ children, onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders, }) => {
+    return (jsx(ReportTableActionsContext.Provider, { value: { onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders }, children: children }));
+};
+const useReportTableActionsContext = () => useContext(ReportTableActionsContext);
+
+export { ReportTableActionsProvider, useReportTableActionsContext };

package/dist/esm/shared/reports/ui/ReportTable/context/ReportTableActionsContext.mjs

@@ -0,0 +1,11 @@
+"use client"
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const ReportTableActionsContext = createContext({});
+const ReportTableActionsProvider = ({ children, onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders, }) => {
+    return (jsx(ReportTableActionsContext.Provider, { value: { onViewOrderJourney, onViewOrderDetails, onViewAllStoreOrders }, children: children }));
+};
+const useReportTableActionsContext = () => useContext(ReportTableActionsContext);
+
+export { ReportTableActionsProvider, useReportTableActionsContext };

package/dist/esm/shared/reports/ui/ReportTable/helpers/format.d.ts

@@ -0,0 +1 @@
+export declare const formatReportTableDate: (dateString: string | number | null) => string;

package/dist/esm/shared/reports/ui/ReportTable/helpers/format.js

@@ -0,0 +1,28 @@
+"use client"
+import { dayjsTz } from '../../../../../utils/dayjs.js';
+import '../../../../../utils/analytics.js';
+import '../../../../../types/template.js';
+
+const formatReportTableDate = (dateString) => {
+    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')}`;
+};
+
+export { formatReportTableDate };

package/dist/esm/shared/reports/ui/ReportTable/helpers/format.mjs

@@ -0,0 +1,28 @@
+"use client"
+import { dayjsTz } from '../../../../../utils/dayjs.mjs';
+import '../../../../../utils/analytics.mjs';
+import '../../../../../types/template.mjs';
+
+const formatReportTableDate = (dateString) => {
+    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')}`;
+};
+
+export { formatReportTableDate };

package/dist/esm/shared/reports/ui/ReportTable/helpers/index.d.ts

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

package/dist/esm/shared/reports/ui/ReportTable/helpers/report.d.ts

@@ -0,0 +1,2 @@
+import type { OrderDirectionType } from './../types';
+export declare const isOrderDirectionType: (direction: string) => direction is OrderDirectionType;

package/dist/esm/shared/reports/ui/ReportTable/hooks/index.d.ts

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

package/dist/esm/shared/reports/ui/ReportTable/hooks/useReportTable.d.ts

@@ -0,0 +1,12 @@
+import type { IReportTable, IReportColumn, ReportRowType } from '../../../common/Visualization/types';
+interface UseReportTableProps {
+    dimensions: string[];
+    tableData: IReportTable;
+    metrics: string[];
+}
+export declare const useReportTable: ({ dimensions, tableData, metrics }: UseReportTableProps) => {
+    columns: IReportColumn[];
+    rows: ReportRowType[];
+    columnsByName: Record<string, IReportColumn>;
+};
+export {};

package/dist/esm/shared/reports/ui/ReportTable/hooks/useReportTable.js

@@ -0,0 +1,116 @@
+"use client"
+import '../../../common/Visualization/constants/version.js';
+import { getPreviousColumnName, getTotalColumnNameByDimensions, getPreviousTotalColumnNameByDimensions } from '../../../common/Visualization/utils/visualization.js';
+import '../constants/order.js';
+import { IS_TOTAL_ROW_FIELD } from '../constants/table.js';
+import { useMemo, useCallback } from 'react';
+
+const useReportTable = ({ dimensions, tableData, metrics }) => {
+    const columnsByName = useMemo(() => {
+        return tableData.columns.reduce((lookup, column) => {
+            lookup[column.name] = column;
+            return lookup;
+        }, {});
+    }, [tableData.columns]);
+    const mainColumns = useMemo(() => {
+        return [...dimensions, ...metrics]
+            .map((columnName) => columnsByName[columnName])
+            .filter(Boolean);
+    }, [dimensions, metrics, columnsByName]);
+    const compareColumnsByMainColumn = useMemo(() => {
+        const compareColumns = {};
+        mainColumns.forEach(({ name }) => {
+            const compareColumnName = getPreviousColumnName(name);
+            if (!columnsByName[compareColumnName])
+                return;
+            compareColumns[name] = columnsByName[compareColumnName];
+        });
+        return compareColumns;
+    }, [mainColumns, columnsByName]);
+    const areDimensionsEqual = useCallback((row1, row2, depth) => {
+        if (!row1 || !row2)
+            return false;
+        return dimensions.slice(0, depth + 1).every((dim) => row1[dim] === row2[dim]);
+    }, [dimensions]);
+    const getSubtotalCellValue = useCallback((data) => {
+        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, dimensionIndex) => {
+        const subtotalRow = {};
+        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) => {
+        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) => {
+        const { currentRow, nextRow, previousRow } = data;
+        const subtotals = [];
+        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 = [];
+        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,
+    };
+};
+
+export { useReportTable };

package/dist/esm/shared/reports/ui/ReportTable/hooks/useReportTable.mjs

@@ -0,0 +1,116 @@
+"use client"
+import '../../../common/Visualization/constants/version.mjs';
+import { getPreviousColumnName, getTotalColumnNameByDimensions, getPreviousTotalColumnNameByDimensions } from '../../../common/Visualization/utils/visualization.mjs';
+import '../constants/order.mjs';
+import { IS_TOTAL_ROW_FIELD } from '../constants/table.mjs';
+import { useMemo, useCallback } from 'react';
+
+const useReportTable = ({ dimensions, tableData, metrics }) => {
+    const columnsByName = useMemo(() => {
+        return tableData.columns.reduce((lookup, column) => {
+            lookup[column.name] = column;
+            return lookup;
+        }, {});
+    }, [tableData.columns]);
+    const mainColumns = useMemo(() => {
+        return [...dimensions, ...metrics]
+            .map((columnName) => columnsByName[columnName])
+            .filter(Boolean);
+    }, [dimensions, metrics, columnsByName]);
+    const compareColumnsByMainColumn = useMemo(() => {
+        const compareColumns = {};
+        mainColumns.forEach(({ name }) => {
+            const compareColumnName = getPreviousColumnName(name);
+            if (!columnsByName[compareColumnName])
+                return;
+            compareColumns[name] = columnsByName[compareColumnName];
+        });
+        return compareColumns;
+    }, [mainColumns, columnsByName]);
+    const areDimensionsEqual = useCallback((row1, row2, depth) => {
+        if (!row1 || !row2)
+            return false;
+        return dimensions.slice(0, depth + 1).every((dim) => row1[dim] === row2[dim]);
+    }, [dimensions]);
+    const getSubtotalCellValue = useCallback((data) => {
+        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, dimensionIndex) => {
+        const subtotalRow = {};
+        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) => {
+        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) => {
+        const { currentRow, nextRow, previousRow } = data;
+        const subtotals = [];
+        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 = [];
+        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,
+    };
+};
+
+export { useReportTable };

package/dist/esm/shared/reports/ui/ReportTable/hooks/useReportTableCell.d.ts

@@ -0,0 +1,8 @@
+import type { ReportValueType } from '../../../common/Visualization/types';
+export declare const useReportData: () => {
+    formatData: ({ value, formatter, name, }: {
+        value: ReportValueType;
+        formatter?: string;
+        name: string;
+    }) => ReportValueType;
+};

package/dist/esm/shared/reports/ui/ReportTable/hooks/useReportTableCell.js

@@ -0,0 +1,22 @@
+"use client"
+import { formatReportData } from '../utils/format.js';
+import { useConvertMoneyContext } from '../../../../../providers/ConvertMoneyProvider.js';
+import '../../../../../providers/MetricChartProvider.js';
+import '../../../../../providers/TimezoneProvider.js';
+
+const useReportData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
+    const formatData = ({ value, formatter, name, }) => {
+        return formatReportData({
+            value,
+            formatter,
+            getTextPrice,
+            name,
+        });
+    };
+    return {
+        formatData,
+    };
+};
+
+export { useReportData };

package/dist/esm/shared/reports/ui/ReportTable/hooks/useReportTableCell.mjs

@@ -0,0 +1,22 @@
+"use client"
+import { formatReportData } from '../utils/format.mjs';
+import { useConvertMoneyContext } from '../../../../../providers/ConvertMoneyProvider.mjs';
+import '../../../../../providers/MetricChartProvider.mjs';
+import '../../../../../providers/TimezoneProvider.mjs';
+
+const useReportData = () => {
+    const { getTextPrice } = useConvertMoneyContext();
+    const formatData = ({ value, formatter, name, }) => {
+        return formatReportData({
+            value,
+            formatter,
+            getTextPrice,
+            name,
+        });
+    };
+    return {
+        formatData,
+    };
+};
+
+export { useReportData };

package/dist/esm/shared/reports/ui/ReportTable/hooks/useSyncedScroll.d.ts

@@ -0,0 +1,12 @@
+import type { IReportColumn } from '../../../common/Visualization/types';
+interface IUseSyncedScrollProps {
+    columns: IReportColumn[];
+}
+export declare const useSyncedScroll: ({ columns }: IUseSyncedScrollProps) => {
+    headerRef: import("react").RefObject<HTMLDivElement>;
+    bodyRef: import("react").RefObject<HTMLDivElement>;
+    scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+    leftShadowRef: import("react").RefObject<HTMLDivElement>;
+    rightShadowRef: import("react").RefObject<HTMLDivElement>;
+};
+export {};

package/dist/esm/shared/reports/ui/ReportTable/hooks/useSyncedScroll.js

@@ -0,0 +1,68 @@
+"use client"
+import { useRef, useEffect } from 'react';
+
+const SCROLL_THRESHOLD = 2;
+const useSyncedScroll = ({ columns }) => {
+    const headerRef = useRef(null);
+    const bodyRef = useRef(null);
+    const scrollbarContainerRef = useRef(null);
+    const leftShadowRef = useRef(null);
+    const rightShadowRef = useRef(null);
+    const updateShadows = (left, source) => {
+        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, targets) => {
+        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, scrollbarContent, scrollbar) => {
+        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, scrollbarContent, scrollbar) => {
+        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');
+        const scrollbarContent = scrollbarContainer?.querySelector('.GReportTable__ScrollBarContent');
+        if (!body || !scrollbarContainer || !scrollbar || !scrollbarContent || !header)
+            return;
+        const cleanups = [];
+        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 };
+};
+
+export { useSyncedScroll };

package/dist/esm/shared/reports/ui/ReportTable/hooks/useSyncedScroll.mjs

@@ -0,0 +1,68 @@
+"use client"
+import { useRef, useEffect } from 'react';
+
+const SCROLL_THRESHOLD = 2;
+const useSyncedScroll = ({ columns }) => {
+    const headerRef = useRef(null);
+    const bodyRef = useRef(null);
+    const scrollbarContainerRef = useRef(null);
+    const leftShadowRef = useRef(null);
+    const rightShadowRef = useRef(null);
+    const updateShadows = (left, source) => {
+        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, targets) => {
+        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, scrollbarContent, scrollbar) => {
+        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, scrollbarContent, scrollbar) => {
+        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');
+        const scrollbarContent = scrollbarContainer?.querySelector('.GReportTable__ScrollBarContent');
+        if (!body || !scrollbarContainer || !scrollbar || !scrollbarContent || !header)
+            return;
+        const cleanups = [];
+        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 };
+};
+
+export { useSyncedScroll };

package/dist/esm/shared/reports/ui/ReportTable/index.d.ts

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

package/dist/esm/shared/reports/ui/ReportTable/types/dimension.d.ts

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

package/dist/esm/shared/reports/ui/ReportTable/types/dimension.js

@@ -0,0 +1,12 @@
+"use client"
+var EDimensionKey;
+(function (EDimensionKey) {
+    EDimensionKey["TIME"] = "time";
+    EDimensionKey["EXPERIMENT_ID"] = "experiment_id";
+    EDimensionKey["VERSION"] = "version";
+    EDimensionKey["VISITOR"] = "visitor_type";
+    EDimensionKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EDimensionKey["DEVICE"] = "device";
+})(EDimensionKey || (EDimensionKey = {}));
+
+export { EDimensionKey };

package/dist/esm/shared/reports/ui/ReportTable/types/dimension.mjs

@@ -0,0 +1,12 @@
+"use client"
+var EDimensionKey;
+(function (EDimensionKey) {
+    EDimensionKey["TIME"] = "time";
+    EDimensionKey["EXPERIMENT_ID"] = "experiment_id";
+    EDimensionKey["VERSION"] = "version";
+    EDimensionKey["VISITOR"] = "visitor_type";
+    EDimensionKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EDimensionKey["DEVICE"] = "device";
+})(EDimensionKey || (EDimensionKey = {}));
+
+export { EDimensionKey };