@quillsql/react 2.9.1 → 2.9.3

package/dist/internals/ReportBuilder/PivotModal.js

@@ -1,19 +1,16 @@
-"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");
+import { jsx as _jsx, jsxs as _jsxs } from "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");
+import { useCallback, useContext, useMemo, useState, useEffect, useRef, } from 'react';
+import { ClientContext } from '../../Context';
+import { getDataFromCloud } from '../../utils/dataFetcher';
+import { RefreshIcon } from '../../assets';
+import { PivotList, PivotCard } from './PivotList';
+import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, endOfDay, isWithinInterval, subMilliseconds, min, max, } from 'date-fns';
+import { valueFormatter } from '../../utils/valueFormatter';
+import { numberFormatOptions, snakeCaseToTitleCase } from '../../ChartBuilder';
+import { QuillCard } from '../../components/QuillCard';
 const QuillHover = () => {
-    return ((0, jsx_runtime_1.jsx)("style", { children: `
+    return (_jsx("style", { children: `
   .quill-hover {
       background-color: white;
   }
@@ -25,8 +22,8 @@ const QuillHover = () => {
   }
 ` }));
 };
-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);
+export 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] = useState(false);
     // for testing
     //   const [createdPivots, setCreatedPivots] = useState<Pivot[]>([
     //     {
@@ -57,16 +54,16 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
     //       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 [pivotUpdateIndex, setPivotUpdateIndex] = useState(null);
+    const [selectedPivotType, setSelectedPivotType] = useState('recommended');
+    const [errors, setErrors] = useState([]);
+    const [client] = useContext(ClientContext);
+    const [divWidth, setDivWidth] = useState(0);
+    const editModalRef = useRef();
     const calculateWidth = () => {
         return editModalRef.current.offsetWidth;
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Measure the width of the div and update state
         if (editModalRef.current) {
             setDivWidth(calculateWidth());
@@ -83,13 +80,13 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Measure the width of the div and update state
         if (editModalRef.current) {
             setDivWidth(calculateWidth());
         }
     }, [editModalRef.current, showUpdatePivot]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setSelectedPivotIndex(-1);
         setPivotUpdateIndex(null);
         setSelectedPivotType(undefined);
@@ -100,7 +97,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         setIsOpen(false);
         setErrors([]);
     }, [selectedTable]);
-    const columnsToShow = (0, react_1.useMemo)(() => {
+    const columnsToShow = useMemo(() => {
         return (columns || []).reduce((map, col) => {
             // only use columns shown in the report builder's table
             // also filter out id
@@ -110,7 +107,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
             return map;
         }, {});
     }, [columns]);
-    const selectedPivotTable = (0, react_1.useMemo)(() => {
+    const selectedPivotTable = useMemo(() => {
         if (selectedPivotIndex === -1) {
             return null;
         }
@@ -122,7 +119,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
             columns: columns,
         };
     }, [selectedPivotIndex, data, dateRange, createdPivots]);
-    const columnSelectOptions = (0, react_1.useMemo)(() => {
+    const columnSelectOptions = useMemo(() => {
         return [
             { label: 'Select', value: '' },
             ...Object.keys(columnsToShow).map((key) => {
@@ -161,7 +158,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
     const onEditRecommendedPivot = (pivot, index) => {
         onEditPivot(pivot, null);
     };
-    const refreshPivots = (0, react_1.useCallback)(async () => {
+    const refreshPivots = useCallback(async () => {
         if (isLoading || Object.keys(columnsToShow).length === 0) {
             return;
         }
@@ -178,7 +175,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
             }, {}),
         };
         try {
-            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'pivotai', cloudBody);
+            const resp = await getDataFromCloud(client, 'pivotai', cloudBody);
             const recommendedPivots = resp?.data?.pivotTables || [];
             // for testing if needed
             // const recommendedPivots = [
@@ -241,26 +238,26 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         }
         setIsLoading(false);
     }, [selectedTable, data, columnsToShow, isLoading]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (recommendedPivots.length === 0) {
             refreshPivots();
         }
     }, [refreshPivots]);
-    const recommendedPivotTables = (0, react_1.useMemo)(() => {
+    const recommendedPivotTables = 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 createdPivotTables = 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)(() => {
+    const samplePivotTable = useMemo(() => {
         if (!pivotAggregation || !pivotRowField) {
             return null;
         }
@@ -281,15 +278,15 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         pivotColumnField,
         columnsToShow,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
                 position: 'relative',
                 display: 'inline-block',
                 textAlign: 'left',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [_jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    }, children: selectedPivotIndex !== -1 && ((0, jsx_runtime_1.jsx)("span", { style: {
+                    }, children: selectedPivotIndex !== -1 && (_jsx("span", { style: {
                             height: 10,
                             width: 10,
                             backgroundColor: theme.primaryButtonColor,
@@ -297,7 +294,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                             position: 'absolute',
                             top: -2,
                             right: -2,
-                        } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { onClose: () => {
+                        } })) }), _jsx(PopoverComponent, { onClose: () => {
                         setShowUpdatePivot(false);
                         setPopUpTitle('Add Pivot');
                     }, style: rightAlign ? { right: 0 } : {}, parentRef: parentRef, showTrigger: showTrigger, label: triggerButtonText, isOpen: isOpen, setIsOpen: setIsOpen, onClick: () => {
@@ -309,52 +306,52 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                             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: {
+                    }, children: _jsx("div", { children: showUpdatePivot ? (_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: {
+                            }, children: [_jsx(HeaderComponent, { children: popUpTitle }), _jsx("div", { style: { height: 12 } }), _jsx("div", { style: { width: divWidth }, children: samplePivotTable ? (_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: {
+                                        }, children: _jsx(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 }) })) : (_jsx("div", { style: { marginBottom: 20, maxWidth: 470 }, children: _jsx(QuillCard, { theme: theme, clickable: false, children: _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: {
+                                                }, children: "Select a row field and aggregation type to see a preview" }) }) })) }), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 10,
                                         alignItems: 'center',
                                         justifyContent: 'space-between',
-                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    }, children: [_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) => {
+                                            }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Row Field" }), _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) => {
+                                                            }, options: columnSelectOptions, theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Column Field" }), _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: {
+                                                            }, options: columnSelectOptions, theme: theme })] })] }), _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) => {
+                                            }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Value Field" }), _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) => {
+                                                                        numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
+                                                                }), theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Aggregation Type" }), _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)) {
+                                                                    !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: () => {
+                                                            }) })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
                                             const errors = [];
                                             if (!pivotRowField) {
                                                 errors.push('Row field cannot be empty');
@@ -381,13 +378,13 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                 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: {
+                                        }, label: popUpTitle }) }), _jsx("div", { children: errors.length > 0 && (_jsxs("div", { children: [_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: {
+                                                }, children: "Pivot Errors" }), errors.map((error, index) => (_jsx("div", { style: {
                                                     borderRadius: 8,
                                                     backgroundColor: '#FF9494',
                                                     paddingLeft: '12px',
@@ -400,7 +397,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                     fontFamily: theme?.fontFamily,
                                                     color: 'white',
                                                     marginBottom: 5,
-                                                }, children: error }, index)))] })) })] })) : ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                }, children: error }, index)))] })) })] })) : (_jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 fontFamily: theme?.fontFamily,
@@ -408,20 +405,20 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                 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: () => {
+                            }, children: selectedPivotIndex >= 0 ? (_jsx("div", { children: _jsx("div", { onClick: () => {
                                         setPopUpTitle('Edit Pivot');
                                         onEditPivot(createdPivots[0], 0);
-                                    }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                    }, children: _jsx(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: {
+                                        }, clickable: true, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_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: {
+                                        }, children: "Recommended Pivots" }), _jsx("div", { children: _jsxs("div", { onClick: refreshPivots, style: {
                                                 color: theme?.secondaryTextColor,
                                                 cursor: 'pointer',
                                                 marginTop: 0,
@@ -436,7 +433,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                 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: {
+                                            }, className: "quill-hover", children: [_jsx(QuillHover, {}), _jsx(RefreshIcon, { style: { marginRight: 5 } }), "Refresh"] }) }), isLoading ? (_jsxs("div", { style: {
                                             background: theme.backgroundColor,
                                             width: 250,
                                             minWidth: 250,
@@ -447,20 +444,19 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                             display: 'flex',
                                             margin: '0px auto',
                                             justifyContent: 'center',
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] })) : ((0, jsx_runtime_1.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 })] }))] })) })) }) })] }) }));
+                                        }, children: [_jsx("div", { style: { height: 100 } }), _jsxs("svg", { width: "24", height: "24", children: [_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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] })) : (_jsxs("div", { children: [recommendedPivotTables.length == 0 && (_jsx("div", { style: { marginBottom: 20 }, children: "There are currently no recommended pivots available." })), _jsx(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) {
+export 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 }];
+    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") {
+    if (pivot?.aggregationType === 'average') {
         const label = `average ${pivot.valueField}`;
         return [{ field: pivot.valueField, label, format: format }];
     }
@@ -473,9 +469,8 @@ function generatePivotTableYAxis(pivot, cols, 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}` : ''}`);
+    return snakeCaseToTitleCase(`${pivot.aggregationType} of ${pivot.valueField} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
 }
 function getDateRange(dateRange, column, data) {
     if (!dateRange || !dateRange[0]) {
@@ -494,9 +489,9 @@ function getDateRange(dateRange, column, data) {
         for (let i = 0; i < data.length; i++) {
             if (data[i][column]) {
                 const value = new Date(data[i][column]);
-                lastestDate = lastestDate === null ? value : (0, date_fns_1.max)([lastestDate, value]);
+                lastestDate = lastestDate === null ? value : max([lastestDate, value]);
                 earliestDate =
-                    earliestDate === null ? value : (0, date_fns_1.min)([earliestDate, value]);
+                    earliestDate === null ? value : min([earliestDate, value]);
             }
         }
         return { start: earliestDate, end: lastestDate };
@@ -507,20 +502,30 @@ function getDateRange(dateRange, column, data) {
 }
 function getDateBuckets(dateRange, column, data) {
     if (!dateRange || !dateRange[0]) {
-        return (0, date_fns_1.eachMonthOfInterval)(getDateRange(dateRange, column, data));
+        return eachMonthOfInterval(getDateRange(dateRange, column, data));
     }
-    const dayDifference = (0, date_fns_1.differenceInDays)(new Date(dateRange[1]), new Date(dateRange[0]));
+    const dayDifference = differenceInDays(new Date(dateRange[1]), new Date(dateRange[0]));
+    return dayDifferenceToInterval(dayDifference, dateRange);
+}
+function getCompDateBuckets(dateRange, compDateRange, column, data) {
+    if (!dateRange || !dateRange[0]) {
+        return eachMonthOfInterval(getDateRange(dateRange, column, data));
+    }
+    const dayDifference = 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] });
+        return 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 });
+        return 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] });
+        return eachMonthOfInterval({ start: dateRange[0], end: dateRange[1] });
     }
     else {
-        return (0, date_fns_1.eachYearOfInterval)({ start: dateRange[0], end: dateRange[1] });
+        return eachYearOfInterval({ start: dateRange[0], end: dateRange[1] });
     }
 }
 function getDateString(value, dateRange) {
@@ -529,7 +534,7 @@ function getDateString(value, dateRange) {
         format = 'MMM_yyyy';
     }
     else {
-        const dayDifference = (0, date_fns_1.differenceInDays)(new Date(dateRange[1]), new Date(dateRange[0]));
+        const dayDifference = differenceInDays(new Date(dateRange[1]), new Date(dateRange[0]));
         if (dayDifference < 14) {
             format = 'MMM_dd_yyyy';
         }
@@ -543,24 +548,23 @@ function getDateString(value, dateRange) {
             format = 'yyyy';
         }
     }
-    return (0, valueFormatter_1.valueFormatter)({
+    return valueFormatter({
         value,
         field: 'date',
         fields: [{ field: 'date', format }],
     });
 }
-function isDateField(fieldType) {
+export function isDateField(fieldType) {
     return (fieldType === 'date' ||
         fieldType === 'datetime' ||
         fieldType === 'timestamp' ||
         fieldType === 'timestamptz');
 }
-exports.isDateField = isDateField;
-function generatePivotTable(pivot, data, dateRange, rowLimit = -1) {
+export function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = null) {
     const pivotRows = [];
-    const uniqueRows = isDateField(pivot.rowFieldType)
+    const uniqueRows = (isDateField(pivot.rowFieldType)
         ? getDateBuckets(dateRange, pivot.rowField, data)
-        : [...new Set(data.map((item) => item[pivot.rowField]))];
+        : [...new Set(data.map((item) => item[pivot.rowField]))]).filter((row) => Boolean(row));
     const rowDateRange = pivot.rowField
         ? getDateRange(dateRange, pivot.rowField, data)
         : null;
@@ -568,11 +572,49 @@ function generatePivotTable(pivot, data, dateRange, rowLimit = -1) {
         ? getDateRange(dateRange, pivot.columnField, data)
         : null;
     // If columnField is not provided, we will not be using uniqueColumns
-    const uniqueColumns = pivot.columnField && pivot.columnField.trim()
+    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];
+        : [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;
@@ -589,78 +631,149 @@ function generatePivotTable(pivot, data, dateRange, rowLimit = -1) {
                             : rowValue,
         };
         uniqueColumns.forEach((colValue, colIndex) => {
-            let filteredData;
+            let comparisonFilteredData = [];
+            let filteredData = [];
+            let comparisonValue;
             let value;
             const nextRowValue = isDateField(pivot.rowFieldType)
-                ? uniqueRows[rowIndex + 1] || (0, date_fns_1.endOfDay)(rowDateRange.end)
+                ? uniqueRows[rowIndex + 1] ?? endOfDay(rowDateRange.end)
+                : null;
+            const compRowValue = compUniqueRows[rowIndex];
+            const compNextRowValue = isDateField(pivot.rowFieldType)
+                ? compUniqueRows[rowIndex + 1] ?? endOfDay(compRowDateRange.end)
                 : null;
             if (pivot.columnField) {
                 const nextColumnValue = isDateField(pivot.columnFieldType)
-                    ? uniqueColumns[colIndex + 1] || (0, date_fns_1.endOfDay)(columnDateRange.end)
+                    ? uniqueColumns[colIndex + 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]), {
+                        return (isWithinInterval(new Date(item[pivot.rowField]), {
                             start: rowValue,
-                            end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                            end: subMilliseconds(nextRowValue, 1),
                         }) &&
-                            (0, date_fns_1.isWithinInterval)(new Date(item[pivot.columnField]), {
+                            isWithinInterval(new Date(item[pivot.columnField]), {
                                 start: colValue,
-                                end: (0, date_fns_1.subMilliseconds)(nextColumnValue, 1),
+                                end: subMilliseconds(nextColumnValue, 1),
                             }));
                     });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (isWithinInterval(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: subMilliseconds(nextRowValue, 1),
+                            }) &&
+                                isWithinInterval(new Date(item[pivot.columnField]), {
+                                    start: colValue,
+                                    end: 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]), {
+                            isWithinInterval(new Date(item[pivot.columnField]), {
                                 start: colValue,
-                                end: (0, date_fns_1.subMilliseconds)(nextColumnValue, 1),
+                                end: subMilliseconds(nextColumnValue, 1),
                             }));
                     });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (item[`comparison_${pivot.rowField}`] === rowValue &&
+                                isWithinInterval(new Date(item[pivot.columnField]), {
+                                    start: colValue,
+                                    end: 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]), {
+                        return (isWithinInterval(new Date(item[pivot.rowField]), {
                             start: rowValue,
-                            end: (0, date_fns_1.subMilliseconds)(nextRowValue, 1),
+                            end: subMilliseconds(nextRowValue, 1),
                         }) && item[pivot.columnField || ''] === colValue);
                     });
+                    if (isComparison) {
+                        comparisonFilteredData = data.filter((item) => {
+                            return (isWithinInterval(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: 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
-                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);
+                if (colValue.startsWith('comparison_')) {
+                    filteredData = isDateField(pivot.rowFieldType)
+                        ? data.filter((item) => {
+                            return (compRowValue &&
+                                isWithinInterval(new Date(item[`comparison_${pivot.rowField}`]), {
+                                    start: compRowValue,
+                                    end: subMilliseconds(compNextRowValue, 1),
+                                }));
+                        })
+                        : data.filter((item) => item[`comparison_${pivot.rowField}`] === compRowValue);
+                }
+                else {
+                    filteredData = isDateField(pivot.rowFieldType)
+                        ? data.filter((item) => {
+                            return isWithinInterval(new Date(item[pivot.rowField]), {
+                                start: rowValue,
+                                end: 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[pivot.valueField] || 0), 0);
+                    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[pivot.valueField] || 0), 0) / 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:
@@ -671,15 +784,46 @@ function generatePivotTable(pivot, data, dateRange, rowLimit = -1) {
             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);
     });
-    // need to ensure that the rowField is the first column
-    uniqueColumns.unshift(pivot.rowField);
-    return {
-        rows: pivotRows,
-        columns: uniqueColumns.map((column, index) => {
-            const columnName = isDateField(pivot.columnFieldType) && index > 0 // first row is rowField
+    const columns = [
+        {
+            label: pivot.rowField === null
+                ? 'Null'
+                : pivot.rowField === false
+                    ? 'False'
+                    : snakeCaseToTitleCase(pivot.rowField),
+            field: pivot.rowField,
+        },
+        ...(!pivot.columnField
+            ? [
+                {
+                    label: pivot.rowField === null
+                        ? 'Null'
+                        : pivot.rowField === false
+                            ? 'False'
+                            : `Comparison ${snakeCaseToTitleCase(pivot.rowField)}`,
+                    field: `comparison_${pivot.rowField}`,
+                },
+            ]
+            : []),
+        ...uniqueColumns.map((column, index) => {
+            const columnName = isDateField(pivot.columnFieldType)
                 ? getDateString(column, dateRange)
                 : column;
             return {
@@ -691,11 +835,32 @@ function generatePivotTable(pivot, data, dateRange, rowLimit = -1) {
                             !pivot.columnField &&
                             index === 1
                             ? 'Count'
-                            : (0, ChartBuilder_1.snakeCaseToTitleCase)(columnName),
+                            : 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 ${snakeCaseToTitleCase(columnName)}`,
+                    field: `comparison_${columnName}`,
+                };
+            })
+            : []),
+    ];
+    return { rows: pivotRows, columns };
 }
-exports.generatePivotTable = generatePivotTable;
-//# sourceMappingURL=PivotModal.js.map