@quillsql/react 2.11.25 → 2.11.26

package/dist/esm/ReportBuilder.js

@@ -26,12 +26,14 @@ import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddL
 import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
-import { convertPostgresColumn } from './SQLEditor';
 import { getData } from './utils/dataFetcher';
-import { quillFormat } from './utils/valueFormatter';
+import { DATE_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
 import { getPossiblePivotFieldOptions } from './utils/pivotProcessing';
 import { getUniqueValuesByColumns } from './utils/tableProcessing';
 import { useQuill } from './hooks/useQuill';
+import { getDataFromCloud } from './utils/dataFetcher';
+import { convertColumnInfoToColumnInternal, convertPostgresColumn, } from './utils/columnProcessing';
+import { processStarColumn } from './utils/astProcessing';
 export const QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
 /**
  * Quill Report Builder
@@ -64,8 +66,8 @@ export const QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-3444
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, initialChartId, }) {
-    const { data: initialData } = useQuill(initialChartId || '');
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, initialReportId, }) {
+    const { data: dashboardItem } = useQuill(initialReportId || '');
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [baseAst, setBaseAst] = useState(null);
@@ -86,7 +88,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [dataDisplayed, setDataDisplayed] = useState(false);
     const [rows, setRows] = useState([]);
     const [formattedRows, setFormattedRows] = useState([]);
-    const [fields, setFields] = useState([]);
+    const [columns, setColumns] = useState([]);
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = useState('AND');
     const [editPopoverKey, setEditPopoverKey] = useState(null);
     const [uniqueValues, setUniqueValues] = useState({});
@@ -97,8 +99,9 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
+    const [initalChartLoad, setInitalChartLoad] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!initialChartId);
+    const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!initialReportId);
     const [currentTable, setCurrentTable] = useState(initialTableName || '');
     const parentRef = useRef(null);
     const askAIContainerRef = useRef(null);
@@ -168,7 +171,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             setIsPending(false);
             setDataDisplayed(false);
             setRows([]);
-            setFields([]);
+            setColumns([]);
             setTopLevelBinaryOperator('AND');
             setEditPopoverKey(null);
             setErrorMessage('');
@@ -190,6 +193,50 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             setActiveEditItem(getByKey(formData, activePath));
         }
     }, [formData]);
+    const formatRows = (rows, columns, pivot, aggregationType) => {
+        const copiedRows = deepCopy(rows);
+        if (pivot) {
+            const formattedRows = copiedRows.map((row) => {
+                const formattedRow = row;
+                Object.keys(row).forEach((key, index) => {
+                    let column = columns.find((c) => c.field === key);
+                    let format = 'string';
+                    if (!column) {
+                        format =
+                            aggregationType === 'count'
+                                ? 'whole_number'
+                                : 'two_decimal_places';
+                    }
+                    else {
+                        format = DATE_FORMAT_TYPES.includes(column.format)
+                            ? 'date'
+                            : 'string';
+                    }
+                    const formattedValue = quillFormat({
+                        value: row[key],
+                        format,
+                    });
+                    formattedRow[key] = formattedValue;
+                });
+                return formattedRow;
+            });
+            return formattedRows;
+        }
+        else {
+            const formattedRows = copiedRows.map((row) => {
+                return columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = quillFormat({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            });
+            return formattedRows;
+        }
+    };
     const getByKey = (formData, path) => {
         if (!path)
             return deepCopy(formData);
@@ -259,7 +306,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             const data = await response.json();
             setActiveQuery(data.query);
             if (fetchData) {
-                fetchUponChange(ast, formData, data.query);
+                fetchUponChange(ast, formData);
             }
         }
         catch (error) {
@@ -323,42 +370,81 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     };
     useEffect(() => {
         const loadChart = async () => {
-            if (!initialData || initialData.referencedTables.length !== 1) {
+            setInitalChartLoad(true);
+            if (!dashboardItem || dashboardItem.referencedTables.length !== 1) {
+                setInitalChartLoad(false);
                 return;
             }
-            const initialRows = await handleAsk(initialData.queryString);
-            if (initialData.pivot) {
+            const tableName = dashboardItem.referencedTables[0];
+            if (!tableName) {
+                return;
+            }
+            const resp = await getDataFromCloud(client, `astify`, {
+                query: dashboardItem.queryString,
+            });
+            const ast = resp.ast.select ? resp.ast.select : resp.ast;
+            const initialRows = await fetchUponChange(ast, undefined);
+            const convertedAst = processStarColumn(ast, dashboardItem.columns);
+            setBaseAst(convertedAst);
+            setFormData(deepCopy(convertedAst.where));
+            setFormattedRows([]);
+            setActiveQuery(dashboardItem.queryString);
+            // const initialRows = await handleAsk(dashboardItem.queryString);
+            const stringColumns = dashboardItem.columns.filter((column) => {
+                return column.format === 'string';
+            });
+            if (stringColumns.length !== 0 && tableName) {
+                const stringNames = stringColumns.map((column) => column.field);
+                const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, [], client);
+                const joinedUniqueValues = deepCopy(uniqueValues);
+                joinedUniqueValues[tableName] = newUniqueValues;
+                setUniqueValues(joinedUniqueValues);
+            }
+            if (dashboardItem.pivot) {
                 // @ts-ignore
-                setPivotRowField(initialData.pivot.rowField);
+                setPivotRowField(dashboardItem.pivot.rowField);
                 // @ts-ignore
-                setPivotAggregation(initialData.pivot.aggregationType);
+                setPivotAggregation(dashboardItem.pivot.aggregationType);
                 // @ts-ignore
-                setPivotColumnField(initialData.pivot.columnField);
+                setPivotColumnField(dashboardItem.pivot.columnField);
                 // @ts-ignore
-                setPivotValueField(initialData.pivot.valueField);
-                setPivot(initialData.pivot);
-                const pivotedData = generatePivotTable(
-                //@ts-ignore
-                initialData.pivot, initialRows, [null, null, null], false);
+                setPivotValueField(dashboardItem.pivot.valueField);
+                setPivot(dashboardItem.pivot);
+                const pivotedData = generatePivotTable(dashboardItem.pivot, initialRows, undefined, false);
                 setPivotData(pivotedData || []);
+                const formattedRows = formatRows(pivotedData.rows, dashboardItem.columns, true, 
+                // @ts-ignore
+                dashboardItem.pivot.aggregationType);
+                setFormattedRows(formattedRows);
             }
+            else {
+                const formattedRows = formatRows(dashboardItem.rows, dashboardItem.columns);
+                setFormattedRows(formattedRows);
+            }
+            setCurrentTable(tableName);
+            // This handles a flashing issue
+            setTimeout(() => {
+                setInitalChartLoad(false);
+            }, 500);
         };
-        if (initialData && initialData.referencedTables.length === 1) {
+        if (dashboardItem && dashboardItem.referencedTables.length === 1) {
             loadChart();
         }
-    }, [initialData]);
+    }, [dashboardItem]);
     useEffect(() => {
         const loadTable = async (tables) => {
             if (!tables)
                 return;
             setLoading(true);
-            const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === initialTableName);
+            const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
             if (tableInfo) {
-                const stringColumns = tableInfo.columns.filter((column) => {
+                const convertedStringColumns = tableInfo.columns
+                    .filter((column) => {
                     return isTextColumnType(column.fieldType);
-                });
-                const stringNames = stringColumns.map((column) => column.name);
-                const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
+                })
+                    .map((column) => convertColumnInfoToColumnInternal(column));
+                const stringNames = convertedStringColumns.map((column) => column.field);
+                const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
                 const joinedUniqueValues = deepCopy(uniqueValues);
                 joinedUniqueValues[initialTableName] = newUniqueValues;
                 if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
@@ -425,7 +511,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         return -1;
                     return 0;
                 })));
-                if (initialTableName && initialLoad && !initialChartId) {
+                if (initialTableName) {
                     await loadTable(tables);
                 }
                 setLoadingSchema(false);
@@ -438,7 +524,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         if (schemaTables.length === 0) {
             fetchSchema();
         }
-    }, [schemaTables, initialTableName, initialLoad]);
+    }, [schemaTables, initialTableName, initialReportId]);
     const updateFormData = (updates, { isDeletion = false, isInsertion = false, isReplaceSubtree = false, isAddVariant = false, isDeleteVariant = false, topLevelBinOp = 'OR', isCondition = undefined, }) => {
         // Function to immutably update or delete nodes based on their path
         // TODO: fix the following horible code
@@ -801,12 +887,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
      * @returns the fieldType string or undefined if not found.
      */
     const getColumnTypeByName = (columnName) => {
-        const field = fields.find((f) => f.name === columnName);
-        if (field)
-            return getPostgresBasicType(field);
-        const column = schemaTables
-            .flatMap((t) => t.columns)
-            .find((c) => c.name === columnName);
+        const column = columns.find((col) => col.field === columnName);
         return column?.fieldType;
     };
     const emptyPivotColumns = () => {
@@ -1673,9 +1754,10 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         justifyContent: 'end',
                     }, children: _jsx(ButtonComponent, { onClick: onSave, label: 'Add condition' }) })] }));
     };
-    const fetchUponChange = async (baseAst, newFormData, query) => {
+    const fetchUponChange = async (baseAst, newFormData) => {
         // if newFormData is null still use it
         const curFormData = newFormData !== undefined ? newFormData : formData;
+        let rows;
         if ((curFormData || baseAst) && !loading) {
             try {
                 setLoading(true);
@@ -1690,16 +1772,19 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 };
                 const cloudBody = {};
                 const data2 = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+                rows = data2.rows;
                 const tables = getTableNames(baseAst);
                 const table = tables.length >= 1 ? tables[0] : initialTableName;
                 if (table !== currentTable) {
                     const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
                     if (tableInfo) {
-                        const stringColumns = tableInfo.columns.filter((column) => {
+                        const convertedStringColumns = tableInfo.columns
+                            .filter((column) => {
                             return isTextColumnType(column.fieldType);
-                        });
-                        const stringNames = stringColumns.map((column) => column.name);
-                        const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                        })
+                            .map((column) => convertColumnInfoToColumnInternal(column));
+                        const stringNames = convertedStringColumns.map((column) => column.field);
+                        const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
                         const joinedUniqueValues = deepCopy(uniqueValues);
                         joinedUniqueValues[table] = newUniqueValues;
                         if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
@@ -1716,18 +1801,9 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                             setPivot(null);
                             setPivotData(null);
                             setRows(data2.rows);
-                            setFields(processedFields);
-                            setFormattedRows(data2.rows.map((row) => {
-                                return processedFields.reduce((formattedRow, column) => {
-                                    // Apply the format function to each field in the row
-                                    const formattedValue = quillFormat({
-                                        value: row[column.field],
-                                        format: column.format,
-                                    });
-                                    formattedRow[column.field] = formattedValue;
-                                    return formattedRow;
-                                }, {});
-                            }));
+                            setColumns(processedFields);
+                            const formattedRows = formatRows(data2.rows, processedFields, false);
+                            setFormattedRows(formattedRows);
                             return;
                         }
                         // Do all of this to make sure we have the right unique columns when applying a pivot
@@ -1737,39 +1813,27 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                             return acc;
                         }, {});
                         uniqueFormatted[pivot.columnField] = uniqueRecords;
-                        const pivotedData = generatePivotTable(pivot, data2.rows, [null, null, null], false);
+                        const pivotedData = generatePivotTable(pivot, data2.rows, undefined, false);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
                         const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
-                        setPivotData(pivotedData || []);
+                        setPivotData(pivotedData);
                         setRows(data2.rows);
-                        setFields(processedFields);
-                        setFormattedRows(data2.rows.map((row) => {
-                            return processedFields.reduce((formattedRow, column) => {
-                                // Apply the format function to each field in the row
-                                const formattedValue = quillFormat({
-                                    value: row[column.field],
-                                    format: column.format,
-                                });
-                                formattedRow[column.field] = formattedValue;
-                                return formattedRow;
-                            }, {});
+                        setColumns(processedFields);
+                        const formattedRows = formatRows(pivotedData.rows, processedFields, true, pivot.aggregationType);
+                        setSelectedColumns(processedFields.map((column) => {
+                            return `${table}.${column.field}`;
                         }));
+                        setFormattedRows(formattedRows);
                     }
                     else {
                         const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                         setRows(data2.rows);
-                        setFields(processedFields);
-                        setFormattedRows(data2.rows.map((row) => {
-                            return processedFields.reduce((formattedRow, column) => {
-                                // Apply the format function to each field in the row
-                                const formattedValue = quillFormat({
-                                    value: row[column.field],
-                                    format: column.format,
-                                });
-                                formattedRow[column.field] = formattedValue;
-                                return formattedRow;
-                            }, {});
+                        setColumns(processedFields);
+                        setSelectedColumns(processedFields.map((column) => {
+                            return `${table}.${column.field}`;
                         }));
+                        const formattedRows = formatRows(data2.rows, processedFields, false);
+                        setFormattedRows(formattedRows);
                         if (data2.errorMessage) {
                             setErrorMessage(`Error: ${data2.errorMessage}`);
                         }
@@ -1777,7 +1841,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 }
                 else {
                     setRows([]);
-                    setFields([]);
+                    setColumns([]);
                     setFormattedRows([]);
                     setPivotData(null);
                 }
@@ -1788,6 +1852,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             finally {
                 setLoading(false);
                 setDataDisplayed(true);
+                return rows;
             }
         }
     };
@@ -2003,11 +2068,13 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             if (table !== currentTable) {
                 const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
                 if (tableInfo) {
-                    const stringColumns = tableInfo.columns.filter((column) => {
+                    const convertedStringColumns = tableInfo.columns
+                        .filter((column) => {
                         return isTextColumnType(column.fieldType);
-                    });
-                    const stringNames = stringColumns.map((column) => column.name);
-                    const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                    })
+                        .map((column) => convertColumnInfoToColumnInternal(column));
+                    const stringNames = convertedStringColumns.map((column) => column.field);
+                    const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
                     currentUniqueValues[table] = newUniqueValues;
                     if (hashCode(uniqueValues) !== hashCode(currentUniqueValues)) {
                         setUniqueValues(currentUniqueValues);
@@ -2058,48 +2125,28 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                     setPivotColumnField(groupByPivot?.columnField);
                     setPivotValueField(groupByPivot?.valueField);
                     setPivotAggregation(groupByPivot?.aggregationType);
-                    const pivotedData = generatePivotTable(
-                    // @ts-ignore
-                    groupByPivot, data2.rows, [null, null, null], false);
+                    const pivotedData = generatePivotTable(groupByPivot, data2.rows, undefined, false);
                     console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
                     setPivotData(pivotedData);
                     setPivot(groupByPivot);
                     setRows(data2.rows);
-                    setFields(processedFields);
-                    setFormattedRows(data2.rows.map((row) => {
-                        return processedFields.reduce((formattedRow, column) => {
-                            // Apply the format function to each field in the row
-                            const formattedValue = quillFormat({
-                                value: row[column.field],
-                                format: column.format,
-                            });
-                            formattedRow[column.field] = formattedValue;
-                            return formattedRow;
-                        }, {});
-                    }));
+                    setColumns(processedFields);
+                    const formattedRows = formatRows(pivotedData.rows, processedFields, true, groupByPivot.aggregationType);
+                    setFormattedRows(formattedRows);
                 }
                 else {
                     const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                     setRows(data2.rows);
-                    setFields(processedFields);
-                    setFormattedRows(data2.rows.map((row) => {
-                        return processedFields.reduce((formattedRow, column) => {
-                            // Apply the format function to each field in the row
-                            const formattedValue = quillFormat({
-                                value: row[column.field],
-                                format: column.format,
-                            });
-                            formattedRow[column.field] = formattedValue;
-                            return formattedRow;
-                        }, {});
-                    }));
+                    setColumns(processedFields);
+                    const formattedRows = formatRows(data2.rows, processedFields, false);
+                    setFormattedRows(formattedRows);
                 }
                 return data2.rows;
             }
             else {
                 setPivotData([]);
                 setRows([]);
-                setFields([]);
+                setColumns([]);
                 setFormattedRows([]);
             }
             if (data2.query) {
@@ -2223,7 +2270,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
     }
-    if (loading) {
+    if (loading || initalChartLoad) {
         return (_jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',
@@ -2354,9 +2401,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                                 setActivePath(null);
                                                                 setOpenPopover(null);
                                                             }
-                                                        } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                        } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                         setPivot(null);
                                         setPivotData(null);
+                                        const formattedRows = formatRows(rows, columns, false);
+                                        setFormattedRows(formattedRows);
                                     }, 
                                     // TODOs
                                     selectPivot: (pivot) => {
@@ -2366,9 +2415,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newAst.orderby = null;
                                         setBaseAst(newAst); // trigger refetch
                                         setPivot(pivot);
-                                        const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
+                                        const pivotedData = generatePivotTable(pivot, rows, undefined, false);
                                         setPivotData(pivotedData || []);
-                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
+                                        const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                        setFormattedRows(formattedRows);
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
                                         pivot: pivot,
                                         rows: pivotData?.rows || [],
                                         columns: pivotData?.columns || [],
@@ -2383,6 +2434,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
                                         setPivot(null);
                                         setPivotData(null);
+                                        const formattedRows = formatRows(rows, columns, false);
+                                        setFormattedRows(formattedRows);
                                         setBaseAst(deepCopy(baseAst)); // trigger refetch
                                     }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
                                         display: 'flex',
@@ -2517,7 +2570,9 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                             ? 'Ask a follow-up question...'
                                             : 'Ask a question...', width: askAIInputWidth !== -1
                                             ? askAIInputWidth
-                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && (_jsxs("div", { style: {
+                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) ||
+                                        initialLoad ||
+                                        initalChartLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initalChartLoad && (_jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2663,9 +2718,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                             setOpenPopover(null);
                                                             clearCheckboxes();
                                                         }
-                                                    } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                    } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                     setPivot(null);
                                     setPivotData(null);
+                                    const formattedRows = formatRows(rows, columns, false);
+                                    setFormattedRows(formattedRows);
                                 }, selectPivot: (pivot) => {
                                     if (!pivot)
                                         return;
@@ -2677,10 +2734,12 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     }
                                     setBaseAst(newAst); // trigger refetch
                                     setPivot(pivot);
-                                    const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
+                                    const pivotedData = generatePivotTable(pivot, rows, undefined, false);
                                     setPivotData(pivotedData || []);
+                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                    setFormattedRows(formattedRows);
                                     setErrorMessage('');
-                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
+                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
                                     pivot: pivot,
                                     rows: pivotData?.rows || [],
                                     columns: pivotData?.columns || [],
@@ -2695,6 +2754,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                 }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
                                     setPivot(null);
                                     setPivotData(null);
+                                    const formattedRows = formatRows(rows, columns, false);
+                                    setFormattedRows(formattedRows);
                                     setBaseAst(deepCopy(baseAst));
                                 }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
                                     display: 'flex',
@@ -2714,8 +2775,10 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
                                         if (pivot) {
                                             setPivot({ ...pivot, sort: false });
-                                            const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, [null, null, null], false);
+                                            const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, undefined, false);
                                             setPivotData(pivotedData || []);
+                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                            setFormattedRows(formattedRows);
                                             setErrorMessage('');
                                             return;
                                         }
@@ -2739,8 +2802,10 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                 sortDirection: direction,
                                                 sortField: column,
                                                 sortFieldType: sortFieldType,
-                                            }, rows, [null, null, null], false);
+                                            }, rows, undefined, false);
                                             setPivotData(pivotedData || []);
+                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                            setFormattedRows(formattedRows);
                                             setErrorMessage('');
                                             return;
                                         }
@@ -2838,9 +2903,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                     sortDirection: direction,
                                                     sortField: column,
                                                     sortFieldType: sortFieldType,
-                                                }, rows, [null, null, null], false);
+                                                }, rows, undefined, false);
                                                 setErrorMessage('');
                                                 setPivotData(pivotedData || []);
+                                                const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                setFormattedRows(formattedRows);
                                                 setActivePath(null);
                                                 setOpenPopover(null);
                                                 setBaseAst(deepCopy(baseAst));
@@ -2928,7 +2995,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                 : 'visible',
                         }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
                                         ? askAIInputWidth
-                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: loading && errorMessage.length === 0, rows: pivotData?.rows || formattedRows, columns: pivot
+                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
                             ? pivotData?.columns || emptyPivotColumns()
                             : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                 return { label: snakeCaseToTitleCase(c), field: c };
@@ -2943,7 +3010,22 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     overflow: 'hidden',
                                     width: '100%',
                                     gap: 12,
-                                }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
+                                }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: rows, columns: fields, fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { dashboardItem: dashboardItem
+                    ? {
+                        ...dashboardItem,
+                        pivot: pivot,
+                        yAxisFields: dashboardItem.pivot && !pivot
+                            ? []
+                            : dashboardItem.yAxisFields,
+                        columns: dashboardItem.columns.filter((col) => {
+                            return columns.find((c) => {
+                                return col.field === c.field;
+                            });
+                        }),
+                        queryString: activeQuery,
+                        rows: rows,
+                    }
+                    : undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: dashboardItem ? 'Edit Chart' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: dashboardItem ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: dashboardItem ? 'Edit Chart' : 'Add to dashboard' })] }));
 }