@quillsql/react 2.15.6 → 2.15.7

package/dist/index.cjs

@@ -20501,6 +20501,8 @@ function extractAllReportValuesFromQuillInternalReport(reportInternal) {
     name: reportInternal.name,
     dashboardName: reportInternal.dashboardName,
     // section: reportInternal.section,
+    pagination: reportInternal.pagination,
+    sort: reportInternal.sort,
     rows: reportInternal.rows,
     columns: reportInternal.columns,
     chartType: reportInternal.chartType,
@@ -23645,7 +23647,7 @@ var useDashboards = () => {
     deleteDashboard
   };
 };
-var useDashboard = (dashboardName) => {
+var useDashboard = (dashboardName, config) => {
   const { data, dashboardFilters, reload, isLoading } = useDashboardInternal(dashboardName);
   const { customFilterDispatch } = (0, import_react2.useContext)(DashboardFiltersContext);
   const { reportsDispatch, reportsLoadingStateDispatch } = (0, import_react2.useContext)(ReportsContext);
@@ -23686,7 +23688,7 @@ var useDashboard = (dashboardName) => {
   (0, import_react2.useEffect)(() => {
     if (!fetchedInitialReports.current && data) {
       fetchedInitialReports.current = true;
-      fetchReports([], dashboardFilters ?? []);
+      fetchReports([], dashboardFilters ?? [], config?.pageSize);
     }
   }, [fetchedInitialReports, data, dashboardFilters]);
   const applyDashboardFilters = (filtersToUpdate) => {
@@ -23793,24 +23795,39 @@ var useDashboard = (dashboardName) => {
     }
     return [];
   };
-  const fetchReports = async (customFilters, dashboardFilters2) => {
+  const fetchReports = async (customFilters, dashboardFilters2, pageSize) => {
     if (!client || !sections) return;
-    const allReportIds = Object.values(sections).flatMap(
-      (reports) => reports.map((report) => report.id)
-    );
+    const allReports = Object.values(sections).flat();
     await Promise.all(
-      allReportIds.map(async (reportId) => {
+      allReports.map(async (reportInfo) => {
+        const reportId = reportInfo.id;
         reportsLoadingStateDispatch({
           type: "SET_REPORT_LOADING",
           id: reportId,
           data: true
         });
         const customReportFiltersArray = await waitForCustomFilters(reportId);
+        let rowsPerRequest = pageSize || 600;
+        if (!pageSize) {
+          if (reportInfo.chartType === "table") {
+            rowsPerRequest = 10;
+          } else if (reportInfo.chartType === "metric") {
+            rowsPerRequest = 1;
+          }
+        }
+        const pagination = {
+          rowsPerRequest,
+          rowsPerPage: rowsPerRequest
+        };
+        const additionalProcessing = rowsPerRequest ? {
+          page: pagination
+        } : void 0;
         const { report, error } = await fetchReport({
           reportId,
           client,
           tenants,
           flags,
+          additionalProcessing,
           filters: dashboardFilters2.concat(customFilters).concat(customReportFiltersArray),
           getToken,
           eventTracking
@@ -23822,7 +23839,10 @@ var useDashboard = (dashboardName) => {
         reportsDispatch({
           type: "UPDATE_REPORT",
           id: reportId,
-          data: report
+          data: {
+            ...report,
+            pagination
+          }
         });
         reportsLoadingStateDispatch({
           type: "SET_REPORT_LOADING",
@@ -23840,7 +23860,7 @@ var useDashboard = (dashboardName) => {
     applyFilters
   };
 };
-var useDashboardReport = (reportId, config) => {
+var useDashboardReportInternal = (reportId, config) => {
   const {
     reports,
     reportsLoadingState,
@@ -23852,13 +23872,15 @@ var useDashboardReport = (reportId, config) => {
   const [client] = (0, import_react2.useContext)(ClientContext);
   const { getToken } = (0, import_react2.useContext)(FetchContext);
   const { eventTracking } = (0, import_react2.useContext)(EventTrackingContext);
-  const { customReportFiltersDispatch } = (0, import_react2.useContext)(ReportFiltersContext);
+  const { customReportFilters, customReportFiltersDispatch } = (0, import_react2.useContext)(ReportFiltersContext);
   const { dashboardCustomFilters } = (0, import_react2.useContext)(DashboardFiltersContext);
   const {
     data: dashboardData,
     dashboardFilters: dashboardFiltersInternal,
     reload: reloadDashboard
   } = useDashboardInternal(reports[reportId]?.dashboardName ?? null);
+  const [pageLoading, setPageLoading] = (0, import_react2.useState)(false);
+  const [maxPage, setMaxPage] = (0, import_react2.useState)(0);
   (0, import_react2.useEffect)(() => {
     if (config?.initialFilters) {
       customReportFiltersDispatch({
@@ -23896,11 +23918,16 @@ var useDashboardReport = (reportId, config) => {
     const dashboardFiltersArray = dashboardFiltersInternal ?? [];
     const dashboardCustomFiltersArray = dashboardCustomFilters[processedReport?.dashboardName ?? ""] ?? [];
     const requestFilters = filters.map(convertCustomFilter).concat(dashboardCustomFiltersArray).concat(dashboardFiltersArray);
+    const pagination = processedReport?.pagination;
+    const additionalProcessing = {
+      page: pagination
+    };
     const { report, error } = await fetchReport({
       reportId,
       client,
       tenants,
       flags,
+      additionalProcessing,
       filters: requestFilters,
       getToken,
       eventTracking
@@ -23956,11 +23983,138 @@ var useDashboardReport = (reportId, config) => {
       });
     }
   };
+  const updateReportTableRows = async (processing, appendRows) => {
+    if (!client) {
+      return;
+    }
+    setPageLoading(true);
+    const dashboardFiltersArray = dashboardFiltersInternal ?? [];
+    const dashboardCustomFiltersArray = dashboardCustomFilters[processedReport?.dashboardName ?? ""] ?? [];
+    const reportCustomFiltersArray = customReportFilters[reportId] ?? [];
+    const filters = reportCustomFiltersArray.concat(dashboardFiltersArray).concat(dashboardCustomFiltersArray);
+    const pivot = processedReport?.pivot;
+    const pivotQuery = reports[reportId]?.pivotQuery;
+    const { rows } = await fetchResultsByReport({
+      reportId,
+      client,
+      tenants,
+      processing,
+      filters,
+      getToken,
+      eventTracking,
+      pivot,
+      pivotQuery
+    });
+    if (pivot && pivotQuery) {
+      const currRows = reports[reportId]?.pivotRows || [];
+      const updatedRows = appendRows ? [...currRows, ...rows] : rows;
+      reportsDispatch({
+        type: "UPDATE_REPORT",
+        id: reportId,
+        data: {
+          pivotRows: updatedRows,
+          pagination: processing.page,
+          sort: processing.sort
+        }
+      });
+    } else {
+      const currRows = reports[reportId]?.rows || [];
+      const updatedRows = appendRows ? [...currRows, ...rows] : rows;
+      reportsDispatch({
+        type: "UPDATE_REPORT",
+        id: reportId,
+        data: {
+          rows: updatedRows,
+          pagination: processing.page,
+          sort: processing.sort
+        }
+      });
+    }
+    setMaxPage(processing.page?.page || 0);
+    setPageLoading(false);
+  };
+  const handleNextPage = async () => {
+    if (!processedReport?.pagination) {
+      return;
+    }
+    const currPage = processedReport.pagination.page || 0;
+    const updatedPage = {
+      ...processedReport.pagination,
+      page: currPage + 1
+    };
+    if (shouldFetchMore(updatedPage, currPage + 1, maxPage)) {
+      const sort = processedReport?.sort;
+      updateReportTableRows({ page: updatedPage, sort }, true);
+    } else {
+      reportsDispatch({
+        type: "UPDATE_REPORT",
+        id: reportId,
+        data: {
+          pagination: updatedPage
+        }
+      });
+    }
+  };
+  const handlePrevPage = async () => {
+    if (!processedReport?.pagination) {
+      return;
+    }
+    const currPage = processedReport.pagination.page || 0;
+    const updatedPage = {
+      ...processedReport.pagination,
+      page: currPage - 1
+    };
+    reportsDispatch({
+      type: "UPDATE_REPORT",
+      id: reportId,
+      data: {
+        pagination: updatedPage
+      }
+    });
+  };
+  const handleSort = async (sort) => {
+    const currSort = processedReport?.sort;
+    const currPagination = processedReport?.pagination;
+    const newPagination = currPagination ? { ...currPagination, page: 0 } : void 0;
+    if (currSort?.field !== sort.field || currSort?.direction?.toLowerCase() !== sort?.direction?.toLowerCase()) {
+      updateReportTableRows({ page: newPagination, sort }, false);
+    }
+  };
   return {
     report: reportsLoadingState[reportId] ? null : processedReport,
     loading: !!reportsLoadingState[reportId],
     applyFilters: setReportFilters,
-    deleteReport
+    deleteReport,
+    pageNumber: processedReport?.pagination?.page || 0,
+    pageLoading,
+    nextPage: handleNextPage,
+    prevPage: handlePrevPage,
+    sortRows: handleSort
+  };
+};
+var useDashboardReport = (reportId, config) => {
+  const { report, loading, applyFilters, deleteReport, nextPage } = useDashboardReportInternal(reportId, config);
+  const fetchingRef = (0, import_react2.useRef)(false);
+  const fetchNextPage = async () => {
+    if (fetchingRef.current) {
+      return;
+    }
+    try {
+      fetchingRef.current = true;
+      await nextPage();
+    } catch (error) {
+      console.error("Error fetching page:", error.message);
+    } finally {
+      fetchingRef.current = false;
+    }
+  };
+  return {
+    report,
+    isLoading: loading || fetchingRef.current,
+    loading: loading || fetchingRef.current,
+    applyFilters,
+    deleteReport,
+    fetchNextPage
   };
 };
 
@@ -35166,7 +35320,8 @@ var ChartDisplay = ({
   onClickChartElement,
   overrideTheme,
   referenceLines,
-  showLegend = false
+  showLegend = false,
+  tableRowsLoading = false
 }) => {
   const { downloadCSV: downloadCSV2 } = useExport(reportId);
   const [theme] = (0, import_react29.useContext)(ThemeContext);
@@ -35261,7 +35416,8 @@ var ChartDisplay = ({
         },
         onSortChange: (sort) => {
           onSortChange && onSortChange(sort);
-        }
+        },
+        isLoading: tableRowsLoading
       }
     );
   }
@@ -51748,11 +51904,32 @@ function StaticChart({
   containerStyle,
   showLegend = false
 }) {
-  const { report, loading } = useDashboardReport(reportId);
+  const {
+    report,
+    loading,
+    pageNumber,
+    pageLoading,
+    nextPage,
+    prevPage,
+    sortRows
+  } = useDashboardReportInternal(reportId);
   const mergedStyle = {
     ...report?.chartType ? CHART_TYPE_STYLES[report.chartType] || DEFAULT_STYLE : DEFAULT_STYLE,
     ...containerStyle
   };
+  const onPageChange = (page) => {
+    if (page == pageNumber - 1) {
+      prevPage();
+    } else if (page == pageNumber + 1) {
+      nextPage();
+    }
+  };
+  const onSortChange = (sort) => {
+    sortRows({
+      field: sort.field,
+      direction: sort.direction
+    });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     ChartDisplay,
     {
@@ -51764,7 +51941,10 @@ function StaticChart({
       onClickChartElement,
       loading,
       containerStyle: mergedStyle,
-      showLegend
+      showLegend,
+      onPageChange,
+      tableRowsLoading: pageLoading,
+      onSortChange
     }
   );
 }

package/dist/index.d.cts

@@ -2483,7 +2483,9 @@ declare const useDashboards: () => {
     }) => Promise<void>;
     deleteDashboard: (name: string) => Promise<void>;
 };
-declare const useDashboard: (dashboardName: string) => {
+declare const useDashboard: (dashboardName: string, config?: {
+    pageSize?: number;
+}) => {
     isLoading: boolean;
     sections: Record<string, QuillReport[]> | null;
     filters: DashboardFilter[];
@@ -2499,9 +2501,11 @@ declare const useDashboardReport: (reportId: string, config?: {
     initialFilters?: Filter[];
 }) => {
     report: QuillReport | null;
+    isLoading: boolean;
     loading: boolean;
     applyFilters: (filters: Filter[]) => void;
     deleteReport: () => void;
+    fetchNextPage: () => Promise<void>;
 };
 
 /**

package/dist/index.d.ts

@@ -2483,7 +2483,9 @@ declare const useDashboards: () => {
     }) => Promise<void>;
     deleteDashboard: (name: string) => Promise<void>;
 };
-declare const useDashboard: (dashboardName: string) => {
+declare const useDashboard: (dashboardName: string, config?: {
+    pageSize?: number;
+}) => {
     isLoading: boolean;
     sections: Record<string, QuillReport[]> | null;
     filters: DashboardFilter[];
@@ -2499,9 +2501,11 @@ declare const useDashboardReport: (reportId: string, config?: {
     initialFilters?: Filter[];
 }) => {
     report: QuillReport | null;
+    isLoading: boolean;
     loading: boolean;
     applyFilters: (filters: Filter[]) => void;
     deleteReport: () => void;
+    fetchNextPage: () => Promise<void>;
 };
 
 /**