@quillsql/react 2.13.48 → 2.13.50

package/dist/esm/ChartBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardConfigContext, DashboardFiltersContext, ReportFiltersContext, ReportsContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
+import { ClientContext, DashboardConfigContext, DashboardFiltersContext, FetchContext, 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, QuillToolTip, QuillChartBuilderCheckboxComponent, } from './components/UiComponents';
@@ -23,7 +23,6 @@ import { shouldFetchMore,
 import { fetchResultsByQuery, getUniqueValuesByQuery, } from './utils/tableProcessing';
 import { getDateBucketFromRange } from './utils/dates';
 import { QuillMultiSelectComponentWithCombo as MultiSelectComponent } from './components/QuillMultiSelectWithCombo';
-import { useQuillCloud } from './utils/dataFetcher';
 import { QuillMultiSelectSectionList } from './components/QuillMultiSelectSectionList';
 import { ALL_TENANTS, REFERENCE_LINE, SINGLE_TENANT } from './utils/constants';
 import { disambiguatedValueField } from './utils/pivotConstructor';
@@ -268,7 +267,9 @@ export function ChartBuilderWithModal(props) {
     return (_jsx("div", { style: { height: '100%' }, ref: parentRef, children: _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 : props.tempReport) ? (_jsx(ChartBuilder, { ...props })) : (_jsx("div", { style: { padding: 20 }, children: _jsx(QuillLoadingComponent, {}) })) }) }));
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: (props.reportId
+                ? (dashboard[props.reportId] ?? props.tempReport)
+                : props.tempReport) ? (_jsx(ChartBuilder, { ...props })) : (_jsx("div", { style: { padding: 20 }, children: _jsx(QuillLoadingComponent, {}) })) }) }));
 }
 /**
  * ### Quill Chart Builder
@@ -302,11 +303,11 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
     const [schemaData] = useContext(SchemaDataContext);
+    const { getToken, quillFetchWithToken } = useContext(FetchContext);
     const { addReport } = useDashboardReports(destinationDashboard);
     const { allReportsById } = useAllReports();
     const { dashboardConfig } = useContext(DashboardConfigContext);
     const { tenants, flags } = useContext(TenantContext);
-    const { getDataFromCloud } = useQuillCloud();
     const report = useMemo(() => {
         return reportId && !tempReport ? allReportsById[reportId] : tempReport;
     }, [reportId]);
@@ -395,7 +396,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         };
     }, [isOpen]);
     const [dashboardOptions, setDashboardOptions] = useState([]);
-    const { reportFilters, loadFiltersForReport, reportFiltersDispatch, abortLoadingFilters } = useContext(ReportFiltersContext);
+    const { reportFilters, loadFiltersForReport, reportFiltersDispatch, abortLoadingFilters, } = useContext(ReportFiltersContext);
     const { reportsDispatch } = useContext(ReportsContext);
     const initialFilters = useRef(reportFilters[report?.id ?? TEMP_REPORT_ID]);
     useEffect(() => {
@@ -499,7 +500,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         ? Object.fromEntries(Object.entries(report.flags).map(([key, value]) => {
             if (value === ALL_TENANTS) {
                 const tenantType = client?.allTenantTypes?.find((t) => t.tenantField === key);
-                return [key, tenantType?.tenantField === SINGLE_TENANT ? tenantType?.flags ?? [] : tenantType?.tenantIds?.map((id) => id.flag) ?? []];
+                return [
+                    key,
+                    tenantType?.tenantField === SINGLE_TENANT
+                        ? (tenantType?.flags ?? [])
+                        : (tenantType?.tenantIds?.map((id) => id.flag) ?? []),
+                ];
             }
             else {
                 return [key, value];
@@ -514,7 +520,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: snakeAndCamelCaseToTitleCase(col.label) };
         }) ?? [],
         xAxisField: report?.columns?.[0]?.field ?? '',
@@ -540,33 +546,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) => {
@@ -580,21 +598,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) && !NUMBER_FORMAT_TYPES.includes(rowColumn?.format ?? ''))
+        const xAxisField = pivot.rowField &&
+            !(['metric', 'gauge'].includes(chartType) &&
+                !NUMBER_FORMAT_TYPES.includes(rowColumn?.format ?? ''))
             ? pivot.rowField
             : disambiguatedValueField(pivot);
         const result = {
             pivot,
             chartType: chartType,
             xAxisField,
-            xAxisFormat: chartType === 'gauge' ? 'percent' : chartType === 'metric' ? 'whole_number' :
-                isDateType(pivot.rowFieldType ?? '')
-                    ? 'string'
-                    : isNumberType(pivot.rowFieldType ?? '')
-                        ? 'whole_number'
-                        : isNumberType(disambiguatedValueField(pivot) ?? '')
+            xAxisFormat: chartType === 'gauge'
+                ? 'percent'
+                : chartType === 'metric'
+                    ? 'whole_number'
+                    : isDateType(pivot.rowFieldType ?? '')
+                        ? 'string'
+                        : isNumberType(pivot.rowFieldType ?? '')
                             ? 'whole_number'
-                            : 'string',
+                            : isNumberType(disambiguatedValueField(pivot) ?? '')
+                                ? 'whole_number'
+                                : 'string',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
@@ -611,10 +634,14 @@ 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 getTablesHelper(getSelectFromAST({}), dbTables, skipStar);
@@ -774,7 +801,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
@@ -934,6 +967,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                     dashboardName: destinationDashboardName,
                     tenants,
                     additionalProcessing: baseProcessing,
+                    getToken,
                 });
                 setSelectedPivotTable(pivotTable);
                 return pivotTable;
@@ -1008,6 +1042,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
         const tableInfo = await fetchResultsByQuery({
             query,
             client,
+            getToken,
             tenants,
             processing,
             customFields: schemaData.customFields,
@@ -1071,6 +1106,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                 rowCountOnly: false,
                 filterMap: canonicalFilterMap,
                 dashboardName: destinationDashboardName,
+                getToken,
             });
             setCurrentProcessing(processing);
             setRows(tableInfo.rows);
@@ -1083,6 +1119,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,
@@ -1146,6 +1183,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                         ? report.comparisonPivotQuery
                         : undefined,
                     client,
+                    getToken,
                     tenants,
                     processing: updatedProcessing,
                     customFields: schemaData.customFields,
@@ -1189,71 +1227,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 = 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 = 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;
@@ -1279,14 +1299,16 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                     updatedForm.xAxisFormat = 'whole_number';
                     const currentXAxisColumn = (selectedPivotTable?.columns ?? columns).find((c) => c.field === updatedForm.xAxisField);
                     if (!NUMBER_FORMAT_TYPES.includes(currentXAxisColumn?.format ?? '')) {
-                        updatedForm.xAxisField = (selectedPivotTable?.columns ?? columns).find((c) => NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
+                        updatedForm.xAxisField =
+                            (selectedPivotTable?.columns ?? columns).find((c) => 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 (!NUMBER_FORMAT_TYPES.includes(currentXAxisColumn?.format ?? '')) {
-                        updatedForm.xAxisField = (selectedPivotTable?.columns ?? columns).find((c) => NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
+                        updatedForm.xAxisField =
+                            (selectedPivotTable?.columns ?? columns).find((c) => NUMBER_FORMAT_TYPES.includes(c.format))?.field ?? updatedForm.xAxisField;
                     }
                 }
             }
@@ -1328,9 +1350,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 && isDateField(pivot.rowFieldType ?? '') ? dateFieldOptions.find((table) => {
-            return table.columns.find((col) => col.field === pivot.rowField);
-        }) : undefined;
+        const dateField = pivot.rowField && isDateField(pivot.rowFieldType ?? '')
+            ? dateFieldOptions.find((table) => {
+                return table.columns.find((col) => col.field === pivot.rowField);
+            })
+            : undefined;
         setFormData((formData) => ({
             ...formData,
             ...newPivotFormData,
@@ -1489,6 +1513,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 = {
@@ -1548,9 +1573,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) ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : ((isHorizontalView || (!isOpen && windowWidth > 1200)) && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
@@ -1564,7 +1587,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: MultiSelectComponent, LoadingComponent: LoadingComponent }))), 
                             // Make sure to display non-pivoted table when using pivot chart
                             !hideChartView &&
                                 (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsxs("div", { style: {
@@ -1581,11 +1604,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                             onFiltersEnabledChanged(hide);
                                         }, colors: theme?.chartColors, loading: isLoading, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
                                             width: '100%',
-                                            height: formData.chartType === 'table'
-                                                ? 200
-                                                : formData.chartType === 'metric'
-                                                    ? 300
-                                                    : 500,
+                                            // height:
+                                            //   formData.chartType === 'table'
+                                            //     ? 200
+                                            //     : formData.chartType === 'metric'
+                                            //       ? 300
+                                            //       : 500,
                                             flexGrow: formData.chartType !== 'table' ? 1 : 0,
                                         }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), hideTableView ? null : formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: includeCustomFields && !containsCustomFields
                                             ? formData.columns.concat(reportCustomFields)
@@ -1626,14 +1650,15 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                 onFiltersEnabledChanged(hide);
                                             }, colors: theme?.chartColors, loading: isLoading, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
                                                 width: '100%',
-                                                height: formData.chartType === 'table'
-                                                    ? 200
-                                                    : formData.chartType === 'metric'
-                                                        ? 300
-                                                        : formData.chartType === 'US map' ||
-                                                            formData.chartType === 'World map'
-                                                            ? 'fit-content'
-                                                            : 500,
+                                                // height:
+                                                //   formData.chartType === 'table'
+                                                //     ? 200
+                                                //     : formData.chartType === 'metric'
+                                                //       ? 300
+                                                //       : formData.chartType === 'US map' ||
+                                                //           formData.chartType === 'World map'
+                                                //         ? 'fit-content'
+                                                //         : 500,
                                                 flexGrow: !['table'].includes(formData.chartType)
                                                     ? 1
                                                     : 0,
@@ -1647,9 +1672,17 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                     }, options: dashboardOptions.map((elem) => ({
                                                         label: elem.label,
                                                         value: elem.label,
-                                                    })), width: 200 }) })), hideChartType ? (_jsx("div", { style: { width: 200 } })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: _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) && _jsx("div", { style: { display: currentDashboard?.sectionOrder?.length ? 'flex' : 'none', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Section", value: formData.section ?? '', options: currentDashboard?.sectionOrder?.map((s) => ({ label: s.section ? s.section : 'No section', value: s.section })) ?? [], onChange: (e) => {
+                                                    })), width: 200 }) })), hideChartType ? (_jsx("div", { style: { width: 200 } })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: _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) && (_jsx("div", { style: {
+                                                            display: currentDashboard?.sectionOrder?.length
+                                                                ? 'flex'
+                                                                : 'none',
+                                                            flexDirection: 'column',
+                                                        }, children: _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 : (_jsxs("div", { style: {
+                                                            }, width: 200, hideEmptyOption: true }) }))] }))] }), hidePivotForm ? null : (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1658,7 +1691,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: _jsx(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: _jsx(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 && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: pivotCardTable, theme: theme, index: 0, onSelectPivot: () => {
                                                                     setIsEdittingPivot(true);
@@ -1765,25 +1798,16 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                         selectedPivotTable.columns &&
                                                         formData.chartType === 'table'
                                                         ? // THIS CASE IF FOR PIVOT TABLES ONLY
-                                                            selectedPivotTable.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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 }), _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) }), _jsx(SelectComponent, { value: 
+                                                            selectedPivotTable.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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 }), _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) }), _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 &&
-                                                                                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
                                                                             ? 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) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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,
@@ -1792,7 +1816,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                                         : columns.map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        })), width: 200 }), _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) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
+                                                                        })), width: 200, hideEmptyOption: true }), _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) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200, hideEmptyOption: true }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
                                                         // hide when pivoted and chartType === 'table'
                                                         (formData.pivot &&
                                                             selectedPivotTable &&
@@ -1892,7 +1916,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'
@@ -1916,6 +1940,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
+                                            marginBottom: 128,
                                         }, children: [_jsx(HeaderComponent, { label: "Dashboard filter fields" }), isAdmin &&
                                                 formData.dateField &&
                                                 dashboardConfig[formData.dashboardName ?? destinationDashboardName ?? '']?.config.dateFilter?.label && (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(TextInputComponent, { id: 'filterMap.dateFilter.' +
@@ -1924,12 +1949,12 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                             ?.config.dateFilter?.label ?? 'Date', width: 200, onChange: () => { }, label: 'Filter', disabled: true }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _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 }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Field", value: removeDoubleQuotes(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
+                                                            })), width: 200, hideEmptyOption: true }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Field", value: 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) && (_jsx("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
                                                                 color: '#dc143c',
                                                             } }) }))] })), specificDashboardFilters.length > 0 && (_jsx("div", { style: {
@@ -1965,7 +1990,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                             }), options: allTables.map((elem) => ({
                                                                 label: elem,
                                                                 value: elem,
-                                                            })), width: 200 }), _jsx(SelectComponent, { label: index === 0 &&
+                                                            })), width: 200, hideEmptyOption: true }), _jsx(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
                                                                     dashboardConfig[formData.dashboardName ?? '']
@@ -1987,7 +2012,7 @@ destinationDashboard, onClickChartElement, isEditingMode = false, disableSort =
                                                                 .map((elem) => ({
                                                                 label: elem.label,
                                                                 value: elem.field,
-                                                            })) ?? [], width: 200 }), !validFilter[filter.label] && (_jsx("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
+                                                            })) ?? [], width: 200, hideEmptyOption: true }), !validFilter[filter.label] && (_jsx("div", { style: { marginBottom: 8, marginTop: 'auto' }, children: _jsx(ExclamationFilledIcon, { height: 28, width: 28, style: {
                                                                     color: '#dc143c',
                                                                 } }) }))] }, filter.label))) }))] })), isAdmin && !tenants && !flags && (_jsxs("div", { style: {
                                             display: 'flex',

package/dist/esm/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;