@quillsql/react 2.10.29 → 2.10.31

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

@@ -1,916 +0,0 @@
-"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;