@quillsql/react 2.11.23 → 2.11.24

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generatePivotTable = exports.isDateField = exports.generatePivotTableYAxis = exports.PivotModal = void 0;
+exports.generatePivotTable = exports.isDateField = exports.generatePivotTitle = exports.generatePivotTableYAxis = exports.PivotModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
 const react_1 = require("react");
 const Context_1 = require("../../Context");
 const dataFetcher_1 = require("../../utils/dataFetcher");
@@ -11,9 +10,12 @@ const date_fns_1 = require("date-fns");
 const valueFormatter_1 = require("../../utils/valueFormatter");
 const ChartBuilder_1 = require("../../ChartBuilder");
 const textProcessing_1 = require("../../utils/textProcessing");
-const util_1 = require("../../components/ReportBuilder/util");
+const UiComponents_1 = require("../../components/UiComponents");
 const ast_1 = require("../../components/ReportBuilder/ast");
 const QuillCard_1 = require("../../components/QuillCard");
+const pivotProcessing_1 = require("../../utils/pivotProcessing");
+const crypto_1 = require("../../utils/crypto");
+const tableProcessing_1 = require("../../utils/tableProcessing");
 const QuillHover = () => {
     return ((0, jsx_runtime_1.jsx)("style", { children: `
   .quill-hover {
@@ -27,57 +29,153 @@ const QuillHover = () => {
   }
 ` }));
 };
-const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, CardComponent = QuillCard_1.QuillCard, HeaderComponent, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, selectPivotOnEdit = false, showTrigger = true, rightAlign = false, parentRef, recommendPivotCount = 6, }) => {
+const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, CardComponent = QuillCard_1.QuillCard, HeaderComponent, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, selectPivotOnEdit = false, showTrigger = true, rightAlign = false, parentRef, pivotCountRequest = 6, query, initialUniqueValues, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, }) => {
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [pivotUpdateIndex, setPivotUpdateIndex] = (0, react_1.useState)(null);
     const [selectedPivotType, setSelectedPivotType] = (0, react_1.useState)('recommended');
     const [errors, setErrors] = (0, react_1.useState)([]);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const rowFieldRef = (0, react_1.useRef)(null);
+    const colFieldRef = (0, react_1.useRef)(null);
+    const [pivotCardWidth, setPivotCardWidth] = (0, react_1.useState)(420);
     const [divWidth, setDivWidth] = (0, react_1.useState)(0);
-    const editModalRef = (0, react_1.useRef)();
-    const calculateWidth = () => {
-        return editModalRef.current.offsetWidth;
+    const [samplePivotTable, setSamplePivotTable] = (0, react_1.useState)(null);
+    const [allowedColumnFields, setAllowedColumnFields] = (0, react_1.useState)([]);
+    const [allowedRowFields, setAllowedRowFields] = (0, react_1.useState)([]);
+    const [allowedValueFields, setAllowedValueFields] = (0, react_1.useState)([]);
+    const [uniqueValues, setUniqueValues] = (0, react_1.useState)(initialUniqueValues);
+    const getDistinctValues = async () => {
+        if (columns) {
+            const stringColumns = columns.filter((column) => {
+                return (0, ast_1.isTextColumnType)(column.fieldType || column.format);
+            });
+            if (stringColumns.length === 0) {
+                const possibleColumns = (0, pivotProcessing_1.getPossiblePivotFieldOptions)(columns, {});
+                setAllowedRowFields(possibleColumns.rowFields);
+                setAllowedColumnFields(possibleColumns.columnFields);
+                setAllowedValueFields(possibleColumns.valueFields);
+                return possibleColumns;
+            }
+            const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, query || '', data.rows || [], client);
+            if (!uniqueValues ||
+                (0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(newUniqueValues)) {
+                const possibleColumns = (0, pivotProcessing_1.getPossiblePivotFieldOptions)(columns, newUniqueValues || {});
+                setAllowedRowFields(possibleColumns.rowFields);
+                setAllowedColumnFields(possibleColumns.columnFields);
+                setAllowedValueFields(possibleColumns.valueFields);
+                setUniqueValues(newUniqueValues);
+                return possibleColumns;
+            }
+        }
+        return { rowFields: [], columnFields: [], valueFields: [] };
     };
     (0, react_1.useEffect)(() => {
-        // Measure the width of the div and update state
-        if (editModalRef.current) {
-            setDivWidth(calculateWidth());
-        }
-        // Optional: Handle window resize
-        const handleResize = () => {
-            if (editModalRef.current) {
-                setDivWidth(calculateWidth());
+        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);
             }
         };
-        window.addEventListener('resize', handleResize);
-        // Cleanup listener
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
+        setTimeout(() => {
+            calculatePivotCardSize();
+        }, 300);
+    }, [showUpdatePivot, isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (pivotRowField && data && columns) {
+            const pivot = {
+                rowField: pivotRowField || '',
+                rowFieldType: columnsToShow[pivotRowField || ''],
+                columnField: pivotColumnField,
+                columnFieldType: columnsToShow[pivotColumnField || ''],
+                valueField: pivotValueField || '',
+                aggregationType: pivotAggregation || '',
+            };
+            const { rows, columns } = generatePivotTable(pivot, data, dateRange, false);
+            setSamplePivotTable({ pivot: pivot, rows, columns });
+        }
+        if ((pivotRowField && data && columns) || initialSelectedPivotTable) {
+            getDistinctValues();
+        }
+        if (initialUniqueValues) {
+            const possibleColumns = (0, pivotProcessing_1.getPossiblePivotFieldOptions)(columns, initialUniqueValues);
+            setAllowedRowFields(possibleColumns.rowFields);
+            setAllowedColumnFields(possibleColumns.columnFields);
+            setAllowedValueFields(possibleColumns.valueFields);
+            setUniqueValues(initialUniqueValues);
+        }
+        if (pivotRowField && data && columns) {
+            const pivot = {
+                rowField: pivotRowField || '',
+                rowFieldType: columnsToShow[pivotRowField || ''],
+                columnField: pivotColumnField,
+                columnFieldType: columnsToShow[pivotColumnField || ''],
+                valueField: pivotValueField || '',
+                aggregationType: pivotAggregation || '',
+            };
+            if (initialSelectedPivotTable) {
+                setSamplePivotTable({
+                    pivot: pivot,
+                    rows: initialSelectedPivotTable.rows,
+                    columns: initialSelectedPivotTable.columns,
+                });
+            }
+            else {
+                const { rows, columns } = generatePivotTable(pivot, data, dateRange, false);
+                setSamplePivotTable({ pivot: pivot, rows, columns });
+            }
+        }
     }, []);
     (0, react_1.useEffect)(() => {
-        // Measure the width of the div and update state
-        if (editModalRef.current) {
-            setDivWidth(calculateWidth());
+        const pivot = {
+            rowField: pivotRowField || '',
+            rowFieldType: columnsToShow[pivotRowField || ''],
+            columnField: pivotColumnField,
+            columnFieldType: columnsToShow[pivotColumnField || ''],
+            valueField: pivotValueField || '',
+            aggregationType: pivotAggregation || '',
+        };
+        if ((0, pivotProcessing_1.isValidPivot)(pivot) && data && columns) {
+            const { rows, columns } = generatePivotTable(pivot, data, dateRange, false);
+            setSamplePivotTable({ pivot: pivot, rows, columns });
         }
-    }, [editModalRef.current, showUpdatePivot]);
+    }, [
+        data,
+        columns,
+        pivotRowField,
+        pivotColumnField,
+        pivotValueField,
+        pivotAggregation,
+    ]);
     (0, react_1.useEffect)(() => {
         setSelectedPivotIndex(-1);
-        setPivotUpdateIndex(null);
-        setSelectedPivotType(undefined);
+        setSelectedPivotType('');
         setPivotRowField(undefined);
         setPivotColumnField(undefined);
         setPivotValueField(undefined);
         setPivotAggregation(undefined);
-        setIsOpen(false);
         setErrors([]);
     }, [selectedTable]);
+    (0, react_1.useEffect)(() => {
+        if (!initialUniqueValues) {
+            return;
+        }
+        const possibleColumns = (0, pivotProcessing_1.getPossiblePivotFieldOptions)(columns, initialUniqueValues);
+        setAllowedRowFields(possibleColumns.rowFields);
+        setAllowedColumnFields(possibleColumns.columnFields);
+        setAllowedValueFields(possibleColumns.valueFields);
+        setUniqueValues(initialUniqueValues);
+    }, [initialUniqueValues, columns]);
     const columnsToShow = (0, react_1.useMemo)(() => {
         return (columns || []).reduce((map, col) => {
             // only use columns shown in the report builder's table
             // also filter out id
             if (col.field !== 'id') {
-                map[col.field] = col.fieldType || col.format;
+                map[col.field] = col.format;
             }
             return map;
         }, {});
@@ -87,20 +185,13 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
             return null;
         }
         const pivot = createdPivots[selectedPivotIndex];
-        const { rows, columns } = generatePivotTable(pivot, data, dateRange);
+        const { rows, columns } = generatePivotTable(pivot, data, dateRange, false);
         return {
             pivot: pivot,
             rows: rows,
             columns: columns,
         };
     }, [selectedPivotIndex, data, dateRange, createdPivots]);
-    const columnSelectOptions = (0, react_1.useMemo)(() => {
-        return [
-            ...Object.keys(columnsToShow).map((key) => {
-                return { label: (0, textProcessing_1.snakeCaseToTitleCase)(key), value: key };
-            }),
-        ];
-    }, [columnsToShow]);
     const onSelectRecommendedPivot = (pivot, index) => {
         if (showEditOnPivotClick) {
             onEditPivot(pivot, index);
@@ -119,28 +210,47 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         selectPivot(pivot);
         setSelectedPivotType('created');
         setIsOpen(false);
-        setPopUpTitle('Add Pivot');
+        setPopUpTitle('Add pivot');
     };
     const onEditPivot = (pivot, index) => {
         setPivotRowField(pivot.rowField);
         setPivotColumnField(pivot.columnField);
         setPivotValueField(pivot.valueField);
         setPivotAggregation(pivot.aggregationType);
-        setPivotUpdateIndex(index);
         setShowUpdatePivot(true);
+        if ((0, pivotProcessing_1.isValidPivot)(pivot)) {
+            const { rows, columns } = generatePivotTable(pivot, data, dateRange, false);
+            setSamplePivotTable({ pivot, rows, columns });
+            return;
+        }
+        setSamplePivotTable(null);
     };
     const onEditRecommendedPivot = (pivot, index) => {
         onEditPivot(pivot, null);
     };
     const refreshPivots = (0, react_1.useCallback)(async () => {
-        if (!showTrigger) {
-            return;
-        }
-        if (isLoading || Object.keys(columnsToShow).length === 0) {
+        if (isLoading ||
+            Object.keys(columnsToShow).length === 0 ||
+            !pivotRecommendationsEnabled) {
             return;
         }
         setIsLoading(true);
+        let possibleColumns = {
+            rowFields: allowedRowFields,
+            columnFields: allowedColumnFields,
+            valueFields: allowedValueFields,
+        };
+        if ((allowedRowFields.length === 0 &&
+            allowedColumnFields.length === 0 &&
+            allowedValueFields.length === 0) ||
+            !uniqueValues) {
+            possibleColumns = await getDistinctValues();
+        }
         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
@@ -153,11 +263,10 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         };
         try {
             const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'pivotai', cloudBody);
-            const recommendedPivots = resp?.data?.pivotTables.slice(0, recommendPivotCount) || [];
-            setRecommendedPivots(recommendedPivots
-                .filter((pivot) => pivot.rowField != '')
-                .map((pivot) => {
-                if (columnsToShow[pivot.columnField] === 'date') {
+            const recommendedPivots = resp?.data?.pivotTables.map((pivot) => (0, pivotProcessing_1.cleanPivot)(pivot, possibleColumns)) || [];
+            setRecommendedPivots(recommendedPivots.map((pivot) => {
+                if (pivot.columnField &&
+                    columnsToShow[pivot.columnField] === 'date') {
                     const columnField = pivot.columnField;
                     pivot.columnField = pivot.rowField;
                     pivot.rowField = columnField;
@@ -165,57 +274,71 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                 return {
                     ...pivot,
                     rowFieldType: columnsToShow[pivot.rowField],
-                    columnFieldType: columnsToShow[pivot.columnField],
+                    columnFieldType: pivot.columnField
+                        ? columnsToShow[pivot.columnField]
+                        : undefined,
+                    title: generatePivotTitle(pivot),
                 };
             }));
-            // refreshing means the currently selected pivot doesn't exist in the options anymore
             setSelectedPivotIndex(-1);
         }
         catch (e) {
             console.error('Failed parsing pivotai response', e);
         }
         setIsLoading(false);
-    }, [selectedTable, data, columnsToShow, isLoading, showTrigger]);
-    (0, react_1.useEffect)(() => {
-        if (recommendedPivots.length === 0) {
-            refreshPivots();
+    }, [
+        selectedTable,
+        data,
+        columnsToShow,
+        isLoading,
+        showTrigger,
+        allowedColumnFields,
+        allowedRowFields,
+        allowedValueFields,
+    ]);
+    const pivotFieldChange = async (field, value) => {
+        setIsLoading(true);
+        const pivot = {
+            rowField: pivotRowField,
+            rowFieldType: columnsToShow[pivotRowField],
+            columnField: pivotColumnField,
+            valueField: pivotValueField,
+            aggregationType: pivotAggregation,
+        };
+        // @ts-ignore
+        pivot[field] = value;
+        pivot.title = generatePivotTitle(pivot);
+        if (field === 'rowField') {
+            pivot.rowFieldType = columnsToShow[value];
         }
-    }, []);
+        else if (field === 'columnField') {
+            pivot.columnFieldType = columnsToShow[value];
+        }
+        if (!(0, pivotProcessing_1.isValidPivot)(pivot)) {
+            setIsLoading(false);
+            setSamplePivotTable(null);
+            return;
+        }
+        setTimeout(() => {
+            const { rows, columns } = generatePivotTable(pivot, data, dateRange, false);
+            setSamplePivotTable({ pivot, rows, columns });
+            setIsLoading(false);
+        }, 500);
+    };
     const recommendedPivotTables = (0, react_1.useMemo)(() => {
         const pts = recommendedPivots.map((p) => {
-            const { rows, columns } = generatePivotTable(p, data, dateRange, 6);
+            const { rows, columns } = generatePivotTable(p, data, dateRange, false, 6);
             return { pivot: p, rows, columns };
         });
         return pts;
     }, [recommendedPivots, data]);
     const createdPivotTables = (0, react_1.useMemo)(() => {
         const pts = createdPivots.map((p) => {
-            const { rows, columns } = generatePivotTable(p, data, dateRange, 6);
+            const { rows, columns } = generatePivotTable(p, data, dateRange, false, 6);
             return { pivot: p, rows, columns };
         });
         return pts;
     }, [createdPivots, data]);
-    const samplePivotTable = (0, react_1.useMemo)(() => {
-        if (!pivotAggregation) {
-            return null;
-        }
-        const pivot = {
-            rowField: pivotRowField || '',
-            rowFieldType: columnsToShow[pivotRowField || ''],
-            columnField: pivotColumnField,
-            columnFieldType: columnsToShow[pivotColumnField || ''],
-            valueField: pivotValueField || '',
-            aggregationType: pivotAggregation || '',
-        };
-        const { rows, columns } = generatePivotTable(pivot, data, dateRange);
-        return { pivot: pivot, rows, columns };
-    }, [
-        pivotAggregation,
-        pivotValueField,
-        pivotRowField,
-        pivotColumnField,
-        columnsToShow,
-    ]);
     return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 position: 'relative',
                 display: 'inline-block',
@@ -232,7 +355,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                             position: 'absolute',
                             top: -2,
                             right: -2,
-                        } })) }), showTrigger && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                        } })) }), showTrigger && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: disabled, onClick: () => {
                         if (columns.length === 0) {
                             setIsOpen(false);
                         }
@@ -245,149 +368,26 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                         }
                         setIsOpen(!isOpen);
                         setShowUpdatePivot(false);
-                    }, label: triggerButtonText })), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
-                        if (!isOpen) {
-                            setShowUpdatePivot(false);
-                            setPopUpTitle('Add Pivot');
-                        }
-                        setIsOpen(isOpen);
-                    }, popoverTitle: showUpdatePivot ? popUpTitle : 'Recommended pivots', popoverChildren: (0, jsx_runtime_1.jsx)("div", { style: {
-                            paddingTop: showUpdatePivot ? 0 : 20,
-                            position: 'relative',
-                        }, children: showUpdatePivot ? ((0, jsx_runtime_1.jsxs)("div", { className: "ref-in-use", ref: editModalRef, style: {
-                                backgroundColor: 'rgb(255, 255, 255)',
-                                display: 'flex',
-                                flexDirection: 'column',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)("div", { style: { width: divWidth }, children: samplePivotTable && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                            marginBottom: 20,
-                                            minHeight: 160,
-                                        }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 140, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent }) })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 10,
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                gap: 20,
-                                                marginBottom: 5,
-                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Row Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotRowField, onChange: (e) => {
-                                                                setPivotRowField(e.target.value === ''
-                                                                    ? undefined
-                                                                    : e.target.value);
-                                                            }, options: [
-                                                                ...columnSelectOptions.filter((option) => {
-                                                                    const format = columns.find((col) => col.field === option.value)?.format;
-                                                                    return (format === 'string' ||
-                                                                        ChartBuilder_1.dateFormatOptions.includes(format) ||
-                                                                        (0, util_1.isIdColumn)(option.value));
-                                                                }),
-                                                            ], width: 200 })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Column Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
-                                                                setPivotColumnField(e.target.value === ''
-                                                                    ? undefined
-                                                                    : e.target.value);
-                                                            }, options: [
-                                                                ...columnSelectOptions.filter((option) => {
-                                                                    return (columns.find((col) => col.field === option.value)?.format === 'string');
-                                                                }),
-                                                            ], width: 200 })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                gap: 20,
-                                                marginBottom: 20,
-                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Value Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
-                                                                setPivotValueField(e.target.value === ''
-                                                                    ? undefined
-                                                                    : e.target.value);
-                                                            }, options: [
-                                                                ...columnSelectOptions.filter((option) => {
-                                                                    return ((option.value === '' ||
-                                                                        ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format)) &&
-                                                                        !(0, util_1.isIdColumn)(option.value));
-                                                                }),
-                                                            ], width: 200 })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Aggregation Type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, onChange: (e) => {
-                                                                if (e.target.value !== 'count' &&
-                                                                    pivotValueField &&
-                                                                    !ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)?.format)) {
-                                                                    setPivotValueField(null);
-                                                                }
-                                                                setPivotAggregation(e.target.value === ''
-                                                                    ? undefined
-                                                                    : e.target.value);
-                                                            }, options: [
-                                                                ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
-                                                                    return { label: option, value: option };
-                                                                }),
-                                                            ], width: 200 })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
-                                            const errors = [];
-                                            if (!pivotValueField && pivotAggregation !== 'count') {
-                                                errors.push("Value field cannot be empty when aggregation is not 'count'");
-                                            }
-                                            if (!pivotAggregation) {
-                                                errors.push('Aggregation cannot be empty');
-                                            }
-                                            if (errors.length === 0) {
-                                                const pivot = {
-                                                    rowField: pivotRowField || '',
-                                                    rowFieldType: columnsToShow[pivotRowField || ''],
-                                                    columnField: pivotColumnField,
-                                                    columnFieldType: columnsToShow[pivotColumnField || ''],
-                                                    valueField: pivotValueField || '',
-                                                    aggregationType: pivotAggregation || '',
-                                                };
-                                                pivot.title = generatePivotTitle(pivot);
-                                                setIsOpen(false);
-                                                setCreatedPivots([pivot]);
-                                                onSelectCreatedPivot(pivot, 0);
-                                                setPopUpTitle('Add Pivot');
-                                            }
-                                            setErrors(errors);
-                                        }, label: popUpTitle }) }), (0, jsx_runtime_1.jsx)("div", { children: errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                    paddingTop: '8px',
-                                                } }), errors.map((error, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                    borderRadius: 8,
-                                                    backgroundColor: '#FF9494',
-                                                    paddingLeft: '12px',
-                                                    paddingRight: '8px',
-                                                    height: 30,
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    fontSize: 13,
-                                                    fontWeight: 'bold',
-                                                    fontFamily: theme?.fontFamily,
-                                                    color: 'white',
-                                                    marginBottom: 5,
-                                                }, children: error }, index)))] })) })] })) : ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                fontFamily: theme?.fontFamily,
-                                color: theme?.primaryTextColor,
-                                width: selectedPivotTable ? 500 : 600,
-                                maxHeight: 600,
-                                overflowY: 'scroll',
-                            }, children: selectedPivotIndex >= 0 ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { onClick: () => {
-                                        setPopUpTitle('Edit Pivot');
-                                        onEditPivot(createdPivots[0], 0);
-                                    }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
-                                            pivot: selectedPivotTable?.pivot,
-                                            rows: selectedPivotTable?.rows,
-                                            columns: selectedPivotTable?.columns,
-                                        }, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, onClose: () => {
-                                            removePivot();
-                                        }, clickable: true, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                            // position button inline with the popover title
-                                            position: 'absolute',
-                                            top: -36,
-                                            right: 0,
-                                        }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: refreshPivots, label: (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    whiteSpace: 'nowrap',
-                                                    alignItems: 'center',
-                                                    gap: 6,
-                                                    fontSize: 14,
-                                                }, children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.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" }) }), "Regenerate"] }) }) }), isLoading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, label: triggerButtonText })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        position: 'relative',
+                        ...(isOpen && showTrigger && { top: 12 }),
+                    }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
+                            if (!isOpen) {
+                                setShowUpdatePivot(false);
+                                setPopUpTitle('Add pivot');
+                            }
+                            setIsOpen(isOpen);
+                        }, popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
+                            ? popUpTitle
+                            : 'Recommended pivots', popoverChildren: (0, jsx_runtime_1.jsx)("div", { style: {
+                                paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
+                                position: 'relative',
+                            }, children: showUpdatePivot || !pivotRecommendationsEnabled ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    backgroundColor: 'rgb(255, 255, 255)',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 20,
+                                }, children: [isLoading && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             background: theme.backgroundColor,
                                             width: 250,
                                             minWidth: 250,
@@ -398,7 +398,128 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                             display: 'flex',
                                             margin: '0px auto',
                                             justifyContent: 'center',
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] })) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotList, { recommendedPivotTables: recommendedPivotTables, createdPivotTables: createdPivotTables, theme: theme, onSelectRecommendedPivot: onSelectRecommendedPivot, onSelectCreatedPivot: onSelectCreatedPivot, selectedPivotIndex: selectedPivotIndex, selectedPivotType: selectedPivotType, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, onEditRecommendedPivot: onEditRecommendedPivot, onEditCreatedPivot: onEditPivot, showCreatePivot: true, showPivotEditButton: showPivotEditButton, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent }) }))] })) })) }) })] }) }));
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] })), samplePivotTable && !isLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            width: pivotCardWidth,
+                                            minHeight: 160,
+                                        }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 140, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, onSelectPivot: () => { }, onClose: () => {
+                                                setPivotAggregation(null);
+                                                setPivotRowField(null);
+                                                setPivotValueField(null);
+                                                setPivotColumnField(null);
+                                                setSamplePivotTable(null);
+                                            } }) })), (0, jsx_runtime_1.jsxs)(PivotColumnContainer, { children: [(0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { ref: rowFieldRef, children: (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", label: "Row field", value: pivotRowField, onChange: (e) => {
+                                                                pivotFieldChange('rowField', e.target.value);
+                                                                setPivotRowField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
+                                                            }, options: allowedRowFields.map((field) => {
+                                                                return {
+                                                                    label: (0, textProcessing_1.snakeCaseToTitleCase)(field),
+                                                                    value: field,
+                                                                };
+                                                            }), width: 200 }) }), (0, jsx_runtime_1.jsx)("div", { ref: colFieldRef, children: (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", label: "Column field", value: pivotColumnField, onChange: (e) => {
+                                                                pivotFieldChange('columnField', e.target.value);
+                                                                setPivotColumnField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
+                                                            }, options: allowedColumnFields.map((field) => {
+                                                                return {
+                                                                    label: (0, textProcessing_1.snakeCaseToTitleCase)(field),
+                                                                    value: field,
+                                                                };
+                                                            }), width: 200 }) })] }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", label: "Value field", value: pivotValueField, onChange: (e) => {
+                                                            pivotFieldChange('valueField', e.target.value);
+                                                            setPivotValueField(e.target.value === ''
+                                                                ? undefined
+                                                                : e.target.value);
+                                                        }, options: allowedValueFields.map((field) => {
+                                                            return {
+                                                                label: (0, textProcessing_1.snakeCaseToTitleCase)(field),
+                                                                value: field,
+                                                            };
+                                                        }), width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", label: "Aggregation type", value: pivotAggregation, onChange: (e) => {
+                                                            if (e.target.value !== 'count' &&
+                                                                pivotValueField &&
+                                                                !ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)?.format)) {
+                                                                setPivotValueField(null);
+                                                            }
+                                                            pivotFieldChange('aggregationType', e.target.value);
+                                                            setPivotAggregation(e.target.value === ''
+                                                                ? undefined
+                                                                : e.target.value);
+                                                        }, options: [
+                                                            ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
+                                                                return { label: option, value: option };
+                                                            }),
+                                                        ], width: 200 })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                    const errors = [];
+                                                    if (!pivotValueField &&
+                                                        pivotAggregation !== 'count') {
+                                                        errors.push("Value field cannot be empty when aggregation is not 'count'");
+                                                    }
+                                                    if (!pivotAggregation) {
+                                                        errors.push('Aggregation cannot be empty');
+                                                    }
+                                                    if (errors.length === 0) {
+                                                        const pivot = {
+                                                            rowField: pivotRowField || '',
+                                                            rowFieldType: columnsToShow[pivotRowField || ''],
+                                                            columnField: pivotColumnField,
+                                                            columnFieldType: columnsToShow[pivotColumnField || ''],
+                                                            valueField: pivotValueField || '',
+                                                            aggregationType: pivotAggregation || '',
+                                                        };
+                                                        pivot.title = generatePivotTitle(pivot);
+                                                        setIsOpen(false);
+                                                        setCreatedPivots([pivot]);
+                                                        onSelectCreatedPivot(pivot, 0);
+                                                        setPopUpTitle('Add pivot');
+                                                    }
+                                                    setErrors(errors);
+                                                }, label: popUpTitle }), errors.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 8,
+                                                    paddingTop: 8,
+                                                    width: pivotCardWidth,
+                                                    maxWidth: pivotCardWidth,
+                                                }, children: errors.map((error, index) => ((0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) }))] })] })) : ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    fontFamily: theme?.fontFamily,
+                                    color: theme?.primaryTextColor,
+                                    width: selectedPivotTable ? 500 : 600,
+                                    maxHeight: 600,
+                                    overflowY: 'scroll',
+                                }, children: selectedPivotIndex >= 0 ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                            setPopUpTitle('Edit pivot');
+                                            onEditPivot(createdPivots[0], 0);
+                                        }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                                pivot: selectedPivotTable?.pivot,
+                                                rows: selectedPivotTable?.rows,
+                                                columns: selectedPivotTable?.columns,
+                                            }, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, onClose: () => {
+                                                removePivot();
+                                            }, clickable: true, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                // position button inline with the popover title
+                                                position: 'absolute',
+                                                top: -36,
+                                                right: 0,
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                gap: 8,
+                                            }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Regenerate", onClick: refreshPivots, icon: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.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" }) }) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Create pivot +", onClick: () => onEditPivot({}, null) })] }), isLoading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                background: theme.backgroundColor,
+                                                width: 250,
+                                                minWidth: 250,
+                                                height: '100%',
+                                                paddingLeft: 20,
+                                                paddingRight: 30,
+                                                paddingTop: 40,
+                                                display: 'flex',
+                                                margin: '0px auto',
+                                                justifyContent: 'center',
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] })) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotList, { recommendedPivotTables: recommendedPivotTables, createdPivotTables: createdPivotTables, theme: theme, onSelectRecommendedPivot: onSelectRecommendedPivot, onSelectCreatedPivot: onSelectCreatedPivot, selectedPivotIndex: selectedPivotIndex, selectedPivotType: selectedPivotType, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, onEditRecommendedPivot: onEditRecommendedPivot, onEditCreatedPivot: onEditPivot, showPivotEditButton: showPivotEditButton, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent }) }))] })) })) }) }) })] }) }));
 };
 exports.PivotModal = PivotModal;
 function generatePivotTableYAxis(pivot, cols, format) {
@@ -408,12 +529,9 @@ function generatePivotTableYAxis(pivot, cols, format) {
     }
     // For count aggregations, use 'count' for the label
     if (pivot?.aggregationType === 'count') {
-        return [{ field: pivot.valueField, label: 'count', format: format }];
-    }
-    // For average aggregations, use 'average <label>' for the label
-    if (pivot?.aggregationType === 'average') {
-        const label = `average ${pivot.valueField}`;
-        return [{ field: pivot.valueField, label, format: format }];
+        return [
+            { field: pivot.valueField || 'count', label: 'count', format: format },
+        ];
     }
     // otherwise use the default (ie. the field label)
     return [
@@ -426,8 +544,17 @@ function generatePivotTableYAxis(pivot, cols, format) {
 }
 exports.generatePivotTableYAxis = generatePivotTableYAxis;
 function generatePivotTitle(pivot) {
+    if (pivot.rowField && !pivot.valueField) {
+        return (0, textProcessing_1.snakeCaseToTitleCase)(`${pivot.aggregationType} of ${pivot.rowField}
+      `);
+    }
+    else if (pivot.valueField && !pivot.rowField) {
+        return (0, textProcessing_1.snakeCaseToTitleCase)(`${pivot.aggregationType} of ${pivot.valueField}
+      `);
+    }
     return (0, textProcessing_1.snakeCaseToTitleCase)(`${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
 }
+exports.generatePivotTitle = generatePivotTitle;
 function castValueToDate(value) {
     if (!value) {
         return null;
@@ -437,7 +564,17 @@ function castValueToDate(value) {
     }
     return new Date(value);
 }
+function getRecentDate(a, b) {
+    return a > b ? a : b;
+}
+function getEarliestDate(a, b) {
+    return a < b ? a : b;
+}
 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 || !dateRange[0]) {
         if (data.length == 0 || !data[0][column]) {
             return { start: new Date(), end: new Date() };
@@ -454,12 +591,28 @@ function getDateRange(dateRange, column, data) {
         for (let i = 0; i < data.length; i++) {
             if (data[i][column]) {
                 const value = castValueToDate(data[i][column]);
-                lastestDate = lastestDate === null ? value : (0, date_fns_1.max)([lastestDate, value]);
-                earliestDate =
-                    earliestDate === null ? value : (0, date_fns_1.min)([earliestDate, value]);
+                if (lastestDate && lastestDate > minDate) {
+                    lastestDate = value;
+                }
+                if (value && value < maxDate) {
+                    lastestDate =
+                        lastestDate === null ? value : getRecentDate(lastestDate, value);
+                }
+                if (value && value > minDate) {
+                    if (earliestDate && earliestDate < minDate) {
+                        earliestDate = value;
+                    }
+                    earliestDate =
+                        earliestDate === null
+                            ? value
+                            : getEarliestDate(earliestDate, value);
+                }
             }
         }
-        return { start: earliestDate, end: lastestDate };
+        return {
+            start: earliestDate,
+            end: lastestDate,
+        };
     }
     else {
         return { start: dateRange[0], end: dateRange[1] };
@@ -516,6 +669,7 @@ function getDateString(value, dateRange) {
     return (0, valueFormatter_1.valueFormatter)({
         value,
         field: 'date',
+        // @ts-ignore
         fields: [{ field: 'date', format }],
     });
 }
@@ -577,15 +731,12 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     const uniqueRows = (isDateField(pivot.rowFieldType)
         ? getDateBuckets(dateRange, pivot.rowField, data)
         : [...new Set(data.map((item) => item[pivot.rowField]))]).filter((row) => Boolean(row));
-    const rowDateRange = pivot.rowField
-        ? getDateRange(dateRange, pivot.rowField, data)
-        : null;
-    const columnDateRange = pivot.columnField
-        ? getDateRange(dateRange, pivot.columnField, data)
-        : null;
+    const rowDateRange = getDateRange(dateRange, pivot.rowField, data);
+    const compRowDateRange = getDateRange(compRange ?? dateRange, pivot.rowField, data);
     // If columnField is not provided, we will not be using uniqueColumns
-    const uniqueColumns = (pivot.columnField && pivot.columnField.trim()
-        ? isDateField(pivot.columnFieldType)
+    // @ts-ignore
+    const uniqueColumns = (pivot.columnField
+        ? isDateField(pivot.columnFieldType || '')
             ? getDateBuckets(dateRange, pivot.columnField, data)
             : [...new Set(data.map((item) => item[pivot.columnField || '']))]
         : [pivot.valueField]).filter((col) => Boolean(col));
@@ -594,12 +745,11 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     const ROW_DATE_MAP = {};
     // add in the comparison columns for all columns in the pivot
     let compUniqueRows = [];
-    let compRowDateRange = [];
     if (isComparison) {
         if (pivot.columnField) {
             const col = pivot.columnField;
             const row = pivot.rowField;
-            const isDateCol = isDateField(pivot.columnFieldType);
+            const isDateCol = isDateField(pivot.columnFieldType || '');
             const isDateRow = isDateField(pivot.rowFieldType);
             data.forEach((item) => {
                 if (isDateCol) {
@@ -623,9 +773,15 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
         compUniqueRows = (isDateField(pivot.rowFieldType)
             ? getCompDateBuckets(dateRange, compRange ?? dateRange, pivot.rowField, data)
             : [...new Set(data.map((item) => item[pivot.rowField]))]).filter((row) => Boolean(row));
-        compRowDateRange = pivot.rowField
-            ? getDateRange(compRange ?? dateRange, pivot.rowField, data)
-            : null;
+    }
+    // Special corner case for count with only rowField pivot
+    if (!pivot.valueField &&
+        !pivot.columnField &&
+        pivot.aggregationType === 'count') {
+        uniqueColumns.push('count');
+        if (isComparison) {
+            uniqueColumns.push('comparison_count');
+        }
     }
     const rowsToGenerate = rowLimit !== -1 && rowLimit <= uniqueRows.length
         ? uniqueRows.slice(0, rowLimit + 1)
@@ -648,18 +804,20 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
             let comparisonValue;
             let value;
             const nextRowValue = isDateField(pivot.rowFieldType)
-                ? uniqueRows[rowIndex + 1] ?? (0, date_fns_1.endOfDay)(rowDateRange.end)
+                ? // @ts-ignore
+                    uniqueRows[rowIndex + 1] ?? (0, date_fns_1.endOfDay)(rowDateRange.end)
                 : null;
             const compRowValue = compUniqueRows[rowIndex];
             const compNextRowValue = isDateField(pivot.rowFieldType)
                 ? compUniqueRows[rowIndex + 1] ?? (0, date_fns_1.endOfDay)(compRowDateRange.end)
                 : null;
             if (pivot.columnField) {
-                const nextColumnValue = isDateField(pivot.columnFieldType)
+                const columnDateRange = getDateRange(dateRange, pivot.columnField, data);
+                const nextColumnValue = isDateField(pivot.columnFieldType || '')
                     ? uniqueColumns[colIndex + 1] || (0, date_fns_1.endOfDay)(columnDateRange.end)
                     : null;
                 // If columnField is provided, filter by both rowField and columnField
-                if (isDateField(pivot.columnFieldType) &&
+                if (isDateField(pivot.columnFieldType || '') &&
                     isDateField(pivot.rowFieldType)) {
                     filteredData = data.filter((item) => {
                         return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
@@ -684,7 +842,7 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                         });
                     }
                 }
-                else if (isDateField(pivot.columnFieldType) &&
+                else if (isDateField(pivot.columnFieldType || '') &&
                     !isDateField(pivot.rowFieldType)) {
                     filteredData = data.filter((item) => {
                         return (item[pivot.rowField] === rowValue &&
@@ -703,7 +861,7 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                         });
                     }
                 }
-                else if (!isDateField(pivot.columnFieldType) &&
+                else if (!isDateField(pivot.columnFieldType || '') &&
                     isDateField(pivot.rowFieldType)) {
                     filteredData = data.filter((item) => {
                         return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
@@ -789,15 +947,15 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                     }
                     break;
                 case 'max':
-                    value = filteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? 0)), -Infinity);
+                    value = filteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? -Infinity)), -Infinity);
                     if (isComparison) {
-                        comparisonValue = comparisonFilteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? 0)), -Infinity);
+                        comparisonValue = comparisonFilteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? -Infinity)), -Infinity);
                     }
                     break;
                 case 'min':
-                    value = filteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? 0)), Infinity);
+                    value = filteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? Infinity)), Infinity);
                     if (isComparison) {
-                        comparisonValue = comparisonFilteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? 0)), Infinity);
+                        comparisonValue = comparisonFilteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? Infinity)), Infinity);
                     }
                     break;
                 // Implement other aggregation types as needed
@@ -806,11 +964,11 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
             }
             // Set the value on the row
             // If columnField is not provided, colValue will be valueField
-            row[isDateField(pivot.columnFieldType)
+            row[isDateField(pivot.columnFieldType || '')
                 ? getDateString(colValue, dateRange)
                 : colValue] = pivot.aggregationType === 'count' ? value : value.toFixed(2);
             if (isComparison && pivot.columnField) {
-                if (isDateField(pivot.columnFieldType)) {
+                if (isDateField(pivot.columnFieldType || '')) {
                     row[`comparison_${getDateString(colValue, dateRange)}`] =
                         pivot.aggregationType === 'count'
                             ? comparisonValue
@@ -828,15 +986,11 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     });
     const columns = [
         {
-            label: pivot.rowField === null
-                ? 'Null'
-                : pivot.rowField === false
-                    ? 'False'
-                    : (0, textProcessing_1.snakeCaseToTitleCase)(pivot.rowField),
+            label: pivot.rowField === null ? 'Null' : (0, textProcessing_1.snakeCaseToTitleCase)(pivot.rowField),
             field: pivot.rowField,
         },
         ...uniqueColumns.map((column, index) => {
-            const columnName = isDateField(pivot.columnFieldType)
+            const columnName = isDateField(pivot.columnFieldType || '')
                 ? getDateString(column, dateRange)
                 : column;
             return {
@@ -854,7 +1008,7 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
         }),
         ...(isComparison && pivot.columnField
             ? uniqueColumns.map((column, index) => {
-                const columnName = isDateField(pivot.columnFieldType)
+                const columnName = isDateField(pivot.columnFieldType || '')
                     ? getDateString(column, dateRange)
                     : column;
                 return {
@@ -866,10 +1020,10 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                                 !pivot.columnField &&
                                 index === 1
                                 ? 'Comparison Count'
-                                : isDateField(pivot.columnFieldType)
+                                : isDateField(pivot.columnFieldType || '')
                                     ? COL_DATE_MAP[getDateString(column, dateRange)] ??
                                         'Comparison'
-                                    : `Comparison ${(0, textProcessing_1.snakeCaseToTitleCase)(columnName)}`,
+                                    : `comparison ${(0, textProcessing_1.snakeCaseToTitleCase)(columnName)}`,
                     field: `comparison_${columnName}`,
                 };
             })
@@ -878,22 +1032,24 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     if (pivot.sort) {
         pivotRows.sort((a, b) => {
             if (pivot.sortDirection === 'ASC') {
-                if (pivot.rowFieldType === 'date') {
-                    return new Date(a[pivot.rowField]) - new Date(b[pivot.rowField]);
+                if (ChartBuilder_1.dateFormatOptions.includes(pivot.sortFieldType ?? '')) {
+                    // @ts-ignore
+                    return new Date(a[pivot.sortField]) - new Date(b[pivot.sortField]);
                 }
-                else if ((0, ast_1.isNumericColumnType)(pivot.rowFieldType)) {
-                    return a[pivot.rowField] - b[pivot.rowField];
+                else if ((0, ast_1.isNumericColumnType)(pivot.sortFieldType)) {
+                    return a[pivot.sortField] - b[pivot.sortField];
                 }
-                return a[pivot.rowField].localeCompare(b[pivot.rowField]);
+                return a[pivot.sortField].localeCompare(b[pivot.sortField]);
             }
             else {
-                if (pivot.rowFieldType === 'date') {
-                    return new Date(b[pivot.rowField]) - new Date(a[pivot.rowField]);
+                if (ChartBuilder_1.dateFormatOptions.includes(pivot.sortFieldType ?? '')) {
+                    // @ts-ignore
+                    return new Date(b[pivot.sortField]) - new Date(a[pivot.sortField]);
                 }
-                else if ((0, ast_1.isNumericColumnType)(pivot.rowFieldType)) {
-                    return a[pivot.rowField] - b[pivot.rowField];
+                else if ((0, ast_1.isNumericColumnType)(pivot.sortFieldType)) {
+                    return b[pivot.sortField] - a[pivot.sortField];
                 }
-                return b[pivot.rowField].localeCompare(a[pivot.rowField]);
+                return b[pivot.sortField].localeCompare(a[pivot.sortField]);
             }
         });
     }
@@ -920,8 +1076,7 @@ function valueFieldAggregation(data, valueField, aggregationType, isComparison)
         case 'average':
             const count = data.reduce((count, item) => count + (item[valueField] ? 1 : 0), 0);
             value =
-                data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) /
-                    (count === 0 ? 1 : count);
+                data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) / (count === 0 ? 1 : count);
             if (isComparison) {
                 const comparisonCount = data.reduce((count, item) => count + (item[`comparison_${valueField}`] ? 1 : 0), 0);
                 comparisonValue =
@@ -929,15 +1084,15 @@ function valueFieldAggregation(data, valueField, aggregationType, isComparison)
             }
             break;
         case 'max':
-            value = data.reduce((max, item) => Math.max(max, parseFloat(item[valueField] ?? 0)), -Infinity);
+            value = data.reduce((max, item) => Math.max(max, parseFloat(item[valueField] ?? -Infinity)), -Infinity);
             if (isComparison) {
-                comparisonValue = data.reduce((max, item) => Math.max(max, parseFloat(item[`comparison_${valueField}`] ?? 0)), -Infinity);
+                comparisonValue = data.reduce((max, item) => Math.max(max, parseFloat(item[`comparison_${valueField}`] ?? -Infinity)), -Infinity);
             }
             break;
         case 'min':
-            value = data.reduce((min, item) => Math.min(min, parseFloat(item[valueField] ?? 0)), Infinity);
+            value = data.reduce((min, item) => Math.min(min, parseFloat(item[valueField] ?? Infinity)), Infinity);
             if (isComparison) {
-                comparisonValue = data.reduce((min, item) => Math.min(min, parseFloat(item[`comparison_${valueField}`] ?? 0)), Infinity);
+                comparisonValue = data.reduce((min, item) => Math.min(min, parseFloat(item[`comparison_${valueField}`] ?? Infinity)), Infinity);
             }
             break;
         // Implement other aggregation types as needed