@quillsql/react 2.11.9 → 2.11.13

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

@@ -6,13 +6,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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 textProcessing_1 = require("../../utils/textProcessing");
-const QuillCard_1 = require("../../components/QuillCard");
 const QuillHover = () => {
     return ((0, jsx_runtime_1.jsx)("style", { children: `
   .quill-hover {
@@ -26,7 +24,7 @@ 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, recommendPivotCount = 6, }) => {
+const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, 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, recommendPivotCount = 6, }) => {
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [pivotUpdateIndex, setPivotUpdateIndex] = (0, react_1.useState)(null);
     const [selectedPivotType, setSelectedPivotType] = (0, react_1.useState)('recommended');
@@ -96,7 +94,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
     const columnSelectOptions = (0, react_1.useMemo)(() => {
         return [
             ...Object.keys(columnsToShow).map((key) => {
-                return { label: key, value: key };
+                return { label: (0, textProcessing_1.snakeCaseToTitleCase)(key), value: key };
             }),
         ];
     }, [columnsToShow]);
@@ -132,6 +130,9 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         onEditPivot(pivot, null);
     };
     const refreshPivots = (0, react_1.useCallback)(async () => {
+        if (!showTrigger) {
+            return;
+        }
         if (isLoading || Object.keys(columnsToShow).length === 0) {
             return;
         }
@@ -150,50 +151,6 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         try {
             const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'pivotai', cloudBody);
             const recommendedPivots = resp?.data?.pivotTables.slice(0, recommendPivotCount) || [];
-            // 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) => {
@@ -210,7 +167,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
             console.error('Failed parsing pivotai response', e);
         }
         setIsLoading(false);
-    }, [selectedTable, data, columnsToShow, isLoading]);
+    }, [selectedTable, data, columnsToShow, isLoading, showTrigger]);
     (0, react_1.useEffect)(() => {
         if (recommendedPivots.length === 0) {
             refreshPivots();
@@ -271,6 +228,9 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                         setShowUpdatePivot(false);
                         setPopUpTitle('Add Pivot');
                     }, style: rightAlign ? { right: 0 } : {}, parentRef: parentRef, showTrigger: showTrigger, label: triggerButtonText, isOpen: isOpen, setIsOpen: setIsOpen, onClick: () => {
+                        if (columns.length === 0) {
+                            setIsOpen(false);
+                        }
                         // table is not loaded yet, so pivot button is not clickable
                         if (Object.keys(columnsToShow).length === 0) {
                             return;
@@ -283,12 +243,10 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                 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: [(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: {
+                                        }, 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.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 10,
@@ -302,7 +260,6 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                             }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Row Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotRowField, onChange: (e) => {
                                                                 setPivotRowField(e === '' ? undefined : e);
                                                             }, options: [
-                                                                { label: 'Select', value: '' },
                                                                 ...columnSelectOptions.filter((option) => {
                                                                     const format = columns.find((col) => col.field === option.value)?.format;
                                                                     return (format === 'string' ||
@@ -311,7 +268,6 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                             ], theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
                                                                 setPivotColumnField(e === '' ? undefined : e);
                                                             }, options: [
-                                                                { label: 'Select', value: '' },
                                                                 ...columnSelectOptions.filter((option) => {
                                                                     return (columns.find((col) => col.field === option.value)
                                                                         ?.format === 'string');
@@ -323,18 +279,12 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                 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, { id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
                                                                 setPivotValueField(e === '' ? undefined : e);
-                                                            }, options: pivotAggregation === 'count'
-                                                                ? [
-                                                                    { label: 'Select', value: '' },
-                                                                    ...columnSelectOptions,
-                                                                ]
-                                                                : [
-                                                                    { label: 'Select', value: '' },
-                                                                    ...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, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
+                                                            }, options: [
+                                                                ...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, { 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)) {
@@ -342,8 +292,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                                 }
                                                                 setPivotAggregation(e === '' ? undefined : e);
                                                             }, options: [
-                                                                { label: 'Select', value: '' },
-                                                                ...['sum', 'average', 'count'].map((option) => {
+                                                                ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
                                                                     return { label: option, value: option };
                                                                 }),
                                                             ] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
@@ -405,26 +354,24 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                             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: {
+                                        }, 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.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            width: '100%',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            paddingBottom: 12,
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                    fontWeight: '600',
+                                                    fontSize: 18,
+                                                }, children: "Recommended pivots" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: refreshPivots, label: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            whiteSpace: 'nowrap',
+                                                            alignItems: 'center',
+                                                            gap: 6,
+                                                            fontSize: 14,
+                                                        }, children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z", clipRule: "evenodd" }) }), "Regenerate"] }) }) })] }), isLoading ? ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             background: theme.backgroundColor,
                                             width: 250,
                                             minWidth: 250,
@@ -435,7 +382,7 @@ 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: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] })] })) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotList, { recommendedPivotTables: recommendedPivotTables, createdPivotTables: createdPivotTables, theme: theme, onSelectRecommendedPivot: onSelectRecommendedPivot, onSelectCreatedPivot: onSelectCreatedPivot, selectedPivotIndex: selectedPivotIndex, selectedPivotType: selectedPivotType, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, onEditRecommendedPivot: onEditRecommendedPivot, onEditCreatedPivot: onEditPivot, showCreatePivot: true, showPivotEditButton: showPivotEditButton, LabelComponent: LabelComponent, TextComponent: TextComponent }) }))] })) })) }) })] }) }));
 };
 exports.PivotModal = PivotModal;
 function generatePivotTableYAxis(pivot, cols, format) {
@@ -581,7 +528,7 @@ const handleBigQueryValue = (value) => {
     return value;
 };
 // Process out all the BigQuery dates.
-const fixBigQueryData = (data) => {
+const fixBigQueryData = (data = []) => {
     const newData = [];
     for (const row of data) {
         const newRow = {};
@@ -593,6 +540,10 @@ const fixBigQueryData = (data) => {
     return newData;
 };
 function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = null) {
+    // If there is no rowField, aggregate on the valueField
+    if (!pivot.rowField) {
+        return valueFieldAggregation(data, pivot.valueField, pivot.aggregationType);
+    }
     // Handle edge-case for BigQuery objects.
     data = fixBigQueryData(data);
     if (dateRange[0] === null && dateRange[1] === null) {
@@ -820,6 +771,18 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                             : 0;
                     }
                     break;
+                case 'max':
+                    value = filteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? 0)), -Infinity);
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.reduce((max, item) => Math.max(max, parseFloat(item[key] ?? 0)), -Infinity);
+                    }
+                    break;
+                case 'min':
+                    value = filteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? 0)), Infinity);
+                    if (isComparison) {
+                        comparisonValue = comparisonFilteredData.reduce((min, item) => Math.min(min, parseFloat(item[key] ?? 0)), Infinity);
+                    }
+                    break;
                 // Implement other aggregation types as needed
                 default:
                     throw new Error('Unsupported aggregation type');
@@ -898,9 +861,15 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     if (pivot.sort) {
         pivotRows.sort((a, b) => {
             if (pivot.sortDirection === 'ASC') {
+                if (pivot.rowFieldType === 'date') {
+                    return new Date(a[pivot.rowField]) - new Date(b[pivot.rowField]);
+                }
                 return a[pivot.rowField].localeCompare(b[pivot.rowField]);
             }
             else {
+                if (pivot.rowFieldType === 'date') {
+                    return new Date(b[pivot.rowField]) - new Date(a[pivot.rowField]);
+                }
                 return b[pivot.rowField].localeCompare(a[pivot.rowField]);
             }
         });
@@ -908,3 +877,34 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     return { rows: pivotRows, columns };
 }
 exports.generatePivotTable = generatePivotTable;
+function valueFieldAggregation(data, valueField, aggregationType) {
+    let value;
+    switch (aggregationType) {
+        case 'sum':
+            value = data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0);
+            break;
+        case 'count':
+            value = filteredData.length;
+            break;
+        case 'average':
+            value = filteredData.length
+                ? filteredData.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) / filteredData.length
+                : 0;
+            break;
+        case 'max':
+            value = data.reduce((max, item) => Math.max(max, parseFloat(item[valueField] ?? 0)), -Infinity);
+            break;
+        case 'min':
+            value = data.reduce((min, item) => Math.min(min, parseFloat(item[valueField] ?? 0)), Infinity);
+            break;
+        // Implement other aggregation types as needed
+        default:
+            throw new Error('Unsupported aggregation type');
+    }
+    const row = {};
+    row[valueField] = value;
+    return {
+        rows: [row],
+        columns: [{ label: (0, textProcessing_1.snakeCaseToTitleCase)(valueField), field: valueField }],
+    };
+}

package/dist/cjs/utils/axisFormatter.js

@@ -53,51 +53,83 @@ const formatString = (value) => {
     }
     return value.toString();
 };
+// Formats large numbers like 12345.67 ->  $12K
+const formatterBigDollars = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumSignificantDigits: 1,
+    maximumSignificantDigits: 2,
+    notation: 'compact',
+    compactDisplay: 'short',
+});
+// Formats to dollars like 1234.56 -> $1235
+const formatterDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+});
+// Formats to dollars like 1234.567 -> $1234.57
+const formatterDollarsCents = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
 /**
- * Formats the value as a (rounded) currency amount in dollars.
+ * Formats the value as a (rounded) currency amount in dollars.  If value is
+ * zero, returns '$0' with no cents. If value is greater than or equal to 1000,
+ * it will not show cents and shorten the value with a suffix such as K
+ * (for thousands) or M (for millions).
  *
- * eg. @example format(1234.567) => "$1.2K"
+ * @example format(1,234,567) => "$1.2M"
+ * @example format(1234.567) => "$1.2K"
+ * @example format(5000) => "$5K"
+ * @example format(123.45) => "$123"
+ * @example format(0.00) => "$0"
  */
 const formatDollarAmount = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumSignificantDigits: 2,
-        maximumSignificantDigits: 2,
-        notation: 'compact',
-        compactDisplay: 'short',
-    });
-    return formatter.format(Number(value ?? 0));
+    const num = Number(value ?? 0);
+    if (num >= 1000 || num === 0) {
+        return formatterBigDollars.format(num);
+    }
+    else {
+        return formatterDollar.format(num);
+    }
 };
 /**
- * Formats the value as a (rounded) currency amount in dollars and cents.
+ * Formats the value as a (rounded) currency amount in dollars and cents. If
+ * value is zero, returns '$0' with no cents. If value is greater than or equal
+ * to 1000, it will not show cents and shorten the value with a suffix such
+ * as K (for thousands) or M (for millions).
  *
+ * @example format(1,234,567) => "$1.2M"
  * @example format(1234.567) => "$1.2K"
+ * @example format(5000) => "$5K"
+ * @example format(123.45) => "$123.45"
+ * @example format(0.00) => "$0"
  */
 const formatDollarCents = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumSignificantDigits: 2,
-        maximumSignificantDigits: 2,
-        notation: 'compact',
-        compactDisplay: 'short',
-    });
-    return formatter.format(Number(value ?? 0));
+    const num = Number(value ?? 0);
+    if (num >= 1000 || num === 0) {
+        return formatterBigDollars.format(num);
+    }
+    else {
+        return formatterDollarsCents.format(num);
+    }
 };
+const formatterBigWholeNumber = new Intl.NumberFormat('en-US', {
+    minimumSignificantDigits: 1,
+    maximumSignificantDigits: 2,
+    notation: 'compact',
+    compactDisplay: 'short',
+});
 /**
  * Formats the value as a (rounded) integer.
  *
  * @example format(1234.567) => "1.2K"
  */
 const formatWholeNumber = (value) => {
-    const formatter = new Intl.NumberFormat('en-US', {
-        minimumSignificantDigits: 2,
-        maximumSignificantDigits: 2,
-        notation: 'compact',
-        compactDisplay: 'short',
-    });
-    return formatter.format(Number(value));
+    return formatterBigWholeNumber.format(Number(value));
 };
 /**
  * Formats the value as a number rounded to exactly one decimal place.
@@ -112,7 +144,13 @@ const formatOneDecimalPlace = (value) => {
         notation: 'compact',
         compactDisplay: 'short',
     });
-    return formatter.format(Number(value));
+    const num = Number(value ?? 0);
+    if (num >= 1000 || num === 0) {
+        return formatterBigWholeNumber.format(num);
+    }
+    else {
+        return formatter.format(num);
+    }
 };
 /**
  * Formats the value as a number rounded to exactly two decimal places.
@@ -127,7 +165,13 @@ const formatTwoDecimalPlaces = (value) => {
         notation: 'compact',
         compactDisplay: 'short',
     });
-    return formatter.format(Number(value));
+    const num = Number(value ?? 0);
+    if (num >= 1000 || num === 0) {
+        return formatterBigWholeNumber.format(num);
+    }
+    else {
+        return formatter.format(num);
+    }
 };
 /**
  * Formats the value as a percentage.

package/dist/cjs/utils/dataFetcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataFetcher.d.ts","sourceRoot":"","sources":["../../../src/utils/dataFetcher.tsx"],"names":[],"mappings":"AAEA,wBAAsB,OAAO,CAC3B,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EAAE,GAAG,EACtB,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA8ChB;AAED,wBAAsB,gBAAgB,CACpC,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA+BhB"}
+{"version":3,"file":"dataFetcher.d.ts","sourceRoot":"","sources":["../../../src/utils/dataFetcher.tsx"],"names":[],"mappings":"AAEA,wBAAsB,OAAO,CAC3B,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EAAE,GAAG,EACtB,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA8DhB;AAED,wBAAsB,gBAAgB,CACpC,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA+BhB"}

package/dist/cjs/utils/dataFetcher.js

@@ -35,6 +35,16 @@ async function getData(client, cloudQueryEndpoint, noCred, hostedRequestBody, cl
                     compareRows: responseJson?.queries?.queryResults[1]?.rows,
                 };
             }
+            if (responseJson.data.columns &&
+                responseJson.data.fields &&
+                responseJson.data.columns.length != responseJson.data.fields) {
+                // Remove all columns that don't appear in fields, overtime this should never be the case
+                const columns = responseJson.data.columns.filter((columns) => responseJson.data.fields.find((field) => field.name === columns.field));
+                result = {
+                    ...result,
+                    columns,
+                };
+            }
             return result;
         }
         else {

package/dist/cjs/utils/getDomain.js

@@ -23,9 +23,30 @@ function getDomain(data, fields) {
         });
     });
     const [minValue, maxValue] = numericValues.reduce(([min, max], value) => [Math.min(min, value), Math.max(max, value)], [Infinity, -Infinity]);
-    const adjustedMin = Math.min(minValue, 0);
-    const padding = Math.round(0.2 * (maxValue - minValue));
-    const adjustedMax = maxValue + padding;
-    return [adjustedMin, adjustedMax];
+    if (minValue === 0 && maxValue === 0) {
+        return [0, 1];
+    }
+    return fuzzyRound(Math.min(minValue, 0), maxValue);
 }
 exports.default = getDomain;
+// Rounds the range to 4 equally-spaced increments of nice,round numbers.
+function fuzzyRound(min, max) {
+    const range = parseFloat((max - min).toPrecision(1));
+    const increment = Math.ceil(range / 4);
+    let newMin = min;
+    // if (min % increment !== 0) {
+    //   newMin = min - (min % increment);
+    // }
+    if (Number.isNaN(newMin)) {
+        newMin = 0;
+    }
+    let newMax = min + increment * 4;
+    if (max % increment !== 0) {
+        const adjMax = max + (increment - (max % increment));
+        newMax = parseFloat(adjMax.toPrecision(2));
+    }
+    if (Number.isNaN(newMax)) {
+        newMax = 0;
+    }
+    return [newMin ?? 0, newMax ?? 0];
+}

package/dist/cjs/utils/valueFormatter.d.ts

@@ -1,8 +1,9 @@
+import { type AxisFormat } from '../Dashboard';
 type Field = {
     _id: string;
     label: string;
     field: string;
-    format: 'percent';
+    format: AxisFormat;
 };
 type Props = {
     value: any;

package/dist/cjs/utils/valueFormatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAmJF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MA2BF,CAAC"}
+{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAmJF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MA2BF,CAAC"}

package/dist/esm/BarList.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type ColorMapType } from './Chart';
 interface YAxisField {
     label: string;
     field: string;
@@ -14,7 +15,7 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
     containerStyle: any;
     xAxisFormat: string;
     colors?: string[];
-    colorMap?: any;
+    colorMap?: ColorMapType;
     theme: any;
 }
 export declare function hexToRgbaWith10PercentAlpha(hex: any): string;

package/dist/esm/BarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAkdX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAuB5C,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAwdX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/esm/BarList.js

@@ -123,7 +123,9 @@ const BarList = React.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                    backgroundColor: (colorMap &&
+                                                        colorMap[xAxisField] &&
+                                                        colorMap[xAxisField]['primary']) ??
                                                         hexToRgbaWith10PercentAlpha(colors[0]),
                                                     boxSizing: 'content-box',
                                                 }, children: _jsx("div", { style: {
@@ -150,7 +152,9 @@ const BarList = React.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths2[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                    backgroundColor: (colorMap &&
+                                                        colorMap[xAxisField] &&
+                                                        colorMap[xAxisField]['primary']) ??
                                                         hexToRgbaWith10PercentAlpha(colors[1]),
                                                     boxSizing: 'content-box',
                                                 }, children: _jsx("div", { style: {
@@ -228,7 +232,9 @@ const BarList = React.forwardRef((props, ref) => {
                                     width: `${widths[idx]}%`,
                                     transition: showAnimation ? 'all 2s' : '',
                                     boxSizing: 'content-box',
-                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                    backgroundColor: (colorMap &&
+                                        colorMap[xAxisField] &&
+                                        colorMap[xAxisField]['primary']) ??
                                         hexToRgbaWith10PercentAlpha(colors[0]),
                                     display: 'flex',
                                     alignItems: 'center',