@quillsql/react 2.13.41 → 2.13.43

package/dist/esm/ChartBuilder.js

@@ -8,7 +8,7 @@ import { removeDoubleQuotes, snakeAndCamelCaseToTitleCase, } from './utils/textP
 import { QuillSelectComponent } from './components/QuillSelect';
 import { TEMP_REPORT_ID, } from './models/Report';
 import { QuillCard } from './components/QuillCard';
-import { NUMBER_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
+import { quillAutoFormat, NUMBER_FORMAT_TYPES, quillFormat, } from './utils/valueFormatter';
 import { convertFieldTypeToJSType, isDateType, isNumberType, isStringType, } from './utils/columnProcessing';
 import { getSelectFromAST, getTablesHelper } from './utils/astProcessing';
 import { validateReport } from './utils/validation';
@@ -27,7 +27,17 @@ 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';
-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' },
@@ -42,7 +52,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,
         }));
     }
@@ -91,7 +103,15 @@ export 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
@@ -103,13 +123,16 @@ 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 }));
     }
 }
-function createReportFromForm(formData, report, selectedPivotTable, rows = [], filtersApplied = [], referenceLineQueryResults) {
+export function createReportFromForm(formData, report, selectedPivotTable, rows = [], filtersApplied = [], referenceLineQueryResults) {
     const newReport = convertInternalReportToReport(mergeComparisonRange({
         ...formData,
         dashboardName: formData.dashboardName || '',
@@ -131,11 +154,15 @@ function createReportFromForm(formData, report, selectedPivotTable, rows = [], f
         columnInternal: report?.columnInternal ?? [],
         referenceLines: formData.referenceLines?.map((elem) => ({
             label: elem.label,
-            query: elem.label === REFERENCE_LINE ? [Number(elem.y1) || 0, Number(elem.y2) || 0] : elem.label,
+            query: elem.label === REFERENCE_LINE
+                ? [Number(elem.y1) || 0, Number(elem.y2) || 0]
+                : elem.label,
         })) || [],
         referenceLineYValues: formData.referenceLines?.map((elem, index) => ({
             label: elem.label,
-            query: elem.label === REFERENCE_LINE ? [Number(elem.y1) || 0, Number(elem.y2) || 0] : referenceLineQueryResults?.[index],
+            query: elem.label === REFERENCE_LINE
+                ? [Number(elem.y1) || 0, Number(elem.y2) || 0]
+                : referenceLineQueryResults?.[index],
         })) || [],
     }), filtersApplied);
     return newReport;
@@ -255,9 +282,9 @@ export function ChartBuilderWithModal(props) {
  */
 export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, 
 // MultiSelectComponent = QuillMultiSelectComponentWithCombo,
-ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, CheckboxComponent = 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 = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, CheckboxComponent = 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] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
     const [schemaData] = useContext(SchemaDataContext);
@@ -390,7 +417,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] = useState(false);
     const [triggeredEditChart, setTriggeredEditChart] = useState(false);
@@ -575,19 +602,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] = useState(formFormDataFromReport(report));
+    const reportCustomFields = useMemo(() => {
+        return (report?.columnsWithCustomFields?.filter((col) => !report?.columns?.some((c) => col.field === c.field)) ?? []);
+    }, [report?.columnsWithCustomFields, report?.columns]);
     const referenceLineQueryResults = useMemo(() => {
         return formData?.referenceLines?.map((line) => {
             if (line.label === REFERENCE_LINE) {
@@ -718,14 +750,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);
@@ -834,7 +866,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
@@ -863,7 +896,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                         : undefined,
                     client,
                     uniqueValues,
-                    dashboardName: destinationDashboard,
+                    dashboardName: destinationDashboardName,
                     tenants,
                     additionalProcessing: baseProcessing,
                 });
@@ -908,12 +941,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 = quillFormat({
-                        value: row[column.field],
-                        format: column.format,
-                    });
+                    const formattedValue = column.inferFormat
+                        ? quillAutoFormat(row[column.field])
+                        : quillFormat({
+                            value: row[column.field],
+                            format: column.format,
+                        });
                     formattedRow[column.field] = formattedValue;
                     return formattedRow;
                 }, {});
@@ -944,7 +982,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             rowsOnly: false,
             rowCountOnly: true,
             filterMap: canonicalFilterMap,
-            dashboardName: destinationDashboard,
+            dashboardName: destinationDashboardName,
         });
         if (tableInfo.rowCount !== undefined) {
             setRowCount(tableInfo.rowCount);
@@ -996,7 +1034,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 rowsOnly: true,
                 rowCountOnly: false,
                 filterMap: canonicalFilterMap,
-                dashboardName: destinationDashboard,
+                dashboardName: destinationDashboardName,
             });
             setCurrentProcessing(processing);
             setRows(tableInfo.rows);
@@ -1005,7 +1043,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             fetchRowCount(processing, overrideFilters);
             if (formData.pivot) {
                 try {
-                    const uniqueValues = await getUniqueValuesByColumns(tableInfo.columns.filter((column) => column.field === formData.pivot?.columnField), report.queryString, tableInfo.rows, client, tenants, schemaData.customFields ?? {}, overrideFilters, destinationDashboard);
+                    const uniqueValues = await 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) {
@@ -1072,7 +1110,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                     rowsOnly: false,
                     rowCountOnly: false,
                     filterMap: canonicalFilterMap,
-                    dashboardName: destinationDashboard,
+                    dashboardName: destinationDashboardName,
                     pivot: isPivotTable ? report.pivot : undefined,
                     getPivotRowCount: false,
                 });
@@ -1120,8 +1158,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 = 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 ?? '']));
@@ -1235,6 +1285,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);
@@ -1329,9 +1384,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,
@@ -1360,7 +1413,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             referenceLines: formData.referenceLines.map((line) => {
                 return {
                     label: line.label,
-                    query: line.label === REFERENCE_LINE ? [Number(line.y1 ?? 0) || 0, Number(line.y2 ?? 0) || 0] : ''
+                    query: line.label === REFERENCE_LINE
+                        ? [Number(line.y1 ?? 0) || 0, Number(line.y2 ?? 0) || 0]
+                        : '',
                 };
             }),
         };
@@ -1422,15 +1477,17 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                     gap: '20px',
                     flexDirection: isHorizontalView ? 'row' : 'column',
                     boxSizing: 'border-box',
-                }, children: [_jsxs("div", { style: {
+                }, children: [hideChartView ? null : (_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) ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : ((isHorizontalView || (!isOpen && windowWidth > 1200)) && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
@@ -1441,10 +1498,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)) && (_jsxs("div", { style: {
+                            !hideChartView &&
+                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsxs("div", { style: {
                                     width: '100%',
                                     // height:
                                     //   isHorizontalView || !isOpen
@@ -1462,23 +1522,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' ? (_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' ? (_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 })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                        }, currentPage: currentPage, rowCount: rowCount, isLoading: isLoading, rowCountIsLoading: rowCountIsLoading, disableSort: disableSort, hideLabels: false })) : (_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 && (_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 && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 20,
@@ -1494,30 +1556,35 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                 paddingTop: modalPadding,
                                 paddingBottom: modalPadding,
                             }),
-                        }, children: [_jsxs(FormContainer, { children: [(formData.pivot || formData.chartType !== 'table') &&
-                                        windowWidth < 1200 && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
-                                            onFiltersEnabledChanged(hide);
-                                        }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
-                                            width: '100%',
-                                            height: 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 })), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent
+                        }, children: [_jsxs(FormContainer, { children: [hideChartView
+                                        ? null
+                                        : (formData.pivot || formData.chartType !== 'table') &&
+                                            windowWidth < 1200 && (_jsx(InternalChart, { report: chartData, filtersEnabled: filtersEnabled, setFiltersEnabled: (hide) => {
+                                                onFiltersEnabledChanged(hide);
+                                            }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
+                                                width: '100%',
+                                                height: 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 })), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _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 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _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 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _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 }) })), _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 }) })] }), _jsxs("div", { style: {
+                                                    })), width: 200 }) })), hideChartType ? (_jsx("div", { style: { width: 200 } })) : (_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 }) }))] }), hidePivotForm ? null : (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1541,10 +1608,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') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
+                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] })), !hideChartView &&
+                                        (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
+                                                }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ??
+                                                            '' }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
                                                                     ? getPivotMetricOptions(formData.pivot, selectedPivotTable, formData.chartType)
                                                                     : columns.map((elem) => ({
                                                                         label: elem.field,
@@ -1555,7 +1624,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     isDateField(formData.xAxisField ?? '')
                                                                     ? [{ value: 'string', label: 'date' }]
-                                                                    : xAxisFormatOptions, width: 200, hideEmptyOption: true })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
+                                                                    : xAxisFormatOptions, width: 200, hideEmptyOption: true })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ??
+                                                            '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
                                                                             ? formData.pivot.aggregations?.length
                                                                                 ? (disambiguatedValueField(formData.pivot) ?? 'count')
                                                                                 : 'count'
@@ -1582,31 +1652,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 && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), !formData.pivot && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] })), client?.featureFlags?.['referenceLines'] && (chartData.chartType === 'line' || chartData.chartType === 'column') && _jsxs("div", { children: [_jsx(SubHeaderComponent, { label: 'Reference Lines' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.referenceLines?.map((refLine, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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 && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), !formData.pivot && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] })), client?.featureFlags?.['referenceLines'] &&
+                                                (chartData.chartType === 'line' ||
+                                                    chartData.chartType === 'column') && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: 'Reference Lines' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.referenceLines?.map((refLine, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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: REFERENCE_LINE
-                                                                            }].concat((selectedPivotTable?.columns ? selectedPivotTable.columns : columns).filter((c) => NUMBER_FORMAT_TYPES.includes(c.format)).map((elem) => ({
+                                                                                value: REFERENCE_LINE,
+                                                                            },
+                                                                        ].concat((selectedPivotTable?.columns
+                                                                            ? selectedPivotTable.columns
+                                                                            : columns)
+                                                                            .filter((c) => NUMBER_FORMAT_TYPES.includes(c.format))
+                                                                            .map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        }))) }), refLine.label === REFERENCE_LINE && (_jsxs(_Fragment, { children: [_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) }), _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) })] })), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('referenceLines', index) }) })] }, 'referenceLine' + index))), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('referenceLines'), label: "Add line +" }) })] })] })] })), windowWidth < 1200 && (_jsx("div", { style: {
+                                                                        }))) }), refLine.label === REFERENCE_LINE && (_jsxs(_Fragment, { children: [_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) }), _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) })] })), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('referenceLines', index) }) })] }, 'referenceLine' + index))), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('referenceLines'), label: "Add line +" }) })] })] }))] })), windowWidth < 1200 && (_jsx("div", { style: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
-                                        }, children: formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
+                                        }, children: formData.chartType !== 'table' ? (_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 })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                            }, currentPage: currentPage, rowCount: rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort, hideLabels: false })) : (_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) && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                            }, currentPage: currentPage, rowCount: selectedPivotTable ? pivotData?.rowCount : rowCount, rowCountIsLoading: rowCountIsLoading, isLoading: isLoading, disableSort: disableSort, hideLabels: false })) })), (showTableFormatOptions || isAdmin) && (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 6,
+                                        }, children: [_jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
@@ -1651,7 +1737,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                 flexDirection: 'row',
                                                                 gap: 10,
                                                             }, children: [_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), isAdmin &&
-                                                                    client?.featureFlags?.customFieldsEnabled && (_jsx(CheckboxComponent, { isChecked: containsCustomFields || includeCustomFields, label: "Include Custom Fields", onChange: () => setIncludeCustomFields((prev) => !prev), disabled: containsCustomFields }))] })) })] })] })), isAdmin && tenants && dashboardOwner && (_jsxs("div", { style: {
+                                                                    client?.featureFlags?.customFieldsEnabled && (_jsx(QuillToolTip, { text: "Custom field directly referenced in report", enabled: containsCustomFields, textStyle: {
+                                                                        maxWidth: '200px',
+                                                                        whiteSpace: 'normal',
+                                                                    }, children: _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 && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -1760,7 +1853,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             gap: 6,
                                         }, children: [_jsx(HeaderComponent, { label: "Dashboard filter fields" }), isAdmin &&
                                                 formData.dateField &&
-                                                dashboardConfig[formData.dashboardName ?? destinationDashboard ?? '']?.config.dateFilter?.label && (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(TextInputComponent, { id: 'filterMap.dateFilter.' +
+                                                dashboardConfig[formData.dashboardName ?? destinationDashboardName ?? '']?.config.dateFilter?.label && (_jsxs(ChartBuilderInputRowContainer, { children: [_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 }), _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) => ({
@@ -1785,12 +1878,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                     .map((filter, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(TextInputComponent, { id: 'filterMap.' + filter.label, value: filter.label, width: 200, onChange: () => { }, label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
                                                                 ? 'Filter'
                                                                 : '', disabled: true }), _jsx(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
                                                                 ? 'Virtual Table'
                                                                 : '', value: filterMap[filter.label]?.table ?? filter.table, onChange: (e) => setFilterMap({
                                                                 ...filterMap,
@@ -1808,7 +1903,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                             })), width: 200 }), _jsx(SelectComponent, { label: index === 0 &&
                                                                 !(isAdmin &&
                                                                     formData.dateField &&
-                                                                    dashboardConfig[formData.dashboardName ?? '']?.config.dateFilter?.label)
+                                                                    dashboardConfig[formData.dashboardName ?? '']
+                                                                        ?.config.dateFilter?.label)
                                                                 ? 'Field'
                                                                 : '', value: filterMap[filter.label]?.field ?? filter.field, onChange: (e) => setFilterMap({
                                                                 ...filterMap,
@@ -1847,15 +1943,15 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             justifyContent: 'space-between',
                                             alignItems: 'center',
                                             gap: 6,
-                                        }, children: [!!filterIssues?.length && (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), _jsxs("div", { style: {
+                                        }, children: [!!filterIssues?.length && (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashboard - Report issues', containerStyle: { height: '100%' } })), _jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
                                                     gap: 10,
                                                     backgroundColor: 'white',
-                                                }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                }, children: [hideDiscardChanges ? null : (_jsx(SecondaryButtonComponent, { onClick: () => {
                                                             setIsOpen(false);
                                                             onDiscardChanges && onDiscardChanges();
-                                                        }, label: 'Discard changes' }), _jsx(ButtonComponent, { onClick: () => {
+                                                        }, label: 'Discard changes' })), _jsx(ButtonComponent, { onClick: () => {
                                                             if (loadingFormData) {
                                                                 setTriggeredEditChart(true);
                                                             }