@quillsql/react 2.13.41 → 2.13.43

package/dist/cjs/ChartBuilder.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dateFormatOptions = exports.numberFormatOptions = void 0;
 exports.createInitialFormData = createInitialFormData;
+exports.createReportFromForm = createReportFromForm;
 exports.ChartBuilderWithModal = ChartBuilderWithModal;
 exports.default = ChartBuilder;
 exports.DashboardFilterModal = DashboardFilterModal;
@@ -35,7 +36,17 @@ const dataFetcher_1 = require("./utils/dataFetcher");
 const QuillMultiSelectSectionList_1 = require("./components/QuillMultiSelectSectionList");
 const constants_1 = require("./utils/constants");
 const pivotConstructor_1 = require("./utils/pivotConstructor");
-const CHART_TYPES = ['column', 'line', 'table', 'metric', 'gauge', 'bar', 'pie', 'US map', 'World map'];
+const CHART_TYPES = [
+    'column',
+    'line',
+    'table',
+    'metric',
+    'gauge',
+    'bar',
+    'pie',
+    'US map',
+    'World map',
+];
 const CHART_TO_LABELS = {
     column: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
     line: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
@@ -50,7 +61,9 @@ const CHART_TO_LABELS = {
 function getPivotMetricOptions(pivot, selectedPivotTable, chartType) {
     if (['metric', 'gauge'].includes(chartType) && selectedPivotTable) {
         return selectedPivotTable.columns.map((elem) => ({
-            label: elem.field === pivot?.rowField ? `Pivot Row (${elem.field})` : elem.field,
+            label: elem.field === pivot?.rowField
+                ? `Pivot Row (${elem.field})`
+                : elem.field,
             value: elem.field,
         }));
     }
@@ -99,7 +112,15 @@ function createInitialFormData(columns) {
 function getChartTypeOptions(formData, dashboard) {
     let viableCharts = CHART_TYPES;
     if (dashboard && dashboard.dateFilter && dashboard.dateFilter.comparison) {
-        viableCharts = viableCharts.filter((chart) => !['table', 'metric', 'gauge', 'bar', 'pie', 'US map', 'World map'].includes(chart));
+        viableCharts = viableCharts.filter((chart) => ![
+            'table',
+            'metric',
+            'gauge',
+            'bar',
+            'pie',
+            'US map',
+            'World map',
+        ].includes(chart));
     }
     if (formData.pivot && !formData.pivot.rowField) {
         return viableCharts
@@ -111,9 +132,12 @@ function getChartTypeOptions(formData, dashboard) {
     }
     else {
         return viableCharts
-            .filter((elem) => !((formData.pivot &&
+            .filter((elem) => !(formData.pivot &&
             formData.pivot.columnField &&
-            (elem === 'bar' || elem === 'pie' || elem === 'US map' || elem === 'World map'))))
+            (elem === 'bar' ||
+                elem === 'pie' ||
+                elem === 'US map' ||
+                elem === 'World map')))
             .map((elem) => ({ label: elem, value: elem }));
     }
 }
@@ -139,11 +163,15 @@ function createReportFromForm(formData, report, selectedPivotTable, rows = [], f
         columnInternal: report?.columnInternal ?? [],
         referenceLines: formData.referenceLines?.map((elem) => ({
             label: elem.label,
-            query: elem.label === constants_1.REFERENCE_LINE ? [Number(elem.y1) || 0, Number(elem.y2) || 0] : elem.label,
+            query: elem.label === constants_1.REFERENCE_LINE
+                ? [Number(elem.y1) || 0, Number(elem.y2) || 0]
+                : elem.label,
         })) || [],
         referenceLineYValues: formData.referenceLines?.map((elem, index) => ({
             label: elem.label,
-            query: elem.label === constants_1.REFERENCE_LINE ? [Number(elem.y1) || 0, Number(elem.y2) || 0] : referenceLineQueryResults?.[index],
+            query: elem.label === constants_1.REFERENCE_LINE
+                ? [Number(elem.y1) || 0, Number(elem.y2) || 0]
+                : referenceLineQueryResults?.[index],
         })) || [],
     }), filtersApplied);
     return newReport;
@@ -263,9 +291,9 @@ function ChartBuilderWithModal(props) {
  */
 function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, 
 // MultiSelectComponent = QuillMultiSelectComponentWithCombo,
-ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent = UiComponents_1.MemoizedModal, LoadingComponent = UiComponents_1.QuillLoadingComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, ErrorComponent = ChartError_1.QuillChartErrorWithAction, CheckboxComponent = UiComponents_1.QuillChartBuilderCheckboxComponent, onClickChartError, isOpen, isHorizontalView = true, setIsOpen, dateRange, isAdmin = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, tempReport, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, showTableFormatOptions, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, filtersEnabled, onFiltersEnabledChanged, 
+ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent = UiComponents_1.MemoizedModal, LoadingComponent = UiComponents_1.QuillLoadingComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, ErrorComponent = ChartError_1.QuillChartErrorWithAction, CheckboxComponent = UiComponents_1.QuillChartBuilderCheckboxComponent, onClickChartError, isOpen, isHorizontalView = true, setIsOpen, dateRange, isAdmin = false, showDashboardDropdown = true, hidePivotForm = false, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, tempReport, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, showTableFormatOptions, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, hideTableView = false, hideChartView = false, hideChartType = false, hideDiscardChanges = false, filtersEnabled, onFiltersEnabledChanged, 
 // isLoading,
-onClickChartElement, isEditingMode = false, disableSort = true, }) {
+destinationDashboard, onClickChartElement, isEditingMode = false, disableSort = true, }) {
     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);
@@ -398,7 +426,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         }
         : undefined;
     const columns = report?.columnInternal ?? [];
-    const destinationDashboard = report?.dashboardName;
+    const destinationDashboardName = destinationDashboard || report?.dashboardName;
     const query = report?.queryString;
     const [loadingFormData, setLoadingFormData] = (0, react_1.useState)(false);
     const [triggeredEditChart, setTriggeredEditChart] = (0, react_1.useState)(false);
@@ -583,19 +611,24 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             ...report,
             // ...pivotData,
             dateField: dateField,
-            referenceLines: report?.referenceLines ? report.referenceLines?.map(({ label, query }) => {
-                if (typeof query === 'string') {
-                    return { label, y1: undefined, y2: undefined };
-                }
-                return {
-                    label,
-                    y1: query[0],
-                    y2: query[1],
-                };
-            }) : [],
+            referenceLines: report?.referenceLines
+                ? report.referenceLines?.map(({ label, query }) => {
+                    if (typeof query === 'string') {
+                        return { label, y1: undefined, y2: undefined };
+                    }
+                    return {
+                        label,
+                        y1: query[0],
+                        y2: query[1],
+                    };
+                })
+                : [],
         };
     };
     const [formData, setFormData] = (0, react_1.useState)(formFormDataFromReport(report));
+    const reportCustomFields = (0, react_1.useMemo)(() => {
+        return (report?.columnsWithCustomFields?.filter((col) => !report?.columns?.some((c) => col.field === c.field)) ?? []);
+    }, [report?.columnsWithCustomFields, report?.columns]);
     const referenceLineQueryResults = (0, react_1.useMemo)(() => {
         return formData?.referenceLines?.map((line) => {
             if (line.label === constants_1.REFERENCE_LINE) {
@@ -726,14 +759,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                     { label: 'New - Dashboard', value: 'New - Dashboard' },
                 ];
             }
-            if (destinationDashboard) {
+            if (destinationDashboardName) {
                 dashboardOptions = [
-                    { label: destinationDashboard, value: destinationDashboard },
+                    { label: destinationDashboardName, value: destinationDashboardName },
                 ];
             }
             let dashboardName = report?.dashboardName ?? dashboardOptions[0]?.label ?? '';
-            if (destinationDashboard) {
-                dashboardName = destinationDashboard;
+            if (destinationDashboardName) {
+                dashboardName = destinationDashboardName;
             }
             const curDashboard = await updateDashboardFilters(dashboardName);
             setDashboardOptions(dashboardOptions);
@@ -842,7 +875,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 { value: 'whole_number', label: 'whole number' },
                 { value: 'two_decimal_places', label: 'two decimal places' },
                 { value: 'percent', label: 'percentage' },
-            ] : ALL_FORMAT_OPTIONS;
+            ]
+            : ALL_FORMAT_OPTIONS;
     }, [chartData?.chartType]);
     const fetchPivotData = async (pivot, tableInfo, uniqueValues, overrideFilters) => {
         const dashboardFilters = filtersEnabled
@@ -871,7 +905,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                         : undefined,
                     client,
                     uniqueValues,
-                    dashboardName: destinationDashboard,
+                    dashboardName: destinationDashboardName,
                     tenants,
                     additionalProcessing: baseProcessing,
                 });
@@ -916,12 +950,17 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             if (!rows)
                 return [];
             return rows.map((row) => {
-                return formData.columns.reduce((formattedRow, column) => {
+                const columns = formData.includeCustomFields && !containsCustomFields
+                    ? formData.columns.concat(reportCustomFields)
+                    : formData.columns;
+                return columns.reduce((formattedRow, column) => {
                     // Apply the format function to each field in the row
-                    const formattedValue = (0, valueFormatter_1.quillFormat)({
-                        value: row[column.field],
-                        format: column.format,
-                    });
+                    const formattedValue = column.inferFormat
+                        ? (0, valueFormatter_1.quillAutoFormat)(row[column.field])
+                        : (0, valueFormatter_1.quillFormat)({
+                            value: row[column.field],
+                            format: column.format,
+                        });
                     formattedRow[column.field] = formattedValue;
                     return formattedRow;
                 }, {});
@@ -952,7 +991,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             rowsOnly: false,
             rowCountOnly: true,
             filterMap: canonicalFilterMap,
-            dashboardName: destinationDashboard,
+            dashboardName: destinationDashboardName,
         });
         if (tableInfo.rowCount !== undefined) {
             setRowCount(tableInfo.rowCount);
@@ -1004,7 +1043,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 rowsOnly: true,
                 rowCountOnly: false,
                 filterMap: canonicalFilterMap,
-                dashboardName: destinationDashboard,
+                dashboardName: destinationDashboardName,
             });
             setCurrentProcessing(processing);
             setRows(tableInfo.rows);
@@ -1013,7 +1052,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             fetchRowCount(processing, overrideFilters);
             if (formData.pivot) {
                 try {
-                    const uniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(tableInfo.columns.filter((column) => column.field === formData.pivot?.columnField), report.queryString, tableInfo.rows, client, tenants, schemaData.customFields ?? {}, overrideFilters, destinationDashboard);
+                    const uniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(tableInfo.columns.filter((column) => column.field === formData.pivot?.columnField), report.queryString, tableInfo.rows, client, tenants, schemaData.customFields ?? {}, overrideFilters, destinationDashboardName);
                     fetchPivotData(formData.pivot, tableInfo, uniqueValues, overrideFilters);
                 }
                 catch (e) {
@@ -1080,7 +1119,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                     rowsOnly: false,
                     rowCountOnly: false,
                     filterMap: canonicalFilterMap,
-                    dashboardName: destinationDashboard,
+                    dashboardName: destinationDashboardName,
                     pivot: isPivotTable ? report.pivot : undefined,
                     getPivotRowCount: false,
                 });
@@ -1128,8 +1167,20 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             else 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) {
+                        newLabel = (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(value);
+                    }
+                }
                 // @ts-ignore
-                const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
+                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 ?? '']));
@@ -1243,6 +1294,11 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             ...formData,
             dashboardName: formData.dashboardName,
             pivot: null,
+            chartType: formEmptyState.chartType,
+            xAxisField: formEmptyState.xAxisField,
+            xAxisFormat: formEmptyState.xAxisFormat,
+            xAxisLabel: formEmptyState.xAxisLabel,
+            yAxisFields: formEmptyState.yAxisFields,
         });
         // maybe validate
         setSelectedPivotTable(undefined);
@@ -1337,9 +1393,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             ...(formData.dateField?.table
                 ? {}
                 : { dateField: { ...defaultDateField } }),
-            ...(formData.dashboardName
-                ? {}
-                : { dashboardName: report?.dashboardName }),
+            dashboardName: destinationDashboardName,
             query: report?.queryString ?? '',
             pivot: formData.pivot,
             referencedTables: allTables,
@@ -1368,7 +1422,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             referenceLines: formData.referenceLines.map((line) => {
                 return {
                     label: line.label,
-                    query: line.label === constants_1.REFERENCE_LINE ? [Number(line.y1 ?? 0) || 0, Number(line.y2 ?? 0) || 0] : ''
+                    query: line.label === constants_1.REFERENCE_LINE
+                        ? [Number(line.y1 ?? 0) || 0, Number(line.y2 ?? 0) || 0]
+                        : '',
                 };
             }),
         };
@@ -1430,15 +1486,17 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                     gap: '20px',
                     flexDirection: isHorizontalView ? 'row' : 'column',
                     boxSizing: 'border-box',
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [hideChartView ? null : ((0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: isOpen ? 16 : 20,
                             overflowY: 'scroll',
                             height: isHorizontalView || !isOpen ? '100%' : 800,
                             ...(isHorizontalView && {
-                                flexGrow: 1,
-                                maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
+                                // flexGrow: 1,
+                                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) => {
@@ -1449,10 +1507,13 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                     //   formData.chartType === 'metric'
                                     //     ? 100
                                     //     : `calc(${filtersEnabled ? 50 : 70}%)`,
-                                    ...(isHorizontalView && { flexGrow: !['table'].includes(formData.chartType) ? 1 : 0 }),
+                                    ...(isHorizontalView && {
+                                        flexGrow: !['table'].includes(formData.chartType) ? 1 : 0,
+                                    }),
                                 }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen }))), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            (isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            !hideChartView &&
+                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                     width: '100%',
                                     // height:
                                     //   isHorizontalView || !isOpen
@@ -1470,23 +1531,25 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                 ? 200
                                                 : formData.chartType === 'metric'
                                                     ? 300
-                                                    : formData.chartType === 'US map' || formData.chartType === 'World map'
-                                                        ? 'fit-content'
-                                                        : 500,
-                                            flexGrow: !['table'].includes(formData.chartType) ? 1 : 0,
-                                        }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
+                                                    : 500,
+                                            flexGrow: formData.chartType !== 'table' ? 1 : 0,
+                                        }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), hideTableView ? null : formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: includeCustomFields && !containsCustomFields
+                                            ? formData.columns.concat(reportCustomFields)
+                                            : formData.columns, onPageChange: (page) => {
                                             onPageChange(page);
                                             setCurrentPage(page);
                                         }, onSortChange: (sort) => {
                                             onSortChange && onSortChange(sort);
-                                        }, currentPage: currentPage, rowCount: rowCount, isLoading: isLoading, rowCountIsLoading: rowCountIsLoading, disableSort: disableSort })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                        }, currentPage: currentPage, rowCount: rowCount, isLoading: isLoading, rowCountIsLoading: rowCountIsLoading, disableSort: disableSort, hideLabels: false })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                             ? selectedPivotTable.columns
-                                            : formData.columns, onPageChange: (page) => {
+                                            : includeCustomFields && !containsCustomFields
+                                                ? formData.columns.concat(reportCustomFields)
+                                                : formData.columns, onPageChange: (page) => {
                                             onPageChange(page, true);
                                             setCurrentPage(page);
                                         }, onSortChange: (sort) => {
                                             onSortChange && onSortChange(sort, true);
-                                        }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort }))] }))] }), isOpen && ((0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                                        }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort, hideLabels: false }))] }))] })), isOpen && ((0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 20,
@@ -1502,30 +1565,35 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                 paddingTop: modalPadding,
                                 paddingBottom: modalPadding,
                             }),
-                        }, children: [(0, jsx_runtime_1.jsxs)(FormContainer, { children: [(formData.pivot || formData.chartType !== 'table') &&
-                                        windowWidth < 1200 && ((0, jsx_runtime_1.jsx)(InternalChart_1.default, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
-                                            onFiltersEnabledChanged(hide);
-                                        }, colors: theme?.chartColors, loading: false, 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,
-                                            flexGrow: !['table'].includes(formData.chartType) ? 1 : 0,
-                                        }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), (0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(TextInputComponent
+                        }, children: [(0, jsx_runtime_1.jsxs)(FormContainer, { children: [hideChartView
+                                        ? null
+                                        : (formData.pivot || formData.chartType !== 'table') &&
+                                            windowWidth < 1200 && ((0, jsx_runtime_1.jsx)(InternalChart_1.default, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
+                                                onFiltersEnabledChanged(hide);
+                                            }, colors: theme?.chartColors, loading: false, 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,
+                                                flexGrow: !['table'].includes(formData.chartType)
+                                                    ? 1
+                                                    : 0,
+                                            }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), (0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(TextInputComponent
                                                 // {...autofocusRefProp}
                                                 , { 
                                                     // {...autofocusRefProp}
-                                                    id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboard && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
+                                                    id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboardName && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
                                                         handleChange(e.target.value, 'dashboardName');
                                                         await updateDashboardFilters(e.target.value);
                                                     }, options: dashboardOptions.map((elem) => ({
                                                         label: elem.label,
                                                         value: elem.label,
-                                                    })), 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 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    })), 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: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1549,10 +1617,12 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                         },
                                                                     ]);
                                                                     setPivotPopUpTitle('Edit pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] })), !hideChartView &&
+                                        (formData.pivot || formData.chartType !== 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsx)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                }, children: (0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
+                                                }, children: (0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ??
+                                                            '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
                                                                     ? getPivotMetricOptions(formData.pivot, selectedPivotTable, formData.chartType)
                                                                     : columns.map((elem) => ({
                                                                         label: elem.field,
@@ -1563,7 +1633,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     (0, PivotModal_1.isDateField)(formData.xAxisField ?? '')
                                                                     ? [{ value: 'string', label: 'date' }]
-                                                                    : xAxisFormatOptions, width: 200, hideEmptyOption: true })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
+                                                                    : xAxisFormatOptions, width: 200, hideEmptyOption: true })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ??
+                                                            '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
                                                                             ? formData.pivot.aggregations?.length
                                                                                 ? ((0, pivotConstructor_1.disambiguatedValueField)(formData.pivot) ?? 'count')
                                                                                 : 'count'
@@ -1590,31 +1661,47 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                             })?.value ?? NUMBER_OPTIONS[0].value)
                                                                             : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                             ? NUMBER_OPTIONS
-                                                                            : ALL_FORMAT_OPTIONS, width: 200, hideEmptyOption: true }), !formData.pivot && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), !formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] })), client?.featureFlags?.['referenceLines'] && (chartData.chartType === 'line' || chartData.chartType === 'column') && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: 'Reference Lines' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.referenceLines?.map((refLine, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { width: 200, value: refLine.label, onChange: (e) => handleChange(e.target.value, 'referenceLines.label', index), 
+                                                                            : ALL_FORMAT_OPTIONS, width: 200, hideEmptyOption: true }), !formData.pivot && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), !formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] })), client?.featureFlags?.['referenceLines'] &&
+                                                (chartData.chartType === 'line' ||
+                                                    chartData.chartType === 'column') && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: 'Reference Lines' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.referenceLines?.map((refLine, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { width: 200, value: refLine.label, onChange: (e) => handleChange(e.target.value, 'referenceLines.label', index), 
                                                                         // only include numeric columns
-                                                                        options: [{
+                                                                        options: [
+                                                                            {
                                                                                 label: 'Custom Values',
-                                                                                value: constants_1.REFERENCE_LINE
-                                                                            }].concat((selectedPivotTable?.columns ? selectedPivotTable.columns : columns).filter((c) => valueFormatter_1.NUMBER_FORMAT_TYPES.includes(c.format)).map((elem) => ({
+                                                                                value: constants_1.REFERENCE_LINE,
+                                                                            },
+                                                                        ].concat((selectedPivotTable?.columns
+                                                                            ? selectedPivotTable.columns
+                                                                            : columns)
+                                                                            .filter((c) => valueFormatter_1.NUMBER_FORMAT_TYPES.includes(c.format))
+                                                                            .map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        }))) }), refLine.label === constants_1.REFERENCE_LINE && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-ref-line-y1", width: 200, value: refLine.y1?.toString() ?? '', placeholder: "Start value", onChange: (e) => handleChange(e.target.value, 'referenceLines.y1', index) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-ref-line-y2", width: 200, value: refLine.y2?.toString() ?? '', placeholder: "End value", onChange: (e) => handleChange(e.target.value, 'referenceLines.y2', index) })] })), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('referenceLines', index) }) })] }, 'referenceLine' + index))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('referenceLines'), label: "Add line +" }) })] })] })] })), windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        }))) }), refLine.label === constants_1.REFERENCE_LINE && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-ref-line-y1", width: 200, value: refLine.y1?.toString() ?? '', placeholder: "Start value", onChange: (e) => handleChange(e.target.value, 'referenceLines.y1', index) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-ref-line-y2", width: 200, value: refLine.y2?.toString() ?? '', placeholder: "End value", onChange: (e) => handleChange(e.target.value, 'referenceLines.y2', index) })] })), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('referenceLines', index) }) })] }, 'referenceLine' + index))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('referenceLines'), label: "Add line +" }) })] })] }))] })), windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
-                                        }, children: formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
+                                        }, children: formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: includeCustomFields && !containsCustomFields
+                                                ? formData.columns.concat(reportCustomFields)
+                                                : formData.columns, onPageChange: (page) => {
                                                 onPageChange(page);
                                                 setCurrentPage(page);
                                             }, onSortChange: (sort) => {
                                                 onSortChange && onSortChange(sort);
-                                            }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                            }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort, hideLabels: false })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                                 ? selectedPivotTable.columns
-                                                : formData.columns, onPageChange: (page) => {
+                                                : includeCustomFields && !containsCustomFields
+                                                    ? formData.columns.concat(reportCustomFields)
+                                                    : formData.columns, onPageChange: (page) => {
                                                 onPageChange(page, true);
                                                 setCurrentPage(page);
                                             }, onSortChange: (sort) => {
                                                 onSortChange && onSortChange(sort, true);
-                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort })) })), (showTableFormatOptions || isAdmin) && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort, hideLabels: false })) })), (showTableFormatOptions || isAdmin) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 6,
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Table" }), (0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: "Columns" })] }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
@@ -1659,7 +1746,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                 flexDirection: 'row',
                                                                 gap: 10,
                                                             }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), isAdmin &&
-                                                                    client?.featureFlags?.customFieldsEnabled && ((0, jsx_runtime_1.jsx)(CheckboxComponent, { isChecked: containsCustomFields || includeCustomFields, label: "Include Custom Fields", onChange: () => setIncludeCustomFields((prev) => !prev), disabled: containsCustomFields }))] })) })] })] })), isAdmin && tenants && dashboardOwner && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                    client?.featureFlags?.customFieldsEnabled && ((0, jsx_runtime_1.jsx)(UiComponents_1.QuillToolTip, { text: "Custom field directly referenced in report", enabled: containsCustomFields, textStyle: {
+                                                                        maxWidth: '200px',
+                                                                        whiteSpace: 'normal',
+                                                                    }, children: (0, jsx_runtime_1.jsx)(CheckboxComponent, { isChecked: containsCustomFields || includeCustomFields, label: "Include Custom Fields", onChange: () => setIncludeCustomFields((prev) => !prev), disabled: containsCustomFields, containerStyle: {
+                                                                            height: containsCustomFields
+                                                                                ? '100%' // required when wrapped with QuillToolTip
+                                                                                : undefined,
+                                                                        } }) }))] })) })] })] })), isAdmin && tenants && dashboardOwner && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -1768,7 +1862,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             gap: 6,
                                         }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Dashboard filter fields" }), isAdmin &&
                                                 formData.dateField &&
-                                                dashboardConfig[formData.dashboardName ?? destinationDashboard ?? '']?.config.dateFilter?.label && ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'filterMap.dateFilter.' +
+                                                dashboardConfig[formData.dashboardName ?? destinationDashboardName ?? '']?.config.dateFilter?.label && ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'filterMap.dateFilter.' +
                                                             (dashboardConfig[formData.dashboardName ?? '']
                                                                 ?.config.dateFilter?.label ?? 'Date'), value: dashboardConfig[formData.dashboardName ?? '']
                                                             ?.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) => ({
@@ -1793,12 +1887,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                     .map((filter, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: 'filterMap.' + filter.label, value: filter.label, width: 200, onChange: () => { }, label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
                                                                 ? 'Filter'
                                                                 : '', disabled: true }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
                                                                 ? 'Virtual Table'
                                                                 : '', value: filterMap[filter.label]?.table ?? filter.table, onChange: (e) => setFilterMap({
                                                                 ...filterMap,
@@ -1816,7 +1912,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                             })), width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
                                                                 ? 'Field'
                                                                 : '', value: filterMap[filter.label]?.field ?? filter.field, onChange: (e) => setFilterMap({
                                                                 ...filterMap,
@@ -1855,15 +1952,15 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             justifyContent: 'space-between',
                                             alignItems: 'center',
                                             gap: 6,
-                                        }, children: [!!filterIssues?.length && ((0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, children: [!!filterIssues?.length && ((0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashboard - Report issues', containerStyle: { height: '100%' } })), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
                                                     gap: 10,
                                                     backgroundColor: 'white',
-                                                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                                }, children: [hideDiscardChanges ? null : ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
                                                             setIsOpen(false);
                                                             onDiscardChanges && onDiscardChanges();
-                                                        }, label: 'Discard changes' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                                                        }, label: 'Discard changes' })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
                                                             if (loadingFormData) {
                                                                 setTriggeredEditChart(true);
                                                             }