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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { IReportColumn } from '@/shared/reports/common/Visualization/types';
+import type { IReportColumn } from '../../../common/Visualization/types';
 interface IUseSyncedScrollProps {
     columns: IReportColumn[];
 }

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

@@ -0,0 +1,67 @@
+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,67 @@
+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/types/dimension.js

@@ -0,0 +1,11 @@
+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,11 @@
+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/index.d.ts

@@ -1,4 +1,4 @@
-import type { IReportTable, ReportRowType, ReportValueType } from '@/shared/reports/common/Visualization/types/report';
+import type { IReportTable, ReportRowType, ReportValueType } from '../../../common/Visualization/types/report';
 export interface ReportColumnLayout {
     width?: string;
     minWidth?: string;
@@ -34,5 +34,6 @@ export type OrderCellProps = {
 };
 export interface CampaignsCellProps {
     orderId: string;
+    gxId: string;
     isHideCampaignContent: boolean;
 }

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

@@ -0,0 +1,7 @@
+var EOrderDirectionType;
+(function (EOrderDirectionType) {
+    EOrderDirectionType["ASC"] = "ASC";
+    EOrderDirectionType["DESC"] = "DESC";
+})(EOrderDirectionType || (EOrderDirectionType = {}));
+
+export { EOrderDirectionType };

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

@@ -0,0 +1,7 @@
+var EOrderDirectionType;
+(function (EOrderDirectionType) {
+    EOrderDirectionType["ASC"] = "ASC";
+    EOrderDirectionType["DESC"] = "DESC";
+})(EOrderDirectionType || (EOrderDirectionType = {}));
+
+export { EOrderDirectionType };

package/dist/esm/shared/reports/ui/ReportTable/types/report-columns.d.ts

@@ -1,5 +1,6 @@
 export declare enum EReportColumnKey {
     ORDER_ID = "order_id",
+    GEMX_ID = "gx_id",
     ORDER_DATE = "order_date",
     TOTAL = "total_price",
     CAMPAIGNS = "experiments",

package/dist/esm/shared/reports/ui/ReportTable/types/report-columns.js

@@ -0,0 +1,14 @@
+var EReportColumnKey;
+(function (EReportColumnKey) {
+    EReportColumnKey["ORDER_ID"] = "order_id";
+    EReportColumnKey["GEMX_ID"] = "gx_id";
+    EReportColumnKey["ORDER_DATE"] = "order_date";
+    EReportColumnKey["TOTAL"] = "total_price";
+    EReportColumnKey["CAMPAIGNS"] = "experiments";
+    EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EReportColumnKey["ITEMS"] = "items";
+    EReportColumnKey["DEVICE"] = "device";
+    EReportColumnKey["VISITOR"] = "visitor_type";
+})(EReportColumnKey || (EReportColumnKey = {}));
+
+export { EReportColumnKey };

package/dist/esm/shared/reports/ui/ReportTable/types/report-columns.mjs

@@ -0,0 +1,14 @@
+var EReportColumnKey;
+(function (EReportColumnKey) {
+    EReportColumnKey["ORDER_ID"] = "order_id";
+    EReportColumnKey["GEMX_ID"] = "gx_id";
+    EReportColumnKey["ORDER_DATE"] = "order_date";
+    EReportColumnKey["TOTAL"] = "total_price";
+    EReportColumnKey["CAMPAIGNS"] = "experiments";
+    EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EReportColumnKey["ITEMS"] = "items";
+    EReportColumnKey["DEVICE"] = "device";
+    EReportColumnKey["VISITOR"] = "visitor_type";
+})(EReportColumnKey || (EReportColumnKey = {}));
+
+export { EReportColumnKey };

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

@@ -1,5 +1,5 @@
-import type { IGetTextPrice } from '@/core/gemxql';
-import { type ReportValueType } from '@/shared/reports/common/Visualization/types';
+import type { IGetTextPrice } from '../../../../../core/gemxql';
+import { type ReportValueType } from '../../../common/Visualization/types';
 export declare const formatReportData: ({ value, formatter, getTextPrice, name, }: {
     value: ReportValueType;
     formatter?: string;

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

@@ -0,0 +1,96 @@
+import '../types/index.js';
+import { formatReportTableDate } from '../helpers/format.js';
+import { numberWithCommas } from '../../../../../utils/number.js';
+import { calcPercentageString } from '../../../../../utils/percentage.js';
+import '../../../../../utils/dayjs.js';
+import { getFormattedByInterval, AnalyticInterval, getTimeDurationLabel } from '../../../../../utils/analytics.js';
+import '../../../../../types/template.js';
+import { NONE_VALUE } from '../../../../../core/gemxql/constants/analytic-data.js';
+import '../../../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../../../core/gemxql/builder/configs/keywords.js';
+import '../../../../../core/gemxql/builder/filters/build-extra-conditions.js';
+import '../../../../../core/gemxql/builder/filters/build-filter-conditions.js';
+import '../../../../../core/gemxql/types/analytic-data.js';
+import '../../../../../core/gemxql/types/analytic-source.js';
+import '../../../../../core/gemxql/types/extra-condition.js';
+import '../../../../../core/gemxql/types/field-filters.js';
+import '../../../../../core/gemxql/types/field-operators.js';
+import '../../../../../core/gemxql/types/group-with-clause.js';
+import '../../../../../core/gemxql/types/order-by.js';
+import '../../../../../core/gemxql/types/page-fields.js';
+import '../../../../../core/gemxql/types/row-reader-mode.js';
+import '../../../../../core/gemxql/types/time-dimension.js';
+import '../../../../../core/gemxql/api/useCustomGemXQlQuery.js';
+import '../../../../../core/gemxql/api/useGemxQlNamedQuery.js';
+import '../../../../../providers/ConvertMoneyProvider.js';
+import '../../../../components/GPagination/GPagination.js';
+import 'react';
+import { EReportColumnKey } from '../types/report-columns.js';
+import { EReportDataType } from '../../../common/Visualization/types/report.js';
+import '../../../common/Visualization/types/chart.js';
+import '../../../common/Visualization/types/report-metric.js';
+
+const formatReportData = ({ value, formatter, getTextPrice, name, }) => {
+    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
+    if (dataTypeIsObjectOrArray)
+        return value;
+    switch (formatter) {
+        case EReportDataType.INTEGER: {
+            return numberWithCommas((value ?? 0).toString());
+        }
+        case EReportDataType.CURRENCY: {
+            return getTextPrice(value, false);
+        }
+        case EReportDataType.DATE: {
+            return formatReportTableDate(value);
+        }
+        case EReportDataType.PERCENT: {
+            if (typeof value !== 'number')
+                return calcPercentageString(0, 1, 2) ?? '';
+            return calcPercentageString(value / 100, 1, 2) ?? '';
+        }
+        case EReportDataType.DURATION: {
+            return getTimeDurationLabel(Number(value));
+        }
+        case EReportDataType.STRING: {
+            const fallbackValue = name === EReportColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
+            return value ?? fallbackValue;
+        }
+        case EReportDataType.DAY: {
+            return getFormattedByInterval(value, AnalyticInterval.DAY, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.HOUR: {
+            return getFormattedByInterval(value, AnalyticInterval.HOUR, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.MONTH: {
+            return getFormattedByInterval(value, AnalyticInterval.MONTH, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.YEAR: {
+            return getFormattedByInterval(value, AnalyticInterval.YEAR);
+        }
+        case EReportDataType.WEEK: {
+            return getFormattedByInterval(value, AnalyticInterval.WEEK, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.QUARTER: {
+            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
+                isExpandDetail: true,
+            });
+        }
+        case EReportDataType.OBJECT:
+        case EReportDataType.ARRAY: {
+            return value;
+        }
+        default:
+            return `${value}`;
+    }
+};
+
+export { formatReportData };