@quillsql/react 2.12.27 → 2.12.29

package/dist/esm/ChartBuilder.js

@@ -15,6 +15,7 @@ import { quillFormat } from './utils/valueFormatter';
 import { convertColumnInfoToColumnInternal, convertFieldTypeToJSType, } from './utils/columnProcessing';
 import { createTableNameToTableAliasMap, getColumnsByTableFromASTAndSchema, getSelectFromAST, } from './utils/astProcessing';
 import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { getDateBucketFromRange } from './utils/dates';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -49,6 +50,30 @@ function getPivotMetricOptions(pivot) {
         ];
     }
 }
+export function createInitialFormData(columns) {
+    const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
+    const formEmptyState = {
+        name: 'My Chart',
+        columns: columns.map((col) => {
+            return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
+        }),
+        xAxisField: columns?.[0]?.field || '',
+        xAxisFormat: columns?.[0]?.format || '',
+        yAxisFields: [
+            {
+                field: firstNumberColumn?.field || columns?.[0]?.field || '',
+                label: '',
+                format: firstNumberColumn?.format || columns?.[0]?.field || '',
+            },
+        ],
+        xAxisLabel: '',
+        chartType: firstNumberColumn ? 'line' : 'table',
+        pivot: null,
+        dateField: { table: '', field: '' },
+        template: false,
+    };
+    return formEmptyState;
+}
 function getChartTypeOptions(formData) {
     if (formData.pivot && !formData.pivot.rowField) {
         return CHART_TYPES.filter((elem) => elem === 'metric' || elem === 'table').map((elem) => ({
@@ -235,7 +260,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, numberOfRows, 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, 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, }) {
     const dateRange = dr;
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -336,6 +361,7 @@ 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 specificDashboardFilter = useMemo(() => {
         return dashboardFilters.filter((f) => f && defaultDashboardName === f.dashboardName);
     }, [dashboardFilters]);
@@ -539,7 +565,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             }
             setFormData({
                 ...curFormData,
-                dashboardName: report
+                dashboardName: report && report.dashboardName
                     ? report?.dashboardName
                     : dashboardOptions[0]?.label,
                 template: isTemplate,
@@ -548,26 +574,29 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         }
         getFormData();
     }, []);
-    const selectedPivotTable = useMemo(() => {
-        if (formData.pivot && rows) {
-            if (intialLoad &&
-                pivotData &&
-                pivotData.rows &&
-                pivotData.rows.length > 0) {
-                setInitialLoad(false);
-                return pivotData;
-            }
-            else {
-                setInitialLoad(false);
-                return generatePivotTable(formData.pivot, rows, dateRange, isComparison ?? false);
+    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';
+                })
+                : undefined;
+            let dateBucket = undefined;
+            if (overrideDateRange) {
+                dateBucket = getDateBucketFromRange(overrideDateRange);
             }
+            setSelectedPivotTable(await generatePivotTable(pivot, rows, overrideDateRange ?? dateRange, isComparison ?? false, -1, dateFilter ? dateFilter.comparisonRange : undefined, dateBucket, report, client, uniqueValues));
         }
         else {
-            return undefined;
+            setSelectedPivotTable(undefined);
         }
-    }, [formData.pivot, rows]);
+    };
     const formattedRows = useMemo(() => {
-        if (selectedPivotTable && formData.chartType === 'table') {
+        if (selectedPivotTable &&
+            selectedPivotTable.columns &&
+            formData.chartType === 'table') {
             const columns = selectedPivotTable.columns;
             columns.forEach((col, index) => {
                 // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
@@ -687,7 +716,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             setFormData({ ...formData, [fieldName]: value });
         }
     };
-    const handleAddPivot = (pivot) => {
+    const handleAddPivot = async (pivot, uniqueValues, dateRange, pivotData) => {
         const newPivotFormData = pivotFormData(pivot);
         // Only keep the old chart type if the shapes of the pivots are the same
         // since the valid chart types for some pivots might have changed (eg. going
@@ -697,6 +726,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             Boolean(formData.pivot?.columnField) === Boolean(pivot.columnField);
         const isNewChartType = formData.chartType !== newPivotFormData.chartType;
         const keepOldChartType = isNewChartType && isPivotSameShape;
+        if (pivotData) {
+            setSelectedPivotTable({
+                rows: pivotData.rows,
+                columns: pivotData.columns,
+            });
+        }
+        else {
+            await fetchPivotData(pivot, uniqueValues, dateRange);
+        }
         setFormData((formData) => ({
             ...formData,
             ...newPivotFormData,
@@ -712,6 +750,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             dashboardName: formData.dashboardName,
             pivot: null,
         });
+        setSelectedPivotTable(undefined);
     };
     const handleAddField = (fieldName) => {
         if (fieldName === 'columns') {
@@ -930,9 +969,10 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                         }, children: [((!isHorizontalView && windowWidth >= 1200) ||
                                 formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: {
                                     ...formData,
-                                    rows: rows,
+                                    rows: chartRows,
                                     pivotRows: selectedPivotTable?.rows || undefined,
                                     pivotColumns: selectedPivotTable?.columns || undefined,
+                                    rowCount,
                                 }, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
                                     width: '100%',
                                     height: formData.chartType === 'metric'
@@ -954,13 +994,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                         onPageChange && onPageChange(page);
                                     }, onSortChange: (sort) => {
                                         onSortChange && onSortChange(sort);
-                                    }, numberOfRows: numberOfRows, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                    }, rowCount: rowCount, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                         ? selectedPivotTable.columns
                                         : formData.columns, onPageChange: (page) => {
                                         onPageChange && onPageChange(page);
                                     }, onSortChange: (sort) => {
                                         onSortChange && onSortChange(sort);
-                                    }, numberOfRows: numberOfRows, isLoading: isLoading })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                                    }, rowCount: rowCount, isLoading: isLoading })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 20,
@@ -993,7 +1033,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, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, 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: processedColumns, 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, report: report }) }), formData.pivot && selectedPivotTable && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -1053,13 +1093,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                                 onPageChange && onPageChange(page);
                                             }, onSortChange: (sort) => {
                                                 onSortChange && onSortChange(sort);
-                                            }, numberOfRows: numberOfRows, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
+                                            }, rowCount: rowCount, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                                 ? selectedPivotTable.columns
                                                 : formData.columns, onPageChange: (page) => {
                                                 onPageChange && onPageChange(page);
                                             }, onSortChange: (sort) => {
                                                 onSortChange && onSortChange(sort);
-                                            }, numberOfRows: numberOfRows, isLoading: isLoading })) })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                            }, rowCount: rowCount, isLoading: isLoading })) })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                 }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&

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

@@ -9,6 +9,8 @@ import { mergeComparisonRange } from './utils/merge';
 import { QuillCard } from './components/QuillCard';
 import { processFilterErrorList } from './utils/errorProcessing';
 import { cleanDashboardItem } from './utils/dashboard';
+import { getPaginatedRows } from './utils/tableProcessing';
+import { MAX_COLUMN_ROWS_LIMIT } from './utils/constants';
 /**
  * ### Quill Chart Editor
  *
@@ -47,10 +49,10 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
             dashboard?.[reportId].dashboardName === f.dashboardName);
     }, [dashboardFilters]);
     const [client, _] = useContext(ClientContext);
-    const [dashboardItem, setDashboardItem] = useState(dashboard?.[reportId]);
+    const [report, setReport] = useState(dashboard?.[reportId]);
     const [isLoading, setIsLoading] = useState(false);
     const [additionalProcessing, setAdditionalProcessing] = useState({});
-    const [numberOfRows, setNumberOfRows] = useState(undefined);
+    const [rowCount, setRowCount] = useState(undefined);
     const [previousPage, setPreviousPage] = useState(0);
     const [customFields] = useContext(CustomFieldContext);
     const dateFilter = Object.values(specificDashboardFilter).find((filter) => filter.filterType == 'date_range');
@@ -75,24 +77,57 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
         };
     }, []);
     const onPageChange = (page) => {
-        if (((previousPage < page.currentPage &&
-            (page.currentPage * page.rowsPerPage) % 100 === 0) ||
-            (previousPage > page.currentPage &&
-                (previousPage * page.rowsPerPage) % 100 === 0)) &&
-            dashboardItem.chartType === 'table' &&
-            !dashboardItem.pivot) {
-            getChartOptions({ page });
+        if (report?.rowCount) {
+            if ((previousPage < page.currentPage &&
+                (page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT ===
+                    0) ||
+                (previousPage > page.currentPage &&
+                    (previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
+                updateTableRows({ page });
+            }
+        }
+        else {
+            if ((previousPage < page.currentPage &&
+                (page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT ===
+                    0) ||
+                (previousPage > page.currentPage &&
+                    (previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
+                getChartOptions({ page });
+            }
         }
         setPreviousPage(page.currentPage);
     };
     const onSortChange = (sort) => {
-        if (dashboardItem &&
-            dashboardItem.chartType === 'table' &&
-            !dashboardItem.pivot) {
-            getChartOptions({ sort });
+        if (report.chartType === 'table' && report.pivot) {
+            return;
+        }
+        if (report?.rowCount) {
+            setPreviousPage(0);
+            updateTableRows({ sort, page: { currentPage: 0, rowsPerPage: 20 } });
+        }
+        else {
+            getChartOptions({ sort, page: { currentPage: 0, rowsPerPage: 20 } });
             setPreviousPage(0);
         }
     };
+    const updateTableRows = async (processing) => {
+        if (!isLoading) {
+            setIsLoading(true);
+            try {
+                const updatedProcessing = { ...additionalProcessing, ...processing };
+                let paginatedRows = await getPaginatedRows(report, client, updatedProcessing, specificDashboardFilter, customFields);
+                setReport({ ...report, rows: paginatedRows });
+                setTimeout(() => {
+                    setIsLoading(false);
+                }, 200);
+                setAdditionalProcessing(updatedProcessing);
+            }
+            catch (e) {
+                console.log('Error fetching chart: ', e);
+                setIsLoading(false);
+            }
+        }
+    };
     const getChartOptions = async (processing) => {
         if (!isLoading) {
             setIsLoading(true);
@@ -139,10 +174,10 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
                         mergeComparisonRange(resp);
                         if (resp.chartType === 'table' && resp.compareRows[0]) {
                             if (resp.compareRows[0]?.count) {
-                                setNumberOfRows(resp.compareRows[0]?.count);
+                                setRowCount(resp.compareRows[0]?.count);
                             }
                             else if (resp.compareRows[0]?.COUNT) {
-                                setNumberOfRows(resp.compareRows[0]?.COUNT);
+                                setRowCount(resp.compareRows[0]?.COUNT);
                             }
                         }
                     }
@@ -151,11 +186,11 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
                         filtersApplied: specificDashboardFilter,
                     };
                     const cleanedReport = await cleanDashboardItem(curDashboardItem, specificDashboardFilter);
-                    setDashboardItem({ ...dashboardItem, ...cleanedReport });
+                    setReport({ ...report, ...cleanedReport });
                     dispatch({
                         type: 'UPDATE_DASHBOARD_ITEM',
                         id: reportId,
-                        data: { ...dashboardItem, ...cleanedReport },
+                        data: { ...report, ...cleanedReport },
                     });
                 }
                 setTimeout(() => {
@@ -171,27 +206,32 @@ export default function ChartEditor({ isOpen, reportId, isAdmin = false, destina
     };
     useEffect(() => {
         let isSubscribed = true;
-        if (!dashboardItem) {
+        if (!report) {
             getChartOptions();
         }
         else {
-            if (dashboardItem.chartType === 'table' && !dashboardItem.pivot) {
-                getChartOptions({ page: { currentPage: 0, rowsPerPage: 10 } });
-                setNumberOfRows(1);
+            if (report.chartType === 'table' && report.pivot) {
+                // USE PIVOT ROW COUNT WHEN TABLE AND PIVOT
+                setRowCount(undefined);
+            }
+            else {
+                setRowCount(report.rowCount ?? report.rows.length);
             }
         }
         return () => {
             isSubscribed = false;
         };
     }, [client, reportId]);
-    if (!dashboardItem) {
+    if (!report) {
         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, { report: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, query: dashboardItem.queryString, pivot: dashboardItem.pivot, 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, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton, FormContainer: ChartBuilderFormContainer, onPageChange: onPageChange, onSortChange: onSortChange, numberOfRows: numberOfRows, onClickChartElement: onClickChartElement, pivotData: {
-                    rows: dashboardItem.pivotRows,
-                    columns: dashboardItem.pivotColumns,
-                } }) }) }));
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { report: report, rows: report.rows, columns: report.columns, query: report.queryString, pivot: report.pivot, 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, 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
+                    ? {
+                        rows: report.pivotRows || [],
+                        columns: report.pivotColumns,
+                    }
+                    : undefined }) }) }));
 }

package/dist/esm/Context.d.ts

@@ -1,29 +1,11 @@
 import React from 'react';
-export declare const DateFilterContext: React.Context<any>;
 export declare const SchemaContext: React.Context<any>;
 export declare const CustomFieldContext: React.Context<any>;
-export declare const ColumnsContext: React.Context<any>;
-export declare const RowsContext: React.Context<any>;
-export declare const SelectedSidebarIndexContext: React.Context<any>;
-export declare const HistoryContext: React.Context<any>;
-export declare const SavedQueriesContext: React.Context<any>;
-export declare const SaveQueryModalStatusContext: React.Context<any>;
-export declare const EditorQueryContext: React.Context<any>;
 export declare const ThemeContext: React.Context<any>;
 export declare const ClientContext: React.Context<any>;
-export declare const CreateVisualizationModalVisibleContext: React.Context<any>;
-export declare const ActiveVisualizationContext: React.Context<any>;
-export declare const QueryResultsLoadingContext: React.Context<any>;
-export declare const EditVisualizationModalVisibleContext: React.Context<any>;
-export declare const ReportBuilderQueryContext: React.Context<any>;
-export declare const SavedReportsQueryContext: React.Context<any>;
+export declare const DashboardDataContext: React.Context<any>;
 export declare const DashboardContext: React.Context<any>;
 export declare const DashboardFiltersContext: React.Context<any>;
 export declare const ReportFiltersContext: React.Context<any>;
-export declare const ChartDateFiltersContext: React.Context<any>;
-export declare const useChartDateFilters: () => {
-    getChartDateFilterById: (id: string) => any;
-    setChartDateFilter: (id: string, dateFilter: any) => void;
-};
 export declare const ContextProvider: ({ children, initialTheme, publicKey, environment, authToken, customerId, userId, queryEndpoint, queryHeaders, withCredentials, }: any) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,iBAAiB,oBAAwC,CAAC;AACvE,eAAO,MAAM,aAAa,oBAAwC,CAAC;AACnE,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,cAAc,oBAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,oBAA0C,CAAC;AACnE,eAAO,MAAM,2BAA2B,oBAAuC,CAAC;AAChF,eAAO,MAAM,cAAc,oBAAwC,CAAC;AACpE,eAAO,MAAM,mBAAmB,oBAAwC,CAAC;AACzE,eAAO,MAAM,2BAA2B,oBAGtC,CAAC;AACH,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,oBAA0C,CAAC;AACpE,eAAO,MAAM,aAAa,oBAA0C,CAAC;AACrE,eAAO,MAAM,sCAAsC,oBAGjD,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,oCAAoC,oBAG/C,CAAC;AACH,eAAO,MAAM,yBAAyB,oBAAwC,CAAC;AAC/E,eAAO,MAAM,wBAAwB,oBAAwC,CAAC;AAC9E,eAAO,MAAM,gBAAgB,oBAAwC,CAAC;AACtE,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAC1E,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAE7E,eAAO,MAAM,mBAAmB;iCAKM,MAAM;6BACV,MAAM,cAAc,GAAG;CAQxD,CAAC;AA6DF,eAAO,MAAM,eAAe,qIAWzB,GAAG,mDAkQL,CAAC"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAK9E,eAAO,MAAM,aAAa,oBAAwC,CAAC;AACnE,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,oBAA0C,CAAC;AACpE,eAAO,MAAM,aAAa,oBAA0C,CAAC;AACrE,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAC1E,eAAO,MAAM,gBAAgB,oBAAwC,CAAC;AACtE,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAmF1E,eAAO,MAAM,eAAe,qIAWzB,GAAG,mDAwLL,CAAC"}

package/dist/esm/Context.js

@@ -1,55 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, createContext, useEffect, useReducer, useContext, } from 'react';
+import { useState, createContext, useEffect, useReducer } from 'react';
 import { getCustomFieldInfo } from './utils/schema';
 const dummySetter = () => { };
-export const DateFilterContext = createContext([[], dummySetter]);
 export const SchemaContext = createContext([[], dummySetter]);
 export const CustomFieldContext = createContext([[], dummySetter]);
-export const ColumnsContext = createContext([null, dummySetter]);
-export const RowsContext = createContext([null, dummySetter]);
-export const SelectedSidebarIndexContext = createContext([0, dummySetter]);
-export const HistoryContext = createContext([[], dummySetter]);
-export const SavedQueriesContext = createContext([[], dummySetter]);
-export const SaveQueryModalStatusContext = createContext([
-    'HIDDEN',
-    dummySetter,
-]);
-export const EditorQueryContext = createContext(['', dummySetter]);
 export const ThemeContext = createContext([null, dummySetter]);
 export const ClientContext = createContext([null, dummySetter]);
-export const CreateVisualizationModalVisibleContext = createContext([
-    false,
-    dummySetter,
-]);
-export const ActiveVisualizationContext = createContext([
-    null,
-    dummySetter,
-]);
-export const QueryResultsLoadingContext = createContext([
-    false,
-    dummySetter,
-]);
-export const EditVisualizationModalVisibleContext = createContext([
-    false,
-    dummySetter,
-]);
-export const ReportBuilderQueryContext = createContext(['', dummySetter]);
-export const SavedReportsQueryContext = createContext(['', dummySetter]);
+export const DashboardDataContext = createContext([{}, dummySetter]);
 export const DashboardContext = createContext([{}, dummySetter]);
 export const DashboardFiltersContext = createContext([[], dummySetter]);
 export const ReportFiltersContext = createContext([{}, dummySetter]);
-export const ChartDateFiltersContext = createContext([{}, dummySetter]);
-export const useChartDateFilters = () => {
-    const { chartDateFilters, setChartDateFilters } = useContext(ChartDateFiltersContext);
-    const getChartDateFilterById = (id) => chartDateFilters[id];
-    const setChartDateFilter = (id, dateFilter) => {
-        setChartDateFilters((prev) => ({ ...prev, [id]: dateFilter }));
-    };
-    return {
-        getChartDateFilterById,
-        setChartDateFilter,
-    };
-};
 const dashboardReducer = (state, action) => {
     switch (action.type) {
         case 'UPDATE_DASHBOARD_ITEM':
@@ -71,6 +31,27 @@ const dashboardReducer = (state, action) => {
             return state;
     }
 };
+const dashboardDataReducer = (state, action) => {
+    switch (action.type) {
+        case 'UPDATE_DASHBOARD':
+            return {
+                ...state,
+                [action.id]: {
+                    ...state[action.id],
+                    ...action.data,
+                },
+            };
+        case 'ADD_DASHBOARD':
+            return {
+                ...state,
+                [action.id]: action.data,
+            };
+        case 'CLEAR_DASHBOARD':
+            return {};
+        default:
+            return state;
+    }
+};
 const reportFiltersReducer = (state, action) => {
     switch (action.type) {
         case 'UPDATE_REPORT_FILTER':
@@ -105,23 +86,10 @@ const dashboardFiltersReducer = (state, action) => {
 export const ContextProvider = ({ children, initialTheme, publicKey, environment, authToken, customerId, userId, queryEndpoint, queryHeaders, withCredentials, }) => {
     const [client, setClient] = useState(null);
     const [theme, setTheme] = useState(null);
-    const [columns, setColumns] = useState(null);
-    const [rows, setRows] = useState(null);
     const [schema, setSchema] = useState([]);
     const [customFields, setCustomFields] = useState(null);
-    const [selectedSidebarIndex, setSelectedSidebarIndex] = useState(0);
-    const [history, setHistory] = useState([]);
-    const [savedQueries, setSavedQueries] = useState([]);
-    // REPORT_BUILDER, SQL_EDITOR, HIDDEN
-    const [saveQueryModalStatus, setSaveQueryModalStatus] = useState('HIDDEN');
-    const [editorQuery, setEditorQuery] = useState('');
-    const [savedReportsQuery, setSavedReportsQuery] = useState('');
-    const [reportBuilderQuery, setReportBuilderQuery] = useState('');
-    const [createVisualizationModalVisible, setCreateVisualizationModalVisible] = useState(false);
-    const [activeVisualization, setActiveVisualization] = useState(null);
-    const [queryResultsLoading, setQueryResultsLoading] = useState(false);
-    const [editVisualizationModalVisible, setEditVisualizationModalVisible] = useState(false);
     const [dashboard, dispatch] = useReducer(dashboardReducer, {});
+    const [dashboardData, dashboardDataDispatch] = useReducer(dashboardDataReducer, {});
     const [dashboardFilters, dashboardFiltersDispatch] = useReducer(dashboardFiltersReducer, []);
     const [reportFilters, reportFiltersDispatch] = useReducer(reportFiltersReducer, {});
     const customFieldHelper = async (client) => {
@@ -242,32 +210,14 @@ export const ContextProvider = ({ children, initialTheme, publicKey, environment
             dispatch({ type: 'CLEAR_DASHBOARD' });
         }
     }, [customerId, environment]);
-    if (!theme || !client || !customFields) {
+    if (!theme) {
         return null;
     }
-    return (_jsx(ClientContext.Provider, { value: [client, setClient], children: _jsx(ThemeContext.Provider, { value: [theme, setTheme], children: _jsx(SchemaContext.Provider, { value: [schema, setSchema], children: _jsx(CustomFieldContext.Provider, { value: [customFields, setCustomFields], children: _jsx(ColumnsContext.Provider, { value: [columns, setColumns], children: _jsx(RowsContext.Provider, { value: [rows, setRows], children: _jsx(SelectedSidebarIndexContext.Provider, { value: [selectedSidebarIndex, setSelectedSidebarIndex], children: _jsx(HistoryContext.Provider, { value: [history, setHistory], children: _jsx(SavedQueriesContext.Provider, { value: [savedQueries, setSavedQueries], children: _jsx(SaveQueryModalStatusContext.Provider, { value: [saveQueryModalStatus, setSaveQueryModalStatus], children: _jsx(CreateVisualizationModalVisibleContext.Provider, { value: [
-                                                    createVisualizationModalVisible,
-                                                    setCreateVisualizationModalVisible,
-                                                ], children: _jsx(EditorQueryContext.Provider, { value: [editorQuery, setEditorQuery], children: _jsx(ActiveVisualizationContext.Provider, { value: [
-                                                            activeVisualization,
-                                                            setActiveVisualization,
-                                                        ], children: _jsx(QueryResultsLoadingContext.Provider, { value: [
-                                                                queryResultsLoading,
-                                                                setQueryResultsLoading,
-                                                            ], children: _jsx(EditVisualizationModalVisibleContext.Provider, { value: [
-                                                                    editVisualizationModalVisible,
-                                                                    setEditVisualizationModalVisible,
-                                                                ], children: _jsx(ReportBuilderQueryContext.Provider, { value: [
-                                                                        reportBuilderQuery,
-                                                                        setReportBuilderQuery,
-                                                                    ], children: _jsx(SavedReportsQueryContext.Provider, { value: [
-                                                                            savedReportsQuery,
-                                                                            setSavedReportsQuery,
-                                                                        ], children: _jsx(DashboardContext.Provider, { value: { dashboard, dispatch }, children: _jsx(DashboardFiltersContext.Provider, { value: {
-                                                                                    dashboardFilters,
-                                                                                    dashboardFiltersDispatch,
-                                                                                }, children: _jsx(ReportFiltersContext.Provider, { value: {
-                                                                                        reportFilters,
-                                                                                        reportFiltersDispatch,
-                                                                                    }, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (_jsx(ClientContext.Provider, { value: [client, setClient], children: _jsx(ThemeContext.Provider, { value: [theme, setTheme], children: _jsx(SchemaContext.Provider, { value: [schema, setSchema], children: _jsx(CustomFieldContext.Provider, { value: [customFields, setCustomFields], children: _jsx(DashboardContext.Provider, { value: { dashboard, dispatch }, children: _jsx(DashboardDataContext.Provider, { value: { dashboardData, dashboardDataDispatch }, children: _jsx(DashboardFiltersContext.Provider, { value: {
+                                    dashboardFilters,
+                                    dashboardFiltersDispatch,
+                                }, children: _jsx(ReportFiltersContext.Provider, { value: {
+                                        reportFilters,
+                                        reportFiltersDispatch,
+                                    }, children: children }) }) }) }) }) }) }) }));
 };

package/dist/esm/Dashboard.d.ts

@@ -131,6 +131,10 @@ export interface QuillReportInternal extends QuillReport {
         /** The label to use for this yAxis. */
         label: string;
     }[];
+    /** Table row count */
+    rowCount?: number;
+    /** An array of queries that are used to construct the unprocessed report */
+    itemQuery?: string[];
 }
 /**
  * Props for the Quill Dashboard component.
@@ -159,11 +163,12 @@ export interface DashboardProps {
         onClickChartElement?: (data: any) => void;
     }) => JSX.Element;
     /** A component that wraps a dashboard item for 'table' chart types. */
-    TableComponent?: ({ report, onClick, isLoading, error, onPageChange, onSortChange, }: {
+    TableComponent?: ({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }: {
         report: QuillReport;
         onClick?: (report: QuillReport) => void;
         isLoading?: boolean;
         error?: string;
+        rowCount?: number;
         onPageChange?: (page: {
             currentPage: number;
             rowsPerPage: number;