@quillsql/react 2.6.2 → 2.6.4

package/lib/internals/ReportBuilder/PivotModal.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generatePivotTable = exports.PivotModal = void 0;
+exports.generatePivotTable = exports.isDateField = exports.generatePivotTableYAxis = exports.PivotModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const react_1 = require("react");
@@ -10,6 +10,8 @@ const assets_1 = require("../../assets");
 const PivotList_1 = require("./PivotList");
 const date_fns_1 = require("date-fns");
 const Chart_1 = require("../../Chart");
+const ChartBuilder_1 = require("../../ChartBuilder");
+const QuillCard_1 = require("../../components/QuillCard");
 const QuillHover = () => {
     return ((0, jsx_runtime_1.jsx)("style", { children: `
   .quill-hover {
@@ -23,12 +25,8 @@ const QuillHover = () => {
   }
 ` }));
 };
-const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComponent, ModalTriggerComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, data, columns, theme, dateRange, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [showUpdatePivot, setShowUpdatePivot] = (0, react_1.useState)(false);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
-    const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
-    const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
+const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, PopoverComponent, 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, }) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     // for testing
     //   const [createdPivots, setCreatedPivots] = useState<Pivot[]>([
     //     {
@@ -61,30 +59,84 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
     //   ]);
     const [pivotUpdateIndex, setPivotUpdateIndex] = (0, react_1.useState)(null);
     const [selectedPivotType, setSelectedPivotType] = (0, react_1.useState)('recommended');
-    const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
-    const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
-    const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
-    const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
     const [errors, setErrors] = (0, react_1.useState)([]);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [divWidth, setDivWidth] = (0, react_1.useState)(0);
+    const editModalRef = (0, react_1.useRef)();
+    const calculateWidth = () => {
+        return editModalRef.current.offsetWidth;
+    };
+    (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());
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        // Cleanup listener
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // Measure the width of the div and update state
+        if (editModalRef.current) {
+            setDivWidth(calculateWidth());
+        }
+    }, [editModalRef.current, showUpdatePivot]);
+    (0, react_1.useEffect)(() => {
+        setSelectedPivotIndex(-1);
+        setPivotUpdateIndex(null);
+        setSelectedPivotType(undefined);
+        setPivotRowField(undefined);
+        setPivotColumnField(undefined);
+        setPivotValueField(undefined);
+        setPivotAggregation(undefined);
+        setIsOpen(false);
+        setErrors([]);
+    }, [selectedTable]);
     const columnsToShow = (0, react_1.useMemo)(() => {
-        return selectedTable.columns.reduce(function (map, col) {
+        return (selectedTable?.columns || []).reduce((map, col) => {
             // only use columns shown in the report builder's table
-            if (columns.find(column => column.field === col.name)) {
+            // also filter out id
+            if (col.name !== 'id' &&
+                !col.name.endsWith('_id') &&
+                columns.find(column => column.field === col.name)) {
                 map[col.name] = col.fieldType;
             }
             return map;
         }, {});
     }, [selectedTable, columns]);
+    const selectedPivotTable = (0, react_1.useMemo)(() => {
+        if (selectedPivotIndex === -1) {
+            return null;
+        }
+        const pivot = createdPivots[selectedPivotIndex];
+        const { rows, columns } = generatePivotTable(pivot, data, dateRange);
+        return {
+            pivot: pivot,
+            rows: rows,
+            columns: columns,
+        };
+    }, [selectedPivotIndex, data, dateRange, createdPivots]);
     const columnSelectOptions = (0, react_1.useMemo)(() => {
         return [
-            { label: '', value: null },
+            { label: 'Select', value: '' },
             ...Object.keys(columnsToShow).map(key => {
                 return { label: key, value: key };
             }),
         ];
     }, [columnsToShow]);
     const onSelectRecommendedPivot = (pivot, index) => {
+        if (showEditOnPivotClick) {
+            onEditPivot(pivot, index);
+            return;
+        }
         if (index === selectedPivotIndex && selectedPivotType === 'recommended') {
             removePivot();
         }
@@ -95,16 +147,10 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
         setIsOpen(false);
     };
     const onSelectCreatedPivot = (pivot, index) => {
-        if (index === selectedPivotIndex &&
-            selectedPivotType === 'created' &&
-            pivotUpdateIndex === null) {
-            removePivot();
-        }
-        else {
-            selectPivot(pivot, index);
-            setSelectedPivotType('created');
-        }
+        selectPivot(pivot, index);
+        setSelectedPivotType('created');
         setIsOpen(false);
+        setPopUpTitle('Add Pivot');
     };
     const onEditPivot = (pivot, index) => {
         setPivotRowField(pivot.rowField);
@@ -118,22 +164,29 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
         onEditPivot(pivot, null);
     };
     const refreshPivots = (0, react_1.useCallback)(async () => {
+        if (isLoading || Object.keys(columnsToShow).length === 0) {
+            return;
+        }
         setIsLoading(true);
         const cloudBody = {
             tableSchema: Object.keys(columnsToShow).reduce(function (map, col) {
-                map[col] = columnsToShow[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 resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'pivotai', cloudBody);
-            const recommendedPivots = JSON.parse(resp?.data?.choices?.[0]?.message?.content).pivotTables;
+            const recommendedPivots = resp?.data?.pivotTables || [];
             // for testing if needed
             // const recommendedPivots = [
             //   {
-            //     title: 'Total Amount by Merchant and Category',
+            //     title: 'Total Amount by Merchant',
             //     rowField: 'merchant',
-            //     columnField: 'category',
             //     valueField: 'amount',
             //     aggregationType: 'sum',
             //   },
@@ -152,16 +205,16 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
             //     aggregationType: 'count',
             //   },
             //   {
-            //     title: 'Total Amount by Merchant and Customer',
+            //     title: 'Total Amount by Merchant and Category',
             //     rowField: 'merchant',
-            //     columnField: 'customer_id',
+            //     columnField: 'category',
             //     valueField: 'amount',
             //     aggregationType: 'sum',
             //   },
             //   {
-            //     title: 'Average Amount by Date and Category',
-            //     rowField: 'created_at',
-            //     columnField: 'category',
+            //     title: 'Average Amount by Category and Date',
+            //     rowField: 'category',
+            //     columnField: 'created_at',
             //     valueField: 'amount',
             //     aggregationType: 'average',
             //   },
@@ -173,7 +226,9 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
             //     aggregationType: 'count',
             //   },
             // ];
-            setRecommendedPivots(recommendedPivots.map(pivot => {
+            setRecommendedPivots(recommendedPivots
+                .filter(pivot => pivot.rowField != '')
+                .map(pivot => {
                 return {
                     ...pivot,
                     rowFieldType: columnsToShow[pivot.rowField],
@@ -187,7 +242,12 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
             console.error('Failed parsing pivotai response', e);
         }
         setIsLoading(false);
-    }, [selectedTable, data, columnsToShow]);
+    }, [selectedTable, data, columnsToShow, isLoading]);
+    (0, react_1.useEffect)(() => {
+        if (recommendedPivots.length === 0) {
+            refreshPivots();
+        }
+    }, [refreshPivots]);
     const recommendedPivotTables = (0, react_1.useMemo)(() => {
         const pts = recommendedPivots.map(p => {
             const { rows, columns } = generatePivotTable(p, data, dateRange);
@@ -202,192 +262,217 @@ const PivotModal = ({ selectedTable, SelectComponent, ButtonComponent, ModalComp
         });
         return pts;
     }, [createdPivots, data]);
+    const samplePivotTable = (0, react_1.useMemo)(() => {
+        if (!pivotAggregation || !pivotRowField) {
+            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',
                 textAlign: 'left',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    }, children: [selectedPivotIndex !== -1 && ((0, jsx_runtime_1.jsx)("span", { style: {
-                                height: 10,
-                                width: 10,
-                                backgroundColor: theme.primaryButtonColor,
-                                borderRadius: '50%',
-                                position: 'absolute',
-                                top: -2,
-                                right: -2,
-                            } })), (0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => {
-                                // table is not loaded yet, so pivot button is not clickable
-                                if (Object.keys(columnsToShow).length === 0) {
-                                    return;
-                                }
-                                if (!isOpen && recommendedPivots.length === 0) {
-                                    refreshPivots();
-                                }
-                                setIsOpen(isOpen => !isOpen);
-                                setShowUpdatePivot(false);
-                            }, label: "Pivot", Icon: assets_1.UpLeftArrowsIcon })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => {
-                        setIsOpen(false);
+                    }, children: selectedPivotIndex !== -1 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                            height: 10,
+                            width: 10,
+                            backgroundColor: theme.primaryButtonColor,
+                            borderRadius: '50%',
+                            position: 'absolute',
+                            top: -2,
+                            right: -2,
+                        } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { onClose: () => {
                         setShowUpdatePivot(false);
-                    }, title: "Add pivot", children: showUpdatePivot ? ((0, jsx_runtime_1.jsxs)("div", { style: {
-                            backgroundColor: 'rgb(255, 255, 255)',
-                            display: 'flex',
-                            flexDirection: 'column',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                    fontSize: 14,
-                                    marginBottom: '6px',
-                                    fontWeight: '600',
-                                    color: theme.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                }, children: "Create pivot" }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 5,
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            gap: 10,
-                                            marginBottom: 5,
-                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                            fontSize: 14,
-                                                            marginBottom: '6px',
-                                                            fontWeight: '600',
-                                                            color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
-                                                        }, children: "Row Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotRowField, onChange: e => {
-                                                            setPivotRowField(e);
-                                                        }, options: columnSelectOptions })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                            fontSize: 14,
-                                                            marginBottom: '6px',
-                                                            fontWeight: '600',
-                                                            color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
-                                                        }, children: "Column Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: e => {
-                                                            setPivotColumnField(e);
-                                                        }, options: columnSelectOptions })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            gap: 10,
+                        setPopUpTitle('Add Pivot');
+                    }, style: rightAlign ? { right: 0 } : {}, parentRef: parentRef, showTrigger: showTrigger, label: triggerButtonText, isOpen: isOpen, setIsOpen: setIsOpen, onClick: () => {
+                        // table is not loaded yet, so pivot button is not clickable
+                        if (Object.keys(columnsToShow).length === 0) {
+                            return;
+                        }
+                        if (!isOpen && recommendedPivots.length === 0) {
+                            refreshPivots();
+                        }
+                        setShowUpdatePivot(false);
+                    }, children: (0, jsx_runtime_1.jsx)("div", { 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)(HeaderComponent, { children: popUpTitle }), (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,
-                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                            fontSize: 14,
-                                                            marginBottom: '6px',
-                                                            fontWeight: '600',
-                                                            color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
-                                                        }, children: "Value Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotValueField, onChange: e => {
-                                                            setPivotValueField(e);
-                                                        }, options: columnSelectOptions })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                            fontSize: 14,
-                                                            marginBottom: '6px',
-                                                            fontWeight: '600',
-                                                            color: theme.secondaryTextColor,
-                                                            fontFamily: theme?.fontFamily,
-                                                        }, children: "Aggregation Type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, onChange: e => {
-                                                            setPivotAggregation(e);
-                                                        }, options: [null, 'sum', 'average', 'count'].map(option => {
-                                                            return { label: option, value: option };
-                                                        }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
-                                        const errors = [];
-                                        if (!pivotRowField) {
-                                            errors.push('Row field cannot be empty');
-                                        }
-                                        if (!pivotValueField) {
-                                            errors.push('Value field cannot be empty');
-                                        }
-                                        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);
-                                            if (pivotUpdateIndex !== null) {
-                                                createdPivots.splice(pivotUpdateIndex, 1, pivot);
-                                                setCreatedPivots([...createdPivots]);
-                                                onSelectCreatedPivot(pivot, pivotUpdateIndex);
-                                                setPivotUpdateIndex(null);
+                                            minHeight: 160,
+                                        }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 140, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) })) : ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 20, maxWidth: 470 }, children: (0, jsx_runtime_1.jsx)(QuillCard_1.QuillCard, { theme: theme, clickable: false, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    color: theme.secondaryTextColor,
+                                                }, children: "Select a row field and aggregation type to see a preview" }) }) })) }), (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, { children: "Row Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Row Field', id: "pivot-row-field", value: pivotRowField, onChange: e => {
+                                                                setPivotRowField(e === '' ? undefined : e);
+                                                            }, options: columnSelectOptions, theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Column Field', id: "pivot-row-field", value: pivotColumnField, onChange: e => {
+                                                                setPivotColumnField(e === '' ? undefined : e);
+                                                            }, options: columnSelectOptions, theme: theme })] })] }), (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, { children: "Value Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Value Field', id: "pivot-row-field", value: pivotValueField, onChange: e => {
+                                                                setPivotValueField(e === '' ? undefined : e);
+                                                            }, options: pivotAggregation === 'count'
+                                                                ? columnSelectOptions
+                                                                : columnSelectOptions.filter(option => {
+                                                                    return (option.value === '' ||
+                                                                        ChartBuilder_1.numberFormatOptions.includes(columns.find(col => col.field === option.value)?.format));
+                                                                }), theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Aggregation Type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Aggregation Type', id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: e => {
+                                                                if (e !== 'count' &&
+                                                                    pivotValueField &&
+                                                                    !ChartBuilder_1.numberFormatOptions.includes(columns.find(col => col.field === pivotValueField)
+                                                                        ?.format)) {
+                                                                    setPivotValueField(null);
+                                                                }
+                                                                setPivotAggregation(e === '' ? undefined : e);
+                                                            }, options: ['', 'sum', 'average', 'count'].map(option => {
+                                                                return { label: option || 'Select', value: option };
+                                                            }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
+                                            const errors = [];
+                                            if (!pivotRowField) {
+                                                errors.push('Row field cannot be empty');
                                             }
-                                            else {
-                                                onSelectCreatedPivot(pivot, createdPivots.length);
-                                                setCreatedPivots([...createdPivots, pivot]);
+                                            if (!pivotValueField && pivotAggregation !== 'count') {
+                                                errors.push("Value field cannot be empty when aggregation is not 'count'");
                                             }
-                                            setIsOpen(false);
-                                        }
-                                        setErrors(errors);
-                                    }, label: pivotUpdateIndex !== null ? 'Edit Pivot' : 'Create Pivot' }) }), (0, jsx_runtime_1.jsx)("div", { children: errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                fontSize: 14,
-                                                marginBottom: '6px',
-                                                marginTop: '12px',
-                                                fontWeight: '600',
-                                                color: theme.secondaryTextColor,
-                                            }, children: "Pivot Errors" }), errors.map((error, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                borderRadius: 8,
-                                                backgroundColor: '#FF9494',
-                                                paddingLeft: '12px',
-                                                paddingRight: '8px',
-                                                height: 30,
+                                            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: {
+                                                    fontSize: 14,
+                                                    marginBottom: '6px',
+                                                    marginTop: '12px',
+                                                    fontWeight: '600',
+                                                    color: theme.secondaryTextColor,
+                                                }, children: "Pivot Errors" }), 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, 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: {
+                                            fontWeight: '600',
+                                            marginBottom: 5,
+                                            fontSize: 18,
+                                        }, children: "Recommended Pivots" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { onClick: refreshPivots, style: {
+                                                color: theme?.secondaryTextColor,
+                                                cursor: 'pointer',
+                                                marginTop: 0,
+                                                marginBottom: 12,
                                                 display: 'flex',
+                                                flexDirection: 'row',
                                                 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: 700,
-                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontWeight: '600',
-                                        marginBottom: 5,
-                                        fontSize: 18,
-                                    }, children: "Recommended Pivots" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { onClick: refreshPivots, style: {
-                                            color: theme?.secondaryTextColor,
-                                            cursor: 'pointer',
-                                            marginTop: 0,
-                                            marginBottom: 12,
-                                            marginLeft: -8,
+                                                width: 'min-content',
+                                                fontSize: 14,
+                                                paddingLeft: 8,
+                                                paddingRight: 6,
+                                                paddingTop: 6,
+                                                paddingBottom: 6,
+                                                borderRadius: 5,
+                                            }, className: "quill-hover", children: [(0, jsx_runtime_1.jsx)(QuillHover, {}), (0, jsx_runtime_1.jsx)(assets_1.RefreshIcon, { style: { marginRight: 5 } }), "Refresh"] }) }), 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',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            fontSize: 14,
-                                            maxWidth: 90,
-                                            paddingLeft: 8,
-                                            paddingRight: 6,
-                                            paddingTop: 6,
-                                            paddingBottom: 6,
-                                            borderRadius: 5,
-                                        }, className: "quill-hover", children: [(0, jsx_runtime_1.jsx)(QuillHover, {}), (0, jsx_runtime_1.jsx)(assets_1.RefreshIcon, { style: { marginRight: 5 } }), "Refresh"] }) }), 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)(PivotList_1.PivotList, { pivotTables: recommendedPivotTables, theme: theme, onSelectPivot: onSelectRecommendedPivot, selectedPivotIndex: selectedPivotType === 'recommended'
-                                        ? selectedPivotIndex
-                                        : -1, ButtonComponent: ButtonComponent, onEditPivot: onEditRecommendedPivot }))] }) })) })] }) }));
+                                            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.jsxs)("div", { children: [recommendedPivotTables.length == 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 20 }, children: "There are currently no recommended pivots available." })), (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 })] }))] })) })) }) })] }) }));
 };
 exports.PivotModal = PivotModal;
+function generatePivotTableYAxis(pivot, pivotColumns, format) {
+    return pivot.columnField
+        ? pivotColumns.slice(1).map(col => {
+            return {
+                field: col.field,
+                label: col.label,
+                format: format,
+            };
+        })
+        : [
+            {
+                field: pivot.valueField,
+                label: '',
+                format: format,
+            },
+        ];
+}
+exports.generatePivotTableYAxis = generatePivotTableYAxis;
 function generatePivotTitle(pivot) {
-    return `${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`;
+    return (0, ChartBuilder_1.snakeCaseToTitleCase)(`${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
 }
 function getDateBuckets(dateRange) {
     const dayDifference = (0, date_fns_1.differenceInDays)(new Date(dateRange[1]), new Date(dateRange[0]));
@@ -425,35 +510,43 @@ function getDateString(value, dateRange) {
         fields: [{ field: 'date', format }],
     });
 }
+function isDateField(fieldType) {
+    return (fieldType === 'date' ||
+        fieldType === 'datetime' ||
+        fieldType === 'timestamp' ||
+        fieldType === 'timestamptz');
+}
+exports.isDateField = isDateField;
 function generatePivotTable(pivot, data, dateRange) {
     const pivotRows = [];
-    const uniqueRows = pivot.rowFieldType === 'date'
+    const uniqueRows = isDateField(pivot.rowFieldType)
         ? getDateBuckets(dateRange)
         : [...new Set(data.map(item => item[pivot.rowField]))];
     // If columnField is not provided, we will not be using uniqueColumns
     const uniqueColumns = pivot.columnField
-        ? pivot.columnFieldType === 'date'
+        ? isDateField(pivot.columnFieldType)
             ? getDateBuckets(dateRange)
             : [...new Set(data.map(item => item[pivot.columnField || '']))]
         : [pivot.valueField];
     uniqueRows.forEach((rowValue, rowIndex) => {
         const row = {
-            [pivot.rowField]: pivot.rowFieldType === 'date'
+            [pivot.rowField]: isDateField(pivot.rowFieldType)
                 ? getDateString(rowValue, dateRange)
                 : rowValue,
         };
         uniqueColumns.forEach((colValue, colIndex) => {
             let filteredData;
             let value;
-            const nextRowValue = pivot.rowFieldType === 'date'
+            const nextRowValue = isDateField(pivot.rowFieldType)
                 ? uniqueRows[rowIndex + 1] || (0, date_fns_1.endOfDay)(dateRange[1])
                 : null;
             if (pivot.columnField) {
-                const nextColumnValue = pivot.columnFieldType === 'date'
+                const nextColumnValue = isDateField(pivot.columnFieldType)
                     ? uniqueColumns[colIndex + 1] || (0, date_fns_1.endOfDay)(dateRange[1])
                     : null;
                 // If columnField is provided, filter by both rowField and columnField
-                if (pivot.columnFieldType === 'date' && pivot.rowFieldType === 'date') {
+                if (isDateField(pivot.columnFieldType) &&
+                    isDateField(pivot.rowFieldType)) {
                     filteredData = data.filter((item) => {
                         return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
                             start: rowValue,
@@ -465,8 +558,8 @@ function generatePivotTable(pivot, data, dateRange) {
                             }));
                     });
                 }
-                else if (pivot.columnFieldType === 'date' &&
-                    pivot.rowFieldType !== 'date') {
+                else if (isDateField(pivot.columnFieldType) &&
+                    !isDateField(pivot.rowFieldType)) {
                     filteredData = data.filter((item) => {
                         return (item[pivot.rowField] === rowValue &&
                             (0, date_fns_1.isWithinInterval)(new Date(item[pivot.columnField]), {
@@ -475,8 +568,8 @@ function generatePivotTable(pivot, data, dateRange) {
                             }));
                     });
                 }
-                else if (pivot.columnFieldType !== 'date' &&
-                    pivot.rowFieldType === 'date') {
+                else if (!isDateField(pivot.columnFieldType) &&
+                    isDateField(pivot.rowFieldType)) {
                     filteredData = data.filter((item) => {
                         return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
                             start: rowValue,
@@ -493,15 +586,14 @@ function generatePivotTable(pivot, data, dateRange) {
             }
             else {
                 // If columnField is not provided, filter by rowField only
-                filteredData =
-                    pivot.rowFieldType === 'date'
-                        ? data.filter(item => {
-                            return (0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
-                                start: rowValue,
-                                end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
-                            });
-                        })
-                        : data.filter(item => item[pivot.rowField] === rowValue);
+                filteredData = isDateField(pivot.rowFieldType)
+                    ? data.filter(item => {
+                        return (0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
+                            start: rowValue,
+                            end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                        });
+                    })
+                    : data.filter(item => item[pivot.rowField] === rowValue);
             }
             // Aggregation logic remains the same
             switch (pivot.aggregationType) {
@@ -522,9 +614,9 @@ function generatePivotTable(pivot, data, dateRange) {
             }
             // Set the value on the row
             // If columnField is not provided, colValue will be valueField
-            row[pivot.columnFieldType === 'date'
+            row[isDateField(pivot.columnFieldType)
                 ? getDateString(colValue, dateRange)
-                : colValue] = value;
+                : colValue] = pivot.aggregationType === 'count' ? value : value.toFixed(2);
         });
         pivotRows.push(row);
     });
@@ -533,11 +625,11 @@ function generatePivotTable(pivot, data, dateRange) {
     return {
         rows: pivotRows,
         columns: uniqueColumns.map((column, index) => {
-            const columnName = pivot.columnFieldType === 'date' && index > 0 // first row is rowField
+            const columnName = isDateField(pivot.columnFieldType) && index > 0 // first row is rowField
                 ? getDateString(column, dateRange)
                 : column;
             return {
-                label: columnName,
+                label: (0, ChartBuilder_1.snakeCaseToTitleCase)(columnName),
                 field: columnName,
             };
         }),