@quillsql/react 2.12.29 → 2.12.30

package/dist/esm/ChartBuilder.js

@@ -1,7 +1,6 @@
 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';
@@ -16,6 +15,8 @@ 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';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -74,18 +75,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 +110,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 +139,7 @@ function getTablesHelper(ast, allTables) {
             }) || [],
         };
     });
-    let dateFields = allTables
+    const dateFields = allTables
         .filter((table) => onlyReferenceTables.includes(table.displayName))
         .map((table) => {
         return {
@@ -144,7 +154,10 @@ 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);
     }
@@ -260,7 +273,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,6 +281,9 @@ 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);
@@ -277,6 +293,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     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 +386,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);
@@ -417,6 +438,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,15 +456,14 @@ 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;
             }
         }
     };
@@ -494,8 +517,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,11 +537,14 @@ 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 ??
                 (report ? report?.dashboardName : dashboardOptions[0]?.label));
@@ -538,7 +570,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 +590,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 +613,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';
@@ -634,7 +669,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             });
         }
     }, [selectedPivotTable, formData.columns, formData.chartType, rows]);
-    const handleChange = (value, fieldName, index) => {
+    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 +684,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 +701,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 +720,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);
@@ -823,30 +864,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;
@@ -880,6 +898,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 ? false
                 : formData.template,
             customerId: customerId || '*',
+            useNewNodeSql: true,
         };
         // @ts-ignore
         if (cloudBody['rows']) {
@@ -897,6 +916,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 databaseType: databaseType,
                 ...cloudBody,
                 orgId: customerId || '*',
+                useNewNodeSql: true,
             },
         };
         const searchParams = new URLSearchParams(customerId
@@ -966,10 +986,10 @@ 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) ||
+                        }, children: [report.adminError || report.error ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: report.adminError && onClickChartError })) : (((!isHorizontalView && windowWidth >= 1200) ||
                                 formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: {
                                     ...formData,
-                                    rows: chartRows,
+                                    rows: rows,
                                     pivotRows: selectedPivotTable?.rows || undefined,
                                     pivotColumns: selectedPivotTable?.columns || undefined,
                                     rowCount,
@@ -983,7 +1003,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 +1044,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,
@@ -1154,18 +1174,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 +1267,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',

package/dist/esm/ChartEditor.d.ts

@@ -22,6 +22,8 @@ export interface ChartEditorProps {
     onAddToDashboardComplete?: (report: QuillReport) => void;
     /** A callback function triggered when a chart element is clicked */
     onClickChartElement?: (element: any) => void;
+    /** A callback function triggered when the chart error button is clicked */
+    onClickChartError?: (element: any) => void;
     /** A callback that is fired when the item is deleted. */
     onDelete?: () => void;
     /** A select component. */
@@ -156,6 +158,16 @@ export interface ChartEditorProps {
     ErrorMessageComponent?: (props: {
         errorMessage: string;
     }) => JSX.Element;
+    /**
+     * A component that displays when the chart errors.
+     */
+    ErrorComponent?: (props: {
+        className?: string;
+        containerStyle?: React.CSSProperties;
+        label?: string;
+        onClick?: (element: any) => void;
+        ButtonComponent?: React.ComponentType<any>;
+    }) => JSX.Element;
     /** The default dashboard to add the item to. */
     destinationDashboard?: string;
     /** The name of the current organization. */
@@ -193,5 +205,5 @@ export interface ChartEditorProps {
  * ### Chart Editor API
  * @see https://docs.quillsql.com/components/chart-editor
  */
-export default function ChartEditor({ isOpen, reportId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, LoadingComponent, TableComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ErrorMessageComponent, ChartBuilderFormContainer, hideDeleteButton, hideSubmitButton, onClickChartElement, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartEditor({ isOpen, reportId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, LoadingComponent, TableComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ErrorMessageComponent, ChartBuilderFormContainer, ErrorComponent, hideDeleteButton, hideSubmitButton, onClickChartElement, onClickChartError, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChartEditor.d.ts.map

package/dist/esm/ChartEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":"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"}