@quillsql/react 2.12.37 → 2.12.39

package/dist/esm/internals/ReportBuilder/PivotModal.js

@@ -0,0 +1,1210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from 'react';
+import { ClientContext, CustomFieldContext } from '../../Context';
+import { getDataFromCloud } from '../../utils/dataFetcher';
+import { PivotList, PivotCard } from './PivotList';
+import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, endOfDay, isWithinInterval, subMilliseconds, } from 'date-fns';
+import { valueFormatter } from '../../utils/valueFormatter';
+import { numberFormatOptions, dateFormatOptions } from '../../ChartBuilder';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+import { QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
+import { isNumericColumnType } from '../../components/ReportBuilder/ast';
+import { QuillCard } from '../../components/QuillCard';
+import { cleanPivot, getPossiblePivotFieldOptions, isValidPivot, } from '../../utils/pivotProcessing';
+import { hashCode } from '../../utils/crypto';
+import { getCountsByColumns, getDateRangeByColumns, getUniqueValuesByColumns, } from '../../utils/tableProcessing';
+import { generatePivotWithSQL } from '../../utils/pivotConstructor';
+import { getDateBucketFromRange } from '../../utils/dates';
+export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = QuillErrorMessageComponent, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, CardComponent = QuillCard, HeaderComponent, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, showTrigger = true, pivotCountRequest = 6, query, initialUniqueValues, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [selectedPivotType, setSelectedPivotType] = useState('recommended');
+    const [errors, setErrors] = useState([]);
+    const [client] = useContext(ClientContext);
+    const [customFields] = useContext(CustomFieldContext);
+    const rowFieldRef = useRef(null);
+    const colFieldRef = useRef(null);
+    const [pivotCardWidth, setPivotCardWidth] = useState(420);
+    const [samplePivotTable, setSamplePivotTable] = useState(null);
+    const [allowedColumnFields, setAllowedColumnFields] = useState([]);
+    const [allowedRowFields, setAllowedRowFields] = useState([]);
+    const [allowedValueFields, setAllowedValueFields] = useState([]);
+    const [uniqueValues, setUniqueValues] = useState(initialUniqueValues);
+    const [dateRanges, setDateRanges] = useState({});
+    const getDistinctValues = async () => {
+        if (columns) {
+            const stringColumns = columns.filter((column) => {
+                return column.jsType === 'string';
+            });
+            if (stringColumns.length === 0) {
+                const possibleColumns = getPossiblePivotFieldOptions(columns, {});
+                setAllowedRowFields(possibleColumns.rowFields);
+                setAllowedColumnFields(possibleColumns.columnFields);
+                setAllowedValueFields(possibleColumns.valueFields);
+                return { possibleColumns, uniqueValues: {} };
+            }
+            const smallStringColumns = await getCountsByColumns(stringColumns, query || '', client, customFields);
+            const newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, query || '', data.rows || [], client, customFields);
+            if (!uniqueValues ||
+                hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                const possibleColumns = getPossiblePivotFieldOptions(columns, newUniqueValues || {});
+                setAllowedRowFields(possibleColumns.rowFields);
+                setAllowedColumnFields(possibleColumns.columnFields);
+                setAllowedValueFields(possibleColumns.valueFields);
+                setUniqueValues(newUniqueValues);
+                return { possibleColumns, uniqueValues: newUniqueValues };
+            }
+        }
+        return {
+            possibleColumns: { rowFields: [], columnFields: [], valueFields: [] },
+            uniqueValues: {},
+        };
+    };
+    const getAllDateRangesByColumn = async () => {
+        // Don't reprocess dateRanges if they are already gathered
+        if (columns) {
+            const dateColumns = columns.filter((column) => {
+                return column.jsType === 'date';
+            });
+            if (dateColumns.length === 0) {
+                return [];
+            }
+            const dateRangeByColumn = await getDateRangeByColumns(dateColumns, query || '', client, customFields);
+            setDateRanges(dateRangeByColumn || {});
+        }
+    };
+    useEffect(() => {
+        const calculatePivotCardSize = () => {
+            // The pivot card should be the same width as the row of inputs
+            // below it (two selects, plus the gap between them).
+            if (rowFieldRef.current && colFieldRef.current) {
+                const rowFieldSize = rowFieldRef.current?.getBoundingClientRect();
+                const colFieldSize = colFieldRef.current?.getBoundingClientRect();
+                const selectWidth = rowFieldSize.width;
+                const gap = colFieldSize.left - rowFieldSize.right;
+                const width = 2 * selectWidth + gap;
+                setPivotCardWidth(width);
+            }
+        };
+        if (rowFieldRef.current && colFieldRef.current) {
+            setTimeout(() => {
+                calculatePivotCardSize();
+            }, 0);
+        }
+        else {
+            setTimeout(() => {
+                calculatePivotCardSize();
+            }, 500);
+        }
+    }, [showUpdatePivot, isOpen]);
+    useEffect(() => {
+        const fetchPivotData = async () => {
+            if (pivotRowField && data && columns) {
+                const pivot = {
+                    rowField: pivotRowField || '',
+                    rowFieldType: columnsToShow[pivotRowField || ''],
+                    columnField: pivotColumnField,
+                    columnFieldType: columnsToShow[pivotColumnField || ''],
+                    valueField: pivotValueField || '',
+                    aggregationType: pivotAggregation || '',
+                };
+                const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, undefined, report, client, uniqueValues);
+                setSamplePivotTable({ pivot: pivot, rows, columns });
+            }
+            if ((pivotRowField && data && columns) || initialSelectedPivotTable) {
+                getDistinctValues();
+            }
+            if (initialUniqueValues) {
+                const possibleColumns = getPossiblePivotFieldOptions(columns, initialUniqueValues);
+                setAllowedRowFields(possibleColumns.rowFields);
+                setAllowedColumnFields(possibleColumns.columnFields);
+                setAllowedValueFields(possibleColumns.valueFields);
+                setUniqueValues(initialUniqueValues);
+            }
+            if (pivotRowField && data && columns) {
+                const pivot = {
+                    rowField: pivotRowField || '',
+                    rowFieldType: columnsToShow[pivotRowField || ''],
+                    columnField: pivotColumnField,
+                    columnFieldType: columnsToShow[pivotColumnField || ''],
+                    valueField: pivotValueField || '',
+                    aggregationType: pivotAggregation || '',
+                };
+                if (initialSelectedPivotTable) {
+                    setSamplePivotTable({
+                        pivot: pivot,
+                        rows: initialSelectedPivotTable.rows,
+                        columns: initialSelectedPivotTable.columns,
+                    });
+                }
+                else {
+                    const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, undefined, report, client, uniqueValues);
+                    setSamplePivotTable({ pivot: pivot, rows, columns });
+                }
+            }
+        };
+        fetchPivotData();
+    }, []);
+    useEffect(() => {
+        if (pivotRowField && data && columns) {
+            getDistinctValues();
+            getAllDateRangesByColumn();
+        }
+        else if (initialSelectedPivotTable) {
+            getDistinctValues();
+        }
+    }, [initialSelectedPivotTable, columns, data, pivotRowField]);
+    useEffect(() => {
+        if (!initialUniqueValues) {
+            return;
+        }
+        const possibleColumns = getPossiblePivotFieldOptions(columns, initialUniqueValues);
+        setAllowedRowFields(possibleColumns.rowFields);
+        setAllowedColumnFields(possibleColumns.columnFields);
+        setAllowedValueFields(possibleColumns.valueFields);
+        setUniqueValues(initialUniqueValues);
+    }, [initialUniqueValues, columns]);
+    const columnsToShow = useMemo(() => {
+        return (columns || []).reduce((map, col) => {
+            // only use columns shown in the report builder's table
+            // also filter out id
+            if (col.field !== 'id') {
+                map[col.field] = col.format;
+            }
+            return map;
+        }, {});
+    }, [columns]);
+    const [selectedPivotTable, setSelectedPivotTable] = useState(null);
+    useEffect(() => {
+        const fetchPivotTables = async () => {
+            if (selectedPivotIndex === -1) {
+                return null;
+            }
+            const pivot = createdPivots[selectedPivotIndex];
+            const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, undefined, report, client, uniqueValues);
+            setSelectedPivotTable({
+                pivot: pivot,
+                rows: rows,
+                columns: columns,
+            });
+        };
+        fetchPivotTables();
+    }, [selectedPivotIndex, data, dateRange, createdPivots]);
+    const onSelectRecommendedPivot = (pivot, index) => {
+        if (showEditOnPivotClick) {
+            onEditPivot(pivot, index, 'recommended');
+            return;
+        }
+        if (index === selectedPivotIndex && selectedPivotType === 'recommended') {
+            removePivot();
+        }
+        else {
+            selectPivot(pivot);
+            setSelectedPivotType('recommended');
+        }
+        setIsOpen(false);
+    };
+    const onSelectCreatedPivot = (pivot) => {
+        selectPivot(pivot, pivot.columnField ? uniqueValues : undefined, dateRanges[pivot.rowField]?.dateRange, samplePivotTable);
+        setSelectedPivotType('created');
+        setIsOpen(false);
+        setPopUpTitle('Add pivot');
+    };
+    const onEditPivot = async (pivot, index, pivotType) => {
+        setIsLoading(false);
+        setPivotRowField(pivot.rowField);
+        setPivotColumnField(pivot.columnField);
+        setPivotValueField(pivot.valueField);
+        setPivotAggregation(pivot.aggregationType);
+        setShowUpdatePivot(true);
+        if (pivotType === 'recommended' &&
+            index !== null &&
+            recommendedPivotTables[index]) {
+            setSamplePivotTable(recommendedPivotTables[index]);
+            return;
+        }
+        if (isValidPivot(pivot)) {
+            let dateBucket = undefined;
+            if (pivotRowField && dateRanges[pivotRowField]) {
+                dateBucket = getDateBucketFromRange(dateRanges[pivotRowField].dateRange);
+            }
+            const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, dateBucket, report, client, uniqueValues);
+            setSamplePivotTable({ pivot, rows, columns });
+            return;
+        }
+        setSamplePivotTable(null);
+    };
+    const onEditRecommendedPivot = (pivot) => {
+        onEditPivot(pivot, null);
+    };
+    const refreshPivots = useCallback(async () => {
+        if (isLoading ||
+            Object.keys(columnsToShow).length === 0 ||
+            !pivotRecommendationsEnabled) {
+            return;
+        }
+        setIsLoading(true);
+        let tempUniqueValues = uniqueValues;
+        let possibleColumns = {
+            rowFields: allowedRowFields,
+            columnFields: allowedColumnFields,
+            valueFields: allowedValueFields,
+        };
+        if ((allowedRowFields.length === 0 &&
+            allowedColumnFields.length === 0 &&
+            allowedValueFields.length === 0) ||
+            !uniqueValues) {
+            const distinctValues = await getDistinctValues();
+            possibleColumns = distinctValues.possibleColumns;
+            tempUniqueValues = distinctValues.uniqueValues;
+        }
+        const cloudBody = {
+            pivotCountRequest,
+            allowedRowFields: possibleColumns?.rowFields || [],
+            allowedColumnFields: possibleColumns?.columnFields || [],
+            allowedValueFields: possibleColumns?.valueFields || [],
+            tableSchema: Object.keys(columnsToShow).reduce(function (map, col) {
+                // stop ai from seeing date fields. this is meant to stop the ai
+                // pivot tables from extracting month and year from the date
+                const fieldType = isDateField(columnsToShow[col])
+                    ? 'string'
+                    : columnsToShow[col];
+                map[col] = fieldType;
+                return map;
+            }, {}),
+        };
+        try {
+            const resp = await getDataFromCloud(client, 'pivotai', cloudBody);
+            const recommendedPivots = resp?.data?.pivotTables.map((pivot) => cleanPivot(pivot, possibleColumns)) || [];
+            const cleanedPivots = recommendedPivots.map((pivot) => {
+                if (pivot.columnField && columnsToShow[pivot.columnField] === 'date') {
+                    const columnField = pivot.columnField;
+                    pivot.columnField = pivot.rowField;
+                    pivot.rowField = columnField;
+                }
+                return {
+                    ...pivot,
+                    rowFieldType: columnsToShow[pivot.rowField],
+                    columnFieldType: pivot.columnField
+                        ? columnsToShow[pivot.columnField]
+                        : undefined,
+                    title: generatePivotTitle(pivot),
+                };
+            });
+            setRecommendedPivots(cleanedPivots);
+            const pts = await Promise.all(cleanedPivots.map(async (p) => {
+                const { rows, columns } = await generatePivotTable(p, data, dateRange, false, 6, undefined, undefined, report, client, tempUniqueValues);
+                return { pivot: p, rows, columns };
+            }));
+            setRecommendedPivotTables(pts);
+            setSelectedPivotIndex(-1);
+        }
+        catch (e) {
+            console.error('Failed parsing pivotai response', e);
+        }
+        setIsLoading(false);
+    }, [
+        selectedTable,
+        data,
+        columnsToShow,
+        isLoading,
+        showTrigger,
+        allowedColumnFields,
+        allowedRowFields,
+        allowedValueFields,
+        columns,
+    ]);
+    const pivotFieldChange = async (field, value) => {
+        setErrors([]);
+        setIsLoading(true);
+        const pivot = {
+            rowField: pivotRowField,
+            rowFieldType: columnsToShow[pivotRowField],
+            columnField: pivotColumnField,
+            valueField: pivotValueField,
+            aggregationType: pivotAggregation,
+        };
+        // @ts-ignore
+        pivot[field] = value;
+        pivot.title = generatePivotTitle(pivot);
+        if (field === 'rowField') {
+            pivot.rowFieldType = columnsToShow[value];
+        }
+        else if (field === 'columnField') {
+            pivot.columnFieldType = columnsToShow[value];
+        }
+        if (!isValidPivot(pivot)) {
+            setIsLoading(false);
+            setSamplePivotTable(null);
+            return;
+        }
+        let dateBucket = undefined;
+        if (pivotRowField && dateRanges[pivotRowField]) {
+            dateBucket = getDateBucketFromRange(dateRanges[pivotRowField].dateRange);
+        }
+        setTimeout(async () => {
+            const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, dateBucket, report, client, uniqueValues);
+            setSamplePivotTable({ pivot, rows, columns });
+            setIsLoading(false);
+        }, 500);
+    };
+    const [recommendedPivotTables, setRecommendedPivotTables] = useState([]);
+    // useEffect(() => {
+    //   const fetchPivotTables = async () => {
+    //     const pts = await Promise.all(
+    //       recommendedPivots.map(async (p: Pivot) => {
+    //         const { rows, columns } = await generatePivotTable(
+    //           p,
+    //           data,
+    //           dateRange,
+    //           false,
+    //           6,
+    //           undefined,
+    //           undefined,
+    //           report,
+    //           client,
+    //           uniqueValues,
+    //         );
+    //         return { pivot: p, rows, columns };
+    //       }),
+    //     );
+    //     setRecommendedPivotTables(pts);
+    //   };
+    //   fetchPivotTables();
+    // }, [recommendedPivots, dateRange]);
+    const [createdPivotTables, setCreatedPivotTables] = useState([]);
+    useEffect(() => {
+        const fetchPivotTables = async () => {
+            const pts = await Promise.all(createdPivots.map(async (p) => {
+                const { rows, columns } = await generatePivotTable(p, data, dateRange, false, 6, undefined, undefined, report, client, uniqueValues);
+                return { pivot: p, rows, columns };
+            }));
+            setCreatedPivotTables(pts);
+        };
+        fetchPivotTables();
+    }, [createdPivots, dateRange]);
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
+                position: 'relative',
+                display: 'inline-block',
+                textAlign: 'left',
+            }, children: [_jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }, children: selectedPivotIndex !== -1 && (_jsx("span", { style: {
+                            height: 10,
+                            width: 10,
+                            backgroundColor: theme.primaryButtonColor,
+                            borderRadius: '50%',
+                            position: 'absolute',
+                            top: -2,
+                            right: -2,
+                        } })) }), showTrigger && (_jsx(SecondaryButtonComponent, { disabled: disabled, onClick: () => {
+                        if (columns.length === 0) {
+                            setIsOpen(false);
+                        }
+                        // table is not loaded yet, so pivot button is not clickable
+                        if (Object.keys(columnsToShow).length === 0) {
+                            return;
+                        }
+                        if (!isOpen && recommendedPivots.length === 0) {
+                            refreshPivots();
+                        }
+                        setIsOpen(!isOpen);
+                        setShowUpdatePivot(false);
+                    }, label: triggerButtonText })), _jsx("div", { style: {
+                        position: 'relative',
+                        ...(isOpen && showTrigger && { top: 12 }),
+                    }, children: _jsx(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
+                            if (!isOpen) {
+                                setShowUpdatePivot(false);
+                                setPopUpTitle('Add pivot');
+                            }
+                            setIsOpen(isOpen);
+                        }, popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
+                            ? popUpTitle
+                            : 'Recommended pivots', popoverChildren: _jsx("div", { style: {
+                                paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
+                                position: 'relative',
+                            }, children: showUpdatePivot || !pivotRecommendationsEnabled ? (_jsxs("div", { style: {
+                                    backgroundColor: 'rgb(255, 255, 255)',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 20,
+                                }, children: [isLoading && _jsx(LoadingComponent, {}), samplePivotTable && !isLoading && (_jsx("div", { style: {
+                                            width: pivotCardWidth,
+                                            minHeight: 160,
+                                        }, children: _jsx(PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, onSelectPivot: () => { }, onClose: () => {
+                                                setPivotAggregation(null);
+                                                setPivotRowField(null);
+                                                setPivotValueField(null);
+                                                setPivotColumnField(null);
+                                                setSamplePivotTable(null);
+                                            } }) })), _jsxs(PivotColumnContainer, { children: [_jsxs(PivotRowContainer, { children: [_jsx("div", { ref: rowFieldRef, children: _jsx(SelectComponent, { id: "pivot-row-field", label: "Row field", value: pivotRowField, onChange: (e) => {
+                                                                pivotFieldChange('rowField', e.target.value);
+                                                                setPivotRowField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
+                                                            }, options: allowedRowFields.map((field) => {
+                                                                return {
+                                                                    label: snakeAndCamelCaseToTitleCase(field),
+                                                                    value: field,
+                                                                };
+                                                            }), width: 200 }) }), _jsx("div", { ref: colFieldRef, children: _jsx(SelectComponent, { id: "pivot-row-field", label: "Column field", value: pivotColumnField, onChange: (e) => {
+                                                                pivotFieldChange('columnField', e.target.value);
+                                                                setPivotColumnField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
+                                                            }, options: allowedColumnFields.map((field) => {
+                                                                return {
+                                                                    label: snakeAndCamelCaseToTitleCase(field),
+                                                                    value: field,
+                                                                };
+                                                            }), width: 200 }) })] }), _jsxs(PivotRowContainer, { children: [_jsx(SelectComponent, { id: "pivot-row-field", label: "Value field", value: pivotValueField, onChange: (e) => {
+                                                            pivotFieldChange('valueField', e.target.value);
+                                                            setPivotValueField(e.target.value === ''
+                                                                ? undefined
+                                                                : e.target.value);
+                                                        }, options: allowedValueFields.map((field) => {
+                                                            return {
+                                                                label: snakeAndCamelCaseToTitleCase(field),
+                                                                value: field,
+                                                            };
+                                                        }), width: 200 }), _jsx(SelectComponent, { id: "pivot-row-field", label: "Aggregation type", value: pivotAggregation, onChange: (e) => {
+                                                            if (e.target.value !== 'count' &&
+                                                                pivotValueField &&
+                                                                !numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField).format)) {
+                                                                setPivotValueField(null);
+                                                            }
+                                                            pivotFieldChange('aggregationType', e.target.value);
+                                                            setPivotAggregation(e.target.value === ''
+                                                                ? undefined
+                                                                : e.target.value);
+                                                        }, options: [
+                                                            ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
+                                                                return { label: option, value: option };
+                                                            }),
+                                                        ], width: 200 })] })] }), _jsxs("div", { children: [_jsx(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                    const errors = [];
+                                                    if (!pivotValueField &&
+                                                        pivotAggregation !== 'count') {
+                                                        errors.push("Value field cannot be empty when aggregation is not 'count'");
+                                                    }
+                                                    if (!pivotAggregation) {
+                                                        errors.push('Aggregation cannot be empty');
+                                                    }
+                                                    if (errors.length === 0) {
+                                                        const pivot = {
+                                                            rowField: pivotRowField || '',
+                                                            rowFieldType: columnsToShow[pivotRowField || ''],
+                                                            columnField: pivotColumnField,
+                                                            columnFieldType: columnsToShow[pivotColumnField || ''],
+                                                            valueField: pivotValueField || '',
+                                                            aggregationType: pivotAggregation || '',
+                                                        };
+                                                        pivot.title = generatePivotTitle(pivot);
+                                                        setIsOpen(false);
+                                                        setCreatedPivots([pivot]);
+                                                        onSelectCreatedPivot(pivot);
+                                                        setPopUpTitle('Add pivot');
+                                                    }
+                                                    setErrors(errors);
+                                                }, label: popUpTitle }), errors.length > 0 && (_jsx("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 8,
+                                                    paddingTop: 8,
+                                                    width: pivotCardWidth,
+                                                    maxWidth: pivotCardWidth,
+                                                }, children: errors.map((error, index) => (_jsx(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) }))] })] })) : (_jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    fontFamily: theme?.fontFamily,
+                                    color: theme?.primaryTextColor,
+                                    width: selectedPivotTable ? 500 : 600,
+                                    maxHeight: 600,
+                                    overflowY: 'scroll',
+                                }, children: selectedPivotIndex >= 0 ? (_jsx("div", { children: _jsx("div", { onClick: () => {
+                                            setPopUpTitle('Edit pivot');
+                                            onEditPivot(createdPivots[0], 0);
+                                        }, children: _jsx(PivotCard, { pivotTable: {
+                                                pivot: selectedPivotTable?.pivot,
+                                                rows: selectedPivotTable?.rows,
+                                                columns: selectedPivotTable?.columns,
+                                            }, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, onClose: () => {
+                                                removePivot();
+                                            }, clickable: true, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
+                                                // position button inline with the popover title
+                                                position: 'absolute',
+                                                top: -36,
+                                                right: 0,
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                gap: 8,
+                                            }, children: [_jsx(SecondaryButtonComponent, { label: "Regenerate", onClick: refreshPivots, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: _jsx("path", { fillRule: "evenodd", d: "M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z", clipRule: "evenodd" }) }) }), _jsx(SecondaryButtonComponent, { label: "Create pivot +", onClick: () => onEditPivot({}, null) })] }), isLoading ? (_jsx(LoadingComponent, {})) : (_jsx("div", { children: _jsx(PivotList, { recommendedPivotTables: recommendedPivotTables, createdPivotTables: createdPivotTables, theme: theme, onSelectRecommendedPivot: onSelectRecommendedPivot, onSelectCreatedPivot: onSelectCreatedPivot, selectedPivotIndex: selectedPivotIndex, selectedPivotType: selectedPivotType, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, onEditRecommendedPivot: onEditRecommendedPivot, onEditCreatedPivot: onEditPivot, showPivotEditButton: showPivotEditButton, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent }) }))] })) })) }) }) })] }) }));
+};
+export function generatePivotTableYAxis(pivot, cols, yAxisField) {
+    // For count aggregations, use 'count' for the label
+    if (pivot?.aggregationType === 'count') {
+        return [
+            {
+                field: pivot.valueField || 'count',
+                label: yAxisField.label,
+                format: yAxisField.format,
+            },
+        ];
+    }
+    // otherwise use the default (ie. the field label)
+    return [
+        {
+            field: pivot.valueField,
+            label: yAxisField.label,
+            format: yAxisField.format,
+        },
+    ];
+}
+export function generatePivotTitle(pivot) {
+    if (pivot.rowField && !pivot.valueField) {
+        return snakeAndCamelCaseToTitleCase(`${pivot.aggregationType} of ${pivot.rowField}
+      `);
+    }
+    else if (pivot.valueField && !pivot.rowField) {
+        return snakeAndCamelCaseToTitleCase(`${pivot.aggregationType} of ${pivot.valueField}
+      `);
+    }
+    return snakeAndCamelCaseToTitleCase(`${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
+}
+function castValueToDate(value) {
+    if (!value) {
+        return null;
+    }
+    if (typeof value === 'object' && value.value) {
+        return new Date(value.value);
+    }
+    return new Date(value);
+}
+function getLatestDate(a, b) {
+    return a > b ? a : b;
+}
+function getEarliestDate(a, b) {
+    return a < b ? a : b;
+}
+export function getDateRange(dateRange, column, data) {
+    const currentTime = new Date().getTime();
+    const ONE_CENTURY_IN_MILLISECONDS = 100 * 365 * 24 * 60 * 60 * 1000;
+    const maxDate = new Date(currentTime + ONE_CENTURY_IN_MILLISECONDS);
+    const minDate = new Date(0);
+    if (!dateRange) {
+        if (data.length == 0 || !data[0][column]) {
+            return { start: new Date(), end: new Date() };
+        }
+        const firstDate = castValueToDate(data[0][column]);
+        if (data.length == 1) {
+            return {
+                start: firstDate || new Date(),
+                end: firstDate || new Date(),
+            };
+        }
+        let earliestDate = undefined;
+        let latestDate = undefined;
+        for (let i = 0; i < data.length; i++) {
+            if (earliestDate && latestDate) {
+                break;
+            }
+            const value = castValueToDate(data[i][column]);
+            earliestDate = value && value > minDate ? value : null;
+            latestDate = value && value < maxDate ? value : null;
+        }
+        if (!earliestDate || !latestDate) {
+            return {
+                start: earliestDate || new Date(),
+                end: latestDate || new Date(),
+            };
+        }
+        for (let i = 0; i < data.length; i++) {
+            if (data[i][column]) {
+                const value = castValueToDate(data[i][column]);
+                if (value && value < maxDate) {
+                    latestDate =
+                        latestDate === null ? value : getLatestDate(latestDate, value);
+                }
+                if (value && value > minDate) {
+                    earliestDate =
+                        earliestDate === null
+                            ? value
+                            : getEarliestDate(earliestDate, value);
+                }
+            }
+        }
+        return {
+            start: earliestDate || new Date(),
+            end: latestDate || new Date(),
+        };
+    }
+    else {
+        return dateRange;
+    }
+}
+function determineIntervalThroughOverride(dateBucket, dateRange) {
+    switch (dateBucket) {
+        case 'day':
+            return eachDayOfInterval(dateRange);
+        case 'week':
+            return eachWeekOfInterval(dateRange, { weekStartsOn: 1 });
+        case 'month':
+            return eachMonthOfInterval(dateRange);
+        case 'year':
+            return eachYearOfInterval(dateRange);
+        default:
+            return eachMonthOfInterval(dateRange);
+    }
+}
+export function getDateBuckets(dateRange, column, data, dateBucket) {
+    if (!dateRange) {
+        if (dateBucket) {
+            return determineIntervalThroughOverride(dateBucket, getDateRange(undefined, column, data));
+        }
+        return eachMonthOfInterval(getDateRange(dateRange, column, data));
+    }
+    if (dateBucket) {
+        return determineIntervalThroughOverride(dateBucket, dateRange);
+    }
+    const dayDifference = differenceInDays(dateRange.end, dateRange.start);
+    return dayDifferenceToInterval(dayDifference, dateRange);
+}
+function getCompDateBuckets(dateRange, compDateRange, column, data) {
+    if (!dateRange) {
+        return eachMonthOfInterval(getDateRange(undefined, column, data));
+    }
+    const dayDifference = differenceInDays(dateRange.end, dateRange.start);
+    return dayDifferenceToInterval(dayDifference, compDateRange);
+}
+function dayDifferenceToInterval(dayDifference, dateRange) {
+    if (dayDifference < 14) {
+        return eachDayOfInterval(dateRange);
+    }
+    else if (dayDifference < 60) {
+        return eachWeekOfInterval(dateRange, { weekStartsOn: 1 });
+    }
+    else if (dayDifference < 365 * 3) {
+        return eachMonthOfInterval(dateRange);
+    }
+    else {
+        return eachYearOfInterval(dateRange);
+    }
+}
+export function getDateString(value, dateRange, dateBucket) {
+    let format;
+    if (dateBucket) {
+        switch (dateBucket) {
+            case 'day':
+                format = 'MMM_dd';
+                break;
+            case 'week':
+                format = 'MMM_dd-MMM_dd';
+                break;
+            case 'month':
+                format = 'MMM_yyyy';
+                break;
+            case 'year':
+                format = 'yyyy';
+                break;
+            default:
+                format = 'MMM_yyyy';
+                break;
+        }
+    }
+    else {
+        if (!dateRange) {
+            format = 'MMM_yyyy';
+        }
+        else {
+            const dayDifference = differenceInDays(new Date(dateRange.end), new Date(dateRange.start));
+            if (dayDifference < 14) {
+                format = 'MMM_dd_yyyy';
+            }
+            else if (dayDifference < 60) {
+                format = 'MMM_dd-MMM_dd';
+            }
+            else if (dayDifference < 365 * 3) {
+                format = 'MMM_yyyy';
+            }
+            else {
+                format = 'yyyy';
+            }
+        }
+    }
+    return valueFormatter({
+        value,
+        field: 'date',
+        // @ts-ignore
+        fields: [{ field: 'date', format }],
+    });
+}
+export function isDateField(fieldType) {
+    return (fieldType === 'date' ||
+        fieldType === 'datetime' ||
+        fieldType === 'timestamp' ||
+        fieldType === 'timestamptz' ||
+        fieldType === 'MMM_yyyy' ||
+        fieldType === 'MMM_dd' ||
+        fieldType === 'MMM_dd_yyyy' ||
+        fieldType === 'MMM_dd_hh:mm_ap_pm' ||
+        fieldType === 'hh_ap_pm');
+}
+const isNullUndefinedOrInvalidDate = (date) => date === null || date === undefined || isNaN(date.getTime());
+// If the value is an object with key value (ie. a BigQuery date) we will
+// return the inner value, otherwise return passed param as-is.
+const handleBigQueryValue = (value) => {
+    if (Boolean(value) &&
+        typeof value === 'object' &&
+        Object.keys(value).length === 1 &&
+        value['value']) {
+        return value['value'];
+    }
+    return value;
+};
+// Process out all the BigQuery dates.
+const fixBigQueryData = (data = []) => {
+    const newData = [];
+    for (const row of data) {
+        const newRow = {};
+        for (const key in row) {
+            newRow[key] = handleBigQueryValue(row[key]);
+        }
+        newData.push(newRow);
+    }
+    return newData;
+};
+export async function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = undefined, dateBucket, report, client, uniqueValues) {
+    try {
+        if (report && report.rowCount && report.rowCount !== data.length) {
+            const dateFilter = report
+                ? report.filtersApplied.find((f) => f.filterType === 'date_range')
+                : undefined;
+            const pivotTable = await generatePivotWithSQL(pivot, report, client, dateBucket, dateFilter, pivot.columnField && uniqueValues
+                ? Object.keys(uniqueValues[pivot.columnField])
+                : undefined);
+            if (pivotTable) {
+                return pivotTable;
+            }
+        }
+    }
+    catch (e) {
+        console.error('Error generating pivot table with SQL, using in memory process', e);
+    }
+    return generatePivotTableInMemory(pivot, data, dateRange, isComparison, rowLimit, compRange);
+}
+export function generatePivotTableInMemory(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = undefined, dateBucket) {
+    // If there is no rowField, aggregate on the valueField
+    if (!pivot.rowField) {
+        return valueFieldAggregation(data, pivot.valueField, pivot.aggregationType, isComparison);
+    }
+    // Handle edge-case for BigQuery objects.
+    data = fixBigQueryData(data);
+    if (!dateRange) {
+        if (isDateField(pivot.rowFieldType)) {
+            dateRange = getDateRange(dateRange, pivot.rowField, data);
+        }
+    }
+    if (!compRange ||
+        isNullUndefinedOrInvalidDate(compRange.start) ||
+        isNullUndefinedOrInvalidDate(compRange.end)) {
+        compRange = undefined;
+    }
+    const pivotRows = [];
+    const uniqueRows = (isDateField(pivot.rowFieldType)
+        ? getDateBuckets(dateRange, pivot.rowField, data, dateBucket)
+        : [...new Set(data.map((item) => item[pivot.rowField]))]).filter((row) => Boolean(row));
+    const rowDateRange = getDateRange(dateRange, pivot.rowField, data);
+    const compRowDateRange = getDateRange(compRange ?? dateRange, pivot.rowField, data);
+    // If columnField is not provided, we will not be using uniqueColumns
+    // @ts-ignore
+    const uniqueColumns = (pivot.columnField
+        ? isDateField(pivot.columnFieldType || '')
+            ? getDateBuckets(dateRange, pivot.columnField, data, dateBucket)
+            : [...new Set(data.map((item) => item[pivot.columnField || '']))]
+        : [pivot.valueField]).filter((col) => Boolean(col));
+    // Map from new dates to their corresponding prior dates
+    const COL_DATE_MAP = {};
+    const ROW_DATE_MAP = {};
+    // add in the comparison columns for all columns in the pivot
+    let compUniqueRows = [];
+    if (isComparison) {
+        if (pivot.columnField) {
+            const col = pivot.columnField;
+            const row = pivot.rowField;
+            const isDateCol = isDateField(pivot.columnFieldType || '');
+            const isDateRow = isDateField(pivot.rowFieldType);
+            data.forEach((item) => {
+                if (isDateCol) {
+                    const key = getDateString(item[col], dateRange);
+                    const value = getDateString(item[`comparison_${col}`], dateRange, dateBucket);
+                    COL_DATE_MAP[key] = value;
+                }
+                if (isDateRow) {
+                    const key = getDateString(item[row], dateRange);
+                    const value = getDateString(item[`comparison_${row}`], dateRange, dateBucket);
+                    ROW_DATE_MAP[key] = value;
+                }
+            });
+        }
+        else {
+            const primaryColumns = [...uniqueColumns];
+            for (const primaryKey of primaryColumns) {
+                uniqueColumns.push(`comparison_${primaryKey}`);
+            }
+        }
+        compUniqueRows = (isDateField(pivot.rowFieldType)
+            ? getCompDateBuckets(dateRange, compRange ?? dateRange, pivot.rowField, data)
+            : [...new Set(data.map((item) => item[pivot.rowField]))]).filter((row) => Boolean(row));
+    }
+    // Special corner case for count with only rowField pivot
+    if (!pivot.valueField &&
+        !pivot.columnField &&
+        pivot.aggregationType === 'count') {
+        uniqueColumns.push('count');
+        if (isComparison) {
+            uniqueColumns.push('comparison_count');
+        }
+    }
+    const rowsToGenerate = rowLimit !== -1 && rowLimit <= uniqueRows.length
+        ? uniqueRows.slice(0, rowLimit + 1)
+        : uniqueRows;
+    rowsToGenerate.forEach((rowValue, rowIndex) => {
+        const row = {
+            [pivot.rowField]: isDateField(pivot.rowFieldType)
+                ? getDateString(rowValue, dateRange, dateBucket)
+                : rowValue === null
+                    ? 'Null'
+                    : rowValue === false
+                        ? 'False'
+                        : rowValue === true
+                            ? 'True'
+                            : rowValue,
+        };
+        uniqueColumns.forEach((colValue, colIndex) => {
+            let comparisonFilteredData = [];
+            let filteredData = [];
+            let comparisonValue;
+            let value;
+            const nextRowValue = isDateField(pivot.rowFieldType)
+                ? // @ts-ignore
+                    uniqueRows[rowIndex + 1] ?? endOfDay(rowDateRange.end)
+                : null;
+            const compRowValue = compUniqueRows[rowIndex];
+            const compNextRowValue = isDateField(pivot.rowFieldType)
+                ? compUniqueRows[rowIndex + 1] ?? endOfDay(compRowDateRange.end)
+                : null;
+            if (pivot.columnField) {
+                const columnDateRange = getDateRange(dateRange, pivot.columnField, data);
+                const nextColumnValue = isDateField(pivot.columnFieldType || '')
+                    ? uniqueColumns[colIndex + 1] || endOfDay(columnDateRange.end)
+                    : null;
+                // If columnField is provided, filter by both rowField and columnField
+                if (isDateField(pivot.columnFieldType || '') &&
+                    isDateField(pivot.rowFieldType)) {
+                    filteredData = data.filter((item) => {
+                        return (isWithinInterval(new Date(item[pivot.rowField]), {
+                            start: rowValue,
+                            end: subMilliseconds(nextRowValue, 1),
+                        }) &&
+                            isWithinInterval(new Date(item[pivot.columnField]), {
+                                start: colValue,
+                                end: subMilliseconds(nextColumnValue, 1),
+                            }));
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (isWithinInterval(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: subMilliseconds(nextRowValue, 1),
+                            }) &&
+                                isWithinInterval(new Date(item[pivot.columnField]), {
+                                    start: colValue,
+                                    end: subMilliseconds(nextColumnValue, 1),
+                                }));
+                        });
+                    }
+                }
+                else if (isDateField(pivot.columnFieldType || '') &&
+                    !isDateField(pivot.rowFieldType)) {
+                    filteredData = data.filter((item) => {
+                        return (item[pivot.rowField] === rowValue &&
+                            isWithinInterval(new Date(item[pivot.columnField]), {
+                                start: colValue,
+                                end: subMilliseconds(nextColumnValue, 1),
+                            }));
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (item[`comparison_${pivot.rowField}`] === rowValue &&
+                                isWithinInterval(new Date(item[pivot.columnField]), {
+                                    start: colValue,
+                                    end: subMilliseconds(nextColumnValue, 1),
+                                }));
+                        });
+                    }
+                }
+                else if (!isDateField(pivot.columnFieldType || '') &&
+                    isDateField(pivot.rowFieldType)) {
+                    filteredData = data.filter((item) => {
+                        return (isWithinInterval(new Date(item[pivot.rowField]), {
+                            start: rowValue,
+                            end: subMilliseconds(nextRowValue, 1),
+                        }) && item[pivot.columnField || ''] === colValue);
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (isWithinInterval(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: subMilliseconds(nextRowValue, 1),
+                            }) &&
+                                item[`comparison_${pivot.columnField}` || ''] === colValue);
+                        });
+                    }
+                }
+                else {
+                    filteredData = data.filter((item) => {
+                        return (item[pivot.rowField] === rowValue &&
+                            item[pivot.columnField || ''] === colValue);
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (item[`comparison_${pivot.rowField}`] === rowValue &&
+                                item[`comparison_${pivot.columnField}`] === colValue);
+                        });
+                    }
+                }
+            }
+            else {
+                // NOTE: For 1D columns, the comparisons are handled inside the colvalue
+                // so there is no need to filter for comparisonFilteredData here.
+                // If columnField is not provided, filter by rowField only
+                if (colValue.startsWith('comparison_')) {
+                    filteredData = isDateField(pivot.rowFieldType)
+                        ? data.filter((item) => {
+                            return (compRowValue &&
+                                isWithinInterval(new Date(item[`comparison_${pivot.rowField}`]), {
+                                    start: compRowValue,
+                                    end: subMilliseconds(compNextRowValue, 1),
+                                }));
+                        })
+                        : data.filter((item) => item[`comparison_${pivot.rowField}`] === compRowValue);
+                }
+                else {
+                    filteredData = isDateField(pivot.rowFieldType)
+                        ? data.filter((item) => {
+                            return isWithinInterval(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: subMilliseconds(nextRowValue, 1),
+                            });
+                        })
+                        : data.filter((item) => item[pivot.rowField] === rowValue);
+                }
+            }
+            // Aggregation logic remains the same
+            const key = pivot.columnField && pivot.columnField.trim()
+                ? pivot.valueField
+                : colValue;
+            switch (pivot.aggregationType) {
+                case 'sum':
+                    value = filteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0);
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0);
+                    }
+                    break;
+                case 'count':
+                    value = filteredData.length;
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.length;
+                    }
+                    break;
+                case 'average':
+                case 'avg':
+                    value = filteredData.length
+                        ? filteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / filteredData.length
+                        : 0;
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.length
+                            ? comparisonFilteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / comparisonFilteredData.length
+                            : 0;
+                    }
+                    break;
+                case 'max':
+                    value = filteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? -Infinity)), -Infinity);
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? -Infinity)), -Infinity);
+                    }
+                    break;
+                case 'min':
+                    value = filteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? Infinity)), Infinity);
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? Infinity)), Infinity);
+                    }
+                    break;
+                // Implement other aggregation types as needed
+                default:
+                    throw new Error('Unsupported aggregation type');
+            }
+            // Set the value on the row
+            // If columnField is not provided, colValue will be valueField
+            row[isDateField(pivot.columnFieldType || '')
+                ? getDateString(colValue, dateRange)
+                : colValue] =
+                pivot.aggregationType === 'count' ? value.toFixed(0) : value.toFixed(2);
+            if (isComparison && pivot.columnField) {
+                if (isDateField(pivot.columnFieldType || '')) {
+                    row[`comparison_${getDateString(colValue, dateRange)}`] =
+                        pivot.aggregationType === 'count'
+                            ? comparisonValue.toFixed(0)
+                            : comparisonValue.toFixed(2);
+                }
+                else {
+                    row[`comparison_${colValue}`] =
+                        pivot.aggregationType === 'count'
+                            ? comparisonValue.toFixed(0)
+                            : comparisonValue.toFixed(2);
+                }
+            }
+        });
+        if (pivot.aggregationType === 'max' || pivot.aggregationType === 'min') {
+            for (const [key, value] of Object.entries(row)) {
+                if (value === '-Infinity' || value === 'Infinity') {
+                    row[key] = null;
+                }
+            }
+        }
+        pivotRows.push(row);
+    });
+    const columns = [
+        {
+            label: pivot.rowField === null
+                ? 'Null'
+                : snakeAndCamelCaseToTitleCase(pivot.rowField),
+            field: pivot.rowField,
+        },
+        ...uniqueColumns.map((column) => {
+            const columnName = isDateField(pivot.columnFieldType || '')
+                ? getDateString(column, dateRange, dateBucket)
+                : column;
+            return {
+                label: column === null
+                    ? 'Null'
+                    : column === false
+                        ? 'False'
+                        : snakeAndCamelCaseToTitleCase(columnName).replace('Comparison', 'comparison'),
+                field: columnName,
+            };
+        }),
+        ...(isComparison && pivot.columnField
+            ? uniqueColumns.map((column, index) => {
+                const columnName = isDateField(pivot.columnFieldType || '')
+                    ? getDateString(column, dateRange, dateBucket)
+                    : column;
+                return {
+                    label: column === null
+                        ? 'Null'
+                        : column === false
+                            ? 'False'
+                            : pivot.aggregationType === 'count' &&
+                                !pivot.columnField &&
+                                index === 1
+                                ? `comparison Count`
+                                : isDateField(pivot.columnFieldType || '')
+                                    ? COL_DATE_MAP[getDateString(column, dateRange, dateBucket)] ?? 'comparison'
+                                    : `comparison ${snakeAndCamelCaseToTitleCase(columnName)}`,
+                    field: `comparison_${columnName}`,
+                };
+            })
+            : []),
+    ];
+    if (pivot.sort) {
+        pivotRows.sort((a, b) => {
+            if (pivot.sortDirection === 'ASC') {
+                if (dateFormatOptions.includes(pivot.sortFieldType ?? '')) {
+                    // @ts-ignore
+                    return new Date(a[pivot.sortField]) - new Date(b[pivot.sortField]);
+                }
+                else if (isNumericColumnType(pivot.sortFieldType)) {
+                    return a[pivot.sortField] - b[pivot.sortField];
+                }
+                return a[pivot.sortField].localeCompare(b[pivot.sortField]);
+            }
+            else {
+                if (dateFormatOptions.includes(pivot.sortFieldType ?? '')) {
+                    // @ts-ignore
+                    return new Date(b[pivot.sortField]) - new Date(a[pivot.sortField]);
+                }
+                else if (isNumericColumnType(pivot.sortFieldType)) {
+                    return b[pivot.sortField] - a[pivot.sortField];
+                }
+                return b[pivot.sortField].localeCompare(a[pivot.sortField]);
+            }
+        });
+    }
+    return { rows: pivotRows, columns };
+}
+function valueFieldAggregation(data, valueField, aggregationType, isComparison) {
+    if (!data || data.length === 0) {
+        return {
+            rows: [],
+            columns: [
+                { label: snakeAndCamelCaseToTitleCase(valueField), field: valueField },
+            ],
+        };
+    }
+    let value = 0;
+    let comparisonValue = 0;
+    let count = 0;
+    switch (aggregationType) {
+        case 'sum':
+            value = data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0);
+            if (isComparison) {
+                comparisonValue = data.reduce((sum, item) => sum + parseFloat(item[`comparison_${valueField}`] ?? 0), 0);
+            }
+            break;
+        case 'count':
+            value = data.reduce((count, item) => count + (item[valueField] ? 1 : 0), 0);
+            if (isComparison) {
+                comparisonValue = data.reduce((count, item) => count + (item[`comparison_${valueField}`] ? 1 : 0), 0);
+            }
+            break;
+        case 'avg':
+        case 'average':
+            count = data.reduce((count, item) => count + (item[valueField] ? 1 : 0), 0);
+            value =
+                data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) / (count === 0 ? 1 : count);
+            if (isComparison) {
+                const comparisonCount = data.reduce((count, item) => count + (item[`comparison_${valueField}`] ? 1 : 0), 0);
+                comparisonValue =
+                    data.reduce((sum, item) => sum + parseFloat(item[`comparison_${valueField}`] ?? 0), 0) / (comparisonCount === 0 ? 1 : comparisonCount);
+            }
+            break;
+        case 'max':
+            value = data.reduce((max, item) => Math.max(max, parseFloat(item[valueField] ?? -Infinity)), -Infinity);
+            if (isComparison) {
+                comparisonValue = data.reduce((max, item) => Math.max(max, parseFloat(item[`comparison_${valueField}`] ?? -Infinity)), -Infinity);
+            }
+            break;
+        case 'min':
+            value = data.reduce((min, item) => Math.min(min, parseFloat(item[valueField] ?? Infinity)), Infinity);
+            if (isComparison) {
+                comparisonValue = data.reduce((min, item) => Math.min(min, parseFloat(item[`comparison_${valueField}`] ?? Infinity)), Infinity);
+            }
+            break;
+        // Implement other aggregation types as needed
+        default:
+            throw new Error('Unsupported aggregation type');
+    }
+    const row = {};
+    row[valueField] = value;
+    if (isComparison) {
+        row[`comparison_${valueField}`] = comparisonValue;
+    }
+    return {
+        rows: [row],
+        columns: [
+            { label: snakeAndCamelCaseToTitleCase(valueField), field: valueField },
+        ],
+    };
+}