@quillsql/react 2.13.47 → 2.13.49

package/dist/cjs/ChartBuilder.js

@@ -32,7 +32,6 @@ const paginationProcessing_1 = require("./utils/paginationProcessing");
 const tableProcessing_1 = require("./utils/tableProcessing");
 const dates_1 = require("./utils/dates");
 const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
-const dataFetcher_1 = require("./utils/dataFetcher");
 const QuillMultiSelectSectionList_1 = require("./components/QuillMultiSelectSectionList");
 const constants_1 = require("./utils/constants");
 const pivotConstructor_1 = require("./utils/pivotConstructor");
@@ -277,7 +276,9 @@ function ChartBuilderWithModal(props) {
     return ((0, jsx_runtime_1.jsx)("div", { style: { height: '100%' }, ref: parentRef, children: (0, jsx_runtime_1.jsx)(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
             // For isHorizontalView, use full viewport size minus 80px for padding,
             // otherwise use the default layout method of the modal (contents).
-            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: (props.reportId ? dashboard[props.reportId] : props.tempReport) ? ((0, jsx_runtime_1.jsx)(ChartBuilder, { ...props })) : ((0, jsx_runtime_1.jsx)("div", { style: { padding: 20 }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.QuillLoadingComponent, {}) })) }) }));
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: (props.reportId
+                ? (dashboard[props.reportId] ?? props.tempReport)
+                : props.tempReport) ? ((0, jsx_runtime_1.jsx)(ChartBuilder, { ...props })) : ((0, jsx_runtime_1.jsx)("div", { style: { padding: 20 }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.QuillLoadingComponent, {}) })) }) }));
 }
 /**
  * ### Quill Chart Builder
@@ -311,11 +312,11 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
+    const { getToken, quillFetchWithToken } = (0, react_1.useContext)(Context_1.FetchContext);
     const { addReport } = (0, useDashboard_1.useDashboardReports)(destinationDashboard);
     const { allReportsById } = (0, useDashboard_1.useAllReports)();
     const { dashboardConfig } = (0, react_1.useContext)(Context_1.DashboardConfigContext);
     const { tenants, flags } = (0, react_1.useContext)(Context_1.TenantContext);
-    const { getDataFromCloud } = (0, dataFetcher_1.useQuillCloud)();
     const report = (0, react_1.useMemo)(() => {
         return reportId && !tempReport ? allReportsById[reportId] : tempReport;
     }, [reportId]);
@@ -404,12 +405,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         };
     }, [isOpen]);
     const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
-    const { reportFilters, loadFiltersForReport, reportFiltersDispatch, abortLoadingFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
+    const { reportFilters, loadFiltersForReport, reportFiltersDispatch, abortLoadingFilters, } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
     const { reportsDispatch } = (0, react_1.useContext)(Context_1.ReportsContext);
     const initialFilters = (0, react_1.useRef)(reportFilters[report?.id ?? Report_1.TEMP_REPORT_ID]);
     (0, react_1.useEffect)(() => {
         if (!reportFilters[report?.id ?? Report_1.TEMP_REPORT_ID]) {
-            loadFiltersForReport(report?.id ?? Report_1.TEMP_REPORT_ID, 'ChartBuilder', specificDashboardFilters, undefined, undefined, canonicalFilterMap, report?.dashboardName);
+            loadFiltersForReport(report?.id ?? Report_1.TEMP_REPORT_ID, 'ChartBuilder', specificDashboardFilters, undefined, undefined, report?.dashboardName);
         }
         return () => {
             abortLoadingFilters(report?.id ?? tempReport?.id ?? Report_1.TEMP_REPORT_ID);
@@ -420,6 +421,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                     data: Object.values(initialFilters.current),
                 });
             }
+            else {
+                reportFiltersDispatch({
+                    type: 'CLEAR_REPORT_FILTERS',
+                    id: report?.id ?? Report_1.TEMP_REPORT_ID,
+                });
+            }
         };
     }, []);
     const currentDashboardFilters = (0, react_1.useMemo)(() => {
@@ -502,7 +509,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         ? Object.fromEntries(Object.entries(report.flags).map(([key, value]) => {
             if (value === constants_1.ALL_TENANTS) {
                 const tenantType = client?.allTenantTypes?.find((t) => t.tenantField === key);
-                return [key, tenantType?.tenantField === constants_1.SINGLE_TENANT ? tenantType?.flags ?? [] : tenantType?.tenantIds?.map((id) => id.flag) ?? []];
+                return [
+                    key,
+                    tenantType?.tenantField === constants_1.SINGLE_TENANT
+                        ? (tenantType?.flags ?? [])
+                        : (tenantType?.tenantIds?.map((id) => id.flag) ?? []),
+                ];
             }
             else {
                 return [key, value];
@@ -517,7 +529,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
     const formEmptyState = {
         name: report?.name ?? '',
         dashboardName: dashboardOptions[0]?.label ?? '',
-        columns: report?.columns.map((col) => {
+        columns: report?.columns?.map((col) => {
             return { ...col, label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(col.label) };
         }) ?? [],
         xAxisField: report?.columns?.[0]?.field ?? '',
@@ -543,33 +555,45 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         if (!client) {
             return;
         }
-        const { queryEndpoint, queryHeaders, publicKey, withCredentials } = client;
-        if (queryEndpoint) {
-            const response = await fetch(queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    ...queryHeaders,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        task: 'dashboard',
-                        name: dashboardName,
-                        clientId: publicKey,
-                        databaseType: client.databaseType,
-                        useNewNodeSql: true,
-                        tenants,
-                    },
-                }),
-                credentials: withCredentials ? 'include' : 'omit',
-            });
-            const responseData = (await response.json()).data;
-            if (responseData) {
-                return {
-                    ...responseData,
-                    createdAt: responseData.createdAt && new Date(responseData.createdAt),
-                };
-            }
+        const { data: responseData } = await quillFetchWithToken({
+            client,
+            task: 'dashboard',
+            metadata: {
+                name: dashboardName,
+                clientId: client.clientId,
+                databaseType: client.databaseType,
+                useNewNodeSql: true,
+                tenants,
+            },
+        });
+        if (responseData) {
+            return {
+                ...responseData,
+                createdAt: responseData.createdAt && new Date(responseData.createdAt),
+                dateFilter: responseData.dateFilter
+                    ? {
+                        ...responseData.dateFilter,
+                        presetOptions: responseData.dateFilter.presetOptions?.map((preset) => ({
+                            ...preset,
+                            loopStart: preset.loopStart
+                                ? new Date(preset.loopStart)
+                                : undefined,
+                            loopEnd: preset.loopEnd
+                                ? new Date(preset.loopEnd)
+                                : undefined,
+                        })),
+                        defaultPresetRanges: responseData.dateFilter.defaultPresetRanges?.map((preset) => ({
+                            ...preset,
+                            loopStart: preset.loopStart
+                                ? new Date(preset.loopStart)
+                                : undefined,
+                            loopEnd: preset.loopEnd
+                                ? new Date(preset.loopEnd)
+                                : undefined,
+                        })),
+                    }
+                    : undefined,
+            };
         }
     };
     const pivotFormData = (pivot) => {
@@ -583,21 +607,26 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
             : false;
         const chartType = formData?.chartType ?? (pivot.rowField ? 'column' : 'metric');
         const rowColumn = (selectedPivotTable?.columns ?? columns).find((col) => col.field === pivot.rowField);
-        const xAxisField = pivot.rowField && !(['metric', 'gauge'].includes(chartType) && !valueFormatter_1.NUMBER_FORMAT_TYPES.includes(rowColumn?.format ?? ''))
+        const xAxisField = pivot.rowField &&
+            !(['metric', 'gauge'].includes(chartType) &&
+                !valueFormatter_1.NUMBER_FORMAT_TYPES.includes(rowColumn?.format ?? ''))
             ? pivot.rowField
             : (0, pivotConstructor_1.disambiguatedValueField)(pivot);
         const result = {
             pivot,
             chartType: chartType,
             xAxisField,
-            xAxisFormat: chartType === 'gauge' ? 'percent' : chartType === 'metric' ? 'whole_number' :
-                (0, columnProcessing_1.isDateType)(pivot.rowFieldType ?? '')
-                    ? 'string'
-                    : (0, columnProcessing_1.isNumberType)(pivot.rowFieldType ?? '')
-                        ? 'whole_number'
-                        : (0, columnProcessing_1.isNumberType)((0, pivotConstructor_1.disambiguatedValueField)(pivot) ?? '')
+            xAxisFormat: chartType === 'gauge'
+                ? 'percent'
+                : chartType === 'metric'
+                    ? 'whole_number'
+                    : (0, columnProcessing_1.isDateType)(pivot.rowFieldType ?? '')
+                        ? 'string'
+                        : (0, columnProcessing_1.isNumberType)(pivot.rowFieldType ?? '')
                             ? 'whole_number'
-                            : 'string',
+                            : (0, columnProcessing_1.isNumberType)((0, pivotConstructor_1.disambiguatedValueField)(pivot) ?? '')
+                                ? 'whole_number'
+                                : 'string',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
@@ -614,17 +643,22 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         return result;
     };
     const getReferencedTables = async (client, sqlQuery, dbTables, skipStar) => {
-        const resp = await getDataFromCloud(client, `astify`, {
-            query: sqlQuery,
-            publicKey: client.publicKey,
-            useNewNodeSql: true,
+        const { data: resp } = await quillFetchWithToken({
+            client,
+            task: 'astify',
+            metadata: {
+                query: sqlQuery,
+                clientId: client.clientId,
+                useNewNodeSql: true,
+            },
         });
         if (resp.success === false) {
             return (0, astProcessing_1.getTablesHelper)((0, astProcessing_1.getSelectFromAST)({}), dbTables, skipStar);
         }
         return (0, astProcessing_1.getTablesHelper)((0, astProcessing_1.getSelectFromAST)(resp.ast), dbTables, skipStar);
     };
-    const formFormDataFromReport = (report) => {
+    const getCurrentSection = () => dashboardConfig[destinationDashboard]?.config.sectionOrder?.find((section) => section.reportOrder?.includes(report?.id ?? ''))?.section ?? '';
+    const formFormDataFromReport = (report, section) => {
         // let pivotData = {};
         let dateField = defaultDateField;
         // if (report?.pivot) {
@@ -650,9 +684,10 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                     };
                 })
                 : [],
+            section,
         };
     };
-    const [formData, setFormData] = (0, react_1.useState)(formFormDataFromReport(report));
+    const [formData, setFormData] = (0, react_1.useState)(formFormDataFromReport(report, getCurrentSection()));
     const reportCustomFields = (0, react_1.useMemo)(() => {
         return (report?.columnsWithCustomFields?.filter((col) => !report?.columns?.some((c) => col.field === c.field)) ?? []);
     }, [report?.columnsWithCustomFields, report?.columns]);
@@ -702,7 +737,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         return columns.filter((col) => !columnsObservedInRows.includes(col.field));
     }, [rows]);
     const [chartTypes, setChartTypes] = (0, react_1.useState)((() => {
-        const data = formFormDataFromReport(report);
+        const data = formFormDataFromReport(report, getCurrentSection());
         return getChartTypeOptions(data, dashboardConfig[data.dashboardName || '']);
     })());
     const reportContainsCustomFields = (0, react_1.useMemo)(() => {
@@ -775,7 +810,13 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
             const curFormData = formData;
             let dashNames = Object.keys(dashboardConfig);
             if (dashNames.length === 0) {
-                const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
+                const { data: resp } = await quillFetchWithToken({
+                    client,
+                    task: 'dashnames',
+                    metadata: {
+                        clientId: client.clientId,
+                    },
+                });
                 dashNames = resp.dashboardNames;
             }
             let dashboardOptions = dashNames
@@ -935,6 +976,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                     dashboardName: destinationDashboardName,
                     tenants,
                     additionalProcessing: baseProcessing,
+                    getToken,
                 });
                 setSelectedPivotTable(pivotTable);
                 return pivotTable;
@@ -1009,6 +1051,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         const tableInfo = await (0, tableProcessing_1.fetchResultsByQuery)({
             query,
             client,
+            getToken,
             tenants,
             processing,
             customFields: schemaData.customFields,
@@ -1036,7 +1079,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
             }
             return filter;
         });
-        loadFiltersForReport(report?.id ?? Report_1.TEMP_REPORT_ID, 'ChartBuilder', updatedFilters, label, undefined, canonicalFilterMap, report?.dashboardName).then(() => {
+        loadFiltersForReport(report?.id ?? Report_1.TEMP_REPORT_ID, 'ChartBuilder', updatedFilters, label, undefined, report?.dashboardName).then(() => {
             setCurrentPage(0);
             setMaxPage(0);
             handleRunQuery(baseProcessing, updatedFilters);
@@ -1072,6 +1115,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                 rowCountOnly: false,
                 filterMap: canonicalFilterMap,
                 dashboardName: destinationDashboardName,
+                getToken,
             });
             setCurrentProcessing(processing);
             setRows(tableInfo.rows);
@@ -1084,6 +1128,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                         columns: tableInfo.columns.filter((column) => column.field === formData.pivot?.columnField),
                         query: report.queryString,
                         client,
+                        getToken,
                         tenants,
                         customFields: schemaData.customFields ?? {},
                         filters: overrideFilters,
@@ -1147,6 +1192,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                         ? report.comparisonPivotQuery
                         : undefined,
                     client,
+                    getToken,
                     tenants,
                     processing: updatedProcessing,
                     customFields: schemaData.customFields,
@@ -1190,71 +1236,53 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
     const handleChange = async (value, fieldName, index) => {
         let updatedForm = { ...formData };
         try {
-            // WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
-            // WE NEED TO UPDATE BOTH VALUEFIELDTYPE AND COLUMN FIELD TYPES
-            if (fieldName === 'pivotColumn') {
-                // CAN'T EDIT THE TYPE OF THE RowField
-                if (index === 0) {
-                    return;
-                }
-                const updatedPivot = {
-                    ...formData.pivot,
-                    valueFieldType: value,
-                };
-                // @ts-ignore
-                updatedForm.pivot = updatedPivot;
-            }
-            else if (index !== undefined) {
+            if (index !== undefined) {
                 // For dynamic array fields
                 const [field, subfield] = fieldName.split('.');
-                let newLabel = undefined;
-                if (field === 'columns' && subfield === 'field') {
-                    if (!formData['columns'][index]?.label) {
+                if (field === 'pivot' && !!subfield) {
+                    if (!selectedPivotTable) {
+                        return;
+                    }
+                    let newLabel = undefined;
+                    if (subfield === 'field') {
                         newLabel = (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(value);
                     }
+                    const newColumns = selectedPivotTable.columns.map((col, i) => i === index
+                        ? {
+                            ...col,
+                            label: newLabel ? newLabel : col.label,
+                            [subfield]: value,
+                        }
+                        : col);
+                    setSelectedPivotTable({
+                        ...selectedPivotTable,
+                        columns: newColumns,
+                    });
                 }
-                // @ts-ignore
-                const updatedArray = formData[field].map((item, i) => i === index
-                    ? {
-                        ...item,
-                        label: newLabel ? newLabel : item.label,
-                        [subfield]: value,
+                else {
+                    let newLabel = undefined;
+                    if (field === 'columns' && subfield === 'field') {
+                        if (!formData['columns'][index]?.label) {
+                            newLabel = (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(value);
+                        }
                     }
-                    : item);
-                updatedForm = { ...formData, [field]: updatedArray };
-                setFormData(updatedForm);
-                setChartTypes(getChartTypeOptions(updatedForm, dashboardConfig[updatedForm.dashboardName ?? '']));
+                    // @ts-ignore
+                    const updatedArray = formData[field].map((item, i) => i === index
+                        ? {
+                            ...item,
+                            label: newLabel ? newLabel : item.label,
+                            [subfield]: value,
+                        }
+                        : item);
+                    updatedForm = { ...formData, [field]: updatedArray };
+                    setFormData(updatedForm);
+                    setChartTypes(getChartTypeOptions(updatedForm, dashboardConfig[updatedForm.dashboardName ?? '']));
+                }
             }
             else if (fieldName.includes('.')) {
                 // For nested fields
                 const [field, subfield] = fieldName.split('.');
-                if (field === 'pivot' && subfield !== '') {
-                    const subfieldTypeFieldName = subfield + 'Type';
-                    if (value.length) {
-                        const subFieldType = columns.find((columns) => columns.field === value).fieldType;
-                        updatedForm = {
-                            ...updatedForm,
-                            // @ts-ignore
-                            [field]: {
-                                ...updatedForm[field],
-                                [subfield]: value,
-                                [subfieldTypeFieldName]: subFieldType,
-                            },
-                        };
-                    }
-                    else {
-                        updatedForm = {
-                            ...formData,
-                            // @ts-ignore
-                            [field]: {
-                                ...formData[field],
-                                [subfield]: '',
-                                [subfieldTypeFieldName]: '',
-                            },
-                        };
-                    }
-                }
-                else if (field === 'dateField' &&
+                if (field === 'dateField' &&
                     subfield === 'table' &&
                     !formData.dateField?.field) {
                     const field = schemaData.schemaWithCustomFields?.find((elem) => elem.name === value)?.columns?.[0]?.field;
@@ -1280,14 +1308,16 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                     updatedForm.xAxisFormat = 'whole_number';
                     const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
                     if (!valueFormatter_1.NUMBER_FORMAT_TYPES.includes(currentXAxisColumn?.format ?? '')) {
-                        updatedForm.xAxisField = (selectedPivotTable?.columns ?? columns).find((c) => valueFormatter_1.NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
+                        updatedForm.xAxisField =
+                            (selectedPivotTable?.columns ?? columns).find((c) => valueFormatter_1.NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
                     }
                 }
                 else if (value === 'gauge') {
                     updatedForm.xAxisFormat = 'percent';
                     const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
                     if (!valueFormatter_1.NUMBER_FORMAT_TYPES.includes(currentXAxisColumn?.format ?? '')) {
-                        updatedForm.xAxisField = (selectedPivotTable?.columns ?? columns).find((c) => valueFormatter_1.NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
+                        updatedForm.xAxisField =
+                            (selectedPivotTable?.columns ?? columns).find((c) => valueFormatter_1.NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
                     }
                 }
             }
@@ -1329,9 +1359,11 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         // This method is *potentially* flawed because it chooses the first matching field it finds
         // which may not be robust to joins, aliases, disambiguations, etc.
         // unfortunately the pivot doesn't store the table of the rowField so we can't do better
-        const dateField = pivot.rowField && (0, PivotModal_1.isDateField)(pivot.rowFieldType ?? '') ? dateFieldOptions.find((table) => {
-            return table.columns.find((col) => col.field === pivot.rowField);
-        }) : undefined;
+        const dateField = pivot.rowField && (0, PivotModal_1.isDateField)(pivot.rowFieldType ?? '')
+            ? dateFieldOptions.find((table) => {
+                return table.columns.find((col) => col.field === pivot.rowField);
+            })
+            : undefined;
         setFormData((formData) => ({
             ...formData,
             ...newPivotFormData,
@@ -1490,6 +1522,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
             report: { ...newReport, rows: undefined, pivotRows: undefined }, // stop including rows in request
             dashboardItemId,
             client,
+            getToken,
         });
         if (resp && resp.name !== 'error') {
             const data = {
@@ -1516,6 +1549,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                 ...resp,
                 rows,
                 columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
+                section: formData.section,
             });
         }
     };
@@ -1548,9 +1582,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                             height: isHorizontalView || !isOpen ? '100%' : 800,
                             ...(isHorizontalView && {
                                 // flexGrow: 1,
-                                width: !isOpen
-                                    ? '100%'
-                                    : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
+                                width: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
                             }),
                             ...(!isHorizontalView && isOpen && { width: formWidth }),
                         }, children: [!isEditingMode && (report?.adminError || report?.error) ? ((0, jsx_runtime_1.jsx)(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : ((isHorizontalView || (!isOpen && windowWidth > 1200)) && ((0, jsx_runtime_1.jsx)(InternalChart_1.default, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
@@ -1564,7 +1596,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                     ...(isHorizontalView && {
                                         flexGrow: !['table'].includes(formData.chartType) ? 1 : 0,
                                     }),
-                                }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen }))), 
+                                }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen, SelectComponent: SelectComponent, MultiSelectComponent: QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, LoadingComponent: LoadingComponent }))), 
                             // Make sure to display non-pivoted table when using pivot chart
                             !hideChartView &&
                                 (isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -1647,7 +1679,17 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                     }, options: dashboardOptions.map((elem) => ({
                                                         label: elem.label,
                                                         value: elem.label,
-                                                    })), width: 200 }) })), hideChartType ? ((0, jsx_runtime_1.jsx)("div", { style: { width: 200 } })) : ((0, jsx_runtime_1.jsx)("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Chart type", value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), options: chartTypes, width: 200 }) }))] }), hidePivotForm ? null : ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    })), width: 200 }) })), hideChartType ? ((0, jsx_runtime_1.jsx)("div", { style: { width: 200 } })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Chart type", value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), options: chartTypes, width: 200 }) }), currentDashboard?.sectionOrder?.some((s) => s.section) && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                            display: currentDashboard?.sectionOrder?.length
+                                                                ? 'flex'
+                                                                : 'none',
+                                                            flexDirection: 'column',
+                                                        }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Section", value: formData.section ?? '', options: currentDashboard?.sectionOrder?.map((s) => ({
+                                                                label: s.section ? s.section : 'No section',
+                                                                value: s.section,
+                                                            })) ?? [], onChange: (e) => {
+                                                                handleChange(e.target.value ?? '', 'section');
+                                                            }, width: 200, hideEmptyOption: true }) }))] }))] }), hidePivotForm ? null : ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1656,7 +1698,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotAggregations: pivotAggregations, setPivotAggregations: setPivotAggregations, 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, SubheaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, 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: destinationDashboardName || '', dateFilter: filtersEnabled
+                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotAggregations: pivotAggregations, setPivotAggregations: setPivotAggregations, 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, SubheaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, 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 ? { ...report, ...{ itemQuery } } : undefined, dashboardName: destinationDashboardName || '', dateFilter: filtersEnabled
                                                                 ? currentDashboardFilters?.find((f) => f.filterType === 'date_range')
                                                                 : undefined }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: pivotCardWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: pivotCardTable, theme: theme, index: 0, onSelectPivot: () => {
                                                                     setIsEdittingPivot(true);
@@ -1763,25 +1805,16 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                         selectedPivotTable.columns &&
                                                         formData.chartType === 'table'
                                                         ? // THIS CASE IF FOR PIVOT TABLES ONLY
-                                                            selectedPivotTable.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
-                                                                            label: elem.label,
-                                                                            value: elem.label,
-                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 
+                                                            selectedPivotTable.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'pivot.field', index), options: selectedPivotTable.columns.map((elem) => ({
+                                                                            label: elem.field,
+                                                                            value: elem.field,
+                                                                        })), disabled: index === 0, width: 200, hideEmptyOption: true }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'pivot.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 
                                                                         // The first index use rowField for the rest of them use value fields
-                                                                        formData.pivot &&
-                                                                            column.field === formData.pivot.rowField
-                                                                            ? formData.pivot &&
-                                                                                (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType || '')
-                                                                                ? 'string'
-                                                                                : 'string'
-                                                                            : formData.pivot?.aggregationType ===
-                                                                                'percentage'
-                                                                                ? 'percent'
-                                                                                : 'two_decimal_places', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
+                                                                        column.format, onChange: (e) => handleChange(e.target.value, 'pivot.format', index), options: formData.pivot && index === 0
                                                                             ? (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType || '')
                                                                                 ? [{ label: 'date', value: 'string' }]
                                                                                 : [{ label: 'string', value: 'string' }]
-                                                                            : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
+                                                                            : [...NUMBER_OPTIONS], width: 200, hideEmptyOption: true })] }, 'column' + index)))
                                                         : formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: rows[0]
                                                                         ? Object.keys(rows[0]).map((elem) => ({
                                                                             label: elem,
@@ -1790,7 +1823,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                                         : columns.map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), (0, jsx_runtime_1.jsx)("div", { children: !(
+                                                                        })), width: 200, hideEmptyOption: true }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200, hideEmptyOption: true }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), (0, jsx_runtime_1.jsx)("div", { children: !(
                                                         // hide when pivoted and chartType === 'table'
                                                         (formData.pivot &&
                                                             selectedPivotTable &&
@@ -1890,7 +1923,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                                     label: t.label ?? t.flag,
                                                                     value: t.flag,
                                                                 })) ?? []), width: 200, emptyLabel: dashboardOwner.scope === 'database'
-                                                                ? 'No flags supplied'
+                                                                ? 'No tags supplied'
                                                                 : undefined, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
                                                                 display: customTenantAccess || containsCustomFields
                                                                     ? 'inline'
@@ -1914,6 +1947,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
+                                            marginBottom: 128,
                                         }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Dashboard filter fields" }), isAdmin &&
                                                 formData.dateField &&
                                                 dashboardConfig[formData.dashboardName ?? destinationDashboardName ?? '']?.config.dateFilter?.label && ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'filterMap.dateFilter.' +
@@ -1922,12 +1956,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                             ?.config.dateFilter?.label ?? 'Date', width: 200, onChange: () => { }, label: 'Filter', disabled: true }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Virtual Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
                                                                 label: elem.name,
                                                                 value: elem.name,
-                                                            })), width: 200 }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Field", value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
+                                                            })), width: 200, hideEmptyOption: true }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Field", value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
                                                                 ?.find((elem) => elem.name === formData.dateField?.table)
                                                                 ?.columns?.map((elem) => ({
                                                                 label: elem.field,
                                                                 value: elem.field,
-                                                            })) || [], width: 200 }) }), (!formData.dateField?.table ||
+                                                            })) || [], width: 200, hideEmptyOption: true }) }), (!formData.dateField?.table ||
                                                         !formData.dateField?.field) && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: (0, jsx_runtime_1.jsx)(assets_1.ExclamationFilledIcon, { height: 28, width: 28, style: {
                                                                 color: '#dc143c',
                                                             } }) }))] })), specificDashboardFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -1963,7 +1997,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                             }), options: allTables.map((elem) => ({
                                                                 label: elem,
                                                                 value: elem,
-                                                            })), width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: index === 0 &&
+                                                            })), width: 200, hideEmptyOption: true }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
                                                                     dashboardConfig[formData.dashboardName ?? '']
@@ -1985,7 +2019,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                                 .map((elem) => ({
                                                                 label: elem.label,
                                                                 value: elem.field,
-                                                            })) ?? [], width: 200 }), !validFilter[filter.label] && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: (0, jsx_runtime_1.jsx)(assets_1.ExclamationFilledIcon, { height: 28, width: 28, style: {
+                                                            })) ?? [], width: 200, hideEmptyOption: true }), !validFilter[filter.label] && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: (0, jsx_runtime_1.jsx)(assets_1.ExclamationFilledIcon, { height: 28, width: 28, style: {
                                                                     color: '#dc143c',
                                                                 } }) }))] }, filter.label))) }))] })), isAdmin && !tenants && !flags && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',

package/dist/cjs/ChartEditor.d.ts

@@ -27,10 +27,10 @@ export interface ChartEditorProps {
     /** A callback function triggered when the chart error button is clicked */
     onClickChartError?: (element: any) => void;
     /** A callback that is fired when the item is deleted. */
-    onDelete?: () => boolean;
+    onDelete?: () => boolean | Promise<boolean>;
     /** A select component. */
     SelectComponent?: (props: {
-        value: string;
+        value: string | null | undefined;
         label?: string;
         options: {
             value: string;