@quillsql/react 2.12.29 → 2.12.31

package/dist/cjs/ChartBuilder.js

@@ -1,17 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardFilterModal = exports.ChartBuilderWithModal = exports.dateFormatOptions = exports.numberFormatOptions = exports.createInitialFormData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-unused-vars */
 const react_1 = require("react");
 const Context_1 = require("./Context");
 const dataFetcher_1 = require("./utils/dataFetcher");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const PivotList_1 = require("./internals/ReportBuilder/PivotList");
-const Chart_1 = __importDefault(require("./Chart"));
+const Chart_1 = require("./Chart");
 const UiComponents_1 = require("./components/UiComponents");
 const merge_1 = require("./utils/merge");
 const textProcessing_1 = require("./utils/textProcessing");
@@ -22,6 +18,9 @@ const columnProcessing_1 = require("./utils/columnProcessing");
 const astProcessing_1 = require("./utils/astProcessing");
 const schema_1 = require("./utils/schema");
 const dates_1 = require("./utils/dates");
+const validation_1 = require("./utils/validation");
+const ChartError_1 = require("./components/Chart/ChartError");
+const report_1 = require("./utils/report");
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -64,12 +63,12 @@ function createInitialFormData(columns) {
             return { ...col, label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(col.label) };
         }),
         xAxisField: columns?.[0]?.field || '',
-        xAxisFormat: columns?.[0]?.format || '',
+        xAxisFormat: columns?.[0]?.format || 'whole_number',
         yAxisFields: [
             {
                 field: firstNumberColumn?.field || columns?.[0]?.field || '',
                 label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.field || '',
+                format: firstNumberColumn?.format || columns?.[0]?.format || 'string',
             },
         ],
         xAxisLabel: '',
@@ -81,18 +80,26 @@ function createInitialFormData(columns) {
     return formEmptyState;
 }
 exports.createInitialFormData = createInitialFormData;
-function getChartTypeOptions(formData) {
+function getChartTypeOptions(formData, dashboard) {
+    let viableCharts = CHART_TYPES;
+    if (dashboard.dateFilter && dashboard.dateFilter.comparison) {
+        viableCharts = viableCharts.filter((chart) => !['table', 'metric', 'bar', 'pie'].includes(chart));
+    }
     if (formData.pivot && !formData.pivot.rowField) {
-        return CHART_TYPES.filter((elem) => elem === 'metric' || elem === 'table').map((elem) => ({
+        return viableCharts
+            .filter((elem) => elem === 'metric' || elem === 'table')
+            .map((elem) => ({
             label: elem,
             value: elem,
         }));
     }
     else {
-        return CHART_TYPES.filter((elem) => !((formData.pivot && elem === 'metric') ||
+        return viableCharts
+            .filter((elem) => !((formData.pivot && elem === 'metric') ||
             (formData.pivot &&
                 formData.pivot.columnField &&
-                (elem === 'bar' || elem === 'pie')))).map((elem) => ({ label: elem, value: elem }));
+                (elem === 'bar' || elem === 'pie'))))
+            .map((elem) => ({ label: elem, value: elem }));
     }
 }
 function getTablesHelper(ast, allTables) {
@@ -108,8 +115,9 @@ function getTablesHelper(ast, allTables) {
     // With statement column references
     if (ast.with) {
         for (const withStmt of ast.with) {
-            if (withStmt.stmt.ast.from) {
-                const withReferencedColumns = (0, astProcessing_1.getColumnsByTableFromASTAndSchema)(withStmt.stmt.ast, allTables, tableAliasMap);
+            const astFrom = withStmt.stmt.from ?? withStmt.stmt.ast.from;
+            if (astFrom) {
+                const withReferencedColumns = (0, astProcessing_1.getColumnsByTableFromASTAndSchema)(withStmt.stmt.ast ?? withStmt.stmt, allTables, tableAliasMap);
                 // @ts-ignore
                 Object.keys(withReferencedColumns).forEach((tableName) => {
                     if (referencedColumns[tableName]) {
@@ -136,7 +144,7 @@ function getTablesHelper(ast, allTables) {
             }) || [],
         };
     });
-    let dateFields = allTables
+    const dateFields = allTables
         .filter((table) => onlyReferenceTables.includes(table.displayName))
         .map((table) => {
         return {
@@ -151,12 +159,32 @@ function getTablesHelper(ast, allTables) {
     return { referencedTablesAndColumns, dateFields };
 }
 async function getReferencedTables(client, sqlQuery, dbTables) {
-    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `astify`, { query: sqlQuery });
+    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `astify`, {
+        query: sqlQuery,
+        useNewNodeSql: true,
+    });
     if (resp.success === false) {
         return getTablesHelper((0, astProcessing_1.getSelectFromAST)({}), dbTables);
     }
     return getTablesHelper((0, astProcessing_1.getSelectFromAST)(resp.ast), dbTables);
 }
+function createReportFromForm(formData, report, selectedPivotTable, rows = []) {
+    return (0, report_1.convertInternalReportToReport)({
+        ...formData,
+        dashboardName: formData.dashboardName || '',
+        pivot: formData.pivot,
+        id: '',
+        order: -1,
+        compareRows: report?.compareRows || [],
+        filtersApplied: report?.filtersApplied || [],
+        queryString: '',
+        rows: selectedPivotTable?.rows ?? rows,
+        rowCount: report?.rowCount || selectedPivotTable?.rows?.length || rows.length || 0,
+        yAxisFields: formData.yAxisFields ?? [],
+        pivotColumns: selectedPivotTable?.columns ?? undefined,
+        pivotRows: selectedPivotTable?.rows ?? undefined,
+    });
+}
 exports.numberFormatOptions = [
     'whole_number',
     'one_decimal_place',
@@ -268,7 +296,7 @@ exports.ChartBuilderWithModal = ChartBuilderWithModal;
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, LoadingComponent = UiComponents_1.QuillLoadingComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, onSortChange, onPageChange, rowCount, isLoading, isComparison, onClickChartElement, }) {
+function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent = UiComponents_1.MemoizedModal, LoadingComponent = UiComponents_1.QuillLoadingComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, ErrorComponent = ChartError_1.QuillChartErrorWithAction, onClickChartError, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, onSortChange, onPageChange, rowCount, isLoading, isComparison, onClickChartElement, }) {
     const dateRange = dr;
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
@@ -276,15 +304,27 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     const [windowWidth, setWindowWidth] = (0, react_1.useState)(1200);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [pivotCardWidth, setPivotCardWidth] = (0, react_1.useState)(665);
+    const [chartTypes, setChartTypes] = (0, react_1.useState)(CHART_TYPES.map((type) => {
+        return { label: type, value: type };
+    }));
     const [formWidth, setFormWidth] = (0, react_1.useState)(665);
     const inputRef = (0, react_1.useRef)(null);
     const selectRef = (0, react_1.useRef)(null);
-    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const [, dispatch] = (0, react_1.useContext)(Context_1.DashboardContext);
     const [processedColumns, setProcessedColumns] = (0, react_1.useState)(columns);
     const parentRef = (0, react_1.useRef)(null);
     const deleteRef = (0, react_1.useRef)(null);
     const modalPadding = 20;
     const deleteButtonMargin = -12;
+    const validationHelper = (formData, dashboard, dateField, tables) => {
+        const issues = (0, validation_1.validateReport)(formData, dashboard, dateField || defaultDateField, tables || allTables);
+        if (issues.length > 0) {
+            setFilterIssues(issues);
+        }
+        else {
+            setFilterIssues([]);
+        }
+    };
     (0, react_1.useEffect)(() => {
         if (schema) {
             const newProcessedColumns = columns.map((col) => {
@@ -369,18 +409,14 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
     const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard || report?.dashboardName || '');
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [chartRows, setChartRows] = (0, react_1.useState)(rows);
+    const { dashboardData } = (0, react_1.useContext)(Context_1.DashboardDataContext);
     const specificDashboardFilter = (0, react_1.useMemo)(() => {
         return dashboardFilters.filter((f) => f && defaultDashboardName === f.dashboardName);
     }, [dashboardFilters]);
-    const [dashboardFilters2, setDashboardFilters] = (0, react_1.useState)([]);
-    const [dashboardHasDateFilter, setDashboardHasDateFilter] = (0, react_1.useState)(false);
-    const [dashboardHasDateComparison, setDashboardHasDateComparison] = (0, react_1.useState)(false);
     const [showFilterModal, setShowFilterModal] = (0, react_1.useState)(false);
     const [filterIssues, setFilterIssues] = (0, react_1.useState)([]);
     const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
     const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
-    const [intialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
     const [tableName, setTableName] = (0, react_1.useState)(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
@@ -410,12 +446,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             return { ...col, label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(col.label) };
         }),
         xAxisField: columns?.[0]?.field || '',
-        xAxisFormat: columns?.[0]?.format || '',
+        xAxisFormat: columns?.[0]?.format || 'string',
         yAxisFields: [
             {
                 field: firstNumberColumn?.field || columns?.[0]?.field || '',
                 label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.field || '',
+                format: firstNumberColumn?.format || columns?.[0]?.format || 'string',
             },
         ],
         xAxisLabel: '',
@@ -425,6 +461,9 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         template: false,
     };
     const updateDashboardFilters = async (dashboardName) => {
+        if (dashboardData && dashboardData[dashboardName]) {
+            return dashboardData[dashboardName];
+        }
         const { queryEndpoint, queryHeaders, publicKey, customerId } = client;
         if (queryEndpoint) {
             const response = await fetch(queryEndpoint, {
@@ -440,22 +479,22 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                         name: dashboardName,
                         clientId: publicKey,
                         databaseType: client.databaseType,
+                        useNewNodeSql: true,
                     },
                 }),
                 credentials: 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
             });
             const responseData = (await response.json()).data;
             if (responseData) {
-                setDashboardFilters(responseData.filters);
-                setDashboardHasDateFilter(!!responseData.dateFilter);
-                setDashboardHasDateComparison(responseData.dateFilter?.comparison || false);
+                return responseData;
             }
         }
     };
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField || pivot.valueField;
-        const yAxisLabel = report?.yAxisFields?.length > 0
-            ? report.yAxisFields[0].label
+        const yAxisLabel = report?.yAxisFields && report?.yAxisFields?.length > 0
+            ? // @ts-ignore
+                report.yAxisFields[0].label
             : pivot.valueField;
         // date labels for pivots should be treated like strings since they are
         const yAxisIsDate = pivot.columnField
@@ -469,6 +508,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             xAxisFormat: (0, PivotModal_1.isDateField)(pivot.rowFieldType)
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
+                    report?.xAxisFormat ||
                     'whole_number',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
@@ -477,22 +517,33 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     label: yAxisLabel,
                     format: yAxisIsDate
                         ? 'string'
-                        : report?.yAxisFields?.length > 0
-                            ? report?.yAxisFields[0].format
+                        : report?.yAxisFields && report?.yAxisFields?.length > 0
+                            ? // @ts-ignore
+                                report?.yAxisFields[0].format
                             : columns.find((col) => col.field === pivot.valueField)?.format ||
                                 'whole_number',
                 },
             ],
         };
     };
-    const [formData, setFormData] = (0, react_1.useState)(pivot
-        ? {
+    const formFormDataFromReport = (report) => {
+        let pivotData = {};
+        let dateField = defaultDateField;
+        if (pivot) {
+            pivotData = pivotFormData(pivot);
+        }
+        if (report) {
+            dateField = report.dateField || defaultDateField;
+        }
+        return {
             ...formEmptyState,
             ...report,
-            ...pivotFormData(pivot),
+            ...pivotData,
             ...(destinationDashboard && { dashboardName: destinationDashboard }),
-        }
-        : report || formEmptyState);
+            dateField: dateField,
+        };
+    };
+    const [formData, setFormData] = (0, react_1.useState)(formFormDataFromReport(report));
     (0, react_1.useEffect)(() => {
         if (!loadingFormData && triggeredEditChart) {
             editChart();
@@ -502,8 +553,14 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         async function getFormData() {
             setLoadingFormData(true);
             const curFormData = formData;
-            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `dashnames/${client.publicKey}/`, null, 'GET');
-            let dashboardOptions = resp.dashboardNames
+            let dashNames = Object.keys(dashboardData).map((dashboard) => {
+                return dashboard;
+            }) ?? [];
+            if (dashNames.length === 0) {
+                const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `dashnames/${client.publicKey}/`, null, 'GET');
+                dashNames = resp.dashboardNames;
+            }
+            let dashboardOptions = dashNames
                 .filter((elem) => elem !== null)
                 .map((key) => ({ label: key, value: key }));
             if (!dashboardOptions.length) {
@@ -516,13 +573,16 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     { label: destinationDashboard, value: destinationDashboard },
                 ];
             }
-            await updateDashboardFilters(destinationDashboard ??
-                (report ? report?.dashboardName : dashboardOptions[0]?.label));
+            let dashboardName = report?.dashboardName
+                ? report.dashboardName
+                : dashboardOptions[0]?.label || '';
+            if (destinationDashboard) {
+                dashboardName = destinationDashboard;
+            }
+            const curDashboard = await updateDashboardFilters(dashboardName);
             setDashboardOptions(dashboardOptions);
-            const dashboardName = destinationDashboard ??
-                (report ? report?.dashboardName : dashboardOptions[0]?.label);
             curFormData.dashboardName = dashboardName;
-            setDefaultDashboardName(destinationDashboard ??
+            setDefaultDashboardName(dashboardName ??
                 (report ? report?.dashboardName : dashboardOptions[0]?.label));
             let curSchemaData = schema;
             if (!curSchemaData || curSchemaData.length === 0) {
@@ -546,7 +606,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             const tableNames = result.referencedTablesAndColumns.map((table) => table.name);
             setAllTables(tableNames);
             let customFieldUsage = false;
-            for (let table of tableNames) {
+            for (const table of tableNames) {
                 const tableInfo = curSchemaData.find((elem) => elem.name === table);
                 if (tableInfo?.customFieldInfo) {
                     customFieldUsage = true;
@@ -566,18 +626,22 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     result.dateFields[0]?.columns[0]?.field ||
                     '',
             };
-            curFormData.dateField = dateField;
             let isTemplate = curFormData.template;
             if (customFieldUsage) {
                 isTemplate = false;
             }
-            setFormData({
-                ...curFormData,
-                dashboardName: report && report.dashboardName
+            curFormData.dashboardName =
+                report && report.dashboardName
                     ? report?.dashboardName
-                    : dashboardOptions[0]?.label,
-                template: isTemplate,
-            });
+                    : dashboardOptions[0]?.label;
+            curFormData.template = isTemplate;
+            if (!curFormData.dateField.field || !curFormData.dateField.table) {
+                if (dateField.field) {
+                    curFormData.dateField = dateField;
+                }
+            }
+            setFormData(curFormData);
+            validationHelper(curFormData, curDashboard, curFormData.dateField ?? dateField, tableNames);
             setLoadingFormData(false);
         }
         getFormData();
@@ -585,7 +649,6 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     const [selectedPivotTable, setSelectedPivotTable] = (0, react_1.useState)(pivotData || undefined);
     const fetchPivotData = async (pivot, uniqueValues, overrideDateRange) => {
         if (pivot && rows) {
-            setInitialLoad(false);
             const dateFilter = report
                 ? report.filtersApplied.find((filter) => {
                     return filter.filterType === 'date_range';
@@ -641,8 +704,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                 }, {});
             });
         }
-    }, [selectedPivotTable, formData.columns, formData.chartType, rows]);
-    const handleChange = (value, fieldName, index) => {
+    }, [
+        selectedPivotTable,
+        formData.columns,
+        formData.chartType,
+        rows,
+        formData.pivot,
+    ]);
+    const handleChange = async (value, fieldName, index) => {
+        let updatedForm = { ...formData };
         try {
             // WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
             // WE NEED TO UPDATE BOTH VALUEFIELDTYPE AND COLUMN FIELD TYPES
@@ -656,14 +726,14 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     valueFieldType: value,
                 };
                 // @ts-ignore
-                setFormData({ ...formData, pivot: updatedPivot });
-                return;
+                updatedForm.pivot = updatedPivot;
             }
-            if (index !== undefined) {
+            else if (index !== undefined) {
                 // For dynamic array fields
                 const [field, subfield] = fieldName.split('.');
                 // @ts-ignore
                 const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
+                updatedForm = { ...formData, [field]: updatedArray };
                 setFormData({ ...formData, [field]: updatedArray });
             }
             else if (fieldName.includes('.')) {
@@ -673,19 +743,18 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     const subfieldTypeFieldName = subfield + 'Type';
                     if (value.length) {
                         const subFieldType = columns.find((columns) => columns.field === value).fieldType;
-                        setFormData({
-                            ...formData,
+                        updatedForm = {
+                            ...updatedForm,
                             // @ts-ignore
                             [field]: {
-                                ...formData[field],
+                                ...updatedForm[field],
                                 [subfield]: value,
                                 [subfieldTypeFieldName]: subFieldType,
                             },
-                        });
-                        return;
+                        };
                     }
                     else {
-                        setFormData({
+                        updatedForm = {
                             ...formData,
                             // @ts-ignore
                             [field]: {
@@ -693,36 +762,42 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                 [subfield]: '',
                                 [subfieldTypeFieldName]: '',
                             },
-                        });
-                        return;
+                        };
                     }
                 }
-                if (field === 'dateField' &&
+                else if (field === 'dateField' &&
                     subfield === 'table' &&
                     !formData.dateField.field) {
                     const field = schema?.find((elem) => elem.name === value)
                         ?.columns?.[0]?.name;
-                    setFormData({
-                        ...formData,
+                    updatedForm.dateField = {
                         // @ts-ignore
-                        dateField: { ...formData[field], [subfield]: value, field: field },
-                    });
-                    return;
+                        ...updatedForm[field],
+                        [subfield]: value,
+                        field: field,
+                    };
                 }
-                setFormData({
-                    ...formData,
+                updatedForm = {
+                    ...updatedForm,
                     // @ts-ignore
-                    [field]: { ...formData[field], [subfield]: value },
-                });
+                    [field]: { ...updatedForm[field], [subfield]: value },
+                };
             }
             else {
                 // For simple fields
-                setFormData({ ...formData, [fieldName]: value });
+                updatedForm = { ...updatedForm, [fieldName]: value };
+            }
+            let dashboardName = updatedForm.dashboardName;
+            if (fieldName === 'dashboardName') {
+                dashboardName = value;
             }
+            validationHelper(updatedForm, dashboardData[dashboardName || '']);
+            setChartTypes(getChartTypeOptions(updatedForm, dashboardData[dashboardName || '']));
         }
         catch (e) {
-            setFormData({ ...formData, [fieldName]: value });
+            updatedForm = { ...updatedForm, [fieldName]: value };
         }
+        setFormData(updatedForm);
     };
     const handleAddPivot = async (pivot, uniqueValues, dateRange, pivotData) => {
         const newPivotFormData = pivotFormData(pivot);
@@ -788,7 +863,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     columnField: '',
                     columnFieldType: '',
                     valueField: '',
-                    aggregationType: '',
+                    aggregationType: 'sum',
                 },
             });
         }
@@ -809,12 +884,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         event.preventDefault();
     };
     const deleteChart = async () => {
-        if (!report._id || !client) {
+        if (!report?.id || !client) {
             return;
         }
         const { publicKey, customerId } = client;
         const cloudBody = {
-            dashboardItemId: report._id,
+            dashboardItemId: report.id,
         };
         const searchParams = new URLSearchParams(customerId
             ? {
@@ -831,30 +906,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         setIsOpen(false);
         setIsSubmitting(false);
     };
-    const editChart = async (override = false) => {
-        if (!override) {
-            let dashboardDiscrepancyIssues = [];
-            if (dashboardHasDateComparison && formData.chartType === 'pie') {
-                dashboardDiscrepancyIssues.push(`The ${formData.dashboardName} dashboard is used for comparing date fields, you cannot add a pie chart to this dashboard.`);
-            }
-            if (dashboardHasDateFilter &&
-                ((!defaultDateField.table && !defaultDateField.field) ||
-                    (!formData.dateField.field && !formData.dateField.table))) {
-                dashboardDiscrepancyIssues.push(`The dashboard "${formData.dashboardName}" has a global date filter but this chart doesn't reference any tables with a date field.`);
-            }
-            dashboardFilters2.forEach((filter) => {
-                const table = allTables.find((elem) => elem === filter.table);
-                if (!table) {
-                    dashboardDiscrepancyIssues.push(`The dashboard "${formData.dashboardName}" a global filter on "${filter.table}" "${filter.field}" but this chart doesn't reference "${filter.table}".`);
-                }
-            });
-            if (dashboardDiscrepancyIssues.length) {
-                setFilterIssues(dashboardDiscrepancyIssues);
-                setShowFilterModal(true);
-                setTriggeredEditChart(false);
-                return;
-            }
-        }
+    const editChart = async () => {
         if (isSubmitting) {
             setTriggeredEditChart(false);
             return;
@@ -866,8 +918,8 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             return;
         }
         // If the dashbaordItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
-        let dashboardItemId = report ? report._id : undefined;
-        if (report && !showAccessControlOptions && report.template) {
+        let dashboardItemId = report ? report.id : undefined;
+        if (report && !showAccessControlOptions && formData.template) {
             dashboardItemId = undefined;
         }
         const cloudBody = {
@@ -884,10 +936,11 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             pivot: formData.pivot,
             referencedTables: allTables,
             referencedColumns,
-            template: report && !showAccessControlOptions && report.template
+            template: report && !showAccessControlOptions && formData.template
                 ? false
                 : formData.template,
             customerId: customerId || '*',
+            useNewNodeSql: true,
         };
         // @ts-ignore
         if (cloudBody['rows']) {
@@ -905,6 +958,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                 databaseType: databaseType,
                 ...cloudBody,
                 orgId: customerId || '*',
+                useNewNodeSql: true,
             },
         };
         const searchParams = new URLSearchParams(customerId
@@ -974,14 +1028,8 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                 maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
                             }),
                             ...(!isHorizontalView && isOpen && { width: formWidth }),
-                        }, children: [((!isHorizontalView && windowWidth >= 1200) ||
-                                formData.chartType !== 'table') && ((0, jsx_runtime_1.jsx)(Chart_1.default, { colors: theme.chartColors, config: {
-                                    ...formData,
-                                    rows: chartRows,
-                                    pivotRows: selectedPivotTable?.rows || undefined,
-                                    pivotColumns: selectedPivotTable?.columns || undefined,
-                                    rowCount,
-                                }, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
+                        }, children: [report?.adminError || report?.error ? ((0, jsx_runtime_1.jsx)(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : (((!isHorizontalView && windowWidth >= 1200) ||
+                                formData.chartType !== 'table') && ((0, jsx_runtime_1.jsx)(Chart_1.ChartDisplay, { reportId: report ? report.id : undefined, config: createReportFromForm(formData, report, selectedPivotTable, rows), colors: theme.chartColors, loading: isLoading ? true : false, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
                                     width: '100%',
                                     height: formData.chartType === 'metric'
                                         ? 100
@@ -991,7 +1039,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                 : 'calc(100% - 10px)'
                                             : 400,
                                     ...(isHorizontalView && { flexGrow: 1 }),
-                                }, onClickChartElement: onClickChartElement })), 
+                                }, onClickChartElement: onClickChartElement }))), 
                             // Make sure to display non-pivoted table when using pivot chart
                             showTableFormatOptions &&
                                 (isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -1032,7 +1080,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                     })), width: 200 }) })), (0, jsx_runtime_1.jsx)("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Chart type", value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
                                                     // filter out metric for all pivots
                                                     // filter out bar and pie for row and column pivot
-                                                    options: getChartTypeOptions(formData), width: 200 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    options: chartTypes, width: 200 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1067,7 +1115,11 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
+                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields
+                                                                .filter((yAxisField) => {
+                                                                return !yAxisField.field.startsWith('comparison_');
+                                                            })
+                                                                .map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
                                                                             ? formData.pivot.valueField || 'count'
                                                                             : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
                                                                             ? [
@@ -1162,18 +1214,25 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                     justifyContent: 'flex-end',
                                     marginTop: 'auto',
                                     gap: 10,
-                                }, children: [!hideDeleteButton && !isHorizontalView && report && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
-                                            if (loadingFormData) {
-                                                setTriggeredEditChart(true);
-                                            }
-                                            else {
-                                                editChart();
-                                            }
-                                        }, label: buttonLabel
-                                            ? buttonLabel
-                                            : report
-                                                ? 'Save changes'
-                                                : 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
+                                }, children: [!hideDeleteButton && !isHorizontalView && report && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            width: '100%',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            gap: 6,
+                                        }, children: [filterIssues.length === 0 ? ((0, jsx_runtime_1.jsx)("div", {})) : ((0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                                                    if (loadingFormData) {
+                                                        setTriggeredEditChart(true);
+                                                    }
+                                                    else {
+                                                        editChart();
+                                                    }
+                                                }, disabled: filterIssues.length !== 0, label: buttonLabel
+                                                    ? buttonLabel
+                                                    : report
+                                                        ? 'Save changes'
+                                                        : 'Add to dashboard' })] }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent })] }));
 }
 exports.default = ChartBuilder;
 function SegmentedControl({ onChange, value, theme, organizationName, customFieldTableRef, }) {
@@ -1249,7 +1308,7 @@ function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent = UiCo
                 boxSizing: 'border-box',
                 overflow: 'scroll',
                 maxHeight: 600,
-            }, children: [issues.map((issue, index) => ((0, jsx_runtime_1.jsx)("span", { style: { paddingTop: '10px' }, children: issue }, issue))), (0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [issues.map((issue) => ((0, jsx_runtime_1.jsx)("span", { style: { paddingTop: '10px' }, children: issue }, issue))), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         justifyContent: 'flex-end',