@quillsql/react 2.13.34 → 2.13.36

package/dist/esm/ChartBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
+import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, ReportsContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, } from './components/UiComponents';
@@ -109,7 +109,8 @@ function createReportFromForm(formData, report, selectedPivotTable, rows = [], f
         filtersApplied: report?.filtersApplied || [],
         queryString: '',
         rows: rows,
-        rowCount: report?.rowCount ||
+        rowCount: selectedPivotTable?.rowCount ||
+            report?.rowCount ||
             selectedPivotTable?.rows?.length ||
             rows.length ||
             0,
@@ -236,7 +237,7 @@ export function ChartBuilderWithModal(props) {
  */
 export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, 
 // MultiSelectComponent = QuillMultiSelectComponentWithCombo,
-ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, onClickChartError, isOpen, isHorizontalView = true, setIsOpen, dateRange, isAdmin = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, tempReport, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, filtersEnabled, onFiltersEnabledChanged, 
+ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, onClickChartError, isOpen, isHorizontalView = true, setIsOpen, dateRange, isAdmin = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, tempReport, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, showTableFormatOptions, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, filtersEnabled, onFiltersEnabledChanged, 
 // isLoading,
 onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [client] = useContext(ClientContext);
@@ -335,6 +336,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     }, [isOpen]);
     const [dashboardOptions, setDashboardOptions] = useState([]);
     const { reportFilters, reportFiltersDispatch, loadFiltersForReport } = useContext(ReportFiltersContext);
+    const { reportsDispatch } = useContext(ReportsContext);
     useEffect(() => {
         loadFiltersForReport(report?.id ?? TEMP_REPORT_ID, 'ChartBuilder', specificDashboardFilters, undefined, undefined, canonicalFilterMap, report?.dashboardName);
         return () => {
@@ -342,16 +344,6 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 type: 'CLEAR_REPORT_FILTERS',
                 id: report?.id ?? tempReport?.id ?? TEMP_REPORT_ID,
             });
-            // TODO: Currently the behavior of Chart Builder is dependent on whether there is a TEMP_REPORT_ID in context or not
-            /* The Chart Builder can essentially be in three states
-              1. Creating a new report, all we have is an ephemeral temp report
-              2. Editing an existing report, we have a report id and the report is in the dashboard context
-              3. Editing the query of an existing report, we have a report id and the new-query report is in context under TEMP_REPORT_ID
-              One can imagine this going wrong: somehow the temp report gets set by SQLEditor or ReportBuilder but never cleared
-              and now its going to start popping up during state 2 rather than the real report.
-              For now we're going on faith that unmounting will always clear the temp report
-              but we may want to fiddle with the props to make this more robust
-            */
         };
     }, []);
     const currentDashboardFilters = useMemo(() => {
@@ -368,7 +360,13 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [pivotError, setPivotError] = useState(undefined);
     const pivotData = report?.pivotRows && report?.pivotColumns
-        ? { rows: report.pivotRows, columns: report.pivotColumns }
+        ? {
+            rows: report.pivotRows,
+            columns: report.pivotColumns,
+            rowCount: report.pivotRowCount ?? report.pivotRows.length,
+            pivotQuery: report.pivotQuery ?? '',
+            comparisonPivotQuery: report.comparisonPivotQuery,
+        }
         : undefined;
     const columns = report?.columnInternal ?? [];
     const destinationDashboard = report?.dashboardName;
@@ -460,7 +458,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         if (!client) {
             return;
         }
-        const { queryEndpoint, queryHeaders, publicKey, withCredentials, } = client;
+        const { queryEndpoint, queryHeaders, publicKey, withCredentials } = client;
         if (queryEndpoint) {
             const response = await fetch(queryEndpoint, {
                 method: 'POST',
@@ -559,7 +557,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     }, [dashboardConfig, formData.dashboardName, report?.dashboardName]);
     const currentDashboardTenants = useMemo(() => {
         return (currentDashboard?.tenantKeys?.map((tenantKey) => client?.allTenantTypes?.find((t) => t.tenantField === tenantKey)) ?? []);
-    }, [tenants]);
+    }, [client?.allTenantTypes, currentDashboard?.tenantKeys]);
     const dashboardOwner = currentDashboardTenants?.[0];
     const invalidColumns = useMemo(() => {
         if (!rows || !rows.length) {
@@ -671,21 +669,23 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         getFormData();
     }, []);
     const allTenantMap = useMemo(() => {
-        return client?.allTenantTypes?.reduce((acc, tenantType) => {
+        return (client?.allTenantTypes?.reduce((acc, tenantType) => {
             if (tenantType.scope === 'database') {
-                acc[tenantType.tenantField] = tenantType.flags?.map((t) => ({
-                    label: t,
-                    value: t,
-                })) ?? [];
+                acc[tenantType.tenantField] =
+                    tenantType.flags?.map((t) => ({
+                        label: t,
+                        value: t,
+                    })) ?? [];
             }
             else {
-                acc[tenantType.tenantField] = tenantType.tenantIds?.map((t) => ({
-                    label: t.label,
-                    value: t.flag,
-                })) ?? [];
+                acc[tenantType.tenantField] =
+                    tenantType.tenantIds?.map((t) => ({
+                        label: t.label,
+                        value: t.flag,
+                    })) ?? [];
             }
             return acc;
-        }, {}) ?? {};
+        }, {}) ?? {});
     }, [client?.allTenantTypes]);
     const [selectedPivotTable, setSelectedPivotTable] = useState(pivotData);
     const pivotCardTable = useMemo(() => {
@@ -708,8 +708,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             : undefined;
         if (pivot) {
             let dateBucket = undefined;
+            let dateFilter = undefined;
             if (filtersEnabled) {
-                const dateFilter = dashboardFilters?.find((f) => f.filterType === 'date_range');
+                dateFilter = dashboardFilters?.find((f) => f.filterType === 'date_range');
                 dateBucket =
                     dateFilter?.startDate && dateFilter?.endDate
                         ? getDateBucketFromRange({
@@ -722,11 +723,15 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 const pivotTable = await generatePivotTable({
                     pivot,
                     dateBucket,
-                    report: { ...report, ...(tableInfo ?? { itemQuery }) },
+                    dateFilter,
+                    report: report
+                        ? { ...report, ...(tableInfo ?? { itemQuery }) }
+                        : undefined,
                     client,
                     uniqueValues,
                     dashboardName: destinationDashboard,
                     tenants,
+                    additionalProcessing: baseProcessing,
                 });
                 setSelectedPivotTable(pivotTable);
             }
@@ -793,7 +798,21 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             return;
         }
         setRowCountIsLoading(true);
-        const tableInfo = await fetchResultsByQuery(query, client, tenants, processing, schemaData.customFields, filtersEnabled ? overrideFilters : undefined, filtersEnabled ? (report?.dateField ?? formData.dateField) : undefined, false, true, canonicalFilterMap);
+        const tableInfo = await fetchResultsByQuery({
+            query,
+            client,
+            tenants,
+            processing,
+            customFields: schemaData.customFields,
+            filters: filtersEnabled ? overrideFilters : undefined,
+            dateField: filtersEnabled
+                ? (report?.dateField ?? formData.dateField)
+                : undefined,
+            rowsOnly: false,
+            rowCountOnly: true,
+            filterMap: canonicalFilterMap,
+            dashboardName: destinationDashboard,
+        });
         if (tableInfo.rowCount !== undefined) {
             setRowCount(tableInfo.rowCount);
         }
@@ -831,7 +850,21 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         }
         try {
             setIsLoading(true);
-            const tableInfo = await fetchResultsByQuery(query, client, tenants, processing, schemaData.customFields, filtersEnabled ? overrideFilters : undefined, filtersEnabled ? (report?.dateField ?? formData.dateField) : undefined, true, false, canonicalFilterMap, destinationDashboard);
+            const tableInfo = await fetchResultsByQuery({
+                query,
+                client,
+                tenants,
+                processing,
+                customFields: schemaData.customFields,
+                filters: filtersEnabled ? overrideFilters : undefined,
+                dateField: filtersEnabled
+                    ? (report?.dateField ?? formData.dateField)
+                    : undefined,
+                rowsOnly: true,
+                rowCountOnly: false,
+                filterMap: canonicalFilterMap,
+                dashboardName: destinationDashboard,
+            });
             setCurrentProcessing(processing);
             setRows(tableInfo.rows);
             setProcessedColumns(processColumns(tableInfo.columns));
@@ -853,7 +886,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             console.log(e);
         }
     };
-    const onPageChange = (page) => {
+    const onPageChange = (page, isPivotTable) => {
         // only fetch if report is valid, else use query task
         if (currentProcessing.page &&
             shouldFetchMore(currentProcessing.page, page, maxPage)) {
@@ -866,23 +899,23 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 page: newPagination,
             };
             setCurrentProcessing(updatedProcessing);
-            updateTableRows(updatedProcessing);
+            updateTableRows(updatedProcessing, false, isPivotTable);
         }
         if (page > maxPage) {
             setMaxPage(page);
         }
     };
-    const onSortChange = (sort) => {
+    const onSortChange = (sort, isPivotTable) => {
         // if (shouldSortInMemory(baseProcessing.page, rowCount)) {
         //   return;
         // }
         const updatedProcessing = { ...baseProcessing, sort };
-        updateTableRows(updatedProcessing, true);
+        updateTableRows(updatedProcessing, true, isPivotTable);
         setCurrentProcessing(updatedProcessing);
         setCurrentPage(0);
         setMaxPage(0);
     };
-    const updateTableRows = async (processing, resetRows = false) => {
+    const updateTableRows = async (processing, resetRows = false, isPivotTable = false) => {
         if (!client) {
             return;
         }
@@ -890,17 +923,40 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             setIsLoading(true);
             try {
                 const updatedProcessing = { ...currentProcessing, ...processing };
-                const paginatedRows = await fetchResultsByQuery(query, client, tenants, updatedProcessing, schemaData.customFields, filtersEnabled ? currentDashboardFilters : undefined, filtersEnabled
-                    ? (report?.dateField ?? formData.dateField)
-                    : undefined, false, false, canonicalFilterMap, destinationDashboard);
+                const paginatedRows = await fetchResultsByQuery({
+                    query: isPivotTable && report.pivotQuery ? report.pivotQuery : query,
+                    comparisonQuery: isPivotTable && report.comparisonPivotQuery
+                        ? report.comparisonPivotQuery
+                        : undefined,
+                    client,
+                    tenants,
+                    processing: updatedProcessing,
+                    customFields: schemaData.customFields,
+                    filters: filtersEnabled ? currentDashboardFilters : undefined,
+                    dateField: filtersEnabled
+                        ? (report?.dateField ?? formData.dateField)
+                        : undefined,
+                    rowsOnly: false,
+                    rowCountOnly: false,
+                    filterMap: canonicalFilterMap,
+                    dashboardName: destinationDashboard,
+                    pivot: isPivotTable ? report.pivot : undefined,
+                    getPivotRowCount: false,
+                });
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
-                let tempRows = [...rows, ...paginatedRows.rows];
+                const prevRows = isPivotTable && selectedPivotTable ? selectedPivotTable.rows : rows;
+                let updatedRows = [...prevRows, ...paginatedRows.rows];
                 if (resetRows) {
-                    tempRows = paginatedRows.rows;
+                    updatedRows = paginatedRows.rows;
+                }
+                if (isPivotTable && selectedPivotTable) {
+                    setSelectedPivotTable({ ...selectedPivotTable, rows: updatedRows });
+                }
+                else {
+                    setRows(updatedRows);
                 }
-                setRows(tempRows);
                 setCurrentProcessing(updatedProcessing);
             }
             catch (e) {
@@ -1013,6 +1069,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             setSelectedPivotTable({
                 rows: pivotData.rows,
                 columns: pivotData.columns,
+                rowCount: pivotData.rowCount,
+                pivotQuery: pivotData.pivotQuery,
+                comparisonPivotQuery: pivotData.comparisonPivotQuery,
             });
         }
         else {
@@ -1054,7 +1113,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 yAxisFields: [
                     ...formData.yAxisFields,
                     // @ts-ignore
-                    { label: '', field: '', chartType: '', format: '' },
+                    { label: '', field: '', chartType: '', format: 'whole_number' },
                 ],
             });
         }
@@ -1131,30 +1190,44 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 : report && !isAdmin && formData.template
                     ? false
                     : formData.template,
-            reportFlags: formFlags ? Object.fromEntries(Object.entries(formFlags)
-                .filter(([, value]) => value.length > 0)
-                .map(([key, value]) => {
-                return [key, Object.keys(allTenantMap).length > 1 && allTenantMap[key]?.length === value.length ? ALL_TENANTS : value];
-            })) : undefined,
+            reportFlags: formFlags
+                ? Object.fromEntries(Object.entries(formFlags)
+                    .filter(([, value]) => value.length > 0)
+                    .map(([key, value]) => {
+                    return [
+                        key,
+                        Object.keys(allTenantMap).length > 1 &&
+                            allTenantMap[key]?.length === value.length
+                            ? ALL_TENANTS
+                            : value,
+                    ];
+                }))
+                : undefined,
         };
         const resp = await saveReport({
-            report: newReport,
+            report: { ...newReport, rows: undefined, pivotRows: undefined }, // stop including rows in request
             dashboardItemId,
             client,
         });
         if (resp && resp.name !== 'error') {
+            const data = {
+                ...resp,
+                rows,
+                columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
+                pivotRows: selectedPivotTable?.rows || undefined,
+                pivotColumns: selectedPivotTable?.columns || undefined,
+                triggerReload: true,
+                error: undefined,
+            };
             dispatch({
                 type: 'ADD_DASHBOARD_ITEM',
                 id: resp.id,
-                data: {
-                    ...resp,
-                    rows,
-                    columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
-                    pivotRows: selectedPivotTable?.rows || undefined,
-                    pivotColumns: selectedPivotTable?.columns || undefined,
-                    triggerReload: true,
-                    error: undefined,
-                },
+                data,
+            });
+            reportsDispatch({
+                type: 'ADD_REPORT',
+                id: resp.id,
+                data,
             });
         }
         setIsOpen(false);
@@ -1199,7 +1272,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                 maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
                             }),
                             ...(!isHorizontalView && isOpen && { width: formWidth }),
-                        }, children: [!isEditingMode && (report?.adminError || report?.error) ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : ((isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
+                        }, children: [!isEditingMode && (report?.adminError || report?.error) ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : ((isHorizontalView || (!isOpen && windowWidth > 1200)) && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
                                     onFiltersEnabledChanged(hide);
                                 }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
                                     width: '100%',
@@ -1210,8 +1283,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                     ...(isHorizontalView && { flexGrow: 1 }),
                                 }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen }))), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            isAdmin &&
-                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
+                            (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
                                     width: '100%',
                                     // height:
                                     //   isHorizontalView || !isOpen
@@ -1226,11 +1298,11 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                     }, currentPage: currentPage, rowCount: rowCount, isLoading: isLoading, rowCountIsLoading: rowCountIsLoading, disableSort: disableSort })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                         ? selectedPivotTable.columns
                                         : formData.columns, onPageChange: (page) => {
-                                        onPageChange(page);
+                                        onPageChange(page, true);
                                         setCurrentPage(page);
                                     }, onSortChange: (sort) => {
-                                        onSortChange && onSortChange(sort);
-                                    }, currentPage: currentPage, rowCount: selectedPivotTable ? formattedRows.length : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                                        onSortChange && onSortChange(sort, true);
+                                    }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 20,
@@ -1245,15 +1317,15 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                 paddingTop: modalPadding,
                                 paddingBottom: modalPadding,
                             }),
-                        }, children: [_jsxs(FormContainer, { children: [(formData.pivot || formData.chartType !== 'table') && windowWidth < 1200 &&
-                                        _jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
-                                                onFiltersEnabledChanged(hide);
-                                            }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
-                                                width: '100%',
-                                                height: 500,
-                                                flexGrow: 1,
-                                                marginBottom: 20,
-                                            }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent
+                        }, children: [_jsxs(FormContainer, { children: [(formData.pivot || formData.chartType !== 'table') &&
+                                        windowWidth < 1200 && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
+                                            onFiltersEnabledChanged(hide);
+                                        }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
+                                            width: '100%',
+                                            height: 500,
+                                            flexGrow: 1,
+                                            marginBottom: 20,
+                                        }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent
                                                 // {...autofocusRefProp}
                                                 , { 
                                                     // {...autofocusRefProp}
@@ -1275,7 +1347,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotValueField2: pivotValueField2, setPivotValueField2: setPivotValueField2, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, uniqueValuesIsLoading: initialUniqueValuesIsLoading, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled, report: report, dashboardName: destinationDashboard }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: pivotCardTable, theme: theme, index: 0, onSelectPivot: () => {
+                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotValueField2: pivotValueField2, setPivotValueField2: setPivotValueField2, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, uniqueValuesIsLoading: initialUniqueValuesIsLoading, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled, report: report, dashboardName: destinationDashboard, dateFilter: filtersEnabled
+                                                                ? currentDashboardFilters?.find((f) => f.filterType === 'date_range')
+                                                                : undefined }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: pivotCardTable, theme: theme, index: 0, onSelectPivot: () => {
                                                                     setIsEdittingPivot(true);
                                                                     setShowPivotPopover(true);
                                                                     setPivotRowField(formData.pivot?.rowField);
@@ -1284,13 +1358,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                     setPivotValueField2(formData.pivot?.valueField2);
                                                                     setPivotAggregation(formData.pivot?.aggregationType);
                                                                     setPivotPopUpTitle('Edit pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [windowWidth < 1200 && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
-                                                    onFiltersEnabledChanged(hide);
-                                                }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
-                                                    width: '100%',
-                                                    height: 500,
-                                                    flexGrow: 1,
-                                                }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
+                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
@@ -1299,12 +1367,12 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                         label: elem.field,
                                                                         value: elem.field,
                                                                     })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), _jsx(SelectComponent, { value: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType || '')
+                                                                    isDateField(formData.pivot.rowFieldType ?? '')
                                                                     ? 'pivot_date'
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType || '')
+                                                                    isDateField(formData.pivot.rowFieldType ?? '')
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
+                                                                    : formatOptions, width: 200, hideEmptyOption: true })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
                                                                             ? formData.pivot.valueField || 'count'
                                                                             : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
                                                                             ? [
@@ -1324,13 +1392,10 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                             })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), _jsx(SelectComponent, { value: formData.pivot
                                                                             ? NUMBER_OPTIONS.find((option) => {
                                                                                 return (option.value === yAxisField.format);
-                                                                            })
-                                                                                ? // @ts-ignore
-                                                                                    NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
-                                                                                : ''
+                                                                            })?.value ?? NUMBER_OPTIONS[0].value
                                                                             : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                             ? NUMBER_OPTIONS
-                                                                            : formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), isAdmin && windowWidth < 1200 && (_jsx("div", { style: {
+                                                                            : formatOptions, width: 200, hideEmptyOption: true }), !formData.pivot && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), !formData.pivot && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), windowWidth < 1200 && (_jsx("div", { style: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
@@ -1342,11 +1407,11 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                                 ? selectedPivotTable.columns
                                                 : formData.columns, onPageChange: (page) => {
-                                                onPageChange(page);
+                                                onPageChange(page, true);
                                                 setCurrentPage(page);
                                             }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort);
-                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? formattedRows.length : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) })), isAdmin && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                                onSortChange && onSortChange(sort, true);
+                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) })), (showTableFormatOptions || isAdmin) && (_jsxs("div", { children: [_jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
@@ -1366,7 +1431,10 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                                 ? 'pivot_date'
                                                                                 : 'string'
                                                                             : formData.pivot?.valueFieldType ||
-                                                                                'two_decimal_places', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
+                                                                                (formData.pivot?.aggregationType ===
+                                                                                    'percentage'
+                                                                                    ? 'percent'
+                                                                                    : 'two_decimal_places'), onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
                                                                             ? isDateField(formData.pivot.rowFieldType || '')
                                                                                 ? [{ label: 'date', value: 'pivot_date' }]
                                                                                 : [{ label: 'string', value: 'string' }]
@@ -1447,7 +1515,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                         userSelect: 'none',
                                                                     }, children: "Custom" })] }), client?.allTenantTypes?.length === 1 ? (_jsx(MultiSelectComponent, { value: formFlags?.[dashboardOwner.tenantField] ?? [], onChange: (e) => setFormFlags({
                                                                 ...formFlags,
-                                                                [dashboardOwner.tenantField]: e.target.value,
+                                                                [dashboardOwner.tenantField]: e.target
+                                                                    .value,
                                                             }), options: dashboardOwner.scope === 'database'
                                                                 ? (dashboardOwner.flags?.map((f) => ({
                                                                     label: f,
@@ -1460,18 +1529,26 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                     value: t.flag,
                                                                 })) ?? []), width: 200, emptyLabel: dashboardOwner.scope === 'database'
                                                                 ? 'No flags supplied'
-                                                                : undefined, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: { display: customTenantAccess ? 'inline' : 'none', marginTop: -1, marginBottom: -4 } })) : (_jsx(QuillMultiSelectSectionList, { value: formFlags ?? {}, onChange: (e) => setFormFlags(e.target.value), options: allTenantMap, sectionHeaderMap: client?.allTenantTypes?.reduce((acc, tenantType) => {
+                                                                : undefined, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
+                                                                display: customTenantAccess ? 'inline' : 'none',
+                                                                marginTop: -1,
+                                                                marginBottom: -4,
+                                                            } })) : (_jsx(QuillMultiSelectSectionList, { value: formFlags ?? {}, onChange: (e) => setFormFlags(e.target.value), options: allTenantMap, sectionHeaderMap: client?.allTenantTypes?.reduce((acc, tenantType) => {
                                                                 if (tenantType.scope === 'database') {
                                                                     acc[SINGLE_TENANT] = 'Database';
                                                                     return acc;
                                                                 }
                                                                 acc[tenantType.tenantField] = tenantType.name;
                                                                 return acc;
-                                                            }, {}) ?? {}, width: 200, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: { display: customTenantAccess ? 'inline' : 'none', marginTop: -1, marginBottom: -4 }, owner: dashboardOwner.tenantField }))] }) })] })), (specificDashboardFilters.length > 0 ||
-                                        (isAdmin &&
-                                            formData.dateField &&
-                                            dashboardConfig[formData.dashboardName ?? '']?.config
-                                                .dateFilter?.label)) && (_jsxs("div", { style: {
+                                                            }, {}) ?? {}, width: 200, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
+                                                                display: customTenantAccess ? 'inline' : 'none',
+                                                                marginTop: -1,
+                                                                marginBottom: -4,
+                                                            }, owner: dashboardOwner.tenantField }))] }) })] })), specificDashboardFilters.length > 0 &&
+                                        isAdmin &&
+                                        formData.dateField &&
+                                        dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter
+                                            ?.label && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1502,14 +1579,12 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                     .map((filter, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(TextInputComponent, { id: 'filterMap.' + filter.label, value: filter.label, width: 200, onChange: () => { }, label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']
-                                                                        ?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
                                                                 ? 'Filter'
                                                                 : '', disabled: true }), _jsx(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']
-                                                                        ?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
                                                                 ? 'Virtual Table'
                                                                 : '', value: filterMap[filter.label]?.table ?? filter.table, onChange: (e) => setFilterMap({
                                                                 ...filterMap,
@@ -1527,8 +1602,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                             })), width: 200 }), _jsx(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']
-                                                                        ?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
                                                                 ? 'Field'
                                                                 : '', value: filterMap[filter.label]?.field ?? filter.field, onChange: (e) => setFilterMap({
                                                                 ...filterMap,
@@ -1556,8 +1630,10 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     justifyContent: 'flex-end',
-                                    marginTop: 'auto',
                                     gap: 10,
+                                    position: 'absolute',
+                                    bottom: 16,
+                                    right: 16,
                                 }, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
@@ -1565,7 +1641,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             justifyContent: 'space-between',
                                             alignItems: 'center',
                                             gap: 6,
-                                        }, children: [filterIssues.length === 0 ? (_jsx("div", {})) : (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 10 }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                        }, children: [filterIssues.length === 0 ? (_jsx("div", {})) : (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 10, backgroundColor: 'white' }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                             setIsOpen(false);
                                                             onDiscardChanges && onDiscardChanges();
                                                         }, label: 'Discard changes' }), _jsx(ButtonComponent, { onClick: () => {