@quillsql/react 2.12.46 → 2.12.48

package/dist/esm/ChartBuilder.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
-import { getData, getDataFromCloud } from './utils/dataFetcher';
+import { ClientContext, DashboardConfigContext, DashboardContext, DashboardFiltersContext, SchemaDataContext, ThemeContext, } from './Context';
+import { getDataFromCloud } from './utils/dataFetcher';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import { ChartDisplay } from './Chart';
@@ -13,11 +13,10 @@ import { QuillCard } from './components/QuillCard';
 import { quillFormat } from './utils/valueFormatter';
 import { convertFieldTypeToJSType } from './utils/columnProcessing';
 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';
+import { convertInternalReportToReport, saveReport } from './utils/report';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -55,7 +54,7 @@ function getPivotMetricOptions(pivot) {
 export function createInitialFormData(columns) {
     const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
     const formEmptyState = {
-        name: 'My Chart',
+        name: '',
         columns: columns.map((col) => {
             return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
         }),
@@ -78,7 +77,7 @@ export function createInitialFormData(columns) {
 }
 function getChartTypeOptions(formData, dashboard) {
     let viableCharts = CHART_TYPES;
-    if (dashboard.dateFilter && dashboard.dateFilter.comparison) {
+    if (dashboard && dashboard.dateFilter && dashboard.dateFilter.comparison) {
         viableCharts = viableCharts.filter((chart) => !['table', 'metric', 'bar', 'pie'].includes(chart));
     }
     if (formData.pivot && !formData.pivot.rowField) {
@@ -289,17 +288,13 @@ 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 = 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;
+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, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, isAdmin = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, onDiscardChanges, 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, isEditingMode = false, }) {
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
-    const [schema, setSchema] = useContext(SchemaContext);
+    const [schemaData] = useContext(SchemaDataContext);
     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);
@@ -309,6 +304,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const deleteRef = useRef(null);
     const modalPadding = 20;
     const deleteButtonMargin = -12;
+    // If the TextInputComponent is a forwardRef it will have a $$typeof property
+    // So we only want to pass the ref if the TextInputComponent is a forwardRef
+    const autofocusRefProp = '$$typeof' in TextInputComponent
+        ? {
+            ref: (input) => formData.name === '' && !showPivotPopover && input?.focus(),
+        }
+        : {};
     const validationHelper = (formData, dashboard, dateField, tables) => {
         const issues = validateReport(formData, dashboard, dateField || defaultDateField, tables || allTables);
         if (issues.length > 0) {
@@ -319,14 +321,14 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         }
     };
     useEffect(() => {
-        if (schema) {
+        if (schemaData.schema) {
             const newProcessedColumns = columns.map((col) => {
                 if (col.jsType) {
                     return col;
                 }
                 const newCol = { ...col };
                 let foundColumn;
-                schema.forEach((table) => {
+                schemaData.schema.forEach((table) => {
                     if (table.columns) {
                         const matchedColumn = table.columns.find((c) => c.field === col.field);
                         if (matchedColumn) {
@@ -343,7 +345,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             });
             setProcessedColumns(newProcessedColumns);
         }
-    }, [schema]);
+    }, [schemaData.schema]);
     useEffect(() => {
         const handleResize = () => setWindowWidth(window.innerWidth);
         handleResize();
@@ -411,7 +413,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [tableName, setTableName] = useState(undefined);
-    const selectedTable = schema?.find((t) => t.displayName === tableName);
+    const selectedTable = schemaData.schema?.find((t) => t.displayName === tableName);
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [loadingFormData, setLoadingFormData] = useState(false);
     const [triggeredEditChart, setTriggeredEditChart] = useState(false);
@@ -432,7 +434,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     });
     const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
     const formEmptyState = {
-        name: 'My Chart',
+        name: report?.name ?? '',
         dashboardName: dashboardOptions[0]?.label || '',
         columns: columns.map((col) => {
             return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
@@ -539,6 +541,14 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         };
     };
     const [formData, setFormData] = useState(formFormDataFromReport(report));
+    const invalidColumns = useMemo(() => {
+        const columnsObservedInRows = rows[0] ? Object.keys(rows[0]) : [];
+        return columns.filter((col) => !columnsObservedInRows.includes(col.field));
+    }, [rows]);
+    const [chartTypes, setChartTypes] = useState((() => {
+        const data = formFormDataFromReport(report);
+        return getChartTypeOptions(data, dashboardConfig[data.dashboardName || '']);
+    })());
     useEffect(() => {
         if (!loadingFormData && triggeredEditChart) {
             editChart();
@@ -582,12 +592,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             curFormData.dashboardName = dashboardName;
             setDefaultDashboardName(dashboardName ??
                 (report ? report?.dashboardName : dashboardOptions[0]?.label));
-            let curSchemaData = schema;
-            if (!curSchemaData || curSchemaData.length === 0) {
-                const { schemaData } = await getSchemaInfoWithCustomFields(client, 'cb');
-                curSchemaData = schemaData;
-                setSchema(curSchemaData);
-            }
+            const curSchemaData = schemaData.schema;
             if (!query) {
                 setLoadingFormData(false);
                 return;
@@ -733,7 +738,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 // @ts-ignore
                 const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
                 updatedForm = { ...formData, [field]: updatedArray };
-                setFormData({ ...formData, [field]: updatedArray });
+                setFormData(updatedForm);
+                setChartTypes(getChartTypeOptions(updatedForm, dashboardConfig[updatedForm.dashboardName ?? '']));
             }
             else if (fieldName.includes('.')) {
                 // For nested fields
@@ -767,8 +773,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 else if (field === 'dateField' &&
                     subfield === 'table' &&
                     !formData.dateField.field) {
-                    const field = schema?.find((elem) => elem.name === value)
-                        ?.columns?.[0]?.field;
+                    const field = schemaData.schema?.find((elem) => elem.name === value)?.columns?.[0]?.field;
                     updatedForm.dateField = {
                         // @ts-ignore
                         ...updatedForm[field],
@@ -822,6 +827,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             ...newPivotFormData,
             ...(keepOldChartType && { chartType: formData.chartType }),
         }));
+        setChartTypes(getChartTypeOptions({ ...formData, ...newPivotFormData }, dashboardConfig[formData.dashboardName || '']));
+        // maybe validate
     };
     const handleDeletePivot = () => {
         if (!formData.pivot) {
@@ -832,7 +839,9 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             dashboardName: formData.dashboardName,
             pivot: null,
         });
+        // maybe validate
         setSelectedPivotTable(undefined);
+        setChartTypes(getChartTypeOptions({ ...formEmptyState, pivot: null }, dashboardConfig[formData.dashboardName || '']));
     };
     const handleAddField = (fieldName) => {
         if (fieldName === 'columns') {
@@ -914,77 +923,53 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             return;
         }
         setIsSubmitting(true);
-        const { publicKey, customerId, databaseType } = client;
         if (!client) {
             setTriggeredEditChart(false);
             return;
         }
-        // If the dashbaordItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
+        // If the dashboardItem 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 && formData.template) {
+        if (report && !isAdmin && formData.template) {
             dashboardItemId = undefined;
         }
-        const cloudBody = {
+        const newReport = {
             ...formData,
+            columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
             ...(formData.dateField?.table
                 ? {}
                 : { dateField: { ...defaultDateField } }),
             ...(formData.dashboardName
                 ? {}
                 : { dashboardName: defaultDashboardName }),
-            dashboardItemId,
-            query: queryNoDateColumn || query,
-            queryString: queryNoDateColumn || query,
+            query: queryNoDateColumn || query || '',
             pivot: formData.pivot,
             referencedTables: allTables,
             referencedColumns,
             template: report && !showAccessControlOptions && formData.template
                 ? false
                 : formData.template,
-            customerId: customerId || '*',
-            useNewNodeSql: true,
-        };
-        // @ts-ignore
-        if (cloudBody['rows']) {
-            // @ts-ignore
-            delete cloudBody['rows'];
-            // @ts-ignore
-            delete cloudBody['compareRows'];
-        }
-        // add orgId: customerId if present for hostedBody
-        // set defaultDateField if date field not present
-        const hostedBody = {
-            metadata: {
-                task: 'create',
-                clientId: publicKey,
-                databaseType: databaseType,
-                ...cloudBody,
-                orgId: customerId || '*',
-                useNewNodeSql: true,
-            },
         };
-        const searchParams = new URLSearchParams(customerId
-            ? {
-                clientId: publicKey,
-                customerId: customerId,
-            }
-            : { clientId: publicKey }).toString();
-        const resp = await getData(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
+        const resp = await saveReport({
+            report: newReport,
+            dashboardItemId,
+            client,
+        });
         if (resp && resp.name !== 'error') {
             if (resp.compareRows) {
                 mergeComparisonRange(resp);
             }
             dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
+                type: 'ADD_DASHBOARD_ITEM',
                 id: resp._id,
                 data: {
                     ...resp,
                     rows,
-                    columns,
+                    columns: formData.columns.filter((col) => !invalidColumns.includes(col)),
                     pivotRows: selectedPivotTable?.rows || undefined,
                     pivotColumns: selectedPivotTable?.columns || undefined,
                     filtersApplied: specificDashboardFilter,
                     triggerReload: true,
+                    error: undefined,
                 },
             });
         }
@@ -1002,7 +987,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     };
     // Prevent horizontal view on small screens.
     isHorizontalView = windowWidth < 1200 ? false : isHorizontalView;
-    if (!schema) {
+    if (!schemaData.schema) {
         return null;
     }
     return (_jsxs("div", { style: {
@@ -1024,13 +1009,14 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '20px',
+                            overflowY: 'auto',
                             height: isHorizontalView || !isOpen ? '100%' : 800,
                             ...(isHorizontalView && {
                                 flexGrow: 1,
                                 maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
                             }),
                             ...(!isHorizontalView && isOpen && { width: formWidth }),
-                        }, children: [report?.adminError || report?.error ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : (((!isHorizontalView && windowWidth >= 1200) ||
+                        }, children: [!isEditingMode && (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), scrollable: true, colors: theme?.chartColors, loading: false, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
                                     width: '100%',
                                     height: formData.chartType === 'metric'
@@ -1073,7 +1059,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                 paddingTop: modalPadding,
                                 paddingBottom: modalPadding,
                             }),
-                        }, children: [_jsxs(FormContainer, { children: [_jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent, { id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboard && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
+                        }, children: [_jsxs(FormContainer, { children: [_jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent, { ...autofocusRefProp, id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboard && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
                                                         handleChange(e.target.value, 'dashboardName');
                                                         await updateDashboardFilters(e.target.value);
                                                     }, options: dashboardOptions.map((elem) => ({
@@ -1186,10 +1172,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                                 ? [{ label: 'date', value: 'pivot_date' }]
                                                                                 : [{ label: 'string', value: 'string' }]
                                                                             : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
-                                                        : formData.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: columns.map((elem) => ({
-                                                                        label: elem.field,
-                                                                        value: elem.field,
-                                                                    })), width: 200 }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
+                                                        : formData.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: rows[0]
+                                                                        ? Object.keys(rows[0]).map((elem) => ({
+                                                                            label: elem,
+                                                                            value: elem,
+                                                                        }))
+                                                                        : columns.map((elem) => ({
+                                                                            label: elem.field,
+                                                                            value: elem.field,
+                                                                        })), width: 200 }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
                                                         // hide when pivoted and chartType === 'table'
                                                         (formData.pivot &&
                                                             selectedPivotTable &&
@@ -1198,7 +1189,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Date field" }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
+                                        }, children: [_jsx(HeaderComponent, { label: "Date filter field" }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Virtual Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
                                                                 label: elem.name,
                                                                 value: elem.name,
                                                             })), width: 200 }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Field", value: removeDoubleQuotes(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
@@ -1206,7 +1197,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                 ?.columns?.map((elem) => ({
                                                                 label: elem.field,
                                                                 value: elem.field,
-                                                            })) || [], width: 200 }) })] })] })), showAccessControlOptions && (_jsxs("div", { style: {
+                                                            })) || [], width: 200 }) })] })] })), showAccessControlOptions && !client?.multiTenancyDisabled && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
@@ -1223,18 +1214,24 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                             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 })] }));
+                                        }, children: [filterIssues.length === 0 ? (_jsx("div", {})) : (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 10 }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                            setIsOpen(false);
+                                                            onDiscardChanges && onDiscardChanges();
+                                                        }, label: 'Discard changes' }), _jsx(ButtonComponent, { onClick: () => {
+                                                            if (loadingFormData) {
+                                                                setTriggeredEditChart(true);
+                                                            }
+                                                            else {
+                                                                editChart();
+                                                            }
+                                                        }, disabled: formData.name === '' ||
+                                                            formData.dashboardName === '' ||
+                                                            formData.chartType === '' ||
+                                                            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: {

package/dist/esm/ChartEditor.d.ts

@@ -178,6 +178,8 @@ export interface ChartEditorProps {
     hideDeleteButton?: boolean;
     /** Whether to hide the submit button. */
     hideSubmitButton?: boolean;
+    /** Whether to hide organization details, even when admin is enabled. */
+    hideOrganizationDetails?: boolean;
 }
 /**
  * ### Quill Chart Editor
@@ -205,5 +207,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, ErrorComponent, hideDeleteButton, hideSubmitButton, onClickChartElement, onClickChartError, }: 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, hideOrganizationDetails, 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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"}

package/dist/esm/ChartEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import ChartBuilder from './ChartBuilder';
-import { DashboardContext, DashboardFiltersContext, ClientContext, CustomFieldContext, } from './Context';
+import { DashboardContext, DashboardFiltersContext, ClientContext, SchemaDataContext, } from './Context';
 import { MemoizedModal, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableComponent, } from './components/UiComponents';
 import { QuillCard } from './components/QuillCard';
 import { fetchTableByReport } from './utils/tableProcessing';
@@ -34,11 +34,11 @@ import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './util
  * ### Chart Editor API
  * @see https://docs.quillsql.com/components/chart-editor
  */
-export default function ChartEditor({ isOpen, reportId, isAdmin = false, destinationDashboard, chartBuilderTitle = 'Edit chart', chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView = true, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent = MemoizedModal, CardComponent = QuillCard, PopoverComponent, LoadingComponent = QuillLoadingComponent, TableComponent = QuillTableComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, hideDeleteButton = false, hideSubmitButton = false, onClickChartElement, onClickChartError, }) {
+export default function ChartEditor({ isOpen, reportId, isAdmin = false, destinationDashboard, chartBuilderTitle = 'Edit chart', chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView = true, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent = MemoizedModal, CardComponent = QuillCard, PopoverComponent, LoadingComponent = QuillLoadingComponent, TableComponent = QuillTableComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, hideDeleteButton = false, hideSubmitButton = false, hideOrganizationDetails = false, onClickChartElement, onClickChartError, }) {
     const parentRef = useRef(null);
     const [modalWidth, setModalWidth] = useState(200);
     const [modalHeight, setModalHeight] = useState(200);
-    const [dashboard] = useContext(DashboardContext);
+    const [dashboard, dispatch] = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const specificDashboardFilter = useMemo(() => {
         const tempReport = dashboard?.[reportId];
@@ -48,12 +48,15 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
         return dashboardFilters.filter((f) => f && tempReport.dashboardName === f.dashboardName);
     }, [dashboardFilters]);
     const [client] = useContext(ClientContext);
-    const [report, setReport] = useState(dashboard?.[reportId]);
     const [isLoading, setIsLoading] = useState(false);
     const [additionalProcessing, setAdditionalProcessing] = useState({});
     const [rowCount, setRowCount] = useState(undefined);
     const [maxPage, setMaxPage] = useState(0);
-    const [customFields] = useContext(CustomFieldContext);
+    const [schemaData] = useContext(SchemaDataContext);
+    const report = useMemo(() => {
+        return dashboard?.[reportId];
+    }, [dashboard, reportId]);
+    const [chartBuilderKey, setChartBuilderKey] = useState(0);
     const dateFilter = Object.values(specificDashboardFilter).find((filter) => filter.filterType == 'date_range');
     const dateRange = dateFilter?.startDate
         ? { start: dateFilter.startDate, end: dateFilter.endDate }
@@ -107,7 +110,7 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
             setIsLoading(true);
             try {
                 const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await fetchTableByReport(report.id, client, updatedProcessing, specificDashboardFilter, customFields);
+                const paginatedRows = await fetchTableByReport(report.id, client, updatedProcessing, specificDashboardFilter, schemaData.customFields);
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
@@ -115,7 +118,14 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
                 if (resetRows) {
                     tempRows = paginatedRows.rows;
                 }
-                setReport({ ...report, rows: tempRows });
+                dispatch({
+                    type: 'ADD_DASHBOARD_ITEM',
+                    id: report.id,
+                    data: {
+                        ...report,
+                        rows: tempRows,
+                    },
+                });
                 setTimeout(() => {
                     setIsLoading(false);
                 }, 200);
@@ -146,12 +156,16 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
                 return newFilter;
             })
             : [];
-        const { report, error } = await fetchReport(reportId, client, useReportTask, minimalFilters, processing, undefined, customFields);
+        const { report, error } = await fetchReport(reportId, client, useReportTask, minimalFilters, processing, undefined, schemaData.customFields);
         if (error) {
             setIsLoading(false);
             return;
         }
-        setReport(report);
+        dispatch({
+            type: 'ADD_DASHBOARD_ITEM',
+            id: reportId,
+            data: report,
+        });
         setAdditionalProcessing(processing);
         setIsLoading(false);
     };
@@ -177,10 +191,12 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
     return (_jsx("div", { ref: parentRef, style: { height: '100%' }, children: _jsx(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: chartBuilderTitle || 'Add to dashboard', 
             // For isHorizontalView, use full viewport size minus 80px for padding,
             // otherwise use the default layout method of the modal (contents).
-            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { report: report, rows: report.rows, columns: report.columnInternal, query: report.queryString, pivot: report.pivot || undefined, isOpen: isOpen, isComparison: dateFilter?.comparisonRange, isLoading: isLoading, setIsOpen: setIsOpen, showTableFormatOptions: isAdmin, showDateFieldOptions: isAdmin, showAccessControlOptions: isAdmin, showDashboardDropdown: isAdmin, destinationDashboard: destinationDashboard, onAddToDashboardComplete: onAddToDashboardComplete, dateRange: dateRange, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, DeleteButtonComponent: DeleteButtonComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, isHorizontalView: isHorizontalView, PopoverComponent: PopoverComponent, TableComponent: TableComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, ErrorMessageComponent: ErrorMessageComponent, LoadingComponent: LoadingComponent, ErrorComponent: ErrorComponent, onClickChartError: onClickChartError, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton, FormContainer: ChartBuilderFormContainer, onPageChange: onPageChange, onSortChange: onSortChange, rowCount: rowCount, onClickChartElement: onClickChartElement, pivotData: report.pivotColumns
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { report: report, rows: report.rows, isAdmin: isAdmin, columns: report.columnInternal, query: report.queryString, pivot: report.pivot || undefined, isOpen: isOpen, isComparison: dateFilter?.comparisonRange, isLoading: isLoading, setIsOpen: setIsOpen, showTableFormatOptions: isAdmin, showDateFieldOptions: isAdmin, showAccessControlOptions: isAdmin && !hideOrganizationDetails, showDashboardDropdown: isAdmin, destinationDashboard: destinationDashboard, onAddToDashboardComplete: onAddToDashboardComplete, dateRange: dateRange, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, DeleteButtonComponent: DeleteButtonComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, isHorizontalView: isHorizontalView, PopoverComponent: PopoverComponent, TableComponent: TableComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, ErrorMessageComponent: ErrorMessageComponent, LoadingComponent: LoadingComponent, ErrorComponent: ErrorComponent, onClickChartError: onClickChartError, onDelete: onDelete, onDiscardChanges: () => {
+                    setChartBuilderKey(chartBuilderKey + 1);
+                }, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton, FormContainer: ChartBuilderFormContainer, onPageChange: onPageChange, onSortChange: onSortChange, rowCount: rowCount, onClickChartElement: onClickChartElement, pivotData: report.pivotColumns
                     ? {
                         rows: report.pivotRows || [],
                         columns: report.pivotColumns,
                     }
-                    : undefined }) }) }));
+                    : undefined }, report.id + chartBuilderKey) }) }));
 }

package/dist/esm/Context.d.ts

@@ -2,10 +2,9 @@ import React from 'react';
 import { QuillReportInternal } from './models/Report';
 import { Client } from './models/Client';
 import { QuillTheme } from './QuillProvider';
-import { Table } from './models/Tables';
 import { DashboardConfig } from './models/Dashboard';
-export declare const SchemaContext: React.Context<[Table[], (value: React.SetStateAction<Table[]>) => void]>;
-export declare const CustomFieldContext: React.Context<any>;
+import { SchemaData } from './models/Schema';
+export declare const SchemaDataContext: React.Context<[SchemaData, (value: React.SetStateAction<SchemaData>) => void]>;
 export declare const ThemeContext: React.Context<[QuillTheme | null, (value: React.SetStateAction<QuillTheme | null>) => void]>;
 export declare const ClientContext: React.Context<[Client | null, boolean, (value: React.SetStateAction<Client | null>) => void]>;
 export declare const DashboardFiltersContext: React.Context<any>;

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

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,eAAO,MAAM,aAAa,kCACN,MAAM,cAAc,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EACtC,CAAC;AACrB,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,4CACK,MAAM,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,EACxD,CAAC;AACvB,eAAO,MAAM,aAAa,iDACS,MAAM,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,IAAI,EAC1C,CAAC;AACtC,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAiC1E,eAAO,MAAM,gBAAgB;;QAEJ,CAAC;AAsC1B,eAAO,MAAM,sBAAsB;;QAEJ,CAAC;AAyChC,eAAO,MAAM,eAAe;cAUhB,MAAM,SAAS;kBACX,UAAU;eACb,MAAM;;;mBAGF,MAAM;;;oDA2NtB,CAAC"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,eAAO,MAAM,iBAAiB,qCACP,MAAM,cAAc,CAAC,UAAU,CAAC,KAAK,IAAI,EAQ9D,CAAC;AACH,eAAO,MAAM,YAAY,4CACK,MAAM,cAAc,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,IAAI,EACxD,CAAC;AACvB,eAAO,MAAM,aAAa,iDACS,MAAM,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,IAAI,EAC1C,CAAC;AACtC,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAmC1E,eAAO,MAAM,gBAAgB;;QAEJ,CAAC;AAsC1B,eAAO,MAAM,sBAAsB;;QAEJ,CAAC;AAyChC,eAAO,MAAM,eAAe;cAUhB,MAAM,SAAS;kBACX,UAAU;eACb,MAAM;;;mBAGF,MAAM;;;oDAiOtB,CAAC"}