@quillsql/react 2.11.30 → 2.12.1

package/dist/esm/ChartBuilder.js

@@ -6,7 +6,7 @@ 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 { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, } from './components/UiComponents';
+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, snakeCaseToTitleCase, } from './utils/textProcessing';
 import { QuillSelectComponent } from './components/QuillSelect';
@@ -231,7 +231,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, 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, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, }) {
+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, }) {
     const dateRange = dr;
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -303,7 +303,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     }, []);
     // get dashboards
     const [dashboardOptions, setDashboardOptions] = useState([]);
-    const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || dashboardItem?.dashboardName || '');
+    const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || report?.dashboardName || '');
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [dashboardFilters2, setDashboardFilters] = useState([]);
     const [dashboardHasDateFilter, setDashboardHasDateFilter] = useState(false);
@@ -317,7 +317,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [tableName, setTableName] = useState(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
-    const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
+    const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : report?.pivot ? [report.pivot] : cp);
     const [recommendedPivots, setRecommendedPivots] = useState(rp);
     const [pivotRowField, setPivotRowField] = useState(pivot?.rowField);
     const [pivotColumnField, setPivotColumnField] = useState(pivot?.columnField);
@@ -382,15 +382,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     };
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField || pivot.valueField;
-        const yAxisLabel = dashboardItem?.yAxisFields?.length > 0
-            ? dashboardItem.yAxisFields[0].label
+        const yAxisLabel = report?.yAxisFields?.length > 0
+            ? report.yAxisFields[0].label
             : pivot.valueField;
         // date labels for pivots should be treated like strings since they are
         // formatted in generatePivotTable
         const yAxisIsDate = pivot.columnField
             ? isDateField(pivot.columnFieldType || '')
             : false;
-        const chartType = dashboardItem?.chartType ?? (pivot.rowField ? 'column' : 'metric');
+        const chartType = report?.chartType ?? (pivot.rowField ? 'column' : 'metric');
         return {
             pivot,
             chartType: chartType,
@@ -399,15 +399,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
                     'whole_number',
-            xAxisLabel: dashboardItem?.xAxisLabel || pivot.rowField,
+            xAxisLabel: report?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
                     field: yAxisField,
                     label: yAxisLabel,
                     format: yAxisIsDate
                         ? 'string'
-                        : dashboardItem?.yAxisFields?.length > 0
-                            ? dashboardItem?.yAxisFields[0].format
+                        : report?.yAxisFields?.length > 0
+                            ? report?.yAxisFields[0].format
                             : columns.find((col) => col.field === pivot.valueField)?.format ||
                                 'whole_number',
                 },
@@ -417,11 +417,11 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [formData, setFormData] = useState(pivot
         ? {
             ...formEmptyState,
-            ...dashboardItem,
+            ...report,
             ...pivotFormData(pivot),
             ...(destinationDashboard && { dashboardName: destinationDashboard }),
         }
-        : dashboardItem || formEmptyState);
+        : report || formEmptyState);
     useEffect(() => {
         async function getFormData() {
             const curFormData = formData;
@@ -430,19 +430,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 .filter((elem) => elem !== null)
                 .map((key) => ({ label: key, value: key }));
             await updateDashboardFilters(destinationDashboard ??
-                (dashboardItem
-                    ? dashboardItem?.dashboardName
-                    : dashboardOptions[0]?.label));
+                (report ? report?.dashboardName : dashboardOptions[0]?.label));
             setDashboardOptions(dashboardOptions);
             const dashboardName = destinationDashboard ??
-                (dashboardItem
-                    ? dashboardItem?.dashboardName
-                    : dashboardOptions[0]?.label);
+                (report ? report?.dashboardName : dashboardOptions[0]?.label);
             curFormData.dashboardName = dashboardName;
             setDefaultDashboardName(destinationDashboard ??
-                (dashboardItem
-                    ? dashboardItem?.dashboardName
-                    : dashboardOptions[0]?.label));
+                (report ? report?.dashboardName : dashboardOptions[0]?.label));
             const { queryEndpoint, queryHeaders, publicKey } = client;
             const response = await fetch(`${queryEndpoint}`, {
                 method: 'POST',
@@ -495,8 +489,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             curFormData.dateField = dateField;
             setFormData({
                 ...curFormData,
-                dashboardName: dashboardItem
-                    ? dashboardItem?.dashboardName
+                dashboardName: report
+                    ? report?.dashboardName
                     : dashboardOptions[0]?.label,
             });
         }
@@ -713,12 +707,12 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         event.preventDefault();
     };
     const deleteChart = async () => {
-        if (!dashboardItem._id || !client) {
+        if (!report._id || !client) {
             return;
         }
         const { publicKey, customerId } = client;
         const cloudBody = {
-            dashboardItemId: dashboardItem._id,
+            dashboardItemId: report._id,
         };
         const searchParams = new URLSearchParams(customerId
             ? {
@@ -767,11 +761,10 @@ 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
-        const dashboardItemId = !showDateFieldOptions && dashboardItem && dashboardItem.template
-            ? undefined
-            : dashboardItem
-                ? dashboardItem._id
-                : undefined;
+        let dashboardItemId = report ? report._id : undefined;
+        if (report && !showDateFieldOptions && report.template) {
+            dashboardItemId = undefined;
+        }
         const cloudBody = {
             ...formData,
             ...(formData.dateField?.table
@@ -786,7 +779,9 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             pivot: formData.pivot,
             referencedTables: allTables,
             referencedColumns,
-            template: !showDateFieldOptions && dashboardItem.template ? false : true,
+            template: report && !showDateFieldOptions && report.template
+                ? false
+                : formData.template,
             customerId: customerId || '*',
         };
         // @ts-ignore
@@ -876,12 +871,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                     height: formData.chartType === 'metric'
                                         ? 100
                                         : isHorizontalView || !isOpen
-                                            ? 'calc(50% - 10px)'
+                                            ? showTableFormatOptions
+                                                ? 'calc(50% - 10px)'
+                                                : 'calc(100% - 10px)'
                                             : 400,
                                     ...(isHorizontalView && { flexGrow: 1 }),
                                 } })), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
+                            showTableFormatOptions &&
+                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
                                     width: '100%',
                                     height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                     flexGrow: 1,
@@ -920,7 +918,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
+                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -972,9 +970,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                                                 : ''
                                                                             : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
                                                                             ? NUMBER_OPTIONS
-                                                                            : formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), 
-                                    // Make sure to display non-pivoted table when using pivot chart
-                                    windowWidth < 1200 && (_jsx("div", { style: {
+                                                                            : formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && windowWidth < 1200 && (_jsx("div", { style: {
                                             width: '100%',
                                             height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                             flexGrow: 1,
@@ -1035,9 +1031,9 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                     justifyContent: 'flex-end',
                                     marginTop: 'auto',
                                     gap: 10,
-                                }, children: [!hideDeleteButton && !isHorizontalView && dashboardItem && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsx(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
+                                }, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsx(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
                                             ? buttonLabel
-                                            : dashboardItem
+                                            : report
                                                 ? 'Save changes'
                                                 : 'Add to dashboard' }))] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
 }

package/dist/esm/ChartEditor.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { DashboardItem } from './Dashboard';
+import { QuillReport } from './Dashboard';
 /**
  * Props for the Quill ChartEditor component.
  */
@@ -9,7 +9,7 @@ export interface ChartEditorProps {
     /** A callback that sets the isOpen state. */
     setIsOpen: (isOpen: boolean) => void;
     /** The id of the chart that is being edited. */
-    chartId: string;
+    reportId: string;
     /** Whether the editor has administrative priveleges. */
     isAdmin?: boolean;
     /** The title of the chart builder form. */
@@ -19,7 +19,7 @@ export interface ChartEditorProps {
     /**
      * A callback that is fired when the add to dashboard flow has been completed.
      */
-    onAddToDashboardComplete?: (dashboardItem: DashboardItem) => void;
+    onAddToDashboardComplete?: (report: QuillReport) => void;
     /** A callback that is fired when the item is deleted. */
     onDelete?: () => void;
     /** A select component. */
@@ -114,6 +114,10 @@ export interface ChartEditorProps {
         }[];
         isLoading?: boolean;
     }) => JSX.Element;
+    /**
+     * A loading component to show in the pivot modal while suggestions load.
+     */
+    LoadingComponent?: () => JSX.Element;
     /**
      * A container for each row of inputs for the ChartBuilder form.
      */
@@ -169,7 +173,7 @@ export interface ChartEditorProps {
  * @example
  * ```js
  * // Usage without custom components
- * <ChartEditor isOpen={true} chartId="1234" />
+ * <ChartEditor isOpen={true} reportId="1234" />
  * ```
  *
  * @example
@@ -178,7 +182,7 @@ export interface ChartEditorProps {
  * <ChartEditor
  *   isOpen={isOpen}
  *   setIsOpen={setIsOpen}
- *   chartId="1234"
+ *   reportId="1234"
  *   Button={MyButton}
  *   Modal={MyModal}
  * />
@@ -187,5 +191,5 @@ export interface ChartEditorProps {
  * ### Chart Editor API
  * @see https://docs.quillsql.com/components/chart-editor
  */
-export default function ChartEditor({ isOpen, chartId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, TableComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ErrorMessageComponent, ChartBuilderFormContainer, hideDeleteButton, hideSubmitButton, }: 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, hideDeleteButton, hideSubmitButton, }: 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

@@ -3,10 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useRef, useState, } from 'react';
 import ChartBuilder from './ChartBuilder';
 import { DashboardContext, DashboardFiltersContext, ClientContext, } from './Context';
-import { MemoizedModal, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableComponent, } from './components/UiComponents';
+import { MemoizedModal, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableComponent, } from './components/UiComponents';
 import { getData } from './utils/dataFetcher';
 import { mergeComparisonRange } from './utils/merge';
 import { QuillCard } from './components/QuillCard';
+import { processFilterErrorList } from './utils/errorProcessing';
 /**
  * ### Quill Chart Editor
  *
@@ -15,7 +16,7 @@ import { QuillCard } from './components/QuillCard';
  * @example
  * ```js
  * // Usage without custom components
- * <ChartEditor isOpen={true} chartId="1234" />
+ * <ChartEditor isOpen={true} reportId="1234" />
  * ```
  *
  * @example
@@ -24,7 +25,7 @@ import { QuillCard } from './components/QuillCard';
  * <ChartEditor
  *   isOpen={isOpen}
  *   setIsOpen={setIsOpen}
- *   chartId="1234"
+ *   reportId="1234"
  *   Button={MyButton}
  *   Modal={MyModal}
  * />
@@ -33,14 +34,14 @@ import { QuillCard } from './components/QuillCard';
  * ### Chart Editor API
  * @see https://docs.quillsql.com/components/chart-editor
  */
-export default function ChartEditor({ isOpen, chartId, 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, TableComponent = QuillTableComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderFormContainer = QuillChartBuilderFormContainer, hideDeleteButton = false, hideSubmitButton = false, }) {
+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, hideDeleteButton = false, hideSubmitButton = false, }) {
     const parentRef = useRef(null);
     const [modalWidth, setModalWidth] = useState(200);
     const [modalHeight, setModalHeight] = useState(200);
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [client, _] = useContext(ClientContext);
-    const [dashboardItem, setDashboardItem] = useState(dashboard?.[chartId]);
+    const [dashboardItem, setDashboardItem] = useState(dashboard?.[reportId]);
     const [isLoading, setIsLoading] = useState(false);
     const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
     const dateRange = dateFilter?.startDate
@@ -71,7 +72,7 @@ export default function ChartEditor({ isOpen, chartId, isAdmin = false, destinat
                 try {
                     const hostedBody = {
                         metadata: {
-                            dashboardItemId: chartId,
+                            dashboardItemId: reportId,
                             orgId: client?.customerId || '*',
                             task: 'item',
                             filters: [],
@@ -80,10 +81,11 @@ export default function ChartEditor({ isOpen, chartId, isAdmin = false, destinat
                         },
                     };
                     const cloudBody = {
-                        id: chartId,
+                        id: reportId,
                         filters: [],
                     };
                     const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    processFilterErrorList(resp);
                     if (resp && resp.name !== 'error') {
                         if (resp.compareRows) {
                             mergeComparisonRange(resp);
@@ -94,7 +96,7 @@ export default function ChartEditor({ isOpen, chartId, isAdmin = false, destinat
                         });
                         dispatch({
                             type: 'UPDATE_DASHBOARD_ITEM',
-                            id: chartId,
+                            id: reportId,
                             data: {
                                 ...resp,
                                 filtersApplied: dashboardFilters,
@@ -115,12 +117,12 @@ export default function ChartEditor({ isOpen, chartId, isAdmin = false, destinat
         return () => {
             isSubscribed = false;
         };
-    }, [client, chartId]);
+    }, [client, reportId]);
     if (!dashboardItem) {
         return _jsx("div", {});
     }
     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, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, query: dashboardItem.queryString, pivot: dashboardItem.pivot, isOpen: isOpen, 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, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton, FormContainer: ChartBuilderFormContainer }) }) }));
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { report: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, query: dashboardItem.queryString, pivot: dashboardItem.pivot, isOpen: isOpen, 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, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton, FormContainer: ChartBuilderFormContainer }) }) }));
 }

package/dist/esm/Dashboard.d.ts

@@ -1,12 +1,13 @@
 import React, { ReactNode, ChangeEvent } from 'react';
 import { Column } from './models/Columns';
+import { Filter } from './models/Filter';
 /**
  * The props passed into the ChartComponent, TableComponent, and MetricComponent
  * functions in the dashboard.
  */
-export interface DashboardItemProps {
-    dashboardItem: DashboardItem;
-    onClick?: (item: DashboardItem) => void;
+export interface QuillReportProps {
+    report: QuillReport;
+    onClick?: (report: QuillReport) => void;
     isLoading?: boolean;
     error?: string;
     children?: ReactNode;
@@ -16,31 +17,31 @@ export interface DashboardItemProps {
  */
 export type AxisFormat = 'percent' | 'dollar_amount' | 'dollar_cents' | 'whole_number' | 'one_decimal_place' | 'two_decimal_places' | 'string' | 'yyyy' | 'MMM_yyyy' | 'MMM_dd_yyyy' | 'hh_ap_pm' | 'MMM_dd-MMM_dd' | 'MMM_dd_hh:mm_ap_pm' | 'wo, yyyy';
 /**
- * ## DashboardItem
- * A dashboard item represents an individual item on a dashboard.
+ * ## QuillReport
+ * Represents an individual item on a dashboard.
  *
  * Dashboard items can be charts, metric tiles, tables, etc. and can be styled
  * however you'd like.
  *
  * ### API Reference
- * @see https://docs.quillsql.com/components/quill-provider#dashboarditem
+ * @see https://docs.quillsql.com/components/quill-provider#quill-report
  */
-export interface DashboardItem {
-    /** The dashboard item's unique id. */
+export interface QuillReport {
+    /** The report's unique id. */
     id: string;
-    /** The name of the dashboard item. */
+    /** The name of the report. */
     name: string;
-    /** The name of the dashboard this item belongs to. */
+    /** The name of the dashboard this report belongs to. */
     dashboardName: string;
-    /** The rows of data returned from this item's query. */
+    /** The rows of data returned from this report's query. */
     rows: {
         [key: string]: string;
     }[];
-    /** The columns data returned from this item's query. */
+    /** The columns data returned from this report's query. */
     columns: Column[];
     /** The type of this chart. */
     chartType: string;
-    /** The table and field this chart uses for date filtering. */
+    /** The table and field this report uses for date filtering, if any. */
     dateField: {
         table: string;
         field: string;
@@ -61,15 +62,15 @@ export interface DashboardItem {
     /** The formatted comparison range aggregation value, if any. */
     comparisonAggregation?: string;
     /** The percent change in the aggragations, if any. */
-    aggregationPercentChange?: string;
+    aggregationPercentChange?: number;
     /** The label of the xAxis. */
     xAxisLabel: string;
-    /** The field to use for this item's xAxis. */
+    /** The field to use for this report's xAxis. */
     xAxisField: string;
-    /** The format for this item's xAxis. */
+    /** The format for this report's xAxis. */
     xAxisFormat: AxisFormat;
     /**
-     * A list of metadata about the yAxes of this item.
+     * A list of metadata about the yAxes of this report.
      */
     yAxisFields: {
         /** The field for this yAxis. */
@@ -80,17 +81,17 @@ export interface DashboardItem {
         format: AxisFormat;
     }[];
     /**
-     * The relative ordering of this dashboard item in relation to its sibling
-     * dashboard items. Ordering starts at 1 and counts up (eg. 1, 2, 3, etc.).
+     * The relative ordering of this report in relation to its siblings. Ordering
+     * starts at 1 and counts up (eg. 1, 2, 3, etc.).
      *
-     * Also note that dashboard items in the same section are first grouped by
-     * `chartType` and then each group is sorted by `order`. Currently, the first
-     * group is the `metric` items and the last group is the `table` items with
-     * the rest of the items in between.
+     * Also note that reports in the same section are first grouped by `chartType`
+     * and then each group is sorted by `order`. Currently, the first group is the
+     * `metric` reports and the last group is the `table` reports with the rest of
+     * the reports in between.
      */
     order: number;
     /**
-     * The rows of data returned from this item's query over the comparison date
+     * The rows of data returned from this report's query over the comparison date
      * range as opposed to the primary date range.
      */
     compareRows: {
@@ -110,24 +111,24 @@ export interface DashboardProps {
      */
     name?: string;
     /** A component that wraps a dashboard item for 'metric' chart types. */
-    MetricComponent?: ({ dashboardItem, onClick, isLoading, error, }: {
-        dashboardItem: DashboardItem;
-        onClick?: (item: DashboardItem) => void;
+    MetricComponent?: ({ report, onClick, isLoading, error, }: {
+        report: QuillReport;
+        onClick?: (report: QuillReport) => void;
         isLoading?: boolean;
         error?: string;
     }) => JSX.Element;
     /** A component that wraps a dashboard item for non-table, non-metric chart types. */
-    ChartComponent?: ({ dashboardItem, onClick, isLoading, error, children, }: {
-        dashboardItem: DashboardItem;
-        onClick?: (item: DashboardItem) => void;
+    ChartComponent?: ({ report, onClick, isLoading, error, children, }: {
+        report: QuillReport;
+        onClick?: (report: QuillReport) => void;
         isLoading?: boolean;
         error?: string;
         children?: ReactNode;
     }) => JSX.Element;
     /** A component that wraps a dashboard item for 'table' chart types. */
-    TableComponent?: ({ dashboardItem, onClick, isLoading, error, }: {
-        dashboardItem: DashboardItem;
-        onClick?: (item: DashboardItem) => void;
+    TableComponent?: ({ report, onClick, isLoading, error, }: {
+        report: QuillReport;
+        onClick?: (report: QuillReport) => void;
         isLoading?: boolean;
         error?: string;
     }) => JSX.Element;
@@ -142,10 +143,22 @@ export interface DashboardProps {
         }[];
         onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     }) => JSX.Element;
+    /** A multiselect component. */
+    MultiSelectComponent?: ({ label, value, options, onChange, width, }: {
+        value: string[];
+        width: number;
+        label?: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+        onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    }) => JSX.Element;
     /** A date range picker component. */
-    DateRangePickerComponent?: ({ dateRange, label, presetOptions, preset, onChangeDateRange, onChangePreset, }: {
+    DateRangePickerComponent?: ({ dateRange, label, presetOptions, preset, selectWidth, onChangeDateRange, onChangePreset, }: {
         preset: string;
         label?: string;
+        selectWidth?: number;
         dateRange: {
             startDate: Date;
             endDate: Date;
@@ -177,8 +190,8 @@ export interface DashboardProps {
     }) => JSX.Element;
     /** A fallback component displayed when an active dashboard has no items. */
     EmptyDashboardComponent?: () => JSX.Element;
-    /** A callback fired when a dashboard item is clicked. */
-    onClickDashboardItem?: (item: DashboardItem) => void;
+    /** A callback fired when a report is clicked. */
+    onClickReport?: (report: QuillReport) => void;
     /** A callback that is fired when the loading status of the dashboard changes. */
     onChangeLoading?: (isLoading: boolean) => void;
     /** Whether to hide the dashboard filters (default: `false`). */
@@ -210,6 +223,8 @@ export interface DashboardProps {
     containerStyle?: React.CSSProperties;
     /** The styles for the chart container. */
     chartContainerStyle?: React.CSSProperties;
+    /** An array of dashboard filters that are indicated by the frontend dev. */
+    filters?: Filter[];
 }
 /**
  * ### Quill Dashboard
@@ -231,7 +246,7 @@ export interface DashboardProps {
  * <Dashboard
  *   name="saved_reports"
  *   SelectComponent={MySelect}
- *   onClickDashboardItem={(item) => navigate(`/detail/${item.id}`)}
+ *   onClickReport={(report) => navigate(`/detail/${report.id}`)}
  *   MetricComponent={MyMetric}
  *   ChartComponent={MyChart}
  *   TableComponent={MyTable}
@@ -242,5 +257,5 @@ export interface DashboardProps {
  * ### API Reference
  * @see https://docs.quillsql.com/components/dashboard
  */
-export default function Dashboard({ name, SelectComponent, EmptyDashboardComponent, DateRangePickerComponent, MetricComponent, ChartComponent, TableComponent, DashboardSectionComponent, DashboardSectionContainerComponent, FilterContainerComponent, onClickDashboardItem, onChangeLoading, hideFilters, hideDateRangeFilter, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, containerStyle, className, chartContainerStyle, }: DashboardProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Dashboard({ name, SelectComponent, MultiSelectComponent, EmptyDashboardComponent, DateRangePickerComponent, MetricComponent, ChartComponent, TableComponent, DashboardSectionComponent, DashboardSectionContainerComponent, FilterContainerComponent, onClickReport, onChangeLoading, hideFilters, hideDateRangeFilter, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, containerStyle, className, chartContainerStyle, filters, }: DashboardProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Dashboard.d.ts.map