@quillsql/react 2.11.9 → 2.11.13

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

@@ -3,13 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, add, } from 'date-fns';
 import { valueFormatter } from '../../utils/valueFormatter';
 import { numberFormatOptions, dateFormatOptions } from '../../ChartBuilder';
 import { snakeCaseToTitleCase } from '../../utils/textProcessing';
-import { QuillCard } from '../../components/QuillCard';
 const QuillHover = () => {
     return (_jsx("style", { children: `
   .quill-hover {
@@ -23,7 +21,7 @@ const QuillHover = () => {
   }
 ` }));
 };
-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, recommendPivotCount = 6, }) => {
+export 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] = useState(false);
     const [pivotUpdateIndex, setPivotUpdateIndex] = useState(null);
     const [selectedPivotType, setSelectedPivotType] = useState('recommended');
@@ -93,7 +91,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     const columnSelectOptions = useMemo(() => {
         return [
             ...Object.keys(columnsToShow).map((key) => {
-                return { label: key, value: key };
+                return { label: snakeCaseToTitleCase(key), value: key };
             }),
         ];
     }, [columnsToShow]);
@@ -129,6 +127,9 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         onEditPivot(pivot, null);
     };
     const refreshPivots = useCallback(async () => {
+        if (!showTrigger) {
+            return;
+        }
         if (isLoading || Object.keys(columnsToShow).length === 0) {
             return;
         }
@@ -147,50 +148,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         try {
             const resp = await 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) => {
@@ -207,7 +164,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             console.error('Failed parsing pivotai response', e);
         }
         setIsLoading(false);
-    }, [selectedTable, data, columnsToShow, isLoading]);
+    }, [selectedTable, data, columnsToShow, isLoading, showTrigger]);
     useEffect(() => {
         if (recommendedPivots.length === 0) {
             refreshPivots();
@@ -268,6 +225,9 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                         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;
@@ -280,12 +240,10 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [_jsx(HeaderComponent, { children: popUpTitle }), _jsx("div", { style: { height: 12 } }), _jsx("div", { style: { width: divWidth }, children: samplePivotTable ? (_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: _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" }) }) })) }), _jsxs("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 }) })) }), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 10,
@@ -299,7 +257,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Row Field" }), _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' ||
@@ -308,7 +265,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                             ], theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Column Field" }), _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');
@@ -320,18 +276,12 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                 marginBottom: 20,
                                             }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Value Field" }), _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 === '' ||
-                                                                            numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
-                                                                    }),
-                                                                ], theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Aggregation Type" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
+                                                            }, options: [
+                                                                ...columnSelectOptions.filter((option) => {
+                                                                    return (option.value === '' ||
+                                                                        numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
+                                                                }),
+                                                            ], theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Aggregation Type" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
                                                                 if (e !== 'count' &&
                                                                     pivotValueField &&
                                                                     !numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)?.format)) {
@@ -339,8 +289,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                 }
                                                                 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 };
                                                                 }),
                                                             ] })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
@@ -402,26 +351,24 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             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 }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
-                                            fontWeight: '600',
-                                            marginBottom: 5,
-                                            fontSize: 18,
-                                        }, children: "Recommended Pivots" }), _jsx("div", { children: _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: [_jsx(QuillHover, {}), _jsx(RefreshIcon, { style: { marginRight: 5 } }), "Refresh"] }) }), isLoading ? (_jsxs("div", { style: {
+                                        }, clickable: true, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            width: '100%',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                            paddingBottom: 12,
+                                        }, children: [_jsx("div", { style: {
+                                                    fontWeight: '600',
+                                                    fontSize: 18,
+                                                }, children: "Recommended pivots" }), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: refreshPivots, label: _jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            whiteSpace: 'nowrap',
+                                                            alignItems: 'center',
+                                                            gap: 6,
+                                                            fontSize: 14,
+                                                        }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: _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 ? (_jsxs("div", { style: {
                                             background: theme.backgroundColor,
                                             width: 250,
                                             minWidth: 250,
@@ -432,7 +379,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             display: 'flex',
                                             margin: '0px auto',
                                             justifyContent: 'center',
-                                        }, 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 })] }))] })) })) }) })] }) }));
+                                        }, 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" }) })] })] })) : (_jsx("div", { children: _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 }) }))] })) })) }) })] }) }));
 };
 export function generatePivotTableYAxis(pivot, cols, format) {
     // Use the column field for the field and label if there is one
@@ -575,7 +522,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 = {};
@@ -587,6 +534,10 @@ const fixBigQueryData = (data) => {
     return newData;
 };
 export 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) {
@@ -814,6 +765,18 @@ export function generatePivotTable(pivot, data, dateRange, isComparison, rowLimi
                             : 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');
@@ -892,12 +855,49 @@ export function generatePivotTable(pivot, data, dateRange, isComparison, rowLimi
     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]);
             }
         });
     }
     return { rows: pivotRows, columns };
 }
+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: snakeCaseToTitleCase(valueField), field: valueField }],
+    };
+}

package/dist/esm/utils/axisFormatter.js

@@ -49,51 +49,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.
@@ -108,7 +140,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.
@@ -123,7 +161,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/esm/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/esm/utils/dataFetcher.js

@@ -32,6 +32,16 @@ export async function getData(client, cloudQueryEndpoint, noCred, hostedRequestB
                     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/esm/utils/getDomain.js

@@ -21,8 +21,29 @@ export default 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);
+}
+// 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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.11.9",
+  "version": "2.11.13",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -24,7 +24,7 @@
     "@monaco-editor/react": "^4.5.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
-    "recharts": "^2.5.0"
+    "recharts": "^2.12.5"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",