@quillsql/react 2.13.40 → 2.13.42

package/dist/esm/ChartBuilder.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
 import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, ReportsContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
-import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, } from './components/UiComponents';
+import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillToolTip, QuillChartBuilderCheckboxComponent, } from './components/UiComponents';
 import { removeDoubleQuotes, snakeAndCamelCaseToTitleCase, } from './utils/textProcessing';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { TEMP_REPORT_ID, } from './models/Report';
 import { QuillCard } from './components/QuillCard';
-import { quillFormat } from './utils/valueFormatter';
-import { convertFieldTypeToJSType, isStringType, } from './utils/columnProcessing';
+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';
 import { QuillChartErrorWithAction } from './components/Chart/ChartError';
@@ -25,9 +25,19 @@ import { getDateBucketFromRange } from './utils/dates';
 import { QuillMultiSelectComponentWithCombo as MultiSelectComponent } from './components/QuillMultiSelectWithCombo';
 import { useQuillCloud } from './utils/dataFetcher';
 import { QuillMultiSelectSectionList } from './components/QuillMultiSelectSectionList';
-import { ALL_TENANTS, SINGLE_TENANT } from './utils/constants';
+import { ALL_TENANTS, REFERENCE_LINE, SINGLE_TENANT } from './utils/constants';
 import { disambiguatedValueField } from './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' },
@@ -35,8 +45,19 @@ 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 = disambiguatedValueField(pivot);
         return [
@@ -75,17 +96,26 @@ export 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,
@@ -93,14 +123,16 @@ 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 = []) {
+export function createReportFromForm(formData, report, selectedPivotTable, rows = [], filtersApplied = [], referenceLineQueryResults) {
     const newReport = convertInternalReportToReport(mergeComparisonRange({
         ...formData,
         dashboardName: formData.dashboardName || '',
@@ -120,6 +152,18 @@ 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 === 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],
+        })) || [],
     }), filtersApplied);
     return newReport;
 }
@@ -155,7 +199,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' },
@@ -238,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, 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);
@@ -264,14 +308,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const inputRef = useRef(null);
     const selectRef = 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) {
@@ -356,6 +400,9 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [tableName, setTableName] = useState(undefined);
+    const [includeCustomFields, setIncludeCustomFields] = useState(report
+        ? !!report.includeCustomFields
+        : !!client?.featureFlags?.customFieldsEnabled);
     const selectedTable = schemaData.schema?.find((t) => t.displayName === tableName);
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -370,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);
@@ -378,11 +425,13 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [recommendedPivots, setRecommendedPivots] = useState(rp);
     const [pivotRowField, setPivotRowField] = useState(report?.pivot?.rowField);
     const [pivotColumnField, setPivotColumnField] = useState(report?.pivot?.columnField);
-    const [pivotAggregations, setPivotAggregations] = useState(report?.pivot?.aggregations ?? [{
+    const [pivotAggregations, setPivotAggregations] = 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,
@@ -397,6 +446,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const [allTables, setAllTables] = useState([]);
     const [customFieldTableRef, setCustomFieldTableRef] = useState(false);
     const [referencedColumns, setReferencedColumns] = useState({});
+    const [referencedColumnsWithoutStar, setReferencedColumnsWithoutStar] = useState({});
     const [filterMap, setFilterMap] = useState(report?.filterMap ?? {});
     const canonicalFilterMap = useMemo(() => {
         return Object.fromEntries(Object.entries(filterMap).filter((f) => f[1].table !== undefined && f[1].field !== undefined));
@@ -409,7 +459,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);
                     })
@@ -453,6 +503,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         pivot: null,
         dateField: defaultDateField,
         template: true,
+        referenceLines: [],
     };
     const updateDashboardFilters = async (dashboardName) => {
         if (dashboardConfig && dashboardConfig[dashboardName]) {
@@ -493,8 +544,8 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField ?? disambiguatedValueField(pivot) ?? '';
         const yAxisLabel = report?.yAxisFields && report?.yAxisFields?.length > 0
-            ? report.yAxisFields[0]?.label ?? ''
-            : disambiguatedValueField(pivot) ?? '';
+            ? (report.yAxisFields[0]?.label ?? '')
+            : (disambiguatedValueField(pivot) ?? '');
         // date labels for pivots should be treated like strings since they are
         const yAxisIsDate = pivot.columnField
             ? isDateField(pivot.columnFieldType ?? '')
@@ -503,12 +554,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         const result = {
             pivot,
             chartType: chartType,
-            xAxisField: pivot.rowField ? pivot.rowField : disambiguatedValueField(pivot),
-            xAxisFormat: isDateField(pivot.rowFieldType ?? '')
+            xAxisField: pivot.rowField
+                ? pivot.rowField
+                : disambiguatedValueField(pivot),
+            xAxisFormat: isDateType(pivot.rowFieldType ?? '')
                 ? 'string'
-                : report?.columns.find((col) => col.field === pivot.rowField)?.format ||
-                    report?.xAxisFormat ||
-                    'whole_number',
+                : isNumberType(pivot.rowFieldType ?? '')
+                    ? 'whole_number'
+                    : 'string',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
@@ -517,43 +570,71 @@ 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 === disambiguatedValueField(pivot))
-                                ?.format ?? 'whole_number',
+                            ? (report?.yAxisFields[0]?.format ?? 'whole_number')
+                            : (report?.columns.find((col) => col.field === 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 getTablesHelper(getSelectFromAST({}), dbTables);
+            return getTablesHelper(getSelectFromAST({}), dbTables, skipStar);
         }
-        return getTablesHelper(getSelectFromAST(resp.ast), dbTables);
+        return getTablesHelper(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] = 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) {
+                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 = useMemo(() => {
         return dashboardConfig[formData.dashboardName ?? report?.dashboardName ?? '']?.config;
     }, [dashboardConfig, formData.dashboardName, report?.dashboardName]);
@@ -561,6 +642,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 = 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 = useMemo(() => {
         if (!rows || !rows.length) {
             return [];
@@ -575,6 +669,62 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         const data = formFormDataFromReport(report);
         return getChartTypeOptions(data, dashboardConfig[data.dashboardName || '']);
     })());
+    const reportContainsCustomFields = 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 = 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 = 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 = useMemo(() => {
+        return (reportContainsCustomFields ||
+            customFieldsInTabularColumns ||
+            chartBuilderFormDataContainsCustomFields);
+    }, [
+        reportContainsCustomFields,
+        customFieldsInTabularColumns,
+        chartBuilderFormDataContainsCustomFields,
+    ]);
     useEffect(() => {
         if (!loadingFormData && triggeredEditChart) {
             editChart();
@@ -600,24 +750,25 @@ 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);
             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({
@@ -641,6 +792,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 = {
@@ -698,12 +854,21 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
         };
     }, [selectedPivotTable, formData.pivot]);
     const chartData = 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 = 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)
@@ -731,7 +896,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                         : undefined,
                     client,
                     uniqueValues,
-                    dashboardName: destinationDashboard,
+                    dashboardName: destinationDashboardName,
                     tenants,
                     additionalProcessing: baseProcessing,
                 });
@@ -752,11 +917,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';
                 }
@@ -777,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;
                 }, {});
@@ -813,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);
@@ -865,7 +1034,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 rowsOnly: true,
                 rowCountOnly: false,
                 filterMap: canonicalFilterMap,
-                dashboardName: destinationDashboard,
+                dashboardName: destinationDashboardName,
             });
             setCurrentProcessing(processing);
             setRows(tableInfo.rows);
@@ -874,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) {
@@ -941,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,
                 });
@@ -989,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 ?? '']));
@@ -1027,7 +1208,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],
@@ -1045,6 +1226,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;
@@ -1096,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);
@@ -1105,7 +1299,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') {
@@ -1113,7 +1310,7 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                 ...formData,
                 yAxisFields: [
                     ...formData.yAxisFields,
-                    { label: '', field: '', format: 'whole_number' },
+                    { label: '', field: '', format: 'string' },
                 ],
             });
         }
@@ -1131,6 +1328,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') {
@@ -1178,31 +1384,40 @@ 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,
             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
-                            ? 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
+                                ? ALL_TENANTS
+                                : value,
+                        ];
+                    }))
+                    : undefined,
+            referenceLines: formData.referenceLines.map((line) => {
+                return {
+                    label: line.label,
+                    query: line.label === REFERENCE_LINE
+                        ? [Number(line.y1 ?? 0) || 0, Number(line.y2 ?? 0) || 0]
+                        : '',
+                };
+            }),
         };
         const resp = await saveReport({
             report: { ...newReport, rows: undefined, pivotRows: undefined }, // stop including rows in request
@@ -1262,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) => {
@@ -1281,10 +1498,13 @@ 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)) && (_jsxs("div", { style: {
+                            !hideChartView &&
+                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsxs("div", { style: {
                                     width: '100%',
                                     // height:
                                     //   isHorizontalView || !isOpen
@@ -1298,21 +1518,29 @@ 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,
+                                            height: formData.chartType === 'table'
+                                                ? 200
+                                                : formData.chartType === 'metric'
+                                                    ? 300
+                                                    : 500,
                                             flexGrow: formData.chartType !== 'table' ? 1 : 0,
-                                        }, onClickChartElement: onClickChartElement, filterToggleDisabled: Object.values(validFilter).includes(false), onDashboardFilterChange: onDashboardFilterChange, layoutChanged: isOpen })), formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
+                                        }, 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,
@@ -1328,27 +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 : 500,
-                                            flexGrow: formData.chartType !== 'table' ? 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'), 
-                                                    // filter out metric for all pivots
-                                                    // filter out bar and pie for row and column pivot
-                                                    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,
@@ -1364,33 +1600,43 @@ 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') && (_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
-                                                                    ? getPivotMetricOptions(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,
                                                                         value: elem.field,
                                                                     })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), _jsx(SelectComponent, { value: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType ?? '')
-                                                                    ? 'pivot_date'
+                                                                    isDateField(formData.xAxisField ?? '')
+                                                                    ? 'string'
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType ?? '')
-                                                                    ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, 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'
+                                                                    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
+                                                                            ? formData.pivot.aggregations?.length
+                                                                                ? (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 ? disambiguatedValueField(formData.pivot) ?? 'count' : 'count'})`,
-                                                                                    value: formData.pivot.aggregations?.length ? disambiguatedValueField(formData.pivot) ?? 'count' : 'count',
+                                                                                    label: `Pivot Column (${formData.pivot.aggregations?.length ? (disambiguatedValueField(formData.pivot) ?? 'count') : 'count'})`,
+                                                                                    value: formData.pivot.aggregations
+                                                                                        ?.length
+                                                                                        ? (disambiguatedValueField(formData.pivot) ?? 'count')
+                                                                                        : 'count',
                                                                                 },
                                                                             ]
                                                                             : columns
@@ -1401,28 +1647,52 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                                 label: elem.field,
                                                                                 value: elem.field,
                                                                             })), width: 200 }), _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) }), _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 && (_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 +" }) }))] })] }))] })), windowWidth < 1200 && (_jsx("div", { style: {
+                                                                            : 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: [
+                                                                            {
+                                                                                label: 'Custom Values',
+                                                                                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: {
                                             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 &&
@@ -1439,14 +1709,14 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                             column.field === formData.pivot.rowField
                                                                             ? formData.pivot &&
                                                                                 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
                                                                             ? 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) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: rows[0]
@@ -1457,12 +1727,24 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                                         : columns.map((elem) => ({
                                                                             label: elem.field,
                                                                             value: elem.field,
-                                                                        })), width: 200 }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
+                                                                        })), width: 200 }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: ALL_FORMAT_OPTIONS, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
                                                         // hide when pivoted and chartType === 'table'
                                                         (formData.pivot &&
                                                             selectedPivotTable &&
                                                             selectedPivotTable.columns &&
-                                                            formData.chartType === 'table')) && (_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), isAdmin && tenants && dashboardOwner && (_jsxs("div", { style: {
+                                                            formData.chartType === 'table')) && (_jsxs("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                gap: 10,
+                                                            }, children: [_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), isAdmin &&
+                                                                    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,
@@ -1476,54 +1758,61 @@ onClickChartElement, isEditingMode = false, disableSort = true, }) {
                                                         width: 'fit-content',
                                                         gap: 12,
                                                         marginBottom: 8,
-                                                    }, children: [_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: [_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" }), _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 ? (_jsx(MultiSelectComponent, { value: formFlags?.[dashboardOwner.tenantField] ?? [], onChange: (e) => setFormFlags({
+                                                    }, children: [_jsx(QuillToolTip, { text: 'Tenant access is restricted to current tenant with direct custom field reference.', enabled: containsCustomFields, textStyle: {
+                                                                maxWidth: '200px',
+                                                                whiteSpace: 'normal',
+                                                            }, children: _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: [_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" }), _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 ? (_jsx(MultiSelectComponent, { 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,
@@ -1540,7 +1829,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,
                                                             } })) : (_jsx(QuillMultiSelectSectionList, { value: formFlags ?? {}, onChange: (e) => setFormFlags(e.target.value), options: allTenantMap, sectionHeaderMap: client?.allTenantTypes?.reduce((acc, tenantType) => {
@@ -1551,7 +1842,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 && (_jsxs("div", { style: {
@@ -1560,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) => ({
@@ -1585,18 +1878,20 @@ 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,
                                                                 [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 ??
@@ -1608,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,
@@ -1617,7 +1913,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) &&
@@ -1647,11 +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: { display: 'flex', flexDirection: 'row', gap: 10, backgroundColor: 'white' }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                        }, 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: [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);
                                                             }