@quillsql/react 2.13.38 → 2.13.39

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

@@ -2,25 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from 'react';
 import { ClientContext, SchemaDataContext, TenantContext } from '../../Context';
 import { PivotList, PivotCard } from './PivotList';
-import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, endOfDay, isValid, isWithinInterval, parseISO, subMilliseconds, } from 'date-fns';
-import { compareValues, getValidDate, valueFormatter, } from '../../utils/valueFormatter';
-import { numberFormatOptions } from '../../ChartBuilder';
+import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, 
+// endOfDay,
+isValid, 
+// isWithinInterval,
+parseISO,
+// subMilliseconds,
+ } from 'date-fns';
+import { 
+// compareValues,
+// getValidDate,
+valueFormatter, } from '../../utils/valueFormatter';
 import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
-import { QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
+import { MemoizedDeleteButton, MemoizedSubHeader, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
 import { QuillCard } from '../../components/QuillCard';
 import { cleanPivot, getPossiblePivotFieldOptions, isValidPivot, } from '../../utils/pivotProcessing';
 import { hashCode } from '../../utils/crypto';
 import { getCountsByColumns, getQueryDateRangeByColumns, getUniqueValuesByColumns, } from '../../utils/tableProcessing';
 import { generatePivotWithSQL } from '../../utils/pivotConstructor';
 import { getDateBucketFromRange } from '../../utils/dates';
-// import Big from 'big.js';
 import equal from 'fast-deep-equal';
-import { uniqueValuesToStringMap } from '../../utils/filterProcessing';
 import { isStringType } from '../../utils/columnProcessing';
 import { useQuillCloud } from '../../utils/dataFetcher';
-export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotValueField2, setPivotValueField2, 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, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, dashboardName, dateFilter, }) => {
+export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotAggregations, setPivotAggregations, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = QuillErrorMessageComponent, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, CardComponent = QuillCard, HeaderComponent, SubheaderComponent = MemoizedSubHeader, DeleteButtonComponent = MemoizedDeleteButton, 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, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, dashboardName, dateFilter, }) => {
     const [isLoading, setIsLoading] = useState(false);
     const [previewLoading, setPreviewLoading] = useState(false);
+    // const [showPercentageAggPopover, setShowPercentageAggPopover] = useState<number | undefined>(undefined);
     const [selectedPivotType, setSelectedPivotType] = useState('recommended');
     const [errors, setErrors] = useState([]);
     const [client] = useContext(ClientContext);
@@ -38,6 +45,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     const [allowedValueFields, setAllowedValueFields] = useState([]);
     const [uniqueValues, setUniqueValues] = useState(initialUniqueValues);
     const buttonRef = useRef(null);
+    // const percentageAggButtonRef = useRef<HTMLDivElement>(null);
     const [dateRanges, setDateRanges] = useState({});
     const [pivotError, setPivotError] = useState('');
     const getDistinctValues = async (fetchDistinct) => {
@@ -122,15 +130,25 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     }, [showUpdatePivot, isOpen]);
     useEffect(() => {
         const fetchPivotData = async () => {
-            if (pivotRowField && data && columns) {
+            if (pivotRowField && data && columns && pivotAggregations?.every((p) => p?.valueField && p?.aggregationType)) {
                 const pivot = {
                     rowField: pivotRowField || '',
-                    rowFieldType: columnsToShow[pivotRowField || ''],
+                    rowFieldType: columnTypes[pivotRowField ?? ''],
                     columnField: pivotColumnField,
-                    columnFieldType: columnsToShow[pivotColumnField || ''],
-                    valueField: pivotValueField || '',
-                    aggregationType: pivotAggregation || '',
-                    valueField2: pivotValueField2 || '',
+                    columnFieldType: columnTypes[pivotColumnField ?? ''],
+                    aggregations: pivotAggregations?.map((p) => ({
+                        valueField: p.valueField,
+                        valueFieldType: columnTypes[p.valueField ?? ''],
+                        valueField2: p.valueField2,
+                        valueField2Type: columnTypes[p.valueField2 ?? ''],
+                        aggregationType: p.aggregationType,
+                    })),
+                    // For backwards compatibility
+                    valueField: pivotAggregations?.[0]?.valueField,
+                    valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
+                    valueField2: pivotAggregations?.[0]?.valueField2,
+                    valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
+                    aggregationType: pivotAggregations?.[0]?.aggregationType,
                 };
                 try {
                     const { rows, columns } = await generatePivotTable({
@@ -166,13 +184,23 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             }
             if (pivotRowField && data && columns) {
                 const pivot = {
-                    rowField: pivotRowField || '',
-                    rowFieldType: columnsToShow[pivotRowField || ''],
+                    rowField: pivotRowField ?? '',
+                    rowFieldType: columnTypes[pivotRowField ?? ''],
                     columnField: pivotColumnField,
-                    columnFieldType: columnsToShow[pivotColumnField || ''],
-                    valueField: pivotValueField || '',
-                    aggregationType: pivotAggregation || '',
-                    valueField2: pivotValueField2 || '',
+                    columnFieldType: columnTypes[pivotColumnField ?? ''],
+                    aggregations: pivotAggregations?.map((p) => ({
+                        valueField: p.valueField,
+                        valueFieldType: columnTypes[p.valueField ?? ''],
+                        valueField2: p.valueField2,
+                        valueField2Type: columnTypes[p.valueField2 ?? ''],
+                        aggregationType: p.aggregationType,
+                    })),
+                    // For backwards compatibility
+                    valueField: pivotAggregations?.[0]?.valueField,
+                    valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
+                    valueField2: pivotAggregations?.[0]?.valueField2,
+                    valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
+                    aggregationType: pivotAggregations?.[0]?.aggregationType,
                 };
                 if (initialSelectedPivotTable) {
                     setSamplePivotTable({
@@ -239,6 +267,12 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             return map;
         }, {});
     }, [columns]);
+    const columnTypes = useMemo(() => {
+        return (columns || []).reduce((map, col) => {
+            map[col.field] = col.jsType;
+            return map;
+        }, {});
+    }, [columns]);
     const [selectedPivotTable, setSelectedPivotTable] = useState(null);
     useEffect(() => {
         const fetchPivotTables = async () => {
@@ -299,22 +333,78 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             selectPivot(pivot);
             setSelectedPivotType('recommended');
         }
+        setPivotError('');
         setIsOpen(false);
     };
     const onSelectCreatedPivot = (pivot) => {
         selectPivot(pivot, pivot.columnField ? uniqueValues : undefined);
         setSelectedPivotType('created');
+        setPivotError('');
         setIsOpen(false);
         setPopUpTitle('Add pivot');
     };
+    const onCommitPivot = useCallback(() => {
+        const errors = [];
+        if ((pivotAggregations?.length ?? 0) === 0) {
+            errors.push('You must have at least one aggregation');
+        }
+        if (pivotAggregations.some((p) => !p.valueField && p.aggregationType !== 'count')) {
+            errors.push("Value field cannot be empty when aggregation is not 'count'");
+        }
+        if (pivotAggregations.some((p) => !p.aggregationType)) {
+            errors.push('Aggregation cannot be empty');
+        }
+        if (pivotRowField && !columnsToShow[pivotRowField]) {
+            errors.push('Error in row field: undefined type');
+        }
+        if (pivotColumnField &&
+            !columnsToShow[pivotColumnField]) {
+            errors.push('Error in column field: undefined type');
+        }
+        if (errors.length === 0 && pivotAggregations?.every((p) => p.valueField && p.aggregationType)) {
+            const pivot = {
+                rowField: pivotRowField,
+                rowFieldType: columnTypes[pivotRowField ?? ''],
+                columnField: pivotColumnField,
+                columnFieldType: columnsToShow[pivotColumnField ?? ''],
+                aggregations: pivotAggregations?.map((p) => ({
+                    valueField: p.valueField,
+                    valueFieldType: columnTypes[p.valueField ?? ''],
+                    valueField2: p.valueField2,
+                    valueField2Type: columnTypes[p.valueField2 ?? ''],
+                    aggregationType: p.aggregationType,
+                })),
+                // For backwards compatibility
+                valueField: pivotAggregations?.[0]?.valueField,
+                valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
+                valueField2: pivotAggregations?.[0]?.valueField2,
+                valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
+                aggregationType: pivotAggregations?.[0]?.aggregationType,
+            };
+            if (isValidPivot(pivot).valid) {
+                pivot.title = generatePivotTitle(pivot);
+                setPivotError('');
+                setIsOpen(false);
+                setCreatedPivots([pivot]);
+                onSelectCreatedPivot(pivot);
+                setPopUpTitle('Add pivot');
+            }
+            else {
+                errors.push(isValidPivot(pivot).reason);
+            }
+        }
+        setErrors(errors);
+    }, [
+        pivotRowField,
+        pivotColumnField,
+        pivotAggregations,
+    ]);
     const onEditPivot = async (pivot, index, pivotType) => {
         setIsLoading(false);
         setErrors([]);
         setPivotRowField(pivot.rowField);
         setPivotColumnField(pivot.columnField);
-        setPivotValueField(pivot.valueField);
-        setPivotValueField2(pivot.valueField2);
-        setPivotAggregation(pivot.aggregationType);
+        setPivotAggregations(pivot.aggregations ?? []);
         setShowUpdatePivot(true);
         if (pivotType === 'recommended' &&
             index !== null &&
@@ -418,10 +508,8 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                 }
                 return {
                     ...pivot,
-                    rowFieldType: columnsToShow[pivot.rowField || ''],
-                    columnFieldType: pivot.columnField
-                        ? columnsToShow[pivot.columnField]
-                        : undefined,
+                    rowFieldType: columnTypes[pivot.rowField ?? ''],
+                    columnFieldType: columnTypes[pivot.columnField ?? ''],
                     title: generatePivotTitle(pivot),
                 };
             });
@@ -459,7 +547,17 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                 }
             }));
             const validPivotTables = pts.filter((pt) => pt !== undefined);
-            setRecommendedPivotTables(validPivotTables);
+            setRecommendedPivotTables(validPivotTables.map((pt) => ({
+                ...pt,
+                pivot: {
+                    ...pt.pivot,
+                    aggregations: [{
+                            valueField: pt.pivot.valueField,
+                            aggregationType: pt.pivot.aggregationType,
+                            valueField2: pt.pivot.valueField2,
+                        }]
+                }
+            })));
             if (validPivotTables.length === 0) {
                 sethasNoRecommendedPivots(true);
             }
@@ -484,29 +582,73 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         columns,
     ]);
     const pivotFieldChange = async (field, value) => {
+        console.log();
+        if (typeof value !== 'string' && (!value?.length || !value?.every((p) => p?.aggregationType))) {
+            return;
+        }
+        if (typeof value !== 'string' && value.some((p) => !p?.valueField && (p?.aggregationType !== 'count' || !pivotRowField))) {
+            return;
+        }
         setErrors([]);
         const pivot = {
             rowField: pivotRowField,
-            rowFieldType: columnsToShow[pivotRowField],
+            rowFieldType: columnTypes[pivotRowField ?? ''],
             columnField: pivotColumnField,
-            valueField: pivotValueField,
-            valueField2: pivotValueField2,
-            aggregationType: pivotAggregation,
+            aggregations: pivotAggregations?.map((p) => {
+                return {
+                    valueField: p.valueField,
+                    valueFieldType: columnTypes[p.valueField ?? ''],
+                    valueField2: p.valueField2,
+                    valueField2Type: columnTypes[p.valueField2 ?? ''],
+                    aggregationType: p.aggregationType
+                };
+            }),
+            // For backwards compatibility
+            valueField: pivotAggregations?.[0]?.valueField,
+            valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
+            valueField2: pivotAggregations?.[0]?.valueField2,
+            valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
+            aggregationType: pivotAggregations?.[0]?.aggregationType,
         };
-        // @ts-ignore
-        pivot[field] = value;
+        if (field === 'aggregations') {
+            pivot.aggregations = value.map((p) => ({
+                valueField: p.valueField,
+                valueFieldType: columnTypes[p.valueField ?? ''],
+                valueField2: p.valueField2,
+                valueField2Type: columnTypes[p.valueField2 ?? ''],
+                aggregationType: p.aggregationType
+            }));
+        }
+        else {
+            pivot[field] = value;
+        }
         pivot.title = generatePivotTitle(pivot);
         if (field === 'rowField') {
-            pivot.rowFieldType = columnsToShow[value];
+            if (value === '') {
+                setPivotColumnField(undefined);
+                // Also clear any percent aggregations
+                setPivotAggregations(pivotAggregations.map((agg) => {
+                    return {
+                        ...agg,
+                        aggregationType: agg.aggregationType === 'percentage' ? undefined : agg.aggregationType,
+                    };
+                }));
+            }
+            pivot.rowFieldType = columnTypes[value];
         }
         else if (field === 'columnField') {
-            pivot.columnFieldType = columnsToShow[value];
-            if (!value && pivotValueField2 === pivotValueField) {
-                // only allow same field percentage with columnField
-                setPivotValueField2(undefined);
-                pivot.valueField2 = undefined;
-            }
+            pivot.columnFieldType = columnTypes[value];
         }
+        pivot.aggregations?.forEach((agg, index) => {
+            if (!value && agg.valueField === agg.valueField2) {
+                agg.valueField2 = undefined;
+                setPivotAggregations([
+                    ...pivotAggregations.slice(0, index),
+                    { ...pivotAggregations[index], valueField2: undefined },
+                    ...pivotAggregations.slice(index + 1),
+                ]);
+            }
+        });
         if (!isValidPivot(pivot).valid) {
             setSamplePivotTable(null);
             return;
@@ -535,6 +677,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             }
             catch (e) {
                 if (e instanceof Error) {
+                    console.log('error', e);
                     setPivotError(e.message);
                     setSamplePivotTable(null);
                     return;
@@ -591,6 +734,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             right: -2,
                         } })) }), showTrigger && (_jsx("div", { ref: buttonRef, children: _jsx(SecondaryButtonComponent, { disabled: disabled, onClick: () => {
                             if (columns.length === 0) {
+                                setPivotError('');
                                 setIsOpen(false);
                             }
                             // table is not loaded yet, so pivot button is not clickable
@@ -629,135 +773,102 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             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);
-                                                setPivotValueField2(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
-                                                                .filter((field) => field !== pivotColumnField)
-                                                                .map((field) => {
-                                                                return {
-                                                                    label: snakeAndCamelCaseToTitleCase(field),
-                                                                    value: field,
-                                                                };
-                                                            }), isLoading: uniqueValuesIsLoading, 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
-                                                                .filter((field) => field !== pivotRowField)
-                                                                .map((field) => {
-                                                                return {
-                                                                    label: snakeAndCamelCaseToTitleCase(field),
-                                                                    value: field,
-                                                                };
-                                                            }), isLoading: uniqueValuesIsLoading, width: 200 }) })] }), _jsxs(PivotRowContainer, { children: [_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',
-                                                                'percentage',
-                                                            ].map((option) => {
-                                                                return { label: option, value: option };
-                                                            }),
-                                                        ], width: 200 }), _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,
-                                                            };
-                                                        })
-                                                            .filter((option) => {
-                                                            return (pivotAggregation !== 'percentage' ||
-                                                                pivotColumnField ||
-                                                                option.value !== pivotValueField2);
-                                                        }), isLoading: uniqueValuesIsLoading, width: 200 }), pivotAggregation === 'percentage' ? (_jsx(SelectComponent, { id: "pivot-row-field", label: "Total field", value: pivotValueField2, onChange: (e) => {
-                                                            pivotFieldChange('valueField2', e.target.value);
-                                                            setPivotValueField2(e.target.value === ''
-                                                                ? undefined
-                                                                : e.target.value);
-                                                        }, options: allowedValueFields
-                                                            .map((field) => {
-                                                            return {
-                                                                label: snakeAndCamelCaseToTitleCase(field),
-                                                                value: field,
-                                                            };
-                                                        })
-                                                            .filter((option) => {
-                                                            return (pivotAggregation !== 'percentage' ||
-                                                                pivotColumnField ||
-                                                                option.value !== pivotValueField);
-                                                        }), isLoading: uniqueValuesIsLoading, width: 200 })) : null] })] }), _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 (pivotRowField && !columnsToShow[pivotRowField]) {
-                                                        errors.push('Error in row field: undefined type');
-                                                    }
-                                                    if (pivotColumnField &&
-                                                        !columnsToShow[pivotColumnField]) {
-                                                        errors.push('Error in column field: undefined type');
-                                                    }
-                                                    if (errors.length === 0) {
-                                                        const pivot = {
-                                                            rowField: pivotRowField || '',
-                                                            rowFieldType: columnsToShow[pivotRowField || ''],
-                                                            columnField: pivotColumnField,
-                                                            columnFieldType: columnsToShow[pivotColumnField || ''],
-                                                            valueField: pivotValueField || '',
-                                                            valueField2: pivotValueField2 || '',
-                                                            aggregationType: pivotAggregation || '',
-                                                        };
-                                                        if (isValidPivot(pivot).valid) {
-                                                            pivot.title = generatePivotTitle(pivot);
-                                                            setIsOpen(false);
-                                                            setCreatedPivots([pivot]);
-                                                            onSelectCreatedPivot(pivot);
-                                                            setPopUpTitle('Add pivot');
-                                                        }
-                                                        else {
-                                                            errors.push(isValidPivot(pivot).reason);
-                                                        }
-                                                    }
-                                                    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: {
+                                                setPivotAggregations([{ valueField: undefined, valueField2: undefined, aggregationType: undefined }]);
+                                                setPivotRowField(undefined);
+                                                setPivotColumnField(undefined);
+                                                setSamplePivotTable(undefined);
+                                            } }) })), _jsxs(PivotColumnContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx(HeaderComponent, { label: "Groupings" }), _jsxs(PivotRowContainer, { children: [_jsx("div", { ref: rowFieldRef, children: _jsx(SelectComponent, { id: "pivot-row-field", label: "Group rows by", value: pivotRowField, onChange: (e) => {
+                                                                        pivotFieldChange('rowField', e.target.value);
+                                                                        setPivotRowField(e.target.value === ''
+                                                                            ? undefined
+                                                                            : e.target.value);
+                                                                    }, options: allowedRowFields
+                                                                        .filter((field) => field !== pivotColumnField)
+                                                                        .map((field) => {
+                                                                        return {
+                                                                            label: snakeAndCamelCaseToTitleCase(field),
+                                                                            value: field,
+                                                                        };
+                                                                    }), isLoading: uniqueValuesIsLoading, width: 200 }) }), _jsx("div", { ref: colFieldRef, children: _jsx(SelectComponent, { id: "pivot-column-field", label: "Group columns by", value: pivotColumnField, onChange: (e) => {
+                                                                        pivotFieldChange('columnField', e.target.value);
+                                                                        setPivotColumnField(e.target.value === ''
+                                                                            ? undefined
+                                                                            : e.target.value);
+                                                                    }, options: allowedColumnFields
+                                                                        .filter((field) => field !== pivotRowField)
+                                                                        .map((field) => {
+                                                                        return {
+                                                                            label: snakeAndCamelCaseToTitleCase(field),
+                                                                            value: field,
+                                                                        };
+                                                                    }), isLoading: uniqueValuesIsLoading, width: 200, disabled: pivotRowField === undefined }) })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx(HeaderComponent, { label: "Aggregations" }), _jsxs(PivotRowContainer, { children: [_jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Aggregation Type" }) }), _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Value Field" }) })] }), pivotAggregations?.map((agg, index) => _jsxs(PivotRowContainer, { children: [_jsx(SelectComponent, { id: "pivot-aggregation-type", value: agg.aggregationType, onChange: (e) => {
+                                                                    // if (
+                                                                    //   e.target.value !== 'count' &&
+                                                                    //   agg.valueField &&
+                                                                    //   !numberFormatOptions.includes(
+                                                                    //     columns.find(
+                                                                    //       (col: Column) =>
+                                                                    //         col.field === agg.valueField,
+                                                                    //     )!.format,
+                                                                    //   )
+                                                                    // ) {
+                                                                    //   setPivotValueField(undefined);
+                                                                    // }
+                                                                    const newAgg = [
+                                                                        ...pivotAggregations.slice(0, index),
+                                                                        { ...agg, aggregationType: e.target.value === '' ? undefined : e.target.value },
+                                                                        ...pivotAggregations.slice(index + 1),
+                                                                    ];
+                                                                    pivotFieldChange('aggregations', newAgg);
+                                                                    setPivotAggregations(newAgg);
+                                                                }, options: [
+                                                                    ...[
+                                                                        'sum',
+                                                                        'average',
+                                                                        'count',
+                                                                        'max',
+                                                                        'min',
+                                                                        ...(pivotRowField ? ['percentage'] : []),
+                                                                    ].map((option) => {
+                                                                        return { label: option, value: option };
+                                                                    }),
+                                                                ], width: 200 }), _jsx(SelectComponent, { id: "pivot-value-field", value: agg.valueField, onChange: (e) => {
+                                                                    const newAgg = [
+                                                                        ...pivotAggregations.slice(0, index),
+                                                                        { ...agg, valueField: e.target.value === '' ? undefined : e.target.value },
+                                                                        ...pivotAggregations.slice(index + 1),
+                                                                    ];
+                                                                    pivotFieldChange('aggregations', newAgg);
+                                                                    setPivotAggregations(newAgg);
+                                                                }, options: allowedValueFields
+                                                                    .map((field) => {
+                                                                    return {
+                                                                        label: snakeAndCamelCaseToTitleCase(field),
+                                                                        value: field,
+                                                                    };
+                                                                }), isLoading: uniqueValuesIsLoading, width: 200 }), _jsx("div", { style: { marginLeft: -16, marginRight: -16, visibility: index > 0 ? 'visible' : 'hidden' }, children: _jsx(DeleteButtonComponent, { onClick: () => {
+                                                                        setPivotAggregations([
+                                                                            ...pivotAggregations.slice(0, index),
+                                                                            ...pivotAggregations.slice(index + 1),
+                                                                        ]);
+                                                                    } }) })] }, index))] })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', marginRight: 'auto' }, children: _jsx(SecondaryButtonComponent, { label: 'Add Aggregation', onClick: () => {
+                                                setPivotAggregations([
+                                                    ...pivotAggregations,
+                                                    { aggregationType: undefined, valueField: undefined, valueField2: undefined },
+                                                ]);
+                                            } }) }), 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}`))) })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', marginLeft: 'auto', gap: 8 }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                    setPivotError('');
+                                                    setIsOpen(false);
+                                                    setPopUpTitle('Add pivot');
+                                                }, label: "Cancel" }), _jsx(ButtonComponent, { id: "custom-button", onClick: onCommitPivot, label: 'Save', disabled: !(pivotAggregations?.length > 0) ||
+                                                    pivotAggregations.some((agg) => !agg.aggregationType || !agg.valueField) })] })] })) : (_jsx("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     fontFamily: theme?.fontFamily,
@@ -778,7 +889,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                 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 || uniqueValuesIsLoading ? (_jsx(LoadingComponent, {})) : pivotError ? (_jsx("div", { style: {
+                                            }, 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({ aggregations: [{}] }, null) })] }), isLoading || uniqueValuesIsLoading ? (_jsx(LoadingComponent, {})) : pivotError ? (_jsx("div", { style: {
                                                 width: '100%',
                                                 height: '140px',
                                                 display: 'flex',
@@ -805,7 +916,7 @@ export function generatePivotTableYAxis(pivot, cols, yAxisField) {
     if (pivot?.aggregationType === 'count') {
         return [
             {
-                field: pivot.valueField || 'count',
+                field: pivot.valueField ?? 'count',
                 label: yAxisField.label,
                 format: yAxisField.format,
             },
@@ -814,22 +925,22 @@ export function generatePivotTableYAxis(pivot, cols, yAxisField) {
     // otherwise use the default (ie. the field label)
     return [
         {
-            field: pivot.valueField,
+            field: pivot.valueField ?? 'count',
             label: yAxisField.label,
             format: yAxisField.format,
         },
     ];
 }
 export function generatePivotTitle(pivot) {
-    if (pivot.rowField && !pivot.valueField) {
-        return snakeAndCamelCaseToTitleCase(`${pivot.aggregationType} of ${pivot.rowField}
+    if (pivot.rowField && !pivot.valueField && pivot.aggregations?.[0]) {
+        return snakeAndCamelCaseToTitleCase(`${pivot.aggregations[0].aggregationType} of ${pivot.rowField}
       `);
     }
-    else if (pivot.valueField && !pivot.rowField) {
-        return snakeAndCamelCaseToTitleCase(`${pivot.aggregationType} of ${pivot.valueField}
+    else if (!pivot.rowField && pivot.aggregations?.[0]?.valueField) {
+        return snakeAndCamelCaseToTitleCase(`${pivot.aggregations[0].aggregationType} of ${pivot.aggregations[0].valueField}
       `);
     }
-    return snakeAndCamelCaseToTitleCase(`${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
+    return snakeAndCamelCaseToTitleCase(`${pivot.aggregations?.[0]?.aggregationType ?? 'Aggregation'} of ${pivot.aggregations?.[0]?.valueField ?? 'value'} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
 }
 function castValueToDate(value) {
     if (!value) {
@@ -957,13 +1068,18 @@ export function getDateBuckets(dateRange, column, data, dateBucket) {
     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 getCompDateBuckets(
+//   dateRange: { start: Date; end: Date } | undefined,
+//   compDateRange: any,
+//   column: string,
+//   data: any,
+// ) {
+//   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);
@@ -1039,30 +1155,33 @@ export function isDateField(fieldType) {
         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;
-};
+// const isNullUndefinedOrInvalidDate = (date: 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: any) => {
+//   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: any[] = []) => {
+//   const newData = [];
+//   for (const row of data) {
+//     const newRow: any = {};
+//     for (const key in row) {
+//       newRow[key] = handleBigQueryValue(row[key]);
+//     }
+//     newData.push(newRow);
+//   }
+//   return newData;
+// };
 export async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, uniqueValues, dashboardName, tenants, additionalProcessing, }) {
     try {
         if (report && client) {
@@ -1089,430 +1208,3 @@ export async function generatePivotTable({ pivot, dateBucket, dateFilter, report
     }
     throw Error('Failed to generate pivot table: invalid report');
 }
-export function generatePivotTableInMemory(pivot, data, dateRange, isComparison, rowLimit, compRange = undefined, dateBucket, uniqueValues) {
-    // 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 uniqueValuesMap = uniqueValuesToStringMap(uniqueValues || {});
-    const uniqueRows = (isDateField(pivot.rowFieldType || '')
-        ? getDateBuckets(dateRange, pivot.rowField, data, dateBucket)
-        : uniqueValuesMap[pivot.rowField] &&
-            uniqueValuesMap[pivot.rowField]?.[0] !== 'EXCEEDS_LIMIT'
-            ? uniqueValuesMap[pivot.rowField]
-            : [...new Set(data.map((item) => item[pivot.rowField || '']))])
-        .filter((col) => col !== null && col !== '')
-        .map((col) => isDateField(pivot.rowFieldType || '') ? castValueToDate(col) : col);
-    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)
-            : uniqueValues && pivot.columnField
-                ? uniqueValuesMap[pivot.columnField]
-                : [...new Set(data.map((item) => item[pivot.columnField || '']))]
-        : [pivot.valueField]).filter((col) => col !== null && col !== '' && col !== undefined);
-    // 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)
-            : (uniqueValuesMap[pivot.rowField] ?? [
-                ...new Set(data.map((item) => item[pivot.rowField || ''])),
-            ])).filter((col) => col !== null && col !== '');
-    }
-    // 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 && rowLimit <= uniqueRows.length
-        ? uniqueRows.slice(0, rowLimit)
-        : 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(getValidDate(item[pivot.rowField || '']) ?? 0, {
-                            start: rowValue,
-                            end: subMilliseconds(nextRowValue, 1),
-                        }) &&
-                            isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
-                                start: colValue,
-                                end: subMilliseconds(nextColumnValue, 1),
-                            }));
-                    });
-                    if (isComparison) {
-                        comparisonFilteredData = data.filter((item) => {
-                            return (isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
-                                start: rowValue,
-                                end: subMilliseconds(nextRowValue, 1),
-                            }) &&
-                                isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
-                                    start: colValue,
-                                    end: subMilliseconds(nextColumnValue, 1),
-                                }));
-                        });
-                    }
-                }
-                else if (isDateField(pivot.columnFieldType || '') &&
-                    !isDateField(pivot.rowFieldType || '')) {
-                    filteredData = data.filter((item) => {
-                        return (item[pivot.rowField || ''] === rowValue &&
-                            isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
-                                start: colValue,
-                                end: subMilliseconds(nextColumnValue, 1),
-                            }));
-                    });
-                    if (isComparison) {
-                        comparisonFilteredData = data.filter((item) => {
-                            return (item[`comparison_${pivot.rowField}`] === rowValue &&
-                                isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
-                                    start: colValue,
-                                    end: subMilliseconds(nextColumnValue, 1),
-                                }));
-                        });
-                    }
-                }
-                else if (!isDateField(pivot.columnFieldType || '') &&
-                    isDateField(pivot.rowFieldType || '')) {
-                    filteredData = data.filter((item) => {
-                        return (isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
-                            start: rowValue,
-                            end: subMilliseconds(nextRowValue, 1),
-                        }) && item[pivot.columnField || ''] === colValue);
-                    });
-                    if (isComparison) {
-                        comparisonFilteredData = data.filter((item) => {
-                            return (isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
-                                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(getValidDate(item[`comparison_${pivot.rowField}`]) ?? 0, {
-                                    start: compRowValue,
-                                    end: subMilliseconds(compNextRowValue, 1),
-                                }));
-                        })
-                        : data.filter((item) => item[`comparison_${pivot.rowField}`] === compRowValue);
-                }
-                else {
-                    filteredData = isDateField(pivot.rowFieldType || '')
-                        ? data.filter((item) => {
-                            return isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
-                                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.sortField) {
-                const result = compareValues(a, b, pivot.sortField);
-                return pivot.sortDirection === 'ASC' ? result : -result;
-            }
-            else {
-                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) => 
-            // Big(sum)
-            //   .add(Big(parseFloat(item[valueField] ?? '0')))
-            //   .toNumber(),
-            sum + parseFloat(item[valueField] ?? '0'), 0);
-            if (isComparison) {
-                comparisonValue = data.reduce((sum, item) => 
-                // Big(sum)
-                //   .add(Big(parseFloat(item[`comparison_${valueField}`] ?? '0')))
-                //   .toNumber(),
-                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) => 
-                // Big(sum)
-                //   .add(Big(parseFloat(item[valueField] ?? '0')))
-                //   .toNumber(),
-                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) => 
-                    // Big(sum)
-                    //   .add(Big(parseFloat(item[`comparison_${valueField}`] ?? '0')))
-                    //   .toNumber(),
-                    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 },
-        ],
-    };
-}