@quillsql/react 2.12.26 → 2.12.28

package/dist/esm/SQLEditor.js

@@ -14,6 +14,7 @@ import { QuillSelectComponent } from './components/QuillSelect';
 import { quillFormat } from './utils/valueFormatter';
 import { convertPostgresColumn } from './utils/columnProcessing';
 import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { MAX_COLUMN_ROWS_LIMIT } from './utils/constants';
 function defineEditorTheme(monaco, theme) {
     monaco.editor.defineTheme('onedark', {
         base: theme.darkMode ? 'vs-dark' : 'vs',
@@ -64,7 +65,7 @@ function setEditorTheme(editor, monaco) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = QuillLoadingComponent, ModalComponent = MemoizedModal, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ChartBuilderFormContainer = QuillChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement }) {
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = QuillLoadingComponent, ModalComponent = MemoizedModal, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ChartBuilderFormContainer = QuillChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -82,6 +83,11 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
     const formRef = useRef(null);
     const [searchBarWidth, setSearchBarWidth] = useState(200);
     const [formattedRows, setFormattedRows] = useState([]);
+    const [numberOfRows, setNumberOfRows] = useState(undefined);
+    const [previousPage, setPreviousPage] = useState(0);
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: { currentPage: 0, rowsPerPage: 20 },
+    });
     useEffect(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -120,7 +126,20 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
     const handleClearQuery = async () => {
         setQuery('');
     };
-    const handleRunQuery = async () => {
+    const onPageChange = (page) => {
+        if ((previousPage < page.currentPage &&
+            (page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0) ||
+            (previousPage > page.currentPage &&
+                (previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
+            handleRunQuery({ ...currentProcessing, page });
+        }
+        setPreviousPage(page.currentPage);
+    };
+    const onSortChange = (sort) => {
+        handleRunQuery({ sort, page: { currentPage: 0, rowsPerPage: 20 } });
+        setPreviousPage(0);
+    };
+    const handleRunQuery = async (processing) => {
         try {
             setDisplayTable(true);
             setSqlQueryLoading(true);
@@ -134,6 +153,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                     databaseType: client?.databaseType,
                     getCustomFields: !client.customerId || client.customerId === '*' ? false : true,
                     customFieldsByTable: customFields,
+                    // additionalProcessing: processing,
                 },
             };
             const cloudBody = { query };
@@ -147,12 +167,14 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
             }
             setSqlQueryLoading(false);
             setErrorMessage('');
+            setCurrentProcessing(processing);
             if (resp.rows.length === 0) {
                 setErrorMessage('No data found');
             }
             const temp_rows = resp.rows && resp.rows.length ? resp.rows : [];
             const processedFields = resp.fields.map((elem) => convertPostgresColumn(elem));
             setRows(temp_rows);
+            // setNumberOfRows(resp.compareRows[0]?.count || temp_rows.length);
             setFormattedRows(temp_rows.map((row) => {
                 return processedFields.reduce((formattedRow, column) => {
                     // Apply the format function to each field in the row
@@ -241,7 +263,9 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                             gap: 12,
                                             paddingTop: 16,
                                             paddingBottom: 16,
-                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), _jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" })] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query || '', setQuery: setQuery, handleRunQuery: handleRunQuery, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
+                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), _jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" })] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query || '', setQuery: setQuery, handleRunQuery: () => {
+                                                handleRunQuery(currentProcessing);
+                                            }, handleFixWithAI: handleFixWithAI, isNewQueryEnabled: isNewQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             height: 'calc(50% - 108px)',

package/dist/esm/Table.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { MultiSelectComponentProps, SelectComponentProps } from './components/UiComponents';
+import { DateRangePickerComponentProps } from './DateRangePicker/QuillDateRangePicker';
 export interface TableColumn {
     label: string;
     field: string;
@@ -78,6 +80,8 @@ export interface TableProps {
      * Whether to show the download csv button.
      */
     hideCSVDownloadButton?: boolean;
+    /** Whether to hide the table filters component, deafulted to true */
+    hideFilters?: boolean;
     /**
      * Whether this table component is loading.
      */
@@ -90,6 +94,16 @@ export interface TableProps {
      * A loading component to show when the table is loading.
      */
     LoadingComponent?: () => JSX.Element;
+    /** A select component prop for the table filters */
+    SelectComponent?: (props: SelectComponentProps) => JSX.Element;
+    /** A multi select component prop for the table filters */
+    MultiSelectComponent?: (props: MultiSelectComponentProps) => JSX.Element;
+    /** A date range picker component prop for the table filters */
+    DateRangePickerComponent?: (props: DateRangePickerComponentProps) => JSX.Element;
+    /** A filter container component component prop for the table filters */
+    FilterContainerComponent?: ({ children, }: {
+        children: ReactNode;
+    }) => JSX.Element;
     /**
      * Styles the top-level container of the Table.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAe9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAkC/B,CAAC;AA+GF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAuBf,OAAO,EACL,yBAAyB,EAEzB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAInC,OAAO,EACL,6BAA6B,EAE9B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAoCD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC,oDAAoD;IACpD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAE/D,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAEzE,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,CACzB,KAAK,EAAE,6BAA6B,KACjC,GAAG,CAAC,OAAO,CAAC;IAEjB,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,CAAC,EAC1B,QAAQ,GACT,EAAE;QACD,QAAQ,EAAE,SAAS,CAAC;KACrB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAuC/B,CAAC;AA6PF,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -1,13 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
-import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, } from './Context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState, } from 'react';
+import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, } from './Context';
 import { getData } from './utils/dataFetcher';
-import { mergeComparisonRange } from './utils/merge';
 import QuillTable from './components/QuillTable';
-import { useMemoizedRows } from './hooks/useFormat';
 import { useExport } from './hooks/useExport';
 import { processFilterErrorList } from './utils/errorProcessing';
-import { didFiltersChange } from './Chart';
+import { cleanDashboardItem } from './utils/dashboard';
+import { quillFormat } from './utils/valueFormatter';
+import { processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
+import { QuillFilterContainerComponent, } from './components/UiComponents';
+import { DashboardFilter } from './components/Dashboard/DashboardFilter';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
+import { QuillDateRangePicker, } from './DateRangePicker/QuillDateRangePicker';
+import { useTheme } from './hooks';
 /**
  * ### Quill Table
  *
@@ -47,69 +53,147 @@ const Table = (props) => {
     if ('rows' in data && 'columns' in data) {
         return (_jsx(QuillTable, { hideCSVDownloadButton: data.hideCSVDownloadButton, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
-    return (_jsx(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboard: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+    return (_jsx(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboardContext: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
 };
-const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, LoadingComponent, }) => {
-    const specificDashboardFilter = useMemo(() => {
-        return dashboardFilters
-            .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-            .filter((f) => dashboard &&
-            dashboard[reportId] &&
-            f &&
-            f.dashboardName === dashboard[reportId].dashboardName);
-    }, [dashboardFilters, dashboard]);
-    const { rows, loading } = useMemoizedRows(reportId);
+const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, hideFilters = true, LoadingComponent, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, }) => {
+    const [loading, setLoading] = useState(false);
+    const [initialLoad, setInitialLoad] = useState(true);
     const { downloadCSV } = useExport(reportId);
     const [customFields] = useContext(CustomFieldContext);
-    useEffect(() => {
-        let isSubscribed = true;
-        async function getChartOptions() {
-            if (!didFiltersChange(dashboard[reportId], specificDashboardFilter)) {
-                return;
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [tableFilters, setTableFilters] = useState([]);
+    const [filterUpdateIndex, setFilterUpdateIndex] = useState(0);
+    const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
+    const theme = useTheme();
+    const getChartData = async (useReportTask = true, reportFilterInfo) => {
+        try {
+            const filters = reportFilterInfo.filters;
+            setLoading(true);
+            if (!client.databaseType ||
+                client.databaseType.toLowerCase() !== 'postgresql') {
+                useReportTask = false;
             }
-            if (isSubscribed) {
-                try {
-                    const hostedBody = {
-                        metadata: {
-                            dashboardItemId: reportId,
-                            orgId: client.customerId || '*',
-                            task: 'item',
-                            filters: [...Object.values(specificDashboardFilter)],
-                            clientId: client.publicKey,
-                            databaseType: client?.databaseType,
-                            customFields,
-                        },
-                    };
-                    const cloudBody = {
-                        id: reportId,
-                        filters: [...Object.values(specificDashboardFilter)],
-                    };
-                    const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                    processFilterErrorList(resp);
-                    if (resp && resp.name !== 'error') {
-                        if (resp.compareRows) {
-                            mergeComparisonRange(resp);
-                        }
-                        dispatch({
-                            type: 'UPDATE_DASHBOARD_ITEM',
-                            id: reportId,
-                            data: {
-                                ...resp,
-                                filtersApplied: specificDashboardFilter,
-                            },
-                        });
-                    }
+            const hostedBody = {
+                metadata: {
+                    reportId,
+                    dashboardItemId: reportId,
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    task: useReportTask ? 'report' : 'item',
+                    getDefaultDashboardFilters: filters ? false : true,
+                    databaseType: client?.databaseType,
+                    customFields,
+                    filters,
+                },
+            };
+            const cloudBody = {
+                id: reportId,
+            };
+            const resp = await getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+            processFilterErrorList(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                const cleanedReport = await cleanDashboardItem(resp, filters ? filters : resp.filters);
+                if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
+                    cleanedReport.columns = cleanedReport.yAxisFields;
                 }
-                catch (e) {
-                    console.log('Error fetching chart: ', e);
+                let filterArray = filters;
+                if (!filterArray) {
+                    filterArray = resp.filters
+                        ? resp.filters.map((filter) => {
+                            return processFilterFromBackend(filter, resp.rows);
+                        })
+                        : [];
+                    reportFiltersDispatch({
+                        type: 'UPDATE_REPORT_FILTER',
+                        id: reportId,
+                        data: {
+                            filters: filterArray,
+                            updateIndex: reportFilterInfo.updateIndex,
+                        },
+                    });
                 }
+                setFilterUpdateIndex(reportFilterInfo.updateIndex);
+                setTableFilters(filterArray);
             }
+            setRows(resp.rows.map((row) => {
+                return resp.columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = quillFormat({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            }));
+            setColumns(resp.columns);
+            setLoading(false);
+        }
+        catch (e) {
+            if (useReportTask) {
+                getChartData(false, reportFilterInfo);
+            }
+            console.log('Error fetching chart: ', e);
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        // IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LAOD DON'T FETCH DATA
+        if (initialLoad && dashboardContext[reportId]) {
+            setInitialLoad(false);
+            return;
+        }
+        setInitialLoad(false);
+        let parsedReportFilters = reportFilters[reportId]
+            ? reportFilters[reportId]
+            : { updateIndex: 0 };
+        getChartData(true, parsedReportFilters);
+    }, [client.customerId, reportId, reportFilters[reportId]?.updateIndex]);
+    useEffect(() => {
+        if (!dashboardContext || !dashboardContext[reportId]) {
+            return;
         }
-        getChartOptions();
-        return () => {
-            isSubscribed = false;
-        };
-    }, [specificDashboardFilter, client.customerId, reportId]);
-    return (_jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, columns: dashboard[reportId]?.columns || [], rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
+        setRows(dashboardContext[reportId].rows.map((row) => {
+            return dashboardContext[reportId].columns.reduce((formattedRow, column) => {
+                // Apply the format function to each field in the row
+                const formattedValue = quillFormat({
+                    value: row[column.field],
+                    format: column.format,
+                });
+                formattedRow[column.field] = formattedValue;
+                return formattedRow;
+            }, {});
+        }));
+        setColumns(dashboardContext[reportId].columns);
+    }, []);
+    return (_jsxs("div", { children: [!hideFilters && (_jsx("div", { style: {
+                    display: 'flex',
+                    boxSizing: 'content-box',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: _jsx(FilterContainerComponent, { children: tableFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
+                            const updatedFilters = tableFilters.map((f) => {
+                                if (f.field === filter.field ||
+                                    (f.filterType === 'date_range' &&
+                                        filter.filterType === 'date_range')) {
+                                    return updateFilter(f, value, comparison);
+                                }
+                                return f;
+                            });
+                            setTableFilters(updatedFilters);
+                            getChartData(true, {
+                                filters: updatedFilters,
+                                updateIndex: filterUpdateIndex + 1,
+                            });
+                            reportFiltersDispatch({
+                                type: 'UPDATE_REPORT_FILTER',
+                                id: reportId,
+                                data: {
+                                    filters: updatedFilters,
+                                    updateIndex: filterUpdateIndex + 1,
+                                },
+                            });
+                        }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), _jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV })] }));
 };
 export default Table;

package/dist/esm/components/Chart/ChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAsUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAK5D"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAwUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAK5D"}

package/dist/esm/components/Chart/ChartTooltip.js

@@ -174,10 +174,11 @@ function getTooltipLabel(props, altTooltipLabel, isDateXAxis) {
 // The chart tooltip to display for comparison labels (eg. "previous period").
 function ChartTooltipComparison(props) {
     const isDateXAxis = isDateFormat(props.xAxisFormat);
-    const altTooltipLabel = props.payload[0]?.dataKey
-        .replace('comparison_', '')
-        .replaceAll('_', ' ')
-        .toLowerCase();
+    const altTooltipLabel = props.payload[0]?.name.replace('comparison ', '') ||
+        props.payload[0]?.dataKey
+            .replace('comparison_', '')
+            .replaceAll('_', ' ')
+            .toLowerCase();
     const presetLabel = props.dateFilter?.preset?.label || '';
     const comparisonLabel = props.dateFilter?.comparisonRange?.value || '';
     const newRows = reformatComparisonPayload(props, presetLabel, convertComparisonRange(presetLabel, comparisonLabel));

package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAIhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,wBAAwB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,GACZ,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,oBAAoB,EAChB,wBAAwB,GACxB,KAAK,CAAC,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACxD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAsC,EACtC,oBAAgD,EAChD,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAoItB"}
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAIhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,wBAAwB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,GACZ,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,oBAAoB,EAChB,wBAAwB,GACxB,KAAK,CAAC,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACxD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAsC,EACtC,oBAAgD,EAChD,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAmItB"}

package/dist/esm/components/Dashboard/DashboardFilter.js

@@ -16,7 +16,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent = Quil
         }
     }, [filter]);
     if (filter.filterType === 'string') {
-        if (!filter.options) {
+        if (!filter.options || filter.options.length === 0) {
             return null;
         }
         if (filter.stringFilterType === 'multiselect') {

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAuB,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAOjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,EACR,OAAO,GACR,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAsId;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;QAQtB,MAAM;;;mCAIC,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;cAChB,GAAG;wDAMV,yBAAyB,KAAK,WAAW;MAC1C,WAuGH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAuB,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,EACR,OAAO,GACR,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAwJd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;QAQtB,MAAM;;;mCAIC,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;cAChB,GAAG;wDAMV,yBAAyB,KAAK,WAAW;MAC1C,WAuHH,CAAC"}

package/dist/esm/components/Dashboard/DataLoader.js

@@ -7,12 +7,14 @@ import { getData } from '../../utils/dataFetcher';
 import { mergeComparisonRange } from '../../utils/merge';
 import { processFilterErrorList } from '../../utils/errorProcessing';
 import { cleanDashboardItem } from '../../utils/dashboard';
+import { internalLog } from '../../utils/logging';
+import { MAX_COLUMN_ROWS_LIMIT } from '../../utils/constants';
 export default function DataLoader({ id, children, filters, }) {
     const [client, _] = useContext(ClientContext);
     const { dispatch, dashboard } = useContext(DashboardContext);
     // const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [customFields] = useContext(CustomFieldContext);
-    const [isLoading, setIsLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
     const [isPaginationLoading, setIsPaginationLoading] = useState(true);
     const [error, setError] = useState(undefined);
     const [previousPage, setPreviousPage] = useState(0);
@@ -22,21 +24,22 @@ export default function DataLoader({ id, children, filters, }) {
     });
     const onPageChange = (page) => {
         if ((previousPage < page.currentPage &&
-            (page.currentPage * page.rowsPerPage) % 100 === 0) ||
+            (page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0) ||
             (previousPage > page.currentPage &&
-                (previousPage * page.rowsPerPage) % 100 === 0)) {
-            getChartOptions({ page });
+                (previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
+            getChartOptions(true, { page });
         }
         setPreviousPage(page.currentPage);
     };
     const onSortChange = (sort) => {
-        getChartOptions({ sort });
+        getChartOptions(true, { sort });
         setPreviousPage(0);
     };
-    const getChartOptions = async (processing) => {
+    const getChartOptions = async (useReportTask = true, processing) => {
         if (!didFiltersChange(dashboard[id], filters) &&
             !isLoading &&
-            !dashboard[id].triggerReload) {
+            !dashboard[id].triggerReload &&
+            !processing) {
             setIsLoading(false);
             setReport(dashboard[id]);
             return;
@@ -62,12 +65,17 @@ export default function DataLoader({ id, children, filters, }) {
                     return newFilter;
                 })
                 : [];
+            if (!client.databaseType ||
+                client.databaseType.toLowerCase() !== 'postgresql') {
+                useReportTask = false;
+            }
             const hostedBody = {
                 metadata: {
+                    reportId: id,
                     dashboardItemId: id,
                     orgId: client.customerId || '*',
                     clientId: client.publicKey,
-                    task: 'item',
+                    task: useReportTask ? 'report' : 'item',
                     databaseType: client.databaseType,
                     filters: minimalFilters,
                     customFields,
@@ -95,6 +103,9 @@ export default function DataLoader({ id, children, filters, }) {
                 setReport(cleanedReport);
             }
             else {
+                if (useReportTask) {
+                    throw new Error(resp?.errorMessage);
+                }
                 setError(resp?.errorMessage);
             }
             setAdditionProcessing(updatedProcessing);
@@ -103,11 +114,20 @@ export default function DataLoader({ id, children, filters, }) {
             }, 200);
         }
         catch (e) {
-            console.log('Error fetching chart: ', e);
-            setError(e.message);
+            if (useReportTask) {
+                internalLog('USING ITEM AS BACKUP');
+                getChartOptions(false, processing);
+            }
+            else {
+                console.log('Error fetching chart: ', e);
+                setError(e.message);
+            }
         }
     };
     useEffect(() => {
+        if (isLoading) {
+            return;
+        }
         getChartOptions();
     }, [filters, id, dashboard[id]]);
     return (_jsx(_Fragment, { children: children({
@@ -132,7 +152,7 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
     const [client, _] = useContext(ClientContext);
     const [customFields] = useContext(CustomFieldContext);
     const theme = useTheme();
-    const getChartOptions = async () => {
+    const getChartOptions = async (useReportTask = true) => {
         try {
             // Remove extra fields on each filter so we don't confuse the backend.
             if (!didFiltersChange(dashboard[id], filters) &&
@@ -147,12 +167,17 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
             setLoading(true);
             setLocalDateBucket(dateBucket);
             setLocalAdditionalProcessing(additionalProcessing);
+            if (!client.databaseType ||
+                client.databaseType.toLowerCase() !== 'postgresql') {
+                useReportTask = false;
+            }
             const hostedBody = {
                 metadata: {
+                    reportId: id,
                     dashboardItemId: id,
                     orgId: client.customerId || '*',
                     clientId: client.publicKey,
-                    task: 'item',
+                    task: useReportTask ? 'report' : 'item',
                     databaseType: client.databaseType,
                     filters: filters,
                     customFields,
@@ -177,17 +202,29 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
                 dispatch({
                     type: 'UPDATE_DASHBOARD_ITEM',
                     id: id,
-                    data: { ...cleanedReport, triggerReload: false },
+                    data: {
+                        ...cleanedReport,
+                        triggerReload: false,
+                    },
                 });
             }
             else {
+                if (useReportTask) {
+                    throw new Error(resp?.errorMessage);
+                }
                 setError(resp?.errorMessage);
             }
             setLoading(false);
         }
         catch (e) {
-            console.log('Error fetching chart: ', e);
-            setLoading(false);
+            if (useReportTask) {
+                internalLog('USING ITEM AS BACKUP');
+                getChartOptions(false);
+            }
+            else {
+                console.log('Error fetching chart: ', e);
+                setError(e.message);
+            }
         }
     };
     useEffect(() => {

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AASnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAwPhC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AASnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA4PhC"}

package/dist/esm/components/Dashboard/MetricComponent.js

@@ -15,7 +15,13 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
         if (pivotData.data) {
             setRows(pivotData.data.rows);
         }
-    }, [pivotData]);
+        else if (report?.rows) {
+            setRows(report.rows);
+        }
+        else {
+            setRows([]);
+        }
+    }, [pivotData?.data?.rows, report?.rows]);
     const primaryMetricLabel = report?.filtersApplied?.date_range?.preset?.label;
     const comparisonKey = report?.filtersApplied?.date_range?.comparisonRange?.value;
     const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;

package/dist/esm/components/Dashboard/TableComponent.d.ts

@@ -1,4 +1,18 @@
 /// <reference types="react" />
-import { QuillReportProps } from '../../Dashboard';
-export default function QuillTableComponent({ report, onClick, isLoading, error, onPageChange, onSortChange, }: QuillReportProps): JSX.Element;
+import { QuillReport } from '../../Dashboard';
+export default function QuillTableComponent({ 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;
+    }) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+}): JSX.Element;
 //# sourceMappingURL=TableComponent.d.ts.map

package/dist/esm/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,GACb,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAoJhC"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAoB,MAAM,iBAAiB,CAAC;AAKhE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAuId"}