@quillsql/react 2.10.31 → 2.10.32

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

@@ -0,0 +1,916 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const Context_1 = require("../../Context");
+const dataFetcher_1 = require("../../utils/dataFetcher");
+const assets_1 = require("../../assets");
+const PivotList_1 = require("./PivotList");
+const date_fns_1 = require("date-fns");
+const valueFormatter_1 = require("../../utils/valueFormatter");
+const ChartBuilder_1 = require("../../ChartBuilder");
+const QuillCard_1 = require("../../components/QuillCard");
+const QuillHover = () => {
+    return ((0, jsx_runtime_1.jsx)("style", { children: `
+  .quill-hover {
+      background-color: white;
+  }
+  .quill-hover:hover {
+    background-color:  rgba(56, 65, 81, 0.05);
+  }
+  .quill-tab:active {
+    background-color: rgba(56, 65, 81, 0.15);
+  }
+` }));
+};
+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[]>([
+    //     {
+    //       rowField: 'created_at',
+    //       rowFieldType: 'date',
+    //       columnField: undefined,
+    //       columnFieldType: undefined,
+    //       valueField: 'amount',
+    //       aggregationType: 'sum',
+    //       title: 'sum of amount by created_at',
+    //     },
+    //     {
+    //       rowField: 'merchant',
+    //       rowFieldType: 'varchar',
+    //       columnField: 'created_at',
+    //       columnFieldType: 'date',
+    //       valueField: 'amount',
+    //       aggregationType: 'sum',
+    //       title: 'sum of amount by merchant and created_at',
+    //     },
+    //     {
+    //       rowField: 'created_at',
+    //       rowFieldType: 'date',
+    //       columnField: 'merchant',
+    //       columnFieldType: 'varchar',
+    //       valueField: 'amount',
+    //       aggregationType: 'sum',
+    //       title: 'sum of amount by created_at and merchant',
+    //     },
+    //   ]);
+    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 [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 (columns || []).reduce((map, col) => {
+            // only use columns shown in the report builder's table
+            // also filter out id
+            if (col.field !== 'id' && !col.field.endsWith('_id')) {
+                map[col.field] = col.fieldType;
+            }
+            return map;
+        }, {});
+    }, [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: '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();
+        }
+        else {
+            selectPivot(pivot, index);
+            setSelectedPivotType('recommended');
+        }
+        setIsOpen(false);
+    };
+    const onSelectCreatedPivot = (pivot, index) => {
+        selectPivot(pivot, index);
+        setSelectedPivotType('created');
+        setIsOpen(false);
+        setPopUpTitle('Add Pivot');
+    };
+    const onEditPivot = (pivot, index) => {
+        setPivotRowField(pivot.rowField);
+        setPivotColumnField(pivot.columnField);
+        setPivotValueField(pivot.valueField);
+        setPivotAggregation(pivot.aggregationType);
+        setPivotUpdateIndex(index);
+        setShowUpdatePivot(true);
+    };
+    const onEditRecommendedPivot = (pivot, index) => {
+        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) {
+                // 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 = resp?.data?.pivotTables || [];
+            // for testing if needed
+            // const recommendedPivots = [
+            //   {
+            //     title: 'Total Amount by Merchant',
+            //     rowField: 'merchant',
+            //     valueField: 'amount',
+            //     aggregationType: 'sum',
+            //   },
+            //   {
+            //     title: 'Average Amount by User and Category',
+            //     rowField: 'user_name',
+            //     columnField: 'category',
+            //     valueField: 'amount',
+            //     aggregationType: 'average',
+            //   },
+            //   {
+            //     title: 'Count of Transactions by User and Merchant',
+            //     rowField: 'user_name',
+            //     columnField: 'merchant',
+            //     valueField: 'id',
+            //     aggregationType: 'count',
+            //   },
+            //   {
+            //     title: 'Total Amount by Merchant and Category',
+            //     rowField: 'merchant',
+            //     columnField: 'category',
+            //     valueField: 'amount',
+            //     aggregationType: 'sum',
+            //   },
+            //   {
+            //     title: 'Average Amount by Category and Date',
+            //     rowField: 'category',
+            //     columnField: 'created_at',
+            //     valueField: 'amount',
+            //     aggregationType: 'average',
+            //   },
+            //   {
+            //     title: 'Count of Transactions by Date and Category',
+            //     rowField: 'created_at',
+            //     columnField: 'category',
+            //     valueField: 'id',
+            //     aggregationType: 'count',
+            //   },
+            // ];
+            setRecommendedPivots(recommendedPivots
+                .filter((pivot) => pivot.rowField != '')
+                .map((pivot) => {
+                return {
+                    ...pivot,
+                    rowFieldType: columnsToShow[pivot.rowField],
+                    columnFieldType: columnsToShow[pivot.columnField],
+                };
+            }));
+            // 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]);
+    (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, 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);
+            return { pivot: p, rows, columns };
+        });
+        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.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)(PopoverComponent, { onClose: () => {
+                        setShowUpdatePivot(false);
+                        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,
+                                            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');
+                                            }
+                                            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: {
+                                                    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',
+                                                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',
+                                            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, cols, format) {
+    // Use the column field for the field and label if there is one
+    if (pivot.columnField) {
+        return cols.slice(1).map(({ field, label }) => ({ field, label, 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 }];
+    }
+    // otherwise use the default (ie. the field label)
+    return [
+        {
+            field: pivot.valueField,
+            label: '',
+            format: format,
+        },
+    ];
+}
+exports.generatePivotTableYAxis = generatePivotTableYAxis;
+function generatePivotTitle(pivot) {
+    return (0, ChartBuilder_1.snakeCaseToTitleCase)(`${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
+}
+function castValueToDate(value) {
+    if (!value) {
+        return null;
+    }
+    if (typeof value === 'object' && value.value) {
+        return new Date(value.value);
+    }
+    return new Date(value);
+}
+function getDateRange(dateRange, column, data) {
+    if (!dateRange || !dateRange[0]) {
+        if (data.length == 0 || !data[0][column]) {
+            return { start: new Date(), end: new Date() };
+        }
+        const firstDate = castValueToDate(data[0][column]);
+        if (data.length == 1) {
+            return {
+                start: firstDate || new Date(),
+                end: firstDate || new Date(),
+            };
+        }
+        let earliestDate = firstDate;
+        let lastestDate = firstDate;
+        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]);
+            }
+        }
+        return { start: earliestDate, end: lastestDate };
+    }
+    else {
+        return { start: dateRange[0], end: dateRange[1] };
+    }
+}
+function getDateBuckets(dateRange, column, data) {
+    if (!dateRange || !dateRange[0]) {
+        return (0, date_fns_1.eachMonthOfInterval)(getDateRange(dateRange, column, data));
+    }
+    const dayDifference = (0, date_fns_1.differenceInDays)(new Date(dateRange[1]), new Date(dateRange[0]));
+    return dayDifferenceToInterval(dayDifference, dateRange);
+}
+function getCompDateBuckets(dateRange, compDateRange, column, data) {
+    if (!dateRange || !dateRange[0]) {
+        return (0, date_fns_1.eachMonthOfInterval)(getDateRange(dateRange, column, data));
+    }
+    const dayDifference = (0, date_fns_1.differenceInDays)(new Date(dateRange[1]), new Date(dateRange[0]));
+    return dayDifferenceToInterval(dayDifference, compDateRange);
+}
+function dayDifferenceToInterval(dayDifference, dateRange) {
+    if (dayDifference < 14) {
+        return (0, date_fns_1.eachDayOfInterval)({ start: dateRange[0], end: dateRange[1] });
+    }
+    else if (dayDifference < 60) {
+        return (0, date_fns_1.eachWeekOfInterval)({ start: dateRange[0], end: dateRange[1] }, { weekStartsOn: 1 });
+    }
+    else if (dayDifference < 365 * 3) {
+        return (0, date_fns_1.eachMonthOfInterval)({ start: dateRange[0], end: dateRange[1] });
+    }
+    else {
+        return (0, date_fns_1.eachYearOfInterval)({ start: dateRange[0], end: dateRange[1] });
+    }
+}
+function getDateString(value, dateRange) {
+    let format;
+    if (!dateRange || !dateRange[0]) {
+        format = 'MMM_yyyy';
+    }
+    else {
+        const dayDifference = (0, date_fns_1.differenceInDays)(new Date(dateRange[1]), new Date(dateRange[0]));
+        if (dayDifference < 14) {
+            format = 'MMM_dd_yyyy';
+        }
+        else if (dayDifference < 60) {
+            format = 'MMM_dd-MMM_dd';
+        }
+        else if (dayDifference < 365 * 3) {
+            format = 'MMM_yyyy';
+        }
+        else {
+            format = 'yyyy';
+        }
+    }
+    return (0, valueFormatter_1.valueFormatter)({
+        value,
+        field: 'date',
+        fields: [{ field: 'date', format }],
+    });
+}
+function isDateField(fieldType) {
+    return (fieldType === 'date' ||
+        fieldType === 'datetime' ||
+        fieldType === 'timestamp' ||
+        fieldType === 'timestamptz');
+}
+exports.isDateField = isDateField;
+const isNullUndefinedOrInvalidDate = (date) => date === null || date === undefined || isNaN(date.getTime());
+// If the value is an object with key value (ie. a BigQuery date) we will
+// return the inner value, otherwise return passed param as-is.
+const handleBigQueryValue = (value) => {
+    if (Boolean(value) &&
+        typeof value === 'object' &&
+        Object.keys(value).length === 1 &&
+        value['value']) {
+        return value['value'];
+    }
+    return value;
+};
+// Process out all the BigQuery dates.
+const fixBigQueryData = (data) => {
+    const newData = [];
+    for (const row of data) {
+        const newRow = {};
+        for (const key in row) {
+            newRow[key] = handleBigQueryValue(row[key]);
+        }
+        newData.push(newRow);
+    }
+    return newData;
+};
+function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = null) {
+    // Handle edge-case for BigQuery objects.
+    data = fixBigQueryData(data);
+    if (dateRange[0] === null && dateRange[1] === null) {
+        dateRange = [new Date(0), (0, date_fns_1.add)(new Date(), { years: 5 })];
+    }
+    if (!compRange ||
+        isNullUndefinedOrInvalidDate(compRange[0]) ||
+        isNullUndefinedOrInvalidDate(compRange[1])) {
+        compRange = null;
+    }
+    const pivotRows = [];
+    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;
+    // If columnField is not provided, we will not be using uniqueColumns
+    const uniqueColumns = (pivot.columnField && pivot.columnField.trim()
+        ? isDateField(pivot.columnFieldType)
+            ? getDateBuckets(dateRange, pivot.columnField, data)
+            : [...new Set(data.map((item) => item[pivot.columnField || '']))]
+        : [pivot.valueField]).filter((col) => Boolean(col));
+    // Map from new dates to their corresponding prior dates
+    const COL_DATE_MAP = {};
+    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 isDateRow = isDateField(pivot.rowFieldType);
+            data.forEach((item) => {
+                if (isDateCol) {
+                    const key = getDateString(item[col], dateRange);
+                    const value = getDateString(item[`comparison_${col}`], dateRange);
+                    COL_DATE_MAP[key] = value;
+                }
+                if (isDateRow) {
+                    const key = getDateString(item[row], dateRange);
+                    const value = getDateString(item[`comparison_${row}`], dateRange);
+                    ROW_DATE_MAP[key] = value;
+                }
+            });
+        }
+        else {
+            const primaryColumns = [...uniqueColumns];
+            for (const primaryKey of primaryColumns) {
+                uniqueColumns.push(`comparison_${primaryKey}`);
+            }
+        }
+        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;
+    }
+    const rowsToGenerate = rowLimit !== -1 && rowLimit <= uniqueRows.length
+        ? uniqueRows.slice(0, rowLimit + 1)
+        : uniqueRows;
+    rowsToGenerate.forEach((rowValue, rowIndex) => {
+        const row = {
+            [pivot.rowField]: isDateField(pivot.rowFieldType)
+                ? getDateString(rowValue, dateRange)
+                : rowValue === null
+                    ? 'Null'
+                    : rowValue === false
+                        ? 'False'
+                        : rowValue === true
+                            ? 'True'
+                            : rowValue,
+        };
+        uniqueColumns.forEach((colValue, colIndex) => {
+            let comparisonFilteredData = [];
+            let filteredData = [];
+            let comparisonValue;
+            let value;
+            const nextRowValue = isDateField(pivot.rowFieldType)
+                ? 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)
+                    ? 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) &&
+                    isDateField(pivot.rowFieldType)) {
+                    filteredData = data.filter((item) => {
+                        return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
+                            start: rowValue,
+                            end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                        }) &&
+                            (0, date_fns_1.isWithinInterval)(new Date(item[pivot.columnField]), {
+                                start: colValue,
+                                end: (0, date_fns_1.subMilliseconds)(nextColumnValue, 1),
+                            }));
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                            }) &&
+                                (0, date_fns_1.isWithinInterval)(new Date(item[pivot.columnField]), {
+                                    start: colValue,
+                                    end: (0, date_fns_1.subMilliseconds)(nextColumnValue, 1),
+                                }));
+                        });
+                    }
+                }
+                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]), {
+                                start: colValue,
+                                end: (0, date_fns_1.subMilliseconds)(nextColumnValue, 1),
+                            }));
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (item[`comparison_${pivot.rowField}`] === rowValue &&
+                                (0, date_fns_1.isWithinInterval)(new Date(item[pivot.columnField]), {
+                                    start: colValue,
+                                    end: (0, date_fns_1.subMilliseconds)(nextColumnValue, 1),
+                                }));
+                        });
+                    }
+                }
+                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,
+                            end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                        }) && item[pivot.columnField || ''] === colValue);
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return ((0, date_fns_1.isWithinInterval)(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                            }) &&
+                                item[`comparison_${pivot.columnField}` || ''] === colValue);
+                        });
+                    }
+                }
+                else {
+                    filteredData = data.filter((item) => {
+                        return (item[pivot.rowField] === rowValue &&
+                            item[pivot.columnField || ''] === colValue);
+                    });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (item[`comparison_${pivot.rowField}`] === rowValue &&
+                                item[`comparison_${pivot.columnField}`] === colValue);
+                        });
+                    }
+                }
+            }
+            else {
+                // NOTE: For 1D columns, the comparisons are handled inside the colvalue
+                // so there is no need to filter for comparisonFilteredData here.
+                // If columnField is not provided, filter by rowField only
+                if (colValue.startsWith('comparison_')) {
+                    filteredData = isDateField(pivot.rowFieldType)
+                        ? data.filter((item) => {
+                            return (compRowValue &&
+                                (0, date_fns_1.isWithinInterval)(new Date(item[`comparison_${pivot.rowField}`]), {
+                                    start: compRowValue,
+                                    end: (0, date_fns_1.subMilliseconds)(compNextRowValue, 1),
+                                }));
+                        })
+                        : data.filter((item) => item[`comparison_${pivot.rowField}`] === compRowValue);
+                }
+                else {
+                    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
+            const key = pivot.columnField && pivot.columnField.trim()
+                ? pivot.valueField
+                : colValue;
+            switch (pivot.aggregationType) {
+                case 'sum':
+                    value = filteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0);
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0);
+                    }
+                    break;
+                case 'count':
+                    value = filteredData.length;
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.length;
+                    }
+                    break;
+                case 'average':
+                    value = filteredData.length
+                        ? filteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / filteredData.length
+                        : 0;
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.length
+                            ? comparisonFilteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / comparisonFilteredData.length
+                            : 0;
+                    }
+                    break;
+                // Implement other aggregation types as needed
+                default:
+                    throw new Error('Unsupported aggregation type');
+            }
+            // Set the value on the row
+            // If columnField is not provided, colValue will be valueField
+            row[isDateField(pivot.columnFieldType)
+                ? getDateString(colValue, dateRange)
+                : colValue] = pivot.aggregationType === 'count' ? value : value.toFixed(2);
+            if (isComparison && pivot.columnField) {
+                if (isDateField(pivot.columnFieldType)) {
+                    row[`comparison_${getDateString(colValue, dateRange)}`] =
+                        pivot.aggregationType === 'count'
+                            ? comparisonValue
+                            : comparisonValue.toFixed(2);
+                }
+                else {
+                    row[`comparison_${colValue}`] =
+                        pivot.aggregationType === 'count'
+                            ? comparisonValue
+                            : comparisonValue.toFixed(2);
+                }
+            }
+        });
+        pivotRows.push(row);
+    });
+    const columns = [
+        {
+            label: pivot.rowField === null
+                ? 'Null'
+                : pivot.rowField === false
+                    ? 'False'
+                    : (0, ChartBuilder_1.snakeCaseToTitleCase)(pivot.rowField),
+            field: pivot.rowField,
+        },
+        ...(!pivot.columnField
+            ? [
+                {
+                    label: pivot.rowField === null
+                        ? 'Null'
+                        : pivot.rowField === false
+                            ? 'False'
+                            : `Comparison ${(0, ChartBuilder_1.snakeCaseToTitleCase)(pivot.rowField)}`,
+                    field: `comparison_${pivot.rowField}`,
+                },
+            ]
+            : []),
+        ...uniqueColumns.map((column, index) => {
+            const columnName = isDateField(pivot.columnFieldType)
+                ? getDateString(column, dateRange)
+                : column;
+            return {
+                label: column === null
+                    ? 'Null'
+                    : column === false
+                        ? 'False'
+                        : pivot.aggregationType === 'count' &&
+                            !pivot.columnField &&
+                            index === 1
+                            ? 'Count'
+                            : (0, ChartBuilder_1.snakeCaseToTitleCase)(columnName),
+                field: columnName,
+            };
+        }),
+        ...(isComparison && pivot.columnField
+            ? uniqueColumns.map((column, index) => {
+                const columnName = isDateField(pivot.columnFieldType)
+                    ? getDateString(column, dateRange)
+                    : column;
+                return {
+                    label: column === null
+                        ? 'Null'
+                        : column === false
+                            ? 'False'
+                            : pivot.aggregationType === 'count' &&
+                                !pivot.columnField &&
+                                index === 1
+                                ? 'Comparison Count'
+                                : isDateField(pivot.columnFieldType)
+                                    ? COL_DATE_MAP[getDateString(column, dateRange)] ??
+                                        'Comparison'
+                                    : `Comparison ${(0, ChartBuilder_1.snakeCaseToTitleCase)(columnName)}`,
+                    field: `comparison_${columnName}`,
+                };
+            })
+            : []),
+    ];
+    return { rows: pivotRows, columns };
+}
+exports.generatePivotTable = generatePivotTable;