@quillsql/react 2.15.2 → 2.15.4

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

@@ -1,1565 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from 'react';
-import { ClientContext, EventTrackingContext, FetchContext, SchemaDataContext, TenantContext, } from '../../Context';
-import { PivotList, PivotCard } from './PivotList';
-import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, 
-// endOfDay,
-isValid, 
-// isWithinInterval,
-parseISO,
-// subMilliseconds,
- } from 'date-fns';
-import { 
-// compareValues,
-// getValidDate,
-valueFormatter, } from '../../utils/valueFormatter';
-import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
-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';
-import { getCountsByColumns, getQueryDateRangeByColumns, getUniqueValuesByQuery, } from '../../utils/tableProcessing';
-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, 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);
-    // const [showPercentageAggPopover, setShowPercentageAggPopover] = useState<number | undefined>(undefined);
-    const [selectedPivotType, setSelectedPivotType] = useState('recommended');
-    const [errors, setErrors] = useState([]);
-    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);
-    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 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 {
-                possibleColumns: { rowFields: [], columnFields: [], valueFields: [] },
-                uniqueValues: {},
-            };
-        }
-        if (columns && query) {
-            const stringColumns = columns.filter((column) => {
-                return isStringType(column.fieldType);
-            });
-            if (stringColumns.length === 0) {
-                const possibleColumns = getPossiblePivotFieldOptions(columns, {});
-                setAllowedRowFields(possibleColumns.rowFields);
-                setAllowedColumnFields(possibleColumns.columnFields);
-                setAllowedValueFields(possibleColumns.valueFields);
-                return { possibleColumns, uniqueValues: {} };
-            }
-            let newUniqueValues = uniqueValues ?? null;
-            if (fetchDistinct || !uniqueValues) {
-                const { filteredColumns: smallStringColumns, exceededColumns } = await getCountsByColumns(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, eventTracking, dashboardName);
-                newUniqueValues = await getUniqueValuesByQuery({
-                    columns: smallStringColumns,
-                    query: query || '',
-                    client,
-                    getToken,
-                    tenants,
-                    customFields: schemaData.customFields ?? {},
-                    dashboardName,
-                    eventTracking,
-                });
-                exceededColumns?.forEach((column) => {
-                    if (newUniqueValues) {
-                        newUniqueValues[column.field] = ['EXCEEDS_LIMIT'];
-                    }
-                });
-            }
-            if (!uniqueValues ||
-                hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
-                const possibleColumns = getPossiblePivotFieldOptions(columns, newUniqueValues || {});
-                setAllowedRowFields(possibleColumns.rowFields);
-                setAllowedColumnFields(possibleColumns.columnFields);
-                setAllowedValueFields(possibleColumns.valueFields);
-                setUniqueValues(newUniqueValues || {});
-                return { possibleColumns, uniqueValues: newUniqueValues };
-            }
-        }
-        return {
-            possibleColumns: { rowFields: [], columnFields: [], valueFields: [] },
-            uniqueValues: {},
-        };
-    };
-    const getAllDateRangesByColumn = async () => {
-        // Don't reprocess dateRanges if they are already gathered
-        if (columns && query && client) {
-            const dateColumns = columns.filter((column) => {
-                return column.jsType === 'date';
-            });
-            if (dateColumns.length === 0) {
-                return;
-            }
-            const dateRangeByColumn = await getQueryDateRangeByColumns(dateColumns, query || '', client, getToken, tenants, eventTracking, schemaData.customFields ?? {}, dashboardName);
-            setDateRanges(dateRangeByColumn || {});
-        }
-    };
-    useEffect(() => {
-        const calculatePivotCardSize = () => {
-            // The pivot card should be the same width as the row of inputs
-            // below it (two selects, plus the gap between them).
-            if (rowFieldRef.current && colFieldRef.current) {
-                const rowFieldSize = rowFieldRef.current?.getBoundingClientRect();
-                const colFieldSize = colFieldRef.current?.getBoundingClientRect();
-                const selectWidth = rowFieldSize.width;
-                const gap = colFieldSize.left - rowFieldSize.right;
-                const width = 2 * selectWidth + gap;
-                setPivotCardWidth(width);
-            }
-        };
-        if (rowFieldRef.current && colFieldRef.current) {
-            setTimeout(() => {
-                calculatePivotCardSize();
-            }, 0);
-        }
-        else {
-            setTimeout(() => {
-                calculatePivotCardSize();
-            }, 500);
-        }
-    }, [showUpdatePivot, isOpen]);
-    useEffect(() => {
-        const fetchPivotData = async () => {
-            if (pivotRowField &&
-                data &&
-                columns &&
-                pivotAggregations?.every((p) => p?.valueField && p?.aggregationType)) {
-                const pivot = {
-                    rowField: pivotRowField || '',
-                    rowFieldType: columnTypes[pivotRowField ?? ''],
-                    columnField: pivotColumnField,
-                    columnFieldType: columnTypes[pivotColumnField ?? ''],
-                    aggregations: pivotAggregations?.map((p) => ({
-                        valueField: p.valueField,
-                        valueFieldType: columnTypes[p.valueField ?? ''],
-                        valueField2: p.valueField2,
-                        valueField2Type: columnTypes[p.valueField2 ?? ''],
-                        aggregationType: p.aggregationType,
-                    })),
-                    // For backwards compatibility
-                    valueField: pivotAggregations?.[0]?.valueField,
-                    valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
-                    valueField2: pivotAggregations?.[0]?.valueField2,
-                    valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
-                    aggregationType: pivotAggregations?.[0]?.aggregationType,
-                };
-                try {
-                    const { rows, columns } = await generatePivotTable({
-                        pivot,
-                        report,
-                        client,
-                        uniqueValues,
-                        dashboardName,
-                        tenants,
-                        dateFilter,
-                        additionalProcessing: {
-                            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;
-                    }
-                }
-            }
-            if ((pivotRowField && data && columns) || initialSelectedPivotTable) {
-                getDistinctValues();
-            }
-            if (initialUniqueValues) {
-                const possibleColumns = getPossiblePivotFieldOptions(columns, initialUniqueValues);
-                setAllowedRowFields(possibleColumns.rowFields);
-                setAllowedColumnFields(possibleColumns.columnFields);
-                setAllowedValueFields(possibleColumns.valueFields);
-                setUniqueValues(initialUniqueValues);
-            }
-            if (pivotRowField && data && columns) {
-                const pivot = {
-                    rowField: pivotRowField ?? '',
-                    rowFieldType: columnTypes[pivotRowField ?? ''],
-                    columnField: pivotColumnField,
-                    columnFieldType: columnTypes[pivotColumnField ?? ''],
-                    aggregations: pivotAggregations?.map((p) => ({
-                        valueField: p.valueField,
-                        valueFieldType: columnTypes[p.valueField ?? ''],
-                        valueField2: p.valueField2,
-                        valueField2Type: columnTypes[p.valueField2 ?? ''],
-                        aggregationType: p.aggregationType,
-                    })),
-                    // For backwards compatibility
-                    valueField: pivotAggregations?.[0]?.valueField,
-                    valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
-                    valueField2: pivotAggregations?.[0]?.valueField2,
-                    valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
-                    aggregationType: pivotAggregations?.[0]?.aggregationType,
-                };
-                if (initialSelectedPivotTable) {
-                    setSamplePivotTable({
-                        pivot: pivot,
-                        rows: initialSelectedPivotTable.rows,
-                        columns: initialSelectedPivotTable.columns,
-                    });
-                }
-                else {
-                    try {
-                        const { rows, columns } = await generatePivotTable({
-                            pivot,
-                            report,
-                            client,
-                            uniqueValues,
-                            dashboardName,
-                            tenants,
-                            dateFilter,
-                            additionalProcessing: {
-                                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;
-                        }
-                    }
-                }
-            }
-        };
-        fetchPivotData();
-    }, [initialSelectedPivotTable]);
-    useEffect(() => {
-        if (pivotRowField && data && columns) {
-            getDistinctValues();
-            getAllDateRangesByColumn();
-        }
-        else if (initialSelectedPivotTable) {
-            getDistinctValues();
-        }
-    }, [initialSelectedPivotTable, columns, data, pivotRowField]);
-    useEffect(() => {
-        setAllowedFields(initialUniqueValues || {});
-        setUniqueValues(initialUniqueValues);
-    }, [initialUniqueValues, columns]);
-    const setAllowedFields = (uniqueValues) => {
-        const possibleColumns = getPossiblePivotFieldOptions(columns, uniqueValues);
-        setAllowedRowFields(possibleColumns.rowFields);
-        setAllowedColumnFields(possibleColumns.columnFields);
-        setAllowedValueFields(possibleColumns.valueFields);
-        return possibleColumns;
-    };
-    const columnsToShow = useMemo(() => {
-        return (columns || []).reduce((map, col) => {
-            // only use columns shown in the report builder's table
-            // also filter out id
-            // Note: should this account for other variations?
-            // if (col.field !== 'id') { // as of 1/22 stop filtering id since we allow it as a rowField
-            map[col.field] = col.format;
-            // }
-            return map;
-        }, {});
-    }, [columns]);
-    const columnTypes = useMemo(() => {
-        return (columns || []).reduce((map, col) => {
-            map[col.field] = col.jsType;
-            return map;
-        }, {});
-    }, [columns]);
-    const [selectedPivotTable, setSelectedPivotTable] = useState(null);
-    useEffect(() => {
-        const fetchPivotTables = async () => {
-            if (selectedPivotIndex === -1) {
-                return null;
-            }
-            const pivot = createdPivots[selectedPivotIndex];
-            try {
-                const { rows, columns } = await generatePivotTable({
-                    pivot,
-                    report,
-                    client,
-                    uniqueValues,
-                    dashboardName,
-                    tenants,
-                    dateFilter,
-                    additionalProcessing: {
-                        page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
-                    }, // limit preview
-                    getToken,
-                    eventTracking,
-                });
-                setSelectedPivotTable({
-                    pivot: pivot,
-                    rows: rows,
-                    columns: columns,
-                });
-            }
-            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;
-                }
-            }
-        };
-        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');
-            return;
-        }
-        if (index === selectedPivotIndex && selectedPivotType === 'recommended') {
-            removePivot();
-        }
-        else {
-            selectPivot(pivot);
-            setSelectedPivotType('recommended');
-        }
-        setPivotError('');
-        setIsOpen(false);
-    };
-    const onSelectCreatedPivot = (pivot) => {
-        selectPivot(pivot, pivot.columnField ? uniqueValues : undefined);
-        setSelectedPivotType('created');
-        setPivotError('');
-        setIsOpen(false);
-        setPopUpTitle('Add pivot');
-    };
-    const onCommitPivot = useCallback(() => {
-        const errors = [];
-        if ((pivotAggregations?.length ?? 0) === 0) {
-            errors.push('You must have at least one aggregation');
-        }
-        if (pivotAggregations.some((p) => !p.valueField &&
-            p.aggregationType !== 'count' &&
-            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');
-        }
-        if (pivotRowField && !columnsToShow[pivotRowField]) {
-            errors.push('Error in row field: undefined type');
-        }
-        if (pivotColumnField && !columnsToShow[pivotColumnField]) {
-            errors.push('Error in column field: undefined type');
-        }
-        if (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' ||
-                    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 ?? ''],
-                columnField: pivotColumnField,
-                columnFieldType: columnsToShow[pivotColumnField ?? ''],
-                aggregations: pivotAggregations?.map((p) => ({
-                    valueField: p.valueField,
-                    valueFieldType: columnTypes[p.valueField ?? ''],
-                    valueField2: p.valueField2,
-                    valueField2Type: columnTypes[p.valueField2 ?? ''],
-                    aggregationType: p.aggregationType,
-                })),
-                sort,
-                sortField,
-                sortDirection,
-                rowLimit,
-                // For backwards compatibility
-                valueField: pivotAggregations?.[0]?.valueField,
-                valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
-                valueField2: pivotAggregations?.[0]?.valueField2,
-                valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
-                aggregationType: pivotAggregations?.[0]?.aggregationType,
-            };
-            if (isValidPivot(pivot).valid) {
-                pivot.title = generatePivotTitle(pivot);
-                setPivotError('');
-                setIsOpen(false);
-                setCreatedPivots([pivot]);
-                onSelectCreatedPivot(pivot);
-                setPopUpTitle('Add pivot');
-            }
-            else {
-                errors.push(isValidPivot(pivot).reason);
-            }
-        }
-        setErrors(errors);
-    }, [
-        pivotRowField,
-        pivotColumnField,
-        pivotAggregations,
-        sortFieldInput,
-        sortDirectionInput,
-        showSortInput,
-        showLimitInput,
-        limitInput,
-    ]);
-    const onEditPivot = async (pivot, index, pivotType) => {
-        setIsLoading(false);
-        setErrors([]);
-        setPivotRowField(pivot.rowField);
-        setPivotColumnField(pivot.columnField);
-        setPivotAggregations(pivot.aggregations ?? []);
-        setShowUpdatePivot(true);
-        if (pivotType === 'recommended' &&
-            index !== null &&
-            recommendedPivotTables[index]) {
-            setSamplePivotTable(recommendedPivotTables[index]);
-            return;
-        }
-        if (isValidPivot(pivot).valid) {
-            let dateBucket = undefined;
-            if (pivotRowField && dateRanges[pivotRowField]) {
-                dateBucket = getDateBucketFromRange(dateRanges[pivotRowField].dateRange);
-            }
-            try {
-                const { rows, columns } = await generatePivotTable({
-                    pivot,
-                    dateBucket,
-                    report,
-                    client,
-                    uniqueValues,
-                    dashboardName,
-                    tenants,
-                    dateFilter,
-                    additionalProcessing: {
-                        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);
-                    return;
-                }
-            }
-        }
-        setSamplePivotTable(null);
-    };
-    const onEditRecommendedPivot = (pivot) => {
-        onEditPivot(pivot, null);
-    };
-    const refreshPivots = useCallback(async () => {
-        if (!client) {
-            return;
-        }
-        // 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 || initialUniqueValues;
-        let possibleColumns = {
-            rowFields: allowedRowFields,
-            columnFields: allowedColumnFields,
-            valueFields: allowedValueFields,
-        };
-        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 || [],
-            allowedColumnFields: possibleColumns?.columnFields || [],
-            allowedValueFields: possibleColumns?.valueFields || [],
-            tableSchema: Object.keys(columnsToShow).reduce(function (map, col) {
-                // stop ai from seeing date fields. this is meant to stop the ai
-                // pivot tables from extracting month and year from the date
-                const fieldType = isDateField(columnsToShow[col])
-                    ? 'string'
-                    : columnsToShow[col];
-                map[col] = fieldType;
-                return map;
-            }, {}),
-        };
-        try {
-            const { data: resp } = await quillFetchWithToken({
-                client,
-                task: 'pivotai',
-                metadata: cloudBody,
-            });
-            const recommendedPivots = resp?.data?.pivotTables.map((pivot) => cleanPivot(pivot, possibleColumns)) || [];
-            const cleanedPivots = recommendedPivots
-                .filter((pivot) => isValidPivot(pivot).valid &&
-                (!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;
-                }
-                return {
-                    ...pivot,
-                    rowFieldType: columnTypes[pivot.rowField ?? ''],
-                    columnFieldType: columnTypes[pivot.columnField ?? ''],
-                    title: generatePivotTitle(pivot),
-                };
-            });
-            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,
-                        report,
-                        client,
-                        uniqueValues: trimmedUniqueValues,
-                        dashboardName,
-                        tenants,
-                        dateFilter,
-                        additionalProcessing: {
-                            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;
-                }
-            }));
-            const validPivotTables = pts.filter((pt) => pt !== undefined);
-            setRecommendedPivotTables(validPivotTables.map((pt) => ({
-                ...pt,
-                pivot: {
-                    ...pt.pivot,
-                    aggregations: [
-                        {
-                            valueField: pt.pivot.valueField,
-                            aggregationType: pt.pivot.aggregationType,
-                            valueField2: pt.pivot.valueField2,
-                        },
-                    ],
-                },
-            })));
-            if (validPivotTables.length === 0) {
-                sethasNoRecommendedPivots(true);
-            }
-            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);
-        }
-        setIsFetchingPivots(false);
-        setIsLoading(false);
-    }, [
-        selectedTable,
-        data,
-        columnsToShow,
-        isLoading,
-        showTrigger,
-        allowedColumnFields,
-        allowedRowFields,
-        allowedValueFields,
-        uniqueValuesIsLoading,
-        columns,
-    ]);
-    const pivotFieldChange = async (field, value) => {
-        if (typeof value !== 'string' &&
-            (!value?.length || !value?.every((p) => p?.aggregationType))) {
-            return;
-        }
-        if (typeof value !== 'string' &&
-            value.some((p) => !p?.valueField &&
-                ((p?.aggregationType !== 'count' &&
-                    p?.aggregationType !== 'percentage') ||
-                    (p?.aggregationType === 'percentage' &&
-                        (!pivotRowField || pivotColumnField))))) {
-            return;
-        }
-        setErrors([]);
-        const pivot = {
-            rowField: pivotRowField,
-            rowFieldType: columnTypes[pivotRowField ?? ''],
-            columnField: pivotColumnField,
-            aggregations: pivotAggregations?.map((p) => {
-                return {
-                    valueField: p.valueField,
-                    valueFieldType: columnTypes[p.valueField ?? ''],
-                    valueField2: p.valueField2,
-                    valueField2Type: columnTypes[p.valueField2 ?? ''],
-                    aggregationType: p.aggregationType,
-                };
-            }),
-            // For backwards compatibility
-            valueField: pivotAggregations?.[0]?.valueField,
-            valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
-            valueField2: pivotAggregations?.[0]?.valueField2,
-            valueField2Type: columnTypes[pivotAggregations?.[0]?.valueField2 ?? ''],
-            aggregationType: pivotAggregations?.[0]?.aggregationType,
-        };
-        if (field === 'aggregations') {
-            pivot.aggregations = value.map((p) => ({
-                valueField: p.valueField,
-                valueFieldType: columnTypes[p.valueField ?? ''],
-                valueField2: p.valueField2,
-                valueField2Type: columnTypes[p.valueField2 ?? ''],
-                aggregationType: p.aggregationType,
-            }));
-        }
-        else {
-            pivot[field] = value;
-        }
-        pivot.title = generatePivotTitle(pivot);
-        if (field === 'rowField') {
-            if (value === '') {
-                setPivotColumnField(undefined);
-                // Also clear any percent aggregations
-                setPivotAggregations(pivotAggregations.map((agg) => {
-                    return {
-                        ...agg,
-                        aggregationType: agg.aggregationType === 'percentage'
-                            ? undefined
-                            : agg.aggregationType,
-                    };
-                }));
-            }
-            pivot.rowFieldType = columnTypes[value];
-        }
-        else if (field === 'columnField') {
-            pivot.columnFieldType = columnTypes[value];
-        }
-        pivot.aggregations?.forEach((agg, index) => {
-            if (!value && agg.valueField === agg.valueField2) {
-                agg.valueField2 = undefined;
-                setPivotAggregations([
-                    ...pivotAggregations.slice(0, index),
-                    { ...pivotAggregations[index], valueField2: undefined },
-                    ...pivotAggregations.slice(index + 1),
-                ]);
-            }
-        });
-        if (!isValidPivot(pivot).valid) {
-            setSamplePivotTable(null);
-            return;
-        }
-        setPreviewLoading(true);
-        let dateBucket = undefined;
-        if (pivotRowField && dateRanges[pivotRowField]) {
-            dateBucket = getDateBucketFromRange(dateRanges[pivotRowField].dateRange);
-        }
-        setTimeout(async () => {
-            try {
-                const { rows, columns } = await generatePivotTable({
-                    pivot,
-                    dateBucket,
-                    report,
-                    client,
-                    uniqueValues,
-                    dashboardName,
-                    tenants,
-                    dateFilter,
-                    additionalProcessing: {
-                        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);
-                    setSamplePivotTable(null);
-                    return;
-                }
-            }
-            finally {
-                setPreviewLoading(false);
-            }
-        }, 500);
-    };
-    const [recommendedPivotTables, setRecommendedPivotTables] = useState([]);
-    const [createdPivotTables, setCreatedPivotTables] = useState([]);
-    useEffect(() => {
-        const fetchPivotTables = async () => {
-            const pts = await Promise.all(createdPivots.map(async (p) => {
-                try {
-                    const { rows, columns } = await generatePivotTable({
-                        pivot: p,
-                        report,
-                        client,
-                        uniqueValues,
-                        dashboardName,
-                        tenants,
-                        dateFilter,
-                        additionalProcessing: {
-                            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;
-                }
-            }));
-            setCreatedPivotTables(pts.filter((pt) => pt !== undefined));
-        };
-        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',
-                textAlign: 'left',
-            }, children: [_jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    }, children: selectedPivotIndex !== -1 && (_jsx("span", { style: {
-                            height: 10,
-                            width: 10,
-                            backgroundColor: theme.primaryButtonColor,
-                            borderRadius: '50%',
-                            position: 'absolute',
-                            top: -2,
-                            right: -2,
-                        } })) }), showTrigger && (_jsx("div", { ref: buttonRef, children: _jsx(SecondaryButtonComponent, { disabled: disabled, onClick: () => {
-                            if (columns.length === 0) {
-                                setPivotError('');
-                                setIsOpen(false);
-                            }
-                            // table is not loaded yet, so pivot button is not clickable
-                            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", { 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);
-                                setPopUpTitle('Add pivot');
-                            }
-                            setIsOpen(isOpen);
-                        }, ignoredRefs: [buttonRef], popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
-                            ? popUpTitle
-                            : 'Recommended pivots', horizontalPadding: 0, titlePaddingLeft: 20, popoverChildren: _jsx("div", { style: {
-                                paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
-                                position: 'relative',
-                            }, children: showUpdatePivot || !pivotRecommendationsEnabled ? (_jsxs("div", { style: {
-                                    backgroundColor: 'rgb(255, 255, 255)',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 20,
-                                    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: (showSortInput &&
-                                                    (!sortFieldInput ||
-                                                        !(samplePivotTable?.columns ?? []).some((c) => c.field === sortFieldInput) ||
-                                                        !sortDirectionInput)) ||
-                                                    !(pivotAggregations?.length > 0) ||
-                                                    pivotAggregations.some((agg) => !agg.aggregationType ||
-                                                        (!agg.valueField &&
-                                                            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,
-                                    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);
-                                        }, children: _jsx(PivotCard, { pivotTable: selectedPivotTable, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, onClose: () => {
-                                                removePivot();
-                                            }, clickable: true, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
-                                                // position button inline with the popover title
-                                                position: 'absolute',
-                                                top: -36,
-                                                right: 0,
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                gap: 8,
-                                                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',
-                                                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
-    if (pivot?.aggregationType === 'count') {
-        return [
-            {
-                field: pivot.valueField ?? 'count',
-                label: yAxisField.label,
-                format: yAxisField.format,
-            },
-        ];
-    }
-    // otherwise use the default (ie. the field label)
-    return [
-        {
-            field: pivot.valueField ?? 'count',
-            label: yAxisField.label,
-            format: yAxisField.format,
-        },
-    ];
-}
-export function generatePivotTitle(pivot) {
-    if (pivot.rowField && !pivot.valueField && pivot.aggregations?.[0]) {
-        return snakeAndCamelCaseToTitleCase(`${pivot.aggregations[0].aggregationType} of ${pivot.rowField}${pivot.columnField ? ` by ${pivot.columnField}` : ''}
-      `);
-    }
-    else if (!pivot.rowField && pivot.aggregations?.[0]?.valueField) {
-        return snakeAndCamelCaseToTitleCase(`${pivot.aggregations[0].aggregationType} of ${pivot.aggregations[0].valueField}
-      `);
-    }
-    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) {
-        return null;
-    }
-    let dateStr = value;
-    if (typeof value === 'object' && value.value) {
-        dateStr = value.value;
-    }
-    if (dateStr instanceof Date) {
-        return dateStr;
-    }
-    const parsed = parseISO(dateStr);
-    if (isValid(parsed)) {
-        return parsed;
-    }
-    return new Date(dateStr);
-}
-function getLatestDate(a, b) {
-    return a > b ? a : b;
-}
-function getEarliestDate(a, b) {
-    return a < b ? a : b;
-}
-export function getDateRange(dateRange, column, data) {
-    const currentTime = new Date().getTime();
-    const ONE_CENTURY_IN_MILLISECONDS = 100 * 365 * 24 * 60 * 60 * 1000;
-    const maxDate = new Date(currentTime + ONE_CENTURY_IN_MILLISECONDS);
-    const minDate = new Date(0);
-    if (!dateRange) {
-        if (data.length == 0) {
-            return { start: new Date(), end: new Date() };
-        }
-        if (data.length == 1) {
-            const firstDate = castValueToDate(data[0][column]);
-            return {
-                start: firstDate || new Date(),
-                end: firstDate || new Date(),
-            };
-        }
-        let earliestDate = undefined;
-        let latestDate = undefined;
-        for (let i = 0; i < data.length; i++) {
-            const value = castValueToDate(data[i][column]);
-            earliestDate =
-                value && value > minDate
-                    ? earliestDate
-                        ? getEarliestDate(earliestDate, value)
-                        : value
-                    : earliestDate;
-            latestDate =
-                value && value < maxDate
-                    ? latestDate
-                        ? getLatestDate(latestDate, value)
-                        : value
-                    : latestDate;
-        }
-        if (!earliestDate || !latestDate) {
-            return {
-                start: earliestDate || new Date(),
-                end: latestDate || new Date(),
-            };
-        }
-        for (let i = 0; i < data.length; i++) {
-            if (data[i][column]) {
-                const value = castValueToDate(data[i][column]);
-                if (value && value < maxDate) {
-                    latestDate =
-                        latestDate === null ? value : getLatestDate(latestDate, value);
-                }
-                if (value && value > minDate) {
-                    earliestDate =
-                        earliestDate === null
-                            ? value
-                            : getEarliestDate(earliestDate, value);
-                }
-            }
-        }
-        return {
-            start: earliestDate || new Date(),
-            end: latestDate || new Date(),
-        };
-    }
-    else {
-        return dateRange;
-    }
-}
-function determineIntervalThroughOverride(dateBucket, dateRange) {
-    switch (dateBucket) {
-        case 'day':
-            return eachDayOfInterval(dateRange);
-        case 'week':
-            return eachWeekOfInterval(dateRange, { weekStartsOn: 1 });
-        case 'month':
-            return eachMonthOfInterval(dateRange);
-        case 'year':
-            return eachYearOfInterval(dateRange);
-        default:
-            return eachMonthOfInterval(dateRange);
-    }
-}
-// function to that takes in a uniqueValues obj and trims the number of unique values per column
-function trimUniqueValues(obj, limit) {
-    const trimmedObj = {};
-    if (obj) {
-        Object.keys(obj).forEach((key) => {
-            const values = obj[key] ?? [];
-            const limitedValues = values.slice(0, limit);
-            trimmedObj[key] = limitedValues;
-        });
-    }
-    return trimmedObj;
-}
-export function getDateBuckets(dateRange, column, data, dateBucket) {
-    if (!dateRange) {
-        if (dateBucket) {
-            return determineIntervalThroughOverride(dateBucket, getDateRange(undefined, column, data));
-        }
-        return eachMonthOfInterval(getDateRange(dateRange, column, data));
-    }
-    if (dateBucket) {
-        return determineIntervalThroughOverride(dateBucket, dateRange);
-    }
-    const dayDifference = differenceInDays(dateRange.end, dateRange.start);
-    return dayDifferenceToInterval(dayDifference, dateRange);
-}
-// function getCompDateBuckets(
-//   dateRange: { start: Date; end: Date } | undefined,
-//   compDateRange: any,
-//   column: string,
-//   data: any,
-// ) {
-//   if (!dateRange) {
-//     return eachMonthOfInterval(getDateRange(undefined, column, data));
-//   }
-//   const dayDifference = differenceInDays(dateRange.end, dateRange.start);
-//   return dayDifferenceToInterval(dayDifference, compDateRange);
-// }
-function dayDifferenceToInterval(dayDifference, dateRange) {
-    if (dayDifference < 14) {
-        return eachDayOfInterval(dateRange);
-    }
-    else if (dayDifference < 60) {
-        return eachWeekOfInterval(dateRange, { weekStartsOn: 1 });
-    }
-    else if (dayDifference < 365 * 3) {
-        return eachMonthOfInterval(dateRange);
-    }
-    else {
-        return eachYearOfInterval(dateRange);
-    }
-}
-export function getDateString(value, dateRange, dateBucket, databaseType) {
-    let format;
-    if (dateBucket) {
-        switch (dateBucket) {
-            case 'day':
-                format = 'MMM_dd';
-                break;
-            case 'week':
-                format = 'MMM_dd-MMM_dd';
-                break;
-            case 'month':
-                format = 'MMM_yyyy';
-                break;
-            case 'year':
-                format = 'yyyy';
-                break;
-            default:
-                format = 'MMM_yyyy';
-                break;
-        }
-    }
-    else {
-        if (!dateRange) {
-            format = 'MMM_yyyy';
-        }
-        else {
-            const dayDifference = differenceInDays(new Date(dateRange.end), new Date(dateRange.start));
-            if (dayDifference < 14) {
-                format = 'MMM_dd_yyyy';
-            }
-            else if (dayDifference < 60) {
-                format = 'MMM_dd-MMM_dd';
-            }
-            else if (dayDifference < 365 * 3) {
-                format = 'MMM_yyyy';
-            }
-            else {
-                format = 'yyyy';
-            }
-        }
-    }
-    return valueFormatter({
-        value,
-        field: 'date',
-        // @ts-ignore
-        fields: [{ field: 'date', format }],
-        dateRange,
-        databaseType,
-    });
-}
-export function isDateField(fieldType) {
-    return (fieldType === 'date' ||
-        fieldType === 'datetime' ||
-        fieldType === 'timestamp' ||
-        fieldType === 'timestamptz' ||
-        fieldType === 'MMM_yyyy' ||
-        fieldType === 'MMM_dd' ||
-        fieldType === 'MMM_dd_yyyy' ||
-        fieldType === 'MMM_dd_hh:mm_ap_pm' ||
-        fieldType === 'hh_ap_pm');
-}
-// const isNullUndefinedOrInvalidDate = (date: Date) =>
-//   date === null || date === undefined || isNaN(date.getTime());
-// // If the value is an object with key value (ie. a BigQuery date) we will
-// // return the inner value, otherwise return passed param as-is.
-// const handleBigQueryValue = (value: any) => {
-//   if (
-//     Boolean(value) &&
-//     typeof value === 'object' &&
-//     Object.keys(value).length === 1 &&
-//     value['value']
-//   ) {
-//     return value['value'];
-//   }
-//   return value;
-// };
-// // Process out all the BigQuery dates.
-// const fixBigQueryData = (data: any[] = []) => {
-//   const newData = [];
-//   for (const row of data) {
-//     const newRow: any = {};
-//     for (const key in row) {
-//       newRow[key] = handleBigQueryValue(row[key]);
-//     }
-//     newData.push(newRow);
-//   }
-//   return newData;
-// };
-export async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, eventTracking, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
-    try {
-        if (report && client) {
-            const pivotTable = await generatePivotWithSQL({
-                pivotQuery,
-                pivot,
-                report,
-                client,
-                dateBucket,
-                dateFilter,
-                distinctStrings: pivot.columnField && uniqueValues?.[pivot.columnField]
-                    ? uniqueValues[pivot.columnField]
-                    : [],
-                dashboardName,
-                tenants,
-                additionalProcessing,
-                caller,
-                getToken,
-            });
-            return pivotTable;
-        }
-    }
-    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');
-}