@quillsql/react 2.13.7 → 2.13.9

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

@@ -3,21 +3,24 @@ import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from '
 import { ClientContext, SchemaDataContext } 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 { 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 { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
 import { QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
-import { isNumericColumnType, isTextColumnType, } from '../../components/ReportBuilder/ast';
+import { isTextColumnType } 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 { getCountsByColumns, getQueryDateRangeByColumns, getUniqueValuesByColumns, } from '../../utils/tableProcessing';
 import { generatePivotWithSQL } from '../../utils/pivotConstructor';
 import { getDateBucketFromRange } from '../../utils/dates';
 import Big from 'big.js';
-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, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, }) => {
+import equal from 'fast-deep-equal';
+import { uniqueValuesToStringMap } from '../../utils/filterProcessing';
+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, }) => {
     const [isLoading, setIsLoading] = useState(false);
+    const [previewLoading, setPreviewLoading] = useState(false);
     const [selectedPivotType, setSelectedPivotType] = useState('recommended');
     const [errors, setErrors] = useState([]);
     const [client] = useContext(ClientContext);
@@ -26,12 +29,16 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     const colFieldRef = useRef(null);
     const [pivotCardWidth, setPivotCardWidth] = useState(420);
     const [samplePivotTable, setSamplePivotTable] = useState(null);
+    const [hasNoRecommendedPivots, sethasNoRecommendedPivots] = useState(false);
+    const [isFetchingPivots, setIsFetchingPivots] = useState(false);
     const [allowedColumnFields, setAllowedColumnFields] = useState([]);
     const [allowedRowFields, setAllowedRowFields] = useState([]);
     const [allowedValueFields, setAllowedValueFields] = useState([]);
     const [uniqueValues, setUniqueValues] = useState(initialUniqueValues);
+    const buttonRef = useRef(null);
     const [dateRanges, setDateRanges] = useState({});
-    const getDistinctValues = async () => {
+    const [pivotError, setPivotError] = useState('');
+    const getDistinctValues = async (fetchDistinct) => {
         if (!client) {
             return {
                 possibleColumns: { rowFields: [], columnFields: [], valueFields: [] },
@@ -49,8 +56,11 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                 setAllowedValueFields(possibleColumns.valueFields);
                 return { possibleColumns, uniqueValues: {} };
             }
-            const { filteredColumns: smallStringColumns } = await getCountsByColumns(stringColumns, query || '', client, schemaData.customFields ?? []);
-            const newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, query || '', data.rows || [], client, schemaData.customFields ?? []);
+            let newUniqueValues = uniqueValues;
+            if (fetchDistinct || !uniqueValues) {
+                const { filteredColumns: smallStringColumns } = await getCountsByColumns(stringColumns, query || '', client, schemaData.customFields ?? []);
+                newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, query || '', data.rows || [], client, schemaData.customFields ?? []);
+            }
             if (!uniqueValues ||
                 hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
                 const possibleColumns = getPossiblePivotFieldOptions(columns, newUniqueValues || {});
@@ -75,7 +85,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             if (dateColumns.length === 0) {
                 return;
             }
-            const dateRangeByColumn = await getDateRangeByColumns(dateColumns, query || '', client, schemaData.customFields ?? []);
+            const dateRangeByColumn = await getQueryDateRangeByColumns(dateColumns, query || '', client, schemaData.customFields ?? []);
             setDateRanges(dateRangeByColumn || {});
         }
     };
@@ -113,9 +123,23 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     columnFieldType: columnsToShow[pivotColumnField || ''],
                     valueField: pivotValueField || '',
                     aggregationType: pivotAggregation || '',
+                    valueField2: pivotValueField2 || '',
                 };
-                const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, undefined, report, client, uniqueValues);
-                setSamplePivotTable({ pivot: pivot, rows, columns });
+                try {
+                    const { rows, columns } = await generatePivotTable({
+                        pivot,
+                        report,
+                        client,
+                        uniqueValues,
+                    });
+                    setSamplePivotTable({ pivot: pivot, rows, columns });
+                }
+                catch (e) {
+                    if (e instanceof Error) {
+                        setPivotError(e.message);
+                        return;
+                    }
+                }
             }
             if ((pivotRowField && data && columns) || initialSelectedPivotTable) {
                 getDistinctValues();
@@ -135,6 +159,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     columnFieldType: columnsToShow[pivotColumnField || ''],
                     valueField: pivotValueField || '',
                     aggregationType: pivotAggregation || '',
+                    valueField2: pivotValueField2 || '',
                 };
                 if (initialSelectedPivotTable) {
                     setSamplePivotTable({
@@ -144,8 +169,21 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     });
                 }
                 else {
-                    const { rows, columns } = await generatePivotTable(pivot, data, dateRange, false, -1, undefined, undefined, report, client, uniqueValues);
-                    setSamplePivotTable({ pivot: pivot, rows, columns });
+                    try {
+                        const { rows, columns } = await generatePivotTable({
+                            pivot,
+                            report,
+                            client,
+                            uniqueValues,
+                        });
+                        setSamplePivotTable({ pivot: pivot, rows, columns });
+                    }
+                    catch (e) {
+                        if (e instanceof Error) {
+                            setPivotError(e.message);
+                            return;
+                        }
+                    }
                 }
             }
         };
@@ -161,15 +199,16 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         }
     }, [initialSelectedPivotTable, columns, data, pivotRowField]);
     useEffect(() => {
-        if (!initialUniqueValues) {
-            return;
-        }
-        const possibleColumns = getPossiblePivotFieldOptions(columns, initialUniqueValues);
+        setAllowedFields(initialUniqueValues || {});
+        setUniqueValues(initialUniqueValues);
+    }, [initialUniqueValues, columns]);
+    const setAllowedFields = (uniqueValues) => {
+        const possibleColumns = getPossiblePivotFieldOptions(columns, uniqueValues);
         setAllowedRowFields(possibleColumns.rowFields);
         setAllowedColumnFields(possibleColumns.columnFields);
         setAllowedValueFields(possibleColumns.valueFields);
-        setUniqueValues(initialUniqueValues);
-    }, [initialUniqueValues, columns]);
+        return possibleColumns;
+    };
     const columnsToShow = useMemo(() => {
         return (columns || []).reduce((map, col) => {
             // only use columns shown in the report builder's table
@@ -188,15 +227,41 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                 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,
-            });
+            try {
+                const { rows, columns } = await generatePivotTable({
+                    pivot,
+                    report,
+                    client,
+                    uniqueValues,
+                });
+                setSelectedPivotTable({
+                    pivot: pivot,
+                    rows: rows,
+                    columns: columns,
+                });
+            }
+            catch (e) {
+                if (e instanceof Error) {
+                    setPivotError(e.message);
+                    return;
+                }
+            }
         };
         fetchPivotTables();
     }, [selectedPivotIndex, data, dateRange, createdPivots]);
+    const previousUniqueValuesRef = useRef();
+    useEffect(() => {
+        if (!uniqueValuesIsLoading &&
+            !equal(uniqueValues, previousUniqueValuesRef.current)) {
+            previousUniqueValuesRef.current = uniqueValues;
+            setRecommendedPivotTables([]);
+            setRecommendedPivots([]);
+            setCreatedPivotTables([]);
+            setCreatedPivots([]);
+            sethasNoRecommendedPivots(false);
+            refreshPivots();
+        }
+    }, [uniqueValuesIsLoading, uniqueValues]);
     const onSelectRecommendedPivot = (pivot, index) => {
         if (showEditOnPivotClick) {
             onEditPivot(pivot, index, 'recommended');
@@ -212,7 +277,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         setIsOpen(false);
     };
     const onSelectCreatedPivot = (pivot) => {
-        selectPivot(pivot, pivot.columnField ? uniqueValues : undefined, dateRanges[pivot.rowField || '']?.dateRange, samplePivotTable);
+        selectPivot(pivot, pivot.columnField ? uniqueValues : undefined, dateRanges[pivot.rowField || '']?.dateRange);
         setSelectedPivotType('created');
         setIsOpen(false);
         setPopUpTitle('Add pivot');
@@ -222,6 +287,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         setPivotRowField(pivot.rowField);
         setPivotColumnField(pivot.columnField);
         setPivotValueField(pivot.valueField);
+        setPivotValueField2(pivot.valueField2);
         setPivotAggregation(pivot.aggregationType);
         setShowUpdatePivot(true);
         if (pivotType === 'recommended' &&
@@ -235,9 +301,24 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             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;
+            try {
+                const { rows, columns } = await generatePivotTable({
+                    pivot,
+                    dateBucket,
+                    report,
+                    client,
+                    uniqueValues,
+                });
+                setSamplePivotTable({ pivot, rows, columns });
+                return;
+            }
+            catch (e) {
+                if (e instanceof Error) {
+                    setPivotError(e.message);
+                    setSamplePivotTable(null);
+                    return;
+                }
+            }
         }
         setSamplePivotTable(null);
     };
@@ -248,26 +329,33 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         if (!client) {
             return;
         }
-        if (isLoading ||
+        // don't fetch unique values separately if they are already being fetched
+        if (uniqueValuesIsLoading) {
+            setIsLoading(true);
+            return;
+        }
+        if (isFetchingPivots ||
             Object.keys(columnsToShow).length === 0 ||
             !pivotRecommendationsEnabled) {
             return;
         }
+        setIsFetchingPivots(true);
+        setPivotError('');
         setIsLoading(true);
-        let tempUniqueValues = uniqueValues;
+        let tempUniqueValues = uniqueValues || initialUniqueValues;
         let possibleColumns = {
             rowFields: allowedRowFields,
             columnFields: allowedColumnFields,
             valueFields: allowedValueFields,
         };
-        if ((allowedRowFields.length === 0 &&
-            allowedColumnFields.length === 0 &&
-            allowedValueFields.length === 0) ||
-            !uniqueValues) {
-            const distinctValues = await getDistinctValues();
+        if (!uniqueValues && !initialUniqueValues) {
+            const distinctValues = await getDistinctValues(true);
             possibleColumns = distinctValues.possibleColumns;
             tempUniqueValues = distinctValues.uniqueValues;
         }
+        else {
+            possibleColumns = setAllowedFields(uniqueValues || initialUniqueValues);
+        }
         const cloudBody = {
             pivotCountRequest,
             allowedRowFields: possibleColumns?.rowFields || [],
@@ -286,8 +374,12 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         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 cleanedPivots = recommendedPivots
+                .filter((pivot) => isValidPivot(pivot) &&
+                (!pivot.columnField || pivot.columnField !== pivot.rowField)) // only recommend valid pivots
+                .map((pivot) => {
+                if (pivot.columnField &&
+                    columnsToShow[pivot.columnField] === 'date') {
                     const columnField = pivot.columnField;
                     pivot.columnField = pivot.rowField;
                     pivot.rowField = columnField;
@@ -301,17 +393,42 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     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 };
+            const deduplicatedPivots = cleanedPivots
+                .filter((pivot, index, self) => index ===
+                self.findIndex((p) => p.rowField === pivot.rowField &&
+                    p.columnField === pivot.columnField &&
+                    p.valueField === pivot.valueField &&
+                    p.aggregationType === pivot.aggregationType))
+                .filter((pivot) => !createdPivots.some((created) => created.rowField === pivot.rowField &&
+                created.columnField === pivot.columnField &&
+                created.valueField === pivot.valueField &&
+                created.aggregationType === pivot.aggregationType));
+            setRecommendedPivots(deduplicatedPivots);
+            sethasNoRecommendedPivots(deduplicatedPivots.length === 0);
+            const trimmedUniqueValues = trimUniqueValues(tempUniqueValues, 6);
+            const pts = await Promise.all(deduplicatedPivots.map(async (p) => {
+                try {
+                    const { rows, columns } = await generatePivotTable({
+                        pivot: p,
+                        rowLimit: 6,
+                        report,
+                        client,
+                        uniqueValues: trimmedUniqueValues,
+                    });
+                    return { pivot: p, rows, columns };
+                }
+                catch (e) {
+                    return undefined;
+                }
             }));
-            setRecommendedPivotTables(pts);
+            setRecommendedPivotTables(pts.filter((pt) => pt !== undefined));
             setSelectedPivotIndex(-1);
         }
         catch (e) {
+            setPivotError('Failed to fetch pivot recommendations');
             console.error('Failed parsing pivotai response', e);
         }
+        setIsFetchingPivots(false);
         setIsLoading(false);
     }, [
         selectedTable,
@@ -322,16 +439,17 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         allowedColumnFields,
         allowedRowFields,
         allowedValueFields,
+        uniqueValuesIsLoading,
         columns,
     ]);
     const pivotFieldChange = async (field, value) => {
         setErrors([]);
-        setIsLoading(true);
         const pivot = {
             rowField: pivotRowField,
             rowFieldType: columnsToShow[pivotRowField],
             columnField: pivotColumnField,
             valueField: pivotValueField,
+            valueField2: pivotValueField2,
             aggregationType: pivotAggregation,
         };
         // @ts-ignore
@@ -344,52 +462,59 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             pivot.columnFieldType = columnsToShow[value];
         }
         if (!isValidPivot(pivot)) {
-            setIsLoading(false);
             setSamplePivotTable(null);
             return;
         }
+        setPreviewLoading(true);
         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);
+            try {
+                console.log('HELP: ', pivot);
+                const { rows, columns } = await generatePivotTable({
+                    pivot,
+                    rowLimit: 6, // limit previews
+                    dateBucket,
+                    report,
+                    client,
+                    uniqueValues,
+                });
+                setSamplePivotTable({ pivot, rows, columns });
+            }
+            catch (e) {
+                if (e instanceof Error) {
+                    setPivotError(e.message);
+                    setSamplePivotTable(null);
+                    return;
+                }
+            }
+            finally {
+                setPreviewLoading(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 };
+                try {
+                    const { rows, columns } = await generatePivotTable({
+                        pivot: p,
+                        rowLimit: 6,
+                        report,
+                        client,
+                        uniqueValues,
+                    });
+                    return { pivot: p, rows, columns };
+                }
+                catch (e) {
+                    return undefined;
+                }
             }));
-            setCreatedPivotTables(pts);
+            setCreatedPivotTables(pts.filter((pt) => pt !== undefined));
         };
         fetchPivotTables();
     }, [createdPivots, dateRange]);
@@ -409,22 +534,24 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             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 ||
-                                recommendedPivotTables.length === 0)) {
-                            refreshPivots();
-                        }
-                        setIsOpen(!isOpen);
-                        setShowUpdatePivot(false);
-                    }, label: triggerButtonText })), _jsx("div", { style: {
+                        } })) }), showTrigger && (_jsx("div", { ref: buttonRef, children: _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 &&
+                                pivotRecommendationsEnabled &&
+                                !hasNoRecommendedPivots &&
+                                (recommendedPivots.length === 0 ||
+                                    recommendedPivotTables.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) => {
@@ -433,7 +560,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                 setPopUpTitle('Add pivot');
                             }
                             setIsOpen(isOpen);
-                        }, popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
+                        }, ignoredRefs: [buttonRef], popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
                             ? popUpTitle
                             : 'Recommended pivots', popoverChildren: _jsx("div", { style: {
                                 paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
@@ -443,13 +570,14 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 20,
-                                }, children: [isLoading && _jsx(LoadingComponent, {}), samplePivotTable && !isLoading && (_jsx("div", { style: {
+                                }, children: [previewLoading && _jsx(LoadingComponent, {}), samplePivotTable && !previewLoading && (_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);
+                                                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) => {
@@ -457,7 +585,9 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                 setPivotRowField(e.target.value === ''
                                                                     ? undefined
                                                                     : e.target.value);
-                                                            }, options: allowedRowFields.map((field) => {
+                                                            }, options: allowedRowFields
+                                                                .filter((field) => field !== pivotColumnField)
+                                                                .map((field) => {
                                                                 return {
                                                                     label: snakeAndCamelCaseToTitleCase(field),
                                                                     value: field,
@@ -467,22 +597,14 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                 setPivotColumnField(e.target.value === ''
                                                                     ? undefined
                                                                     : e.target.value);
-                                                            }, options: allowedColumnFields.map((field) => {
+                                                            }, 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: "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,
-                                                            };
-                                                        }), isLoading: uniqueValuesIsLoading, width: 200 }), _jsx(SelectComponent, { id: "pivot-row-field", label: "Aggregation type", value: pivotAggregation, onChange: (e) => {
+                                                            }), 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)) {
@@ -493,10 +615,49 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                 ? undefined
                                                                 : e.target.value);
                                                         }, options: [
-                                                            ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
+                                                            ...[
+                                                                'sum',
+                                                                'average',
+                                                                'count',
+                                                                'max',
+                                                                'min',
+                                                                'percentage',
+                                                            ].map((option) => {
                                                                 return { label: option, value: option };
                                                             }),
-                                                        ], width: 200 })] })] }), _jsxs("div", { children: [_jsx(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                        ], 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') {
@@ -519,6 +680,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                             columnField: pivotColumnField,
                                                             columnFieldType: columnsToShow[pivotColumnField || ''],
                                                             valueField: pivotValueField || '',
+                                                            valueField2: pivotValueField2 || '',
                                                             aggregationType: pivotAggregation || '',
                                                         };
                                                         if (isValidPivot(pivot)) {
@@ -565,7 +727,27 @@ 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 ? (_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 }) }))] })) })) }) }) })] }) }));
+                                            }, 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: {
+                                                width: '100%',
+                                                height: '140px',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            }, children: pivotError })) : (_jsx("div", { children: !hasNoRecommendedPivots ||
+                                                createdPivotTables.length > 0 ? (_jsx(PivotList, { recommendedPivotTables: recommendedPivotTables.filter((pivotTable) => !createdPivots.some((created) => created.rowField ===
+                                                    pivotTable.pivot.rowField &&
+                                                    created.columnField ===
+                                                        pivotTable.pivot.columnField &&
+                                                    created.valueField ===
+                                                        pivotTable.pivot.valueField &&
+                                                    created.aggregationType ===
+                                                        pivotTable.pivot.aggregationType)), 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 })) : (_jsx("div", { style: {
+                                                    width: '100%',
+                                                    height: '140px',
+                                                    display: 'flex',
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                }, children: "No valid pivots returned" })) }))] })) })) }) }) })] }) }));
 };
 export function generatePivotTableYAxis(pivot, cols, yAxisField) {
     // For count aggregations, use 'count' for the label
@@ -602,10 +784,18 @@ function castValueToDate(value) {
     if (!value) {
         return null;
     }
+    let dateStr = value;
     if (typeof value === 'object' && value.value) {
-        return new Date(value.value);
+        dateStr = value.value;
+    }
+    if (dateStr instanceof Date) {
+        return dateStr;
     }
-    return new Date(value);
+    const parsed = parseISO(dateStr);
+    if (isValid(parsed)) {
+        return parsed;
+    }
+    return new Date(dateStr);
 }
 function getLatestDate(a, b) {
     return a > b ? a : b;
@@ -619,11 +809,11 @@ export function getDateRange(dateRange, column, data) {
     const maxDate = new Date(currentTime + ONE_CENTURY_IN_MILLISECONDS);
     const minDate = new Date(0);
     if (!dateRange) {
-        if (data.length == 0 || !data[0][column]) {
+        if (data.length == 0) {
             return { start: new Date(), end: new Date() };
         }
-        const firstDate = castValueToDate(data[0][column]);
         if (data.length == 1) {
+            const firstDate = castValueToDate(data[0][column]);
             return {
                 start: firstDate || new Date(),
                 end: firstDate || new Date(),
@@ -632,12 +822,19 @@ export function getDateRange(dateRange, column, data) {
         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;
+            earliestDate =
+                value && value > minDate
+                    ? earliestDate
+                        ? getEarliestDate(earliestDate, value)
+                        : value
+                    : earliestDate;
+            latestDate =
+                value && value < maxDate
+                    ? latestDate
+                        ? getLatestDate(latestDate, value)
+                        : value
+                    : latestDate;
         }
         if (!earliestDate || !latestDate) {
             return {
@@ -683,6 +880,19 @@ function determineIntervalThroughOverride(dateBucket, dateRange) {
             return eachMonthOfInterval(dateRange);
     }
 }
+// function to that takes in a uniqueValues obj and trims the number of unique values per column
+function trimUniqueValues(obj, limit) {
+    const trimmedObj = {};
+    Object.keys(obj).forEach((key) => {
+        const values = obj[key] ? Object.keys(obj[key]) : [];
+        const limitedValues = values.slice(0, limit);
+        trimmedObj[key] = limitedValues.reduce((acc, curr) => {
+            acc[curr] = obj[key] ? (obj[key][curr] ?? false) : false;
+            return acc;
+        }, {});
+    });
+    return trimmedObj;
+}
 export function getDateBuckets(dateRange, column, data, dateBucket) {
     if (!dateRange) {
         if (dateBucket) {
@@ -800,26 +1010,25 @@ const fixBigQueryData = (data = []) => {
     }
     return newData;
 };
-export async function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = undefined, dateBucket, report, client, uniqueValues) {
+export async function generatePivotTable({ pivot, rowLimit = -1, dateBucket, report, client, uniqueValues, }) {
     try {
-        if (report && report.rowCount && report.rowCount !== data.length) {
+        if (report && report.rowCount != null) {
+            // rowCount can be 0 (could mean still loading in), loose equality check for undefined as well
             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;
-            }
+                : undefined, rowLimit === -1 ? undefined : rowLimit);
+            return pivotTable;
         }
     }
     catch (e) {
-        console.error('Error generating pivot table with SQL, using in memory process', e);
+        throw Error(`Failed to generate pivot table with SQL: ${e}`);
     }
-    return generatePivotTableInMemory(pivot, data, dateRange, isComparison, rowLimit, compRange);
+    throw Error('Failed to generate pivot table: invalid report');
 }
-export function generatePivotTableInMemory(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = undefined, dateBucket) {
+export function generatePivotTableInMemory(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = undefined, dateBucket, uniqueValues) {
     // If there is no rowField, aggregate on the valueField
     if (!pivot.rowField) {
         return valueFieldAggregation(data, pivot.valueField, pivot.aggregationType, isComparison);
@@ -837,9 +1046,15 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
         compRange = undefined;
     }
     const pivotRows = [];
+    const uniqueValuesMap = uniqueValuesToStringMap(uniqueValues || {});
     const uniqueRows = (isDateField(pivot.rowFieldType || '')
         ? getDateBuckets(dateRange, pivot.rowField, data, dateBucket)
-        : [...new Set(data.map((item) => item[pivot.rowField || '']))]).filter((row) => Boolean(row));
+        : 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
@@ -847,8 +1062,10 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
     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));
+            : 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 = {};
@@ -881,7 +1098,9 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
         }
         compUniqueRows = (isDateField(pivot.rowFieldType || '')
             ? getCompDateBuckets(dateRange, compRange ?? dateRange, pivot.rowField, data)
-            : [...new Set(data.map((item) => item[pivot.rowField || '']))]).filter((row) => Boolean(row));
+            : (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 &&
@@ -893,7 +1112,7 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
         }
     }
     const rowsToGenerate = rowLimit !== -1 && rowLimit <= uniqueRows.length
-        ? uniqueRows.slice(0, rowLimit + 1)
+        ? uniqueRows.slice(0, rowLimit)
         : uniqueRows;
     rowsToGenerate.forEach((rowValue, rowIndex) => {
         const row = {
@@ -929,22 +1148,22 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
                 if (isDateField(pivot.columnFieldType || '') &&
                     isDateField(pivot.rowFieldType || '')) {
                     filteredData = data.filter((item) => {
-                        return (isWithinInterval(new Date(item[pivot.rowField || '']), {
+                        return (isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
                             start: rowValue,
                             end: subMilliseconds(nextRowValue, 1),
                         }) &&
-                            isWithinInterval(new Date(item[pivot.columnField]), {
+                            isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
                                 start: colValue,
                                 end: subMilliseconds(nextColumnValue, 1),
                             }));
                     });
                     if (isComparison) {
                         comparisonFilteredData = data.filter((item) => {
-                            return (isWithinInterval(new Date(item[pivot.rowField || '']), {
+                            return (isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
                                 start: rowValue,
                                 end: subMilliseconds(nextRowValue, 1),
                             }) &&
-                                isWithinInterval(new Date(item[pivot.columnField]), {
+                                isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
                                     start: colValue,
                                     end: subMilliseconds(nextColumnValue, 1),
                                 }));
@@ -955,7 +1174,7 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
                     !isDateField(pivot.rowFieldType || '')) {
                     filteredData = data.filter((item) => {
                         return (item[pivot.rowField || ''] === rowValue &&
-                            isWithinInterval(new Date(item[pivot.columnField]), {
+                            isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
                                 start: colValue,
                                 end: subMilliseconds(nextColumnValue, 1),
                             }));
@@ -963,7 +1182,7 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
                     if (isComparison) {
                         comparisonFilteredData = data.filter((item) => {
                             return (item[`comparison_${pivot.rowField}`] === rowValue &&
-                                isWithinInterval(new Date(item[pivot.columnField]), {
+                                isWithinInterval(getValidDate(item[pivot.columnField || '']) ?? 0, {
                                     start: colValue,
                                     end: subMilliseconds(nextColumnValue, 1),
                                 }));
@@ -973,14 +1192,14 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
                 else if (!isDateField(pivot.columnFieldType || '') &&
                     isDateField(pivot.rowFieldType || '')) {
                     filteredData = data.filter((item) => {
-                        return (isWithinInterval(new Date(item[pivot.rowField || '']), {
+                        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(new Date(item[pivot.rowField || '']), {
+                            return (isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
                                 start: rowValue,
                                 end: subMilliseconds(nextRowValue, 1),
                             }) &&
@@ -1009,7 +1228,7 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
                     filteredData = isDateField(pivot.rowFieldType || '')
                         ? data.filter((item) => {
                             return (compRowValue &&
-                                isWithinInterval(new Date(item[`comparison_${pivot.rowField}`]), {
+                                isWithinInterval(getValidDate(item[`comparison_${pivot.rowField}`]) ?? 0, {
                                     start: compRowValue,
                                     end: subMilliseconds(compNextRowValue, 1),
                                 }));
@@ -1019,7 +1238,7 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
                 else {
                     filteredData = isDateField(pivot.rowFieldType || '')
                         ? data.filter((item) => {
-                            return isWithinInterval(new Date(item[pivot.rowField || '']), {
+                            return isWithinInterval(getValidDate(item[pivot.rowField || '']) ?? 0, {
                                 start: rowValue,
                                 end: subMilliseconds(nextRowValue, 1),
                             });
@@ -1145,24 +1364,11 @@ export function generatePivotTableInMemory(pivot, data, dateRange, isComparison,
     ];
     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]);
+            if (pivot.sortField) {
+                const result = compareValues(a, b, pivot.sortField);
+                return pivot.sortDirection === 'ASC' ? result : -result;
             }
             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]);
             }
         });