@quillsql/react 2.13.40 → 2.13.41

package/dist/cjs/ChartBuilder.js

@@ -35,7 +35,7 @@ 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', 'bar', 'pie'];
+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' },
@@ -43,8 +43,17 @@ const CHART_TO_LABELS = {
     metric: { xAxisLabel: 'Value' },
     bar: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
     pie: { xAxisLabel: 'Category', yAxisLabel: 'Count' },
+    'US map': { xAxisLabel: 'State', yAxisLabel: 'Value' },
+    'World map': { xAxisLabel: 'Country', yAxisLabel: 'Value' },
+    gauge: { xAxisLabel: 'Value' },
 };
-function getPivotMetricOptions(pivot) {
+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,
+            value: elem.field,
+        }));
+    }
     if (!pivot.rowField) {
         const valueField = (0, pivotConstructor_1.disambiguatedValueField)(pivot);
         return [
@@ -83,17 +92,18 @@ function createInitialFormData(columns) {
         chartType: firstNumberColumn ? 'line' : 'table',
         pivot: null,
         template: true,
+        referenceLines: [],
     };
     return formEmptyState;
 }
 function getChartTypeOptions(formData, dashboard) {
     let viableCharts = CHART_TYPES;
     if (dashboard && dashboard.dateFilter && dashboard.dateFilter.comparison) {
-        viableCharts = viableCharts.filter((chart) => !['table', 'metric', 'bar', 'pie'].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
-            .filter((elem) => elem === 'metric' || elem === 'table')
+            .filter((elem) => ['table', 'metric', 'gauge'].includes(elem))
             .map((elem) => ({
             label: elem,
             value: elem,
@@ -101,14 +111,13 @@ function getChartTypeOptions(formData, dashboard) {
     }
     else {
         return viableCharts
-            .filter((elem) => !((formData.pivot && elem === 'metric') ||
-            (formData.pivot &&
-                formData.pivot.columnField &&
-                (elem === 'bar' || elem === 'pie'))))
+            .filter((elem) => !((formData.pivot &&
+            formData.pivot.columnField &&
+            (elem === 'bar' || elem === 'pie' || elem === 'US map' || elem === 'World map'))))
             .map((elem) => ({ label: elem, value: elem }));
     }
 }
-function createReportFromForm(formData, report, selectedPivotTable, rows = [], filtersApplied = []) {
+function createReportFromForm(formData, report, selectedPivotTable, rows = [], filtersApplied = [], referenceLineQueryResults) {
     const newReport = (0, report_1.convertInternalReportToReport)((0, merge_1.mergeComparisonRange)({
         ...formData,
         dashboardName: formData.dashboardName || '',
@@ -128,6 +137,14 @@ function createReportFromForm(formData, report, selectedPivotTable, rows = [], f
         pivotColumns: selectedPivotTable?.columns ?? undefined,
         pivotRows: selectedPivotTable?.rows ?? undefined,
         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,
+        })) || [],
+        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],
+        })) || [],
     }), filtersApplied);
     return newReport;
 }
@@ -163,7 +180,7 @@ const DATE_OPTIONS = [
     { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
     { value: 'hh_ap_pm', label: 'hour' },
 ];
-const formatOptions = [
+const ALL_FORMAT_OPTIONS = [
     ...NUMBER_OPTIONS,
     ...DATE_OPTIONS,
     { value: 'string', label: 'string' },
@@ -246,7 +263,7 @@ 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, 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, onAddToDashboardComplete, onDelete, onDiscardChanges, reportId, tempReport, recommendedPivots: rp = [], createdPivots: cp = [], dateColumn, buttonLabel, organizationName, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, showTableFormatOptions, initialUniqueValues, initialUniqueValuesIsLoading, pivotRecommendationsEnabled = true, filtersEnabled, onFiltersEnabledChanged, 
 // isLoading,
 onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
@@ -272,14 +289,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const inputRef = (0, react_1.useRef)(null);
     const selectRef = (0, react_1.useRef)(null);
     const processColumns = (columns) => {
-        if (schemaData.schema) {
+        if (schemaData.schemaWithCustomFields) {
             const newProcessedColumns = columns?.map((col) => {
                 if (col.jsType) {
                     return col;
                 }
                 const newCol = { ...col };
                 let foundColumn;
-                schemaData.schema.forEach((table) => {
+                schemaData.schemaWithCustomFields.forEach((table) => {
                     if (table.columns) {
                         const matchedColumn = table.columns.find((c) => c.field === col.field);
                         if (matchedColumn) {
@@ -364,6 +381,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
     const [tableName, setTableName] = (0, react_1.useState)(undefined);
+    const [includeCustomFields, setIncludeCustomFields] = (0, react_1.useState)(report
+        ? !!report.includeCustomFields
+        : !!client?.featureFlags?.customFieldsEnabled);
     const selectedTable = schemaData.schema?.find((t) => t.displayName === tableName);
     const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -386,11 +406,13 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)(rp);
     const [pivotRowField, setPivotRowField] = (0, react_1.useState)(report?.pivot?.rowField);
     const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(report?.pivot?.columnField);
-    const [pivotAggregations, setPivotAggregations] = (0, react_1.useState)(report?.pivot?.aggregations ?? [{
+    const [pivotAggregations, setPivotAggregations] = (0, react_1.useState)(report?.pivot?.aggregations ?? [
+        {
             valueField: report?.pivot?.valueField,
             valueField2: report?.pivot?.valueField2,
-            aggregationType: report?.pivot?.aggregationType
-        }]);
+            aggregationType: report?.pivot?.aggregationType,
+        },
+    ]);
     const baseProcessing = {
         page: report?.pagination ?? {
             page: 0,
@@ -405,6 +427,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [allTables, setAllTables] = (0, react_1.useState)([]);
     const [customFieldTableRef, setCustomFieldTableRef] = (0, react_1.useState)(false);
     const [referencedColumns, setReferencedColumns] = (0, react_1.useState)({});
+    const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = (0, react_1.useState)({});
     const [filterMap, setFilterMap] = (0, react_1.useState)(report?.filterMap ?? {});
     const canonicalFilterMap = (0, react_1.useMemo)(() => {
         return Object.fromEntries(Object.entries(filterMap).filter((f) => f[1].table !== undefined && f[1].field !== undefined));
@@ -417,7 +440,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             }
             acc[filter.label] =
                 !!allTables.find((table) => table === (filterMap[filter.label] ?? filter).table) &&
-                    !!schemaData.schema
+                    !!schemaData.schemaWithCustomFields
                         ?.find((table) => {
                         return (table.displayName === (filterMap[filter.label] ?? filter).table);
                     })
@@ -461,6 +484,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         pivot: null,
         dateField: defaultDateField,
         template: true,
+        referenceLines: [],
     };
     const updateDashboardFilters = async (dashboardName) => {
         if (dashboardConfig && dashboardConfig[dashboardName]) {
@@ -501,8 +525,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField ?? (0, pivotConstructor_1.disambiguatedValueField)(pivot) ?? '';
         const yAxisLabel = report?.yAxisFields && report?.yAxisFields?.length > 0
-            ? report.yAxisFields[0]?.label ?? ''
-            : (0, pivotConstructor_1.disambiguatedValueField)(pivot) ?? '';
+            ? (report.yAxisFields[0]?.label ?? '')
+            : ((0, pivotConstructor_1.disambiguatedValueField)(pivot) ?? '');
         // date labels for pivots should be treated like strings since they are
         const yAxisIsDate = pivot.columnField
             ? (0, PivotModal_1.isDateField)(pivot.columnFieldType ?? '')
@@ -511,12 +535,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         const result = {
             pivot,
             chartType: chartType,
-            xAxisField: pivot.rowField ? pivot.rowField : (0, pivotConstructor_1.disambiguatedValueField)(pivot),
-            xAxisFormat: (0, PivotModal_1.isDateField)(pivot.rowFieldType ?? '')
+            xAxisField: pivot.rowField
+                ? pivot.rowField
+                : (0, pivotConstructor_1.disambiguatedValueField)(pivot),
+            xAxisFormat: (0, columnProcessing_1.isDateType)(pivot.rowFieldType ?? '')
                 ? 'string'
-                : report?.columns.find((col) => col.field === pivot.rowField)?.format ||
-                    report?.xAxisFormat ||
-                    'whole_number',
+                : (0, columnProcessing_1.isNumberType)(pivot.rowFieldType ?? '')
+                    ? 'whole_number'
+                    : 'string',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
@@ -525,43 +551,66 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                     format: yAxisIsDate
                         ? 'string'
                         : report?.yAxisFields && report?.yAxisFields?.length > 0
-                            ? report?.yAxisFields[0]?.format ?? 'whole_number'
-                            : report?.columns.find((col) => col.field === (0, pivotConstructor_1.disambiguatedValueField)(pivot))
-                                ?.format ?? 'whole_number',
+                            ? (report?.yAxisFields[0]?.format ?? 'whole_number')
+                            : (report?.columns.find((col) => col.field === (0, pivotConstructor_1.disambiguatedValueField)(pivot))?.format ?? 'whole_number'),
                 },
             ],
         };
         return result;
     };
-    const getReferencedTables = async (client, sqlQuery, dbTables) => {
+    const getReferencedTables = async (client, sqlQuery, dbTables, skipStar) => {
         const resp = await getDataFromCloud(client, `astify`, {
             query: sqlQuery,
             publicKey: client.publicKey,
             useNewNodeSql: true,
         });
         if (resp.success === false) {
-            return (0, astProcessing_1.getTablesHelper)((0, astProcessing_1.getSelectFromAST)({}), dbTables);
+            return (0, astProcessing_1.getTablesHelper)((0, astProcessing_1.getSelectFromAST)({}), dbTables, skipStar);
         }
-        return (0, astProcessing_1.getTablesHelper)((0, astProcessing_1.getSelectFromAST)(resp.ast), dbTables);
+        return (0, astProcessing_1.getTablesHelper)((0, astProcessing_1.getSelectFromAST)(resp.ast), dbTables, skipStar);
     };
     const formFormDataFromReport = (report) => {
-        let pivotData = {};
+        // let pivotData = {};
         let dateField = defaultDateField;
-        if (report?.pivot) {
-            pivotData = pivotFormData(report.pivot);
-        }
+        // if (report?.pivot) {
+        //   pivotData = pivotFormData(report.pivot);
+        // }
         if (report) {
             dateField = report.dateField || defaultDateField;
         }
         return {
             ...formEmptyState,
             ...report,
-            ...pivotData,
-            ...(report?.dashboardName && { dashboardName: report?.dashboardName }),
+            // ...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],
+                };
+            }) : [],
         };
     };
     const [formData, setFormData] = (0, react_1.useState)(formFormDataFromReport(report));
+    const referenceLineQueryResults = (0, react_1.useMemo)(() => {
+        return formData?.referenceLines?.map((line) => {
+            if (line.label === constants_1.REFERENCE_LINE) {
+                return [Number(line.y1) || 0, Number(line.y2) || 0];
+            }
+            // line.label is a field
+            // Get the first and last row of the field
+            const field = formData.columns.find((col) => col.field === line.label);
+            if (!field) {
+                return [0, 0];
+            }
+            // return [Number(rows[0]?.[field.field]) || 0, Number(rows[rows.length - 1]?.[field.field]) || 0];
+            return (pivotData?.rows ? pivotData.rows : rows).map((row) => Number(row[field.field]) || 0);
+        });
+    }, [formData?.referenceLines]);
     const currentDashboard = (0, react_1.useMemo)(() => {
         return dashboardConfig[formData.dashboardName ?? report?.dashboardName ?? '']?.config;
     }, [dashboardConfig, formData.dashboardName, report?.dashboardName]);
@@ -569,6 +618,19 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         return (currentDashboard?.tenantKeys?.map((tenantKey) => client?.allTenantTypes?.find((t) => t.tenantField === tenantKey)) ?? []);
     }, [client?.allTenantTypes, currentDashboard?.tenantKeys]);
     const dashboardOwner = currentDashboardTenants?.[0];
+    const currentTenantAsFormFlags = (0, react_1.useMemo)(() => {
+        if (!tenants || !tenants.length) {
+            return undefined;
+        }
+        const tenantField = typeof tenants[0] !== 'object'
+            ? dashboardOwner?.name
+            : tenants[0]?.tenantField;
+        if (!tenantField) {
+            return undefined;
+        }
+        const tenantIds = typeof tenants[0] !== 'object' ? tenants : tenants[0]?.tenantIds;
+        return { [tenantField]: tenantIds };
+    }, [tenants, dashboardOwner]);
     const invalidColumns = (0, react_1.useMemo)(() => {
         if (!rows || !rows.length) {
             return [];
@@ -583,6 +645,62 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         const data = formFormDataFromReport(report);
         return getChartTypeOptions(data, dashboardConfig[data.dashboardName || '']);
     })());
+    const reportContainsCustomFields = (0, react_1.useMemo)(() => {
+        // Check whether report query contains custom fields
+        const customFieldsMap = schemaData.customFields;
+        const reportQueryContainsCustomFields = allTables.some((table) => {
+            const tableColumns = referencedColumnsWithoutStar[table] ?? [];
+            const customFieldColumns = customFieldsMap?.[table] ?? [];
+            return tableColumns.some((column) => customFieldColumns.some((field) => field.field === column));
+        });
+        return reportQueryContainsCustomFields;
+    }, [allTables, referencedColumnsWithoutStar]);
+    const chartBuilderFormDataContainsCustomFields = (0, react_1.useMemo)(() => {
+        const customFields = allTables
+            .map((table) => schemaData.customFields?.[table] ?? [])
+            .flat();
+        const customFieldsMap = schemaData.customFields;
+        const pivotContainsCustomFields = customFields.some((field) => field.field === formData.pivot?.columnField ||
+            field.field === formData.pivot?.rowField ||
+            field.field === formData.pivot?.valueField);
+        const xAxisFieldContainsCustomFields = customFields.some((field) => field.field === formData.xAxisField);
+        const yAxisFieldsContainsCustomFields = formData.yAxisFields.some((yAxisField) => {
+            return customFields.some((field) => field.field === yAxisField.field);
+        });
+        const dateFieldContainsCustomFields = customFields.some((field) => field.field === formData.dateField?.field);
+        const canonicalFilterMapContainsCustomFields = Object.values(canonicalFilterMap).some((filter) => {
+            return customFieldsMap?.[filter.table || '']?.some((field) => field.field === filter.field);
+        });
+        return (pivotContainsCustomFields ||
+            xAxisFieldContainsCustomFields ||
+            yAxisFieldsContainsCustomFields ||
+            dateFieldContainsCustomFields ||
+            canonicalFilterMapContainsCustomFields);
+    }, [
+        allTables,
+        formData.pivot,
+        formData.xAxisField,
+        formData.yAxisFields,
+        formData.dateField,
+        canonicalFilterMap,
+    ]);
+    const customFieldsInTabularColumns = (0, react_1.useMemo)(() => {
+        const customFields = allTables
+            .map((table) => schemaData.customFields?.[table] ?? [])
+            .flat();
+        return formData.columns.some((col) => {
+            return customFields.some((field) => field.field === col.field);
+        });
+    }, [allTables, formData.columns]);
+    const containsCustomFields = (0, react_1.useMemo)(() => {
+        return (reportContainsCustomFields ||
+            customFieldsInTabularColumns ||
+            chartBuilderFormDataContainsCustomFields);
+    }, [
+        reportContainsCustomFields,
+        customFieldsInTabularColumns,
+        chartBuilderFormDataContainsCustomFields,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!loadingFormData && triggeredEditChart) {
             editChart();
@@ -620,12 +738,13 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             const curDashboard = await updateDashboardFilters(dashboardName);
             setDashboardOptions(dashboardOptions);
             curFormData.dashboardName = dashboardName;
-            const curSchemaData = schemaData.schema;
+            const curSchemaData = schemaData.schemaWithCustomFields;
             if (!query) {
                 setLoadingFormData(false);
                 return;
             }
             const result = await getReferencedTables(client, query, curSchemaData);
+            const referencedTablesWithoutStar = await getReferencedTables(client, query, curSchemaData, true);
             setDateFieldOptions(result.dateFields);
             if (result.dateFields[0] && result.dateFields[0].columns[0]) {
                 setDefaultDateField({
@@ -649,6 +768,11 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 acc[table.name] = table.columns.map((col) => col.field);
                 return acc;
             }, {});
+            const referencedColumnsWithoutStar = referencedTablesWithoutStar.referencedTablesAndColumns.reduce((acc, table) => {
+                acc[table.name] = table.columns.map((col) => col.field);
+                return acc;
+            }, {});
+            setReferencedColumnsWithoutStar(referencedColumnsWithoutStar);
             setReferencedColumns(referencedColumns);
             setTableName(result.dateFields[0]?.name);
             const dateField = {
@@ -706,12 +830,20 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         };
     }, [selectedPivotTable, formData.pivot]);
     const chartData = (0, react_1.useMemo)(() => {
-        const data = createReportFromForm(formData, report ? { ...report, rowCount } : tempReport, selectedPivotTable, rows, currentDashboardFilters);
+        const data = createReportFromForm(formData, report ? { ...report, rowCount } : tempReport, selectedPivotTable, rows, currentDashboardFilters, referenceLineQueryResults);
         return {
             ...data,
             filterMap: canonicalFilterMap,
         };
     }, [formData, selectedPivotTable, report, rows, rowCount]);
+    const xAxisFormatOptions = (0, react_1.useMemo)(() => {
+        return chartData?.chartType === 'gauge'
+            ? [
+                { value: 'whole_number', label: 'whole number' },
+                { value: 'two_decimal_places', label: 'two decimal places' },
+                { value: 'percent', label: 'percentage' },
+            ] : ALL_FORMAT_OPTIONS;
+    }, [chartData?.chartType]);
     const fetchPivotData = async (pivot, tableInfo, uniqueValues, overrideFilters) => {
         const dashboardFilters = filtersEnabled
             ? (overrideFilters ?? currentDashboardFilters)
@@ -760,11 +892,10 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         if (selectedPivotTable &&
             selectedPivotTable.columns &&
             formData.chartType === 'table') {
-            console.log('selectedPivotTable', selectedPivotTable);
             const columns = selectedPivotTable.columns;
             columns.forEach((col, index) => {
                 // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-                if ((['min', 'max'].includes(formData.pivot?.aggregations?.[0]?.aggregationType ?? '')) &&
+                if (['min', 'max'].includes(formData.pivot?.aggregations?.[0]?.aggregationType ?? '') &&
                     index !== 0) {
                     col.format = 'two_decimal_places';
                 }
@@ -882,7 +1013,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, destinationDashboard);
                     fetchPivotData(formData.pivot, tableInfo, uniqueValues, overrideFilters);
                 }
                 catch (e) {
@@ -1035,7 +1166,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 else if (field === 'dateField' &&
                     subfield === 'table' &&
                     !formData.dateField?.field) {
-                    const field = schemaData.schema?.find((elem) => elem.name === value)?.columns?.[0]?.field;
+                    const field = schemaData.schemaWithCustomFields?.find((elem) => elem.name === value)?.columns?.[0]?.field;
                     updatedForm.dateField = {
                         // @ts-ignore
                         ...updatedForm[field],
@@ -1053,6 +1184,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 // For simple fields
                 updatedForm = { ...updatedForm, [fieldName]: value };
             }
+            if (fieldName === 'chartType') {
+                if (value === 'metric') {
+                    updatedForm.xAxisFormat = 'whole_number';
+                }
+                else if (value === 'gauge') {
+                    updatedForm.xAxisFormat = 'percent';
+                }
+            }
             let dashboardName = updatedForm.dashboardName;
             if (fieldName === 'dashboardName') {
                 dashboardName = value;
@@ -1113,7 +1252,10 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         if (fieldName === 'columns') {
             setFormData({
                 ...formData,
-                columns: [...formData.columns, { label: '', field: '', format: 'whole_number' }],
+                columns: [
+                    ...formData.columns,
+                    { label: '', field: '', format: 'string' },
+                ],
             });
         }
         else if (fieldName === 'yAxisFields') {
@@ -1121,7 +1263,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 ...formData,
                 yAxisFields: [
                     ...formData.yAxisFields,
-                    { label: '', field: '', format: 'whole_number' },
+                    { label: '', field: '', format: 'string' },
                 ],
             });
         }
@@ -1139,6 +1281,15 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 },
             });
         }
+        else if (fieldName === 'referenceLines') {
+            setFormData({
+                ...formData,
+                referenceLines: [
+                    ...formData.referenceLines,
+                    { label: '', y1: undefined, y2: undefined },
+                ],
+            });
+        }
     };
     const handleRemoveField = (fieldName, index) => {
         if (fieldName === 'pivot') {
@@ -1193,24 +1344,33 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
             pivot: formData.pivot,
             referencedTables: allTables,
             referencedColumns,
+            includeCustomFields: includeCustomFields || containsCustomFields,
             template: tenants
                 ? undefined
                 : report && !isAdmin && formData.template
                     ? false
                     : formData.template,
-            reportFlags: formFlags
-                ? Object.fromEntries(Object.entries(formFlags)
-                    .filter(([, value]) => value.length > 0)
-                    .map(([key, value]) => {
-                    return [
-                        key,
-                        Object.keys(allTenantMap).length > 1 &&
-                            allTenantMap[key]?.length === value.length
-                            ? constants_1.ALL_TENANTS
-                            : value,
-                    ];
-                }))
-                : undefined,
+            reportFlags: containsCustomFields
+                ? currentTenantAsFormFlags
+                : formFlags
+                    ? Object.fromEntries(Object.entries(formFlags)
+                        .filter(([, value]) => value.length > 0)
+                        .map(([key, value]) => {
+                        return [
+                            key,
+                            Object.keys(allTenantMap).length > 1 &&
+                                allTenantMap[key]?.length === value.length
+                                ? constants_1.ALL_TENANTS
+                                : value,
+                        ];
+                    }))
+                    : undefined,
+            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] : ''
+                };
+            }),
         };
         const resp = await (0, report_1.saveReport)({
             report: { ...newReport, rows: undefined, pivotRows: undefined }, // stop including rows in request
@@ -1289,7 +1449,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                     //   formData.chartType === 'metric'
                                     //     ? 100
                                     //     : `calc(${filtersEnabled ? 50 : 70}%)`,
-                                    ...(isHorizontalView && { flexGrow: formData.chartType !== 'table' ? 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: {
@@ -1306,8 +1466,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             onFiltersEnabledChanged(hide);
                                         }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
                                             width: '100%',
-                                            height: formData.chartType === 'table' ? 200 : formData.chartType === 'metric' ? 300 : 500,
-                                            flexGrow: formData.chartType !== 'table' ? 1 : 0,
+                                            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 })), formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
                                             onPageChange(page);
                                             setCurrentPage(page);
@@ -1341,8 +1507,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                             onFiltersEnabledChanged(hide);
                                         }, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, isAdmin: isAdmin, containerStyle: {
                                             width: '100%',
-                                            height: formData.chartType === 'table' ? 200 : formData.chartType === 'metric' ? 300 : 500,
-                                            flexGrow: formData.chartType !== 'table' ? 1 : 0,
+                                            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}
                                                 , { 
@@ -1353,10 +1525,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                     }, 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'), 
-                                                    // filter out metric for all pivots
-                                                    // filter out bar and pie for row and column pivot
-                                                    options: chartTypes, width: 200 }) })] }), (0, jsx_runtime_1.jsxs)("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 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1372,33 +1541,40 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                     setShowPivotPopover(true);
                                                                     setPivotRowField(formData.pivot?.rowField);
                                                                     setPivotColumnField(formData.pivot?.columnField);
-                                                                    setPivotAggregations(formData.pivot?.aggregations ?? [{
+                                                                    setPivotAggregations(formData.pivot?.aggregations ?? [
+                                                                        {
                                                                             valueField: formData.pivot?.valueField,
                                                                             aggregationType: formData.pivot?.aggregationType,
                                                                             valueField2: formData.pivot?.valueField2,
-                                                                        }]);
+                                                                        },
+                                                                    ]);
                                                                     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: {
                                                     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
-                                                                    ? getPivotMetricOptions(formData.pivot)
+                                                                    ? getPivotMetricOptions(formData.pivot, selectedPivotTable, formData.chartType)
                                                                     : columns.map((elem) => ({
                                                                         label: elem.field,
                                                                         value: elem.field,
                                                                     })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot &&
-                                                                    (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType ?? '')
-                                                                    ? 'pivot_date'
+                                                                    (0, PivotModal_1.isDateField)(formData.xAxisField ?? '')
+                                                                    ? 'string'
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
-                                                                    (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType ?? '')
-                                                                    ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, 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'
+                                                                    (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
+                                                                            ? formData.pivot.aggregations?.length
+                                                                                ? ((0, pivotConstructor_1.disambiguatedValueField)(formData.pivot) ?? 'count')
+                                                                                : 'count'
                                                                             : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
                                                                             ? [
                                                                                 {
-                                                                                    label: `Pivot Column (${formData.pivot.aggregations?.length ? (0, pivotConstructor_1.disambiguatedValueField)(formData.pivot) ?? 'count' : 'count'})`,
-                                                                                    value: formData.pivot.aggregations?.length ? (0, pivotConstructor_1.disambiguatedValueField)(formData.pivot) ?? 'count' : 'count',
+                                                                                    label: `Pivot Column (${formData.pivot.aggregations?.length ? ((0, pivotConstructor_1.disambiguatedValueField)(formData.pivot) ?? 'count') : 'count'})`,
+                                                                                    value: formData.pivot.aggregations
+                                                                                        ?.length
+                                                                                        ? ((0, pivotConstructor_1.disambiguatedValueField)(formData.pivot) ?? 'count')
+                                                                                        : 'count',
                                                                                 },
                                                                             ]
                                                                             : columns
@@ -1409,12 +1585,20 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                                 label: elem.field,
                                                                                 value: elem.field,
                                                                             })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
-                                                                            ? NUMBER_OPTIONS.find((option) => {
+                                                                            ? (NUMBER_OPTIONS.find((option) => {
                                                                                 return (option.value === yAxisField.format);
-                                                                            })?.value ?? NUMBER_OPTIONS[0].value
+                                                                            })?.value ?? NUMBER_OPTIONS[0].value)
                                                                             : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                             ? NUMBER_OPTIONS
-                                                                            : formatOptions, width: 200, 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 +" }) }))] })] }))] })), windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                            : 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: [{
+                                                                                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) => ({
+                                                                            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: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
@@ -1447,14 +1631,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                             column.field === formData.pivot.rowField
                                                                             ? formData.pivot &&
                                                                                 (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType || '')
-                                                                                ? 'pivot_date'
+                                                                                ? 'string'
                                                                                 : 'string'
                                                                             : formData.pivot?.aggregationType ===
                                                                                 'percentage'
                                                                                 ? 'percent'
                                                                                 : 'two_decimal_places', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
                                                                             ? (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType || '')
-                                                                                ? [{ label: 'date', value: 'pivot_date' }]
+                                                                                ? [{ label: 'date', value: 'string' }]
                                                                                 : [{ label: 'string', value: 'string' }]
                                                                             : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
                                                         : formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: rows[0]
@@ -1465,12 +1649,17 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                         : columns.map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), (0, jsx_runtime_1.jsx)("div", { children: !(
+                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), (0, jsx_runtime_1.jsx)("div", { children: !(
                                                         // hide when pivoted and chartType === 'table'
                                                         (formData.pivot &&
                                                             selectedPivotTable &&
                                                             selectedPivotTable.columns &&
-                                                            formData.chartType === 'table')) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), isAdmin && tenants && dashboardOwner && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            formData.chartType === 'table')) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                display: 'flex',
+                                                                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: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -1484,54 +1673,61 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                         width: 'fit-content',
                                                         gap: 12,
                                                         marginBottom: 8,
-                                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                                                outline: '1px solid #E7E7E7',
-                                                                borderRadius: 6,
-                                                                padding: 4,
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                marginLeft: 2,
-                                                                backgroundColor: '#FCFCFC',
-                                                                height: 38,
-                                                                width: 'fit-content',
-                                                            }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                                        setCustomTenantAccess(false);
-                                                                        setFormFlags(undefined);
-                                                                    }, style: {
-                                                                        width: 95,
-                                                                        outline: !customTenantAccess
-                                                                            ? '1px solid #E7E7E7'
-                                                                            : undefined,
-                                                                        backgroundColor: !customTenantAccess
-                                                                            ? 'white'
-                                                                            : undefined,
-                                                                        // Center text vertically and horizontally
-                                                                        display: 'flex',
-                                                                        justifyContent: 'center',
-                                                                        alignItems: 'center',
-                                                                        borderRadius: 6,
-                                                                        fontSize: 14,
-                                                                        fontWeight: 500,
-                                                                        userSelect: 'none',
-                                                                    }, children: "Global" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                                                                        setCustomTenantAccess(true);
-                                                                    }, style: {
-                                                                        width: 95,
-                                                                        outline: customTenantAccess
-                                                                            ? '1px solid #E7E7E7'
-                                                                            : undefined,
-                                                                        backgroundColor: customTenantAccess
-                                                                            ? 'white'
-                                                                            : undefined,
-                                                                        // Center text vertically and horizontally
-                                                                        display: 'flex',
-                                                                        justifyContent: 'center',
-                                                                        alignItems: 'center',
-                                                                        borderRadius: 6,
-                                                                        fontSize: 14,
-                                                                        fontWeight: 500,
-                                                                        userSelect: 'none',
-                                                                    }, children: "Custom" })] }), client?.allTenantTypes?.length === 1 ? ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { value: formFlags?.[dashboardOwner.tenantField] ?? [], onChange: (e) => setFormFlags({
+                                                    }, children: [(0, jsx_runtime_1.jsx)(UiComponents_1.QuillToolTip, { text: 'Tenant access is restricted to current tenant with direct custom field reference.', enabled: containsCustomFields, textStyle: {
+                                                                maxWidth: '200px',
+                                                                whiteSpace: 'normal',
+                                                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                    outline: '1px solid #E7E7E7',
+                                                                    borderRadius: 6,
+                                                                    padding: 4,
+                                                                    display: 'flex',
+                                                                    flexDirection: 'row',
+                                                                    marginLeft: 2,
+                                                                    backgroundColor: '#FCFCFC',
+                                                                    height: 38,
+                                                                    width: 'fit-content',
+                                                                }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                                            if (!containsCustomFields) {
+                                                                                setCustomTenantAccess(false);
+                                                                                setFormFlags(undefined);
+                                                                            }
+                                                                        }, style: {
+                                                                            width: 95,
+                                                                            outline: !(customTenantAccess || containsCustomFields)
+                                                                                ? '1px solid #E7E7E7'
+                                                                                : undefined,
+                                                                            backgroundColor: !(customTenantAccess || containsCustomFields)
+                                                                                ? 'white'
+                                                                                : undefined,
+                                                                            // Center text vertically and horizontally
+                                                                            display: 'flex',
+                                                                            justifyContent: 'center',
+                                                                            alignItems: 'center',
+                                                                            borderRadius: 6,
+                                                                            fontSize: 14,
+                                                                            fontWeight: 500,
+                                                                            userSelect: 'none',
+                                                                        }, children: "Global" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                                            setCustomTenantAccess(true);
+                                                                        }, style: {
+                                                                            width: 95,
+                                                                            outline: customTenantAccess || containsCustomFields
+                                                                                ? '1px solid #E7E7E7'
+                                                                                : undefined,
+                                                                            backgroundColor: customTenantAccess || containsCustomFields
+                                                                                ? 'white'
+                                                                                : undefined,
+                                                                            // Center text vertically and horizontally
+                                                                            display: 'flex',
+                                                                            justifyContent: 'center',
+                                                                            alignItems: 'center',
+                                                                            borderRadius: 6,
+                                                                            fontSize: 14,
+                                                                            fontWeight: 500,
+                                                                            userSelect: 'none',
+                                                                        }, children: "Custom" })] }) }), client?.allTenantTypes?.length === 1 ? ((0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { disabled: containsCustomFields, value: containsCustomFields
+                                                                ? (currentTenantAsFormFlags?.[dashboardOwner.tenantField] ?? []) // Even though value requires string[], turns out flags can be numbers
+                                                                : (formFlags?.[dashboardOwner.tenantField] ?? []), onChange: (e) => setFormFlags({
                                                                 ...formFlags,
                                                                 [dashboardOwner.tenantField]: e.target
                                                                     .value,
@@ -1548,7 +1744,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                 })) ?? []), width: 200, emptyLabel: dashboardOwner.scope === 'database'
                                                                 ? 'No flags supplied'
                                                                 : undefined, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
-                                                                display: customTenantAccess ? 'inline' : 'none',
+                                                                display: customTenantAccess || containsCustomFields
+                                                                    ? 'inline'
+                                                                    : 'none',
                                                                 marginTop: -1,
                                                                 marginBottom: -4,
                                                             } })) : ((0, jsx_runtime_1.jsx)(QuillMultiSelectSectionList_1.QuillMultiSelectSectionList, { value: formFlags ?? {}, onChange: (e) => setFormFlags(e.target.value), options: allTenantMap, sectionHeaderMap: client?.allTenantTypes?.reduce((acc, tenantType) => {
@@ -1559,7 +1757,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                 acc[tenantType.tenantField] = tenantType.name;
                                                                 return acc;
                                                             }, {}) ?? {}, width: 200, allSelectedLabel: 'All ' + dashboardOwner.name + 's', style: {
-                                                                display: customTenantAccess ? 'inline' : 'none',
+                                                                display: customTenantAccess || containsCustomFields
+                                                                    ? 'inline'
+                                                                    : 'none',
                                                                 marginTop: -1,
                                                                 marginBottom: -4,
                                                             }, owner: dashboardOwner.tenantField }))] }) })] })), specificDashboardFilters.length > 0 && isAdmin && ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -1604,7 +1804,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                 ...filterMap,
                                                                 [filter.label]: {
                                                                     table: e.target.value,
-                                                                    field: schemaData.schema
+                                                                    field: schemaData.schemaWithCustomFields
                                                                         .find((t) => t.name == e.target.value)
                                                                         ?.columns.find((elem) => elem.field ===
                                                                         (filterMap[filter.label]?.field ??
@@ -1625,7 +1825,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                         filter.table,
                                                                     field: e.target.value,
                                                                 },
-                                                            }), options: schemaData.schema
+                                                            }), options: schemaData.schemaWithCustomFields
                                                                 .find((t) => t.name ==
                                                                 (filterMap[filter.label]?.table ??
                                                                     filter.table) &&
@@ -1655,8 +1855,12 @@ 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: { display: 'flex', flexDirection: 'row', gap: 10, backgroundColor: 'white' }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                        }, 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: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: 10,
+                                                    backgroundColor: 'white',
+                                                }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
                                                             setIsOpen(false);
                                                             onDiscardChanges && onDiscardChanges();
                                                         }, label: 'Discard changes' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {