UoE/Add pagination to statistics tables (DSpace#726)

The statistics tables (e.g. the repository-wide "Total visits" report) rendered
every point in a single, ungoverned table and, combined with the backend cap of
10 items, users could only ever see the first 10 datasets.

Add client-side pagination to the shared StatisticsTableComponent so that all
reports paginate their points and every dataset can be browsed page by page.

- Render only the current page of points (default 10 per page).
- Show an ngb-pagination control when there are more points than fit on a page.
- Add the `statistics.table.pagination.label` i18n key for accessibility.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: milanmajchrak

src/app/statistics-page/statistics-table/statistics-table.component.html

@@ -18,7 +18,7 @@ <h2 class="m-1">
       </th>
     </tr>
 
-    <tr *ngFor="let point of report.points"
+    <tr *ngFor="let point of paginatedPoints"
         class="{{point.id}}-data">
       <th scope="row" data-test="statistics-label">
         {{ getLabel(point) | async }}
@@ -33,4 +33,18 @@ <h2 class="m-1">
 
   </table>
 
+  <div *ngIf="showPagination"
+       class="d-flex justify-content-center">
+    <ngb-pagination [collectionSize]="report.points.length"
+                    [page]="currentPage"
+                    [pageSize]="pageSize"
+                    [maxSize]="5"
+                    [rotate]="true"
+                    [ellipses]="true"
+                    [boundaryLinks]="true"
+                    (pageChange)="onPageChange($event)"
+                    [attr.aria-label]="'statistics.table.pagination.label' | translate">
+    </ngb-pagination>
+  </div>
+
 </div>

src/app/statistics-page/statistics-table/statistics-table.component.spec.ts

@@ -96,5 +96,62 @@ describe('StatisticsTableComponent', () => {
       expect(de.query(By.css('td.item_2-downloads-data')).nativeElement.innerText)
         .toEqual('8');
     });
+
+    it('should not display a pagination control when all points fit on a single page', () => {
+      expect(de.query(By.css('ngb-pagination'))).toBeNull();
+    });
+  });
+
+  describe('when the report has more points than the page size', () => {
+
+    const numberOfPoints = 25;
+
+    beforeEach(() => {
+      const points = [];
+      for (let i = 0; i < numberOfPoints; i++) {
+        points.push({
+          id: `item_${i}`,
+          label: `item_${i}`,
+          values: {
+            views: i,
+          },
+        });
+      }
+      component.report = Object.assign(new UsageReport(), { points });
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should only render the first page of points', () => {
+      expect(de.queryAll(By.css('[data-test="statistics-label"]')).length)
+        .toEqual(component.pageSize);
+      expect(de.query(By.css('td.item_0-views-data'))).toBeTruthy();
+      expect(de.query(By.css('td.item_10-views-data'))).toBeNull();
+    });
+
+    it('should display a pagination control', () => {
+      expect(de.query(By.css('ngb-pagination'))).toBeTruthy();
+    });
+
+    it('should render the next page of points when the page changes', () => {
+      component.onPageChange(2);
+      fixture.detectChanges();
+
+      expect(de.query(By.css('td.item_0-views-data'))).toBeNull();
+      expect(de.query(By.css('td.item_10-views-data'))).toBeTruthy();
+      expect(de.queryAll(By.css('[data-test="statistics-label"]')).length)
+        .toEqual(component.pageSize);
+    });
+
+    it('should render the remaining points on the last page', () => {
+      const lastPage = Math.ceil(numberOfPoints / component.pageSize);
+      component.onPageChange(lastPage);
+      fixture.detectChanges();
+
+      const remaining = numberOfPoints - (lastPage - 1) * component.pageSize;
+      expect(de.queryAll(By.css('[data-test="statistics-label"]')).length)
+        .toEqual(remaining);
+      expect(de.query(By.css(`td.item_${numberOfPoints - 1}-views-data`))).toBeTruthy();
+    });
   });
 });

src/app/statistics-page/statistics-table/statistics-table.component.ts

@@ -8,6 +8,7 @@ import {
   Input,
   OnInit,
 } from '@angular/core';
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import {
   TranslateModule,
   TranslateService,
@@ -38,7 +39,7 @@ import { isEmpty } from '../../shared/empty.util';
   templateUrl: './statistics-table.component.html',
   styleUrls: ['./statistics-table.component.scss'],
   standalone: true,
-  imports: [NgIf, NgFor, AsyncPipe, TranslateModule],
+  imports: [NgIf, NgFor, AsyncPipe, TranslateModule, NgbPaginationModule],
 })
 export class StatisticsTableComponent implements OnInit {
 
@@ -48,6 +49,17 @@ export class StatisticsTableComponent implements OnInit {
   @Input()
   report: UsageReport;
 
+  /**
+   * The number of points (e.g. datasets, countries, cities) to show per page.
+   */
+  @Input()
+  pageSize = 10;
+
+  /**
+   * The currently displayed page (1-based, as expected by ngb-pagination).
+   */
+  currentPage = 1;
+
   /**
    * Boolean indicating whether the usage report has data
    */
@@ -73,6 +85,29 @@ export class StatisticsTableComponent implements OnInit {
     }
   }
 
+  /**
+   * The points to render for the currently selected page.
+   */
+  get paginatedPoints(): Point[] {
+    const start = (this.currentPage - 1) * this.pageSize;
+    return this.report.points.slice(start, start + this.pageSize);
+  }
+
+  /**
+   * Whether a pagination control is needed, i.e. there are more points than fit on a single page.
+   */
+  get showPagination(): boolean {
+    return this.report.points.length > this.pageSize;
+  }
+
+  /**
+   * Switch to the given page.
+   * @param page the 1-based page number to display
+   */
+  onPageChange(page: number): void {
+    this.currentPage = page;
+  }
+
   /**
    * Get the row label to display for a statistics point.
    * @param point the statistics point to get the label for

src/assets/i18n/en.json5

@@ -4794,6 +4794,8 @@
 
   "statistics.table.no-data": "No data available",
 
+  "statistics.table.pagination.label": "Statistics table pagination",
+
   "statistics.table.title.TotalVisits": "Total visits",
 
   "statistics.table.title.TotalVisitsPerMonth": "Total visits per month",