@quillsql/react 2.12.29 → 2.12.31

package/dist/esm/ChartBuilder.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars */
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
+import { ClientContext, DashboardContext, DashboardDataContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
-import Chart from './Chart';
+import { ChartDisplay } from './Chart';
 import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, } from './components/UiComponents';
 import { mergeComparisonRange } from './utils/merge';
 import { removeDoubleQuotes, snakeAndCamelCaseToTitleCase, } from './utils/textProcessing';
@@ -16,6 +15,9 @@ import { convertColumnInfoToColumnInternal, convertFieldTypeToJSType, } from './
 import { createTableNameToTableAliasMap, getColumnsByTableFromASTAndSchema, getSelectFromAST, } from './utils/astProcessing';
 import { getSchemaInfoWithCustomFields } from './utils/schema';
 import { getDateBucketFromRange } from './utils/dates';
+import { validateReport } from './utils/validation';
+import { QuillChartErrorWithAction } from './components/Chart/ChartError';
+import { convertInternalReportToReport } from './utils/report';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -58,12 +60,12 @@ export function createInitialFormData(columns) {
             return { ...col, label: 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: '',
@@ -74,18 +76,26 @@ export function createInitialFormData(columns) {
     };
     return formEmptyState;
 }
-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) {
@@ -101,8 +111,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 = getColumnsByTableFromASTAndSchema(withStmt.stmt.ast, allTables, tableAliasMap);
+            const astFrom = withStmt.stmt.from ?? withStmt.stmt.ast.from;
+            if (astFrom) {
+                const withReferencedColumns = getColumnsByTableFromASTAndSchema(withStmt.stmt.ast ?? withStmt.stmt, allTables, tableAliasMap);
                 // @ts-ignore
                 Object.keys(withReferencedColumns).forEach((tableName) => {
                     if (referencedColumns[tableName]) {
@@ -129,7 +140,7 @@ function getTablesHelper(ast, allTables) {
             }) || [],
         };
     });
-    let dateFields = allTables
+    const dateFields = allTables
         .filter((table) => onlyReferenceTables.includes(table.displayName))
         .map((table) => {
         return {
@@ -144,12 +155,32 @@ function getTablesHelper(ast, allTables) {
     return { referencedTablesAndColumns, dateFields };
 }
 async function getReferencedTables(client, sqlQuery, dbTables) {
-    const resp = await getDataFromCloud(client, `astify`, { query: sqlQuery });
+    const resp = await getDataFromCloud(client, `astify`, {
+        query: sqlQuery,
+        useNewNodeSql: true,
+    });
     if (resp.success === false) {
         return getTablesHelper(getSelectFromAST({}), dbTables);
     }
     return getTablesHelper(getSelectFromAST(resp.ast), dbTables);
 }
+function createReportFromForm(formData, report, selectedPivotTable, rows = []) {
+    return 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,
+    });
+}
 export const numberFormatOptions = [
     'whole_number',
     'one_decimal_place',
@@ -260,7 +291,7 @@ export function ChartBuilderWithModal(props) {
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = 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, }) {
+export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, 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, 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] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -268,15 +299,27 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [windowWidth, setWindowWidth] = useState(1200);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [pivotCardWidth, setPivotCardWidth] = useState(665);
+    const [chartTypes, setChartTypes] = useState(CHART_TYPES.map((type) => {
+        return { label: type, value: type };
+    }));
     const [formWidth, setFormWidth] = useState(665);
     const inputRef = useRef(null);
     const selectRef = useRef(null);
-    const { dispatch } = useContext(DashboardContext);
+    const [, dispatch] = useContext(DashboardContext);
     const [processedColumns, setProcessedColumns] = useState(columns);
     const parentRef = useRef(null);
     const deleteRef = useRef(null);
     const modalPadding = 20;
     const deleteButtonMargin = -12;
+    const validationHelper = (formData, dashboard, dateField, tables) => {
+        const issues = validateReport(formData, dashboard, dateField || defaultDateField, tables || allTables);
+        if (issues.length > 0) {
+            setFilterIssues(issues);
+        }
+        else {
+            setFilterIssues([]);
+        }
+    };
     useEffect(() => {
         if (schema) {
             const newProcessedColumns = columns.map((col) => {
@@ -361,18 +404,14 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [dashboardOptions, setDashboardOptions] = useState([]);
     const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || report?.dashboardName || '');
     const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const [chartRows, setChartRows] = useState(rows);
+    const { dashboardData } = useContext(DashboardDataContext);
     const specificDashboardFilter = useMemo(() => {
         return dashboardFilters.filter((f) => f && defaultDashboardName === f.dashboardName);
     }, [dashboardFilters]);
-    const [dashboardFilters2, setDashboardFilters] = useState([]);
-    const [dashboardHasDateFilter, setDashboardHasDateFilter] = useState(false);
-    const [dashboardHasDateComparison, setDashboardHasDateComparison] = useState(false);
     const [showFilterModal, setShowFilterModal] = useState(false);
     const [filterIssues, setFilterIssues] = useState([]);
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
-    const [intialLoad, setInitialLoad] = useState(true);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [tableName, setTableName] = useState(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
@@ -402,12 +441,12 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             return { ...col, label: 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: '',
@@ -417,6 +456,9 @@ export default function ChartBuilder({ TextInputComponent = 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, {
@@ -432,22 +474,22 @@ export default function ChartBuilder({ TextInputComponent = 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
@@ -461,6 +503,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             xAxisFormat: isDateField(pivot.rowFieldType)
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
+                    report?.xAxisFormat ||
                     'whole_number',
             xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
@@ -469,22 +512,33 @@ export default function ChartBuilder({ TextInputComponent = 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] = 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] = useState(formFormDataFromReport(report));
     useEffect(() => {
         if (!loadingFormData && triggeredEditChart) {
             editChart();
@@ -494,8 +548,14 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         async function getFormData() {
             setLoadingFormData(true);
             const curFormData = formData;
-            const resp = await 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 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) {
@@ -508,13 +568,16 @@ export default function ChartBuilder({ TextInputComponent = 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) {
@@ -538,7 +601,7 @@ export default function ChartBuilder({ TextInputComponent = 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;
@@ -558,18 +621,22 @@ export default function ChartBuilder({ TextInputComponent = 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();
@@ -577,7 +644,6 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [selectedPivotTable, setSelectedPivotTable] = 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';
@@ -633,8 +699,15 @@ export default function ChartBuilder({ TextInputComponent = 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
@@ -648,14 +721,14 @@ export default function ChartBuilder({ TextInputComponent = 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('.')) {
@@ -665,19 +738,18 @@ export default function ChartBuilder({ TextInputComponent = 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]: {
@@ -685,36 +757,42 @@ export default function ChartBuilder({ TextInputComponent = 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);
@@ -780,7 +858,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                     columnField: '',
                     columnFieldType: '',
                     valueField: '',
-                    aggregationType: '',
+                    aggregationType: 'sum',
                 },
             });
         }
@@ -801,12 +879,12 @@ export default function ChartBuilder({ TextInputComponent = 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
             ? {
@@ -823,30 +901,7 @@ export default function ChartBuilder({ TextInputComponent = 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;
@@ -858,8 +913,8 @@ export default function ChartBuilder({ TextInputComponent = 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 = {
@@ -876,10 +931,11 @@ export default function ChartBuilder({ TextInputComponent = 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']) {
@@ -897,6 +953,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 databaseType: databaseType,
                 ...cloudBody,
                 orgId: customerId || '*',
+                useNewNodeSql: true,
             },
         };
         const searchParams = new URLSearchParams(customerId
@@ -966,14 +1023,8 @@ export default function ChartBuilder({ TextInputComponent = 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') && (_jsx(Chart, { colors: theme.chartColors, config: {
-                                    ...formData,
-                                    rows: chartRows,
-                                    pivotRows: selectedPivotTable?.rows || undefined,
-                                    pivotColumns: selectedPivotTable?.columns || undefined,
-                                    rowCount,
-                                }, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
+                        }, children: [report?.adminError || report?.error ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : (((!isHorizontalView && windowWidth >= 1200) ||
+                                formData.chartType !== 'table') && (_jsx(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
@@ -983,7 +1034,7 @@ export default function ChartBuilder({ TextInputComponent = 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)) && (_jsx("div", { style: {
@@ -1024,7 +1075,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                     })), 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: getChartTypeOptions(formData), width: 200 }) })] }), _jsxs("div", { style: {
+                                                    options: chartTypes, width: 200 }) })] }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
@@ -1059,7 +1110,11 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     isDateField(formData.pivot.rowFieldType)
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] })] })), 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
+                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields
+                                                                .filter((yAxisField) => {
+                                                                return !yAxisField.field.startsWith('comparison_');
+                                                            })
+                                                                .map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
                                                                             ? formData.pivot.valueField || 'count'
                                                                             : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
                                                                             ? [
@@ -1154,18 +1209,25 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                     justifyContent: 'flex-end',
                                     marginTop: 'auto',
                                     gap: 10,
-                                }, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsx(ButtonComponent, { onClick: () => {
-                                            if (loadingFormData) {
-                                                setTriggeredEditChart(true);
-                                            }
-                                            else {
-                                                editChart();
-                                            }
-                                        }, label: buttonLabel
-                                            ? buttonLabel
-                                            : report
-                                                ? 'Save changes'
-                                                : 'Add to dashboard' }))] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
+                                }, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            width: '100%',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                            gap: 6,
+                                        }, children: [filterIssues.length === 0 ? (_jsx("div", {})) : (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), _jsx(ButtonComponent, { onClick: () => {
+                                                    if (loadingFormData) {
+                                                        setTriggeredEditChart(true);
+                                                    }
+                                                    else {
+                                                        editChart();
+                                                    }
+                                                }, disabled: filterIssues.length !== 0, label: buttonLabel
+                                                    ? buttonLabel
+                                                    : report
+                                                        ? 'Save changes'
+                                                        : 'Add to dashboard' })] }))] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent })] }));
 }
 function SegmentedControl({ onChange, value, theme, organizationName, customFieldTableRef, }) {
     return (_jsxs("div", { style: {
@@ -1240,7 +1302,7 @@ export function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent
                 boxSizing: 'border-box',
                 overflow: 'scroll',
                 maxHeight: 600,
-            }, children: [issues.map((issue, index) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("div", { style: {
+            }, children: [issues.map((issue) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         justifyContent: 'flex-end',