@quillsql/react 2.14.16 → 2.15.0

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from 'react';
-import { ClientContext, FetchContext, SchemaDataContext, TenantContext, } from '../../Context';
+import { ClientContext, EventTrackingContext, FetchContext, SchemaDataContext, TenantContext, } from '../../Context';
 import { PivotList, PivotCard } from './PivotList';
 import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, 
 // endOfDay,
@@ -14,7 +14,7 @@ import {
 // getValidDate,
 valueFormatter, } from '../../utils/valueFormatter';
 import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
-import { MemoizedDeleteButton, MemoizedSubHeader, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
+import { MemoizedDeleteButton, MemoizedSubHeader, OverflowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, } from '../../components/UiComponents';
 import { QuillCard } from '../../components/QuillCard';
 import { cleanPivot, getPossiblePivotFieldOptions, isValidPivot, } from '../../utils/pivotProcessing';
 import { hashCode } from '../../utils/crypto';
@@ -23,7 +23,7 @@ import { generatePivotWithSQL } from '../../utils/pivotConstructor';
 import { getDateBucketFromRange } from '../../utils/dates';
 import equal from 'fast-deep-equal';
 import { isStringType } from '../../utils/columnProcessing';
-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, }) => {
+export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotAggregations, setPivotAggregations, pivotSort, setPivotSort, pivotLimit, setPivotLimit, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, TextInputComponent, 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, parentRef, heightAdjustment = 0, }) => {
     const { getToken, quillFetchWithToken } = useContext(FetchContext);
     const [isLoading, setIsLoading] = useState(false);
     const [previewLoading, setPreviewLoading] = useState(false);
@@ -33,6 +33,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     const [client] = useContext(ClientContext);
     const [schemaData] = useContext(SchemaDataContext);
     const { tenants } = useContext(TenantContext);
+    const { eventTracking } = useContext(EventTrackingContext);
     const rowFieldRef = useRef(null);
     const colFieldRef = useRef(null);
     const [pivotCardWidth, setPivotCardWidth] = useState(420);
@@ -47,6 +48,15 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     // const percentageAggButtonRef = useRef<HTMLDivElement>(null);
     const [dateRanges, setDateRanges] = useState({});
     const [pivotError, setPivotError] = useState('');
+    const [limitInput, setLimitInput] = useState(pivotLimit?.toString() ?? '100');
+    const [sortFieldInput, setSortFieldInput] = useState(pivotSort?.sortField ?? '');
+    const [sortDirectionInput, setSortDirectionInput] = useState(pivotSort?.sortDirection ?? 'ASC');
+    const [showLimitInput, setShowLimitInput] = useState(!!pivotLimit);
+    const [showSortInput, setShowSortInput] = useState(!!pivotSort);
+    const [availableHeight, setAvailableHeight] = useState(0);
+    const [pivotModalTopHeight, setPivotModalTopHeight] = useState(450);
+    const [popoverPosition, setPopoverPosition] = useState('bottom');
+    const popoverRef = useRef(null);
     const getDistinctValues = async (fetchDistinct) => {
         if (!client) {
             return {
@@ -67,7 +77,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             }
             let newUniqueValues = uniqueValues ?? null;
             if (fetchDistinct || !uniqueValues) {
-                const { filteredColumns: smallStringColumns, exceededColumns } = await getCountsByColumns(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, dashboardName);
+                const { filteredColumns: smallStringColumns, exceededColumns } = await getCountsByColumns(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, eventTracking, dashboardName);
                 newUniqueValues = await getUniqueValuesByQuery({
                     columns: smallStringColumns,
                     query: query || '',
@@ -76,6 +86,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     tenants,
                     customFields: schemaData.customFields ?? {},
                     dashboardName,
+                    eventTracking,
                 });
                 exceededColumns?.forEach((column) => {
                     if (newUniqueValues) {
@@ -107,7 +118,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             if (dateColumns.length === 0) {
                 return;
             }
-            const dateRangeByColumn = await getQueryDateRangeByColumns(dateColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, dashboardName);
+            const dateRangeByColumn = await getQueryDateRangeByColumns(dateColumns, query || '', client, getToken, tenants, eventTracking, schemaData.customFields ?? {}, dashboardName);
             setDateRanges(dateRangeByColumn || {});
         }
     };
@@ -173,10 +184,22 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                         }, // limit preview
                         getToken,
+                        eventTracking,
                     });
                     setSamplePivotTable({ pivot: pivot, rows, columns });
                 }
                 catch (e) {
+                    eventTracking?.logError?.({
+                        type: 'bug', // TODO: determine type
+                        severity: 'high',
+                        message: 'Error fetching pivot data',
+                        errorMessage: e.message,
+                        errorStack: e.stack,
+                        errorData: {
+                            caller: 'PivotModal',
+                            function: 'fetchPivotData',
+                        },
+                    });
                     if (e instanceof Error) {
                         setPivotError(e.message);
                         return;
@@ -234,10 +257,22 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                 page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                             }, // limit preview
                             getToken,
+                            eventTracking,
                         });
                         setSamplePivotTable({ pivot: pivot, rows, columns });
                     }
                     catch (e) {
+                        eventTracking?.logError?.({
+                            type: 'bug', // TODO: determine type
+                            severity: 'high',
+                            message: 'Error fetching pivot data',
+                            errorMessage: e.message,
+                            errorStack: e.stack,
+                            errorData: {
+                                caller: 'PivotModal',
+                                function: 'fetchPivotData',
+                            },
+                        });
                         if (e instanceof Error) {
                             setPivotError(e.message);
                             return;
@@ -305,6 +340,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                     }, // limit preview
                     getToken,
+                    eventTracking,
                 });
                 setSelectedPivotTable({
                     pivot: pivot,
@@ -313,6 +349,17 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                 });
             }
             catch (e) {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error fetching pivot tables',
+                    errorMessage: e.message,
+                    errorStack: e.stack,
+                    errorData: {
+                        caller: 'PivotModal',
+                        function: 'fetchPivotTables',
+                    },
+                });
                 if (e instanceof Error) {
                     setPivotError(e.message);
                     return;
@@ -361,8 +408,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         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.valueField &&
+            p.aggregationType !== 'count' &&
+            p.aggregationType !== 'percentage')) {
+            errors.push("Value field cannot be empty when aggregation is not 'count' or 'percentage'");
         }
         if (pivotAggregations.some((p) => !p.aggregationType)) {
             errors.push('Aggregation cannot be empty');
@@ -373,8 +422,18 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         if (pivotColumnField && !columnsToShow[pivotColumnField]) {
             errors.push('Error in column field: undefined type');
         }
+        if (showLimitInput && limitInput && !Number.isInteger(Number(limitInput))) {
+            errors.push('Limit must be an integer');
+        }
         if (errors.length === 0 &&
-            pivotAggregations?.every((p) => p.aggregationType && (p.valueField || p.aggregationType === 'count'))) {
+            pivotAggregations?.every((p) => p.aggregationType &&
+                (p.valueField ||
+                    p.aggregationType === 'count' ||
+                    p.aggregationType === 'percentage'))) {
+            const sort = showSortInput && !!sortFieldInput && !!sortDirectionInput;
+            const sortField = sort ? sortFieldInput : undefined;
+            const sortDirection = sort ? sortDirectionInput : undefined;
+            const rowLimit = showLimitInput && limitInput ? Number(limitInput) : undefined;
             const pivot = {
                 rowField: pivotRowField,
                 rowFieldType: columnTypes[pivotRowField ?? ''],
@@ -387,6 +446,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                     valueField2Type: columnTypes[p.valueField2 ?? ''],
                     aggregationType: p.aggregationType,
                 })),
+                sort,
+                sortField,
+                sortDirection,
+                rowLimit,
                 // For backwards compatibility
                 valueField: pivotAggregations?.[0]?.valueField,
                 valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
@@ -407,7 +470,16 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             }
         }
         setErrors(errors);
-    }, [pivotRowField, pivotColumnField, pivotAggregations]);
+    }, [
+        pivotRowField,
+        pivotColumnField,
+        pivotAggregations,
+        sortFieldInput,
+        sortDirectionInput,
+        showSortInput,
+        showLimitInput,
+        limitInput,
+    ]);
     const onEditPivot = async (pivot, index, pivotType) => {
         setIsLoading(false);
         setErrors([]);
@@ -440,11 +512,23 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                     }, // limit preview
                     getToken,
+                    eventTracking,
                 });
                 setSamplePivotTable({ pivot, rows, columns });
                 return;
             }
             catch (e) {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error fetching pivot data',
+                    errorMessage: e.message,
+                    errorStack: e.stack,
+                    errorData: {
+                        caller: 'PivotModal',
+                        function: 'onEditPivot',
+                    },
+                });
                 if (e instanceof Error) {
                     setPivotError(e.message);
                     setSamplePivotTable(null);
@@ -554,10 +638,22 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                         }, // limit preview
                         getToken,
+                        eventTracking,
                     });
                     return { pivot: p, rows, columns };
                 }
                 catch (e) {
+                    eventTracking?.logError?.({
+                        type: 'bug', // TODO: determine type
+                        severity: 'high',
+                        message: 'Error fetching pivot data',
+                        errorMessage: e.message,
+                        errorStack: e.stack,
+                        errorData: {
+                            caller: 'PivotModal',
+                            function: 'refreshPivots',
+                        },
+                    });
                     return undefined;
                 }
             }));
@@ -581,6 +677,17 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             setSelectedPivotIndex(-1);
         }
         catch (e) {
+            eventTracking?.logError?.({
+                type: 'bug', // TODO: determine type
+                severity: 'high',
+                message: 'Error fetching pivot recommendations',
+                errorMessage: e.message,
+                errorStack: e.stack,
+                errorData: {
+                    caller: 'PivotModal',
+                    function: 'refreshPivots',
+                },
+            });
             setPivotError('Failed to fetch pivot recommendations');
             console.error('Failed parsing pivotai response', e);
         }
@@ -604,7 +711,11 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             return;
         }
         if (typeof value !== 'string' &&
-            value.some((p) => !p?.valueField && (p?.aggregationType !== 'count' || !pivotRowField))) {
+            value.some((p) => !p?.valueField &&
+                ((p?.aggregationType !== 'count' &&
+                    p?.aggregationType !== 'percentage') ||
+                    (p?.aggregationType === 'percentage' &&
+                        (!pivotRowField || pivotColumnField))))) {
             return;
         }
         setErrors([]);
@@ -693,10 +804,22 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                     }, // limit preview
                     getToken,
+                    eventTracking,
                 });
                 setSamplePivotTable({ pivot, rows, columns });
             }
             catch (e) {
+                eventTracking?.logError?.({
+                    type: 'bug', // TODO: determine type
+                    severity: 'high',
+                    message: 'Error fetching pivot data',
+                    errorMessage: e.message,
+                    errorStack: e.stack,
+                    errorData: {
+                        caller: 'PivotModal',
+                        function: 'pivotFieldChange',
+                    },
+                });
                 if (e instanceof Error) {
                     console.log('error', e);
                     setPivotError(e.message);
@@ -727,10 +850,22 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
                         },
                         getToken,
+                        eventTracking,
                     });
                     return { pivot: p, rows, columns };
                 }
                 catch (e) {
+                    eventTracking?.logError?.({
+                        type: 'bug', // TODO: determine type
+                        severity: 'high',
+                        message: 'Error fetching pivot data',
+                        errorMessage: e.message,
+                        errorStack: e.stack,
+                        errorData: {
+                            caller: 'PivotModal',
+                            function: 'fetchPivotTables',
+                        },
+                    });
                     return undefined;
                 }
             }));
@@ -738,6 +873,58 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         };
         fetchPivotTables();
     }, [createdPivots, dateRange]);
+    const handleResize = () => {
+        const parentRefElement = parentRef?.current;
+        const popoverRefElement = popoverRef?.current;
+        if (parentRefElement && popoverRefElement) {
+            const parentRect = parentRefElement.getBoundingClientRect();
+            const popoverRect = popoverRefElement.getBoundingClientRect();
+            const topOffset = popoverRect.top - parentRect.top;
+            const availableHeight = parentRect.height - topOffset;
+            setAvailableHeight(availableHeight);
+            calculatePopoverPosition();
+        }
+    };
+    const calculatePopoverPosition = () => {
+        if (!buttonRef.current)
+            return;
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        const parentRefElement = parentRef?.current;
+        if (!parentRefElement)
+            return;
+        const parentRect = parentRefElement.getBoundingClientRect();
+        // Calculate available space above and below
+        const spaceBelow = parentRect.bottom - buttonRect.bottom;
+        const spaceAbove = buttonRect.top - parentRect.top;
+        const desiredHeight = Math.max(450, spaceAbove - 20);
+        setPivotModalTopHeight(desiredHeight);
+        // If there's not enough space below but more space above, position above
+        if (spaceBelow < desiredHeight && spaceAbove > desiredHeight) {
+            setPopoverPosition('top');
+        }
+        else {
+            setPopoverPosition('bottom');
+        }
+    };
+    useEffect(() => {
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        // Add scroll listener to the parent element if it exists
+        const parentElement = parentRef?.current;
+        if (parentElement) {
+            parentElement.addEventListener('scroll', handleResize);
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (parentElement) {
+                parentElement.removeEventListener('scroll', handleResize);
+            }
+        };
+    }, [
+        parentRef?.current,
+        popoverRef?.current,
+        buttonRef?.current?.getBoundingClientRect().top,
+    ]);
     return (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
                 position: 'relative',
                 display: 'inline-block',
@@ -772,9 +959,15 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             }
                             setIsOpen(!isOpen);
                             setShowUpdatePivot(false);
-                        }, label: triggerButtonText }) })), _jsx("div", { style: {
-                        position: 'relative',
-                        ...(isOpen && showTrigger && { top: 12 }),
+                        }, label: triggerButtonText }) })), _jsx("div", { ref: popoverRef, style: {
+                        position: 'absolute', // Change from 'relative' to 'absolute'
+                        ...(isOpen &&
+                            showTrigger && {
+                            top: popoverPosition === 'bottom' ? '100%' : 'auto',
+                            bottom: popoverPosition === 'top' ? '100%' : 'auto',
+                            marginBottom: popoverPosition === 'top' ? pivotModalTopHeight : 0,
+                            marginTop: popoverPosition === 'bottom' ? 8 : 0,
+                        }),
                     }, children: _jsx(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
                             if (!isOpen) {
                                 setShowUpdatePivot(false);
@@ -783,7 +976,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             setIsOpen(isOpen);
                         }, ignoredRefs: [buttonRef], popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
                             ? popUpTitle
-                            : 'Recommended pivots', popoverChildren: _jsx("div", { style: {
+                            : 'Recommended pivots', horizontalPadding: 0, titlePaddingLeft: 20, popoverChildren: _jsx("div", { style: {
                                 paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
                                 position: 'relative',
                             }, children: showUpdatePivot || !pivotRecommendationsEnabled ? (_jsxs("div", { style: {
@@ -791,155 +984,241 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 20,
-                                }, 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: () => {
-                                                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',
-                                                                        '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: {
+                                    position: 'relative',
+                                    height: '100%',
+                                    overflow: 'auto',
+                                }, children: [_jsx(OverflowContainer, { style: {
+                                            height: popoverPosition === 'bottom'
+                                                ? Math.max(availableHeight - heightAdjustment, 250)
+                                                : pivotModalTopHeight - 140,
+                                        }, children: _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                paddingLeft: 20,
+                                                paddingRight: 20,
+                                            }, children: [previewLoading && _jsx(LoadingComponent, {}), samplePivotTable && !previewLoading && (_jsx("div", { style: {
+                                                        width: pivotCardWidth,
+                                                        // minHeight: 160,
+                                                        paddingBottom: 20,
+                                                    }, 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: () => {
+                                                            setPivotAggregations([
+                                                                {
+                                                                    valueField: undefined,
+                                                                    valueField2: undefined,
+                                                                    aggregationType: undefined,
+                                                                },
+                                                            ]);
+                                                            setPivotRowField(undefined);
+                                                            setPivotColumnField(undefined);
+                                                            setSamplePivotTable(undefined);
+                                                            setPivotSort(undefined);
+                                                            setPivotLimit(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,
+                                                                paddingBottom: 20,
+                                                            }, 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) => {
+                                                                                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',
+                                                                                    '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',
+                                                        paddingBottom: 20,
+                                                    }, children: _jsx(SecondaryButtonComponent, { label: "Add Aggregation", onClick: () => {
+                                                            setPivotAggregations([
+                                                                ...pivotAggregations,
+                                                                {
+                                                                    aggregationType: undefined,
+                                                                    valueField: undefined,
+                                                                    valueField2: undefined,
+                                                                },
+                                                            ]);
+                                                        } }) }), _jsx(PivotColumnContainer, { children: _jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            gap: 4,
+                                                            paddingBottom: 20,
+                                                        }, children: [_jsx(HeaderComponent, { label: "Sort" }), !showSortInput ? (_jsx("div", { style: { width: 200 }, children: _jsx(SecondaryButtonComponent, { onClick: () => setShowSortInput(true), disabled: disabled, label: "Add Sort" }) })) : (_jsxs("div", { children: [_jsxs(PivotRowContainer, { children: [_jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Sort Field" }) }), _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Sort Direction" }) })] }), _jsxs(PivotRowContainer, { children: [_jsx(SelectComponent, { id: "pivot-sort-field", value: sortFieldInput, onChange: (e) => {
+                                                                                    setSortFieldInput(e.target.value);
+                                                                                    if (e.target.value &&
+                                                                                        sortDirectionInput) {
+                                                                                        setPivotSort({
+                                                                                            sortField: e.target.value,
+                                                                                            sortDirection: sortDirectionInput,
+                                                                                        });
+                                                                                    }
+                                                                                }, options: (samplePivotTable?.columns ?? []).map((column) => ({
+                                                                                    label: snakeAndCamelCaseToTitleCase(column.field),
+                                                                                    value: column.field,
+                                                                                })), width: 200 }), _jsx(SelectComponent, { id: "pivot-sort-direction", value: sortDirectionInput, onChange: (e) => {
+                                                                                    setSortDirectionInput(e.target.value);
+                                                                                    if (sortFieldInput && e.target.value) {
+                                                                                        setPivotSort({
+                                                                                            sortField: sortFieldInput,
+                                                                                            sortDirection: e.target.value,
+                                                                                        });
+                                                                                    }
+                                                                                }, options: [
+                                                                                    { label: 'Ascending', value: 'ASC' },
+                                                                                    { label: 'Descending', value: 'DESC' },
+                                                                                ], hideEmptyOption: true, width: 200 }), _jsx("div", { style: {
+                                                                                    marginLeft: -16,
+                                                                                    marginRight: -16,
+                                                                                }, children: _jsx(DeleteButtonComponent, { onClick: () => {
+                                                                                        if (pivotSort !== undefined) {
+                                                                                            setPivotSort(undefined);
+                                                                                        }
+                                                                                        setShowSortInput(false);
+                                                                                        setSortFieldInput('');
+                                                                                        setSortDirectionInput('ASC');
+                                                                                    } }) })] })] }))] }) }), _jsx(PivotColumnContainer, { children: _jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            gap: 4,
+                                                            paddingBottom: 20,
+                                                        }, children: [_jsx(HeaderComponent, { label: "Limit" }), !showLimitInput ? (_jsx("div", { style: { width: 200 }, children: _jsx(SecondaryButtonComponent, { onClick: () => setShowLimitInput(true), disabled: disabled, label: "Add Limit" }) })) : (_jsxs("div", { children: [_jsx(PivotRowContainer, { children: _jsx("div", { style: { width: 200 }, children: _jsx(SubheaderComponent, { label: "Pivot row limit" }) }) }), _jsxs(PivotRowContainer, { children: [_jsx(TextInputComponent, { id: "pivot-limit", value: limitInput, width: 180, onChange: (e) => {
+                                                                                    setLimitInput(e.target.value);
+                                                                                    const limit = parseInt(e.target.value);
+                                                                                    if (limit) {
+                                                                                        setPivotLimit(limit);
+                                                                                    }
+                                                                                    else {
+                                                                                        setPivotLimit(undefined);
+                                                                                    }
+                                                                                } }), _jsx("div", { style: {
+                                                                                    marginLeft: -16,
+                                                                                    marginRight: -16,
+                                                                                }, children: _jsx(DeleteButtonComponent, { onClick: () => {
+                                                                                        if (pivotLimit !== undefined) {
+                                                                                            setPivotLimit(undefined);
+                                                                                        }
+                                                                                        setShowLimitInput(false);
+                                                                                        setLimitInput('100');
+                                                                                    } }) })] })] }))] }) }), errors.length > 0 && (_jsx("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 8,
+                                                        paddingTop: 8,
+                                                        width: pivotCardWidth,
+                                                        maxWidth: pivotCardWidth,
+                                                        paddingBottom: 20,
+                                                    }, children: errors.map((error, index) => (_jsx(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) }))] }) }), _jsxs("div", { style: {
+                                            position: 'sticky',
                                             display: 'flex',
                                             flexDirection: 'row',
+                                            justifyContent: 'flex-end',
                                             marginLeft: 'auto',
                                             gap: 8,
+                                            bottom: 0,
+                                            right: 0,
+                                            backgroundColor: 'white',
+                                            width: '100%',
+                                            paddingRight: 20,
                                         }, 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) ||
+                                                }, label: "Cancel" }), _jsx(ButtonComponent, { id: "custom-button", onClick: onCommitPivot, label: 'Save', disabled: (showSortInput &&
+                                                    (!sortFieldInput ||
+                                                        !(samplePivotTable?.columns ?? []).some((c) => c.field === sortFieldInput) ||
+                                                        !sortDirectionInput)) ||
+                                                    !(pivotAggregations?.length > 0) ||
                                                     pivotAggregations.some((agg) => !agg.aggregationType ||
                                                         (!agg.valueField &&
-                                                            agg.aggregationType !== 'count')) })] })] })) : (_jsx("div", { style: {
+                                                            agg.aggregationType !== 'count' &&
+                                                            (agg.aggregationType !== 'percentage' ||
+                                                                !pivotRowField ||
+                                                                pivotColumnField))) })] })] })) : (_jsx("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     fontFamily: theme?.fontFamily,
                                     color: theme?.primaryTextColor,
                                     width: selectedPivotTable ? 500 : 600,
-                                    maxHeight: 600,
+                                    minHeight: pivotModalTopHeight - 100,
+                                    maxHeight: popoverPosition === 'bottom'
+                                        ? 600
+                                        : pivotModalTopHeight - 100,
                                     overflowY: 'scroll',
+                                    paddingRight: 20,
+                                    paddingLeft: 20,
                                 }, children: selectedPivotIndex >= 0 ? (_jsx("div", { children: _jsx("div", { onClick: () => {
                                             setPopUpTitle('Edit pivot');
                                             onEditPivot(createdPivots[0], 0);
@@ -953,6 +1232,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 8,
+                                                paddingRight: 20,
                                             }, 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',
@@ -1004,7 +1284,7 @@ export function generatePivotTitle(pivot) {
         return snakeAndCamelCaseToTitleCase(`${pivot.aggregations[0].aggregationType} of ${pivot.aggregations[0].valueField}
       `);
     }
-    return snakeAndCamelCaseToTitleCase(`${pivot.aggregations?.[0]?.aggregationType ?? 'Aggregation'} of ${pivot.aggregations?.[0]?.valueField ?? 'value'} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
+    return snakeAndCamelCaseToTitleCase(`${pivot.aggregations?.[0]?.aggregationType ?? 'Aggregation'} of ${pivot.aggregations?.[0]?.valueField ?? 'value'}${pivot.rowField ? ` by ${pivot.rowField}` : ''}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
 }
 function castValueToDate(value) {
     if (!value) {
@@ -1245,7 +1525,7 @@ export function isDateField(fieldType) {
 //   }
 //   return newData;
 // };
-export async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
+export async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, eventTracking, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
     try {
         if (report && client) {
             const pivotTable = await generatePivotWithSQL({
@@ -1268,6 +1548,17 @@ export async function generatePivotTable({ pivot, dateBucket, dateFilter, report
         }
     }
     catch (e) {
+        eventTracking?.logError?.({
+            type: 'bug', // TODO: determine type
+            severity: 'high',
+            message: 'Error generating pivot table',
+            errorMessage: e.message,
+            errorStack: e.stack,
+            errorData: {
+                caller: 'PivotModal',
+                function: 'generatePivotTable',
+            },
+        });
         throw Error(`Failed to generate pivot table with SQL: ${e}`);
     }
     throw Error('Failed to generate pivot table: invalid report');