Dashboard and Statistics
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard and Statistics feature provides users with a high-level, at-a-glance overview of their web archive. It is the default view on the home page and is composed of several key statistical cards that summarize archived content and storage usage. This system leverages data from both the D1 database and R2 storage to present information in a clear, visual format.
The main dashboard view, RecentSavePageView, dynamically arranges these statistical cards alongside a list of recently saved pages, creating a central hub for monitoring the archive's status.
Sources: packages/web/src/pages/(layout)/index.tsx:16-20, packages/web/src/pages/(layout)/index.tsx:75-96
System Architecture
The statistics are gathered through a client-server architecture. Frontend React components, located on the main dashboard page, make asynchronous requests to a backend API. The backend, built with Hono, then queries the appropriate data sources (Cloudflare D1 for page metadata, Cloudflare R2 for storage metrics) and returns the aggregated data to the client for rendering.
The following diagram illustrates the data flow for the dashboard statistics.
Frontend Components
The dashboard UI is constructed from several specialized React components. These components are responsible for fetching and displaying specific metrics. They are assembled within the RecentSavePageView component.
Sources: packages/web/src/pages/(layout)/index.tsx:75-96
Page Data Pie Card
This component, defined in page-data-pie-card.tsx, visualizes the distribution of archived pages across different folders.
- Purpose: To show the total number of archived pages and how they are categorized by folder.
- Visualization: It uses a
PieChartfrom therechartslibrary, wrapped by a sharedChartContainercomponent. The center of the pie chart displays the total count of all pages. - Data Fetching: It uses the
useRequesthook fromahooksto call thegetPageChartDatafunction, which fetches data from the backend. A skeleton loader is shown while the data is being fetched.
The data fetching and rendering sequence is as follows:
The component expects the API to return data in the following format:
| Field | Type | Description |
|---|---|---|
all | number | The total number of archived pages. |
folders | Array<object> | An array of objects, each representing a folder. |
folders[].name | string | The name of the folder. |
folders[].pageCount | number | The number of pages within that folder. |
Sources: packages/web/src/components/page-data-pie-card.tsx:15-27
R2 Usage Card
This simple component, defined in r2-usage-card.tsx, displays metrics about the R2 storage bucket.
- Purpose: To inform the user about their storage consumption.
- Visualization: It renders a
Cardcomponent showing the total number of objects and the total size in megabytes. - Data Fetching: It uses the
useRequesthook to callgetR2Usage. A skeleton loader is displayed during the request.
Sources: packages/web/src/components/r2-usage-card.tsx:7-27
The component expects the API to return data in the following format:
| Field | Type | Description |
|---|---|---|
count | number | The total number of objects in the R2 bucket. |
size | number | The total size of all objects in bytes. |
Sources: packages/web/src/components/r2-usage-card.tsx:6
Dashboard View (RecentSavePageView)
This component, found in packages/web/src/pages/(layout)/index.tsx, acts as the main container for the dashboard. It determines the layout of the statistical cards and the list of recent pages.
- It uses
useMediaQueryto create a responsive grid layout. The number of columns changes based on the screen width (2xl: 4,xl: 3,md: 2, default: 1). - It places the
PageDataPieCardandR2UsageCardwithin this grid.
Sources: packages/web/src/pages/(layout)/index.tsx:24-32, packages/web/src/pages/(layout)/index.tsx:78-91
Backend API
The backend API provides the data required by the frontend dashboard components. While the specific api/data.ts file is not fully provided, its endpoints can be inferred from the frontend components that consume them. The API is built using the Hono framework.
Sources: packages/server/src/api/pages.ts:1
GET /api/data/page-chart (Inferred)
This endpoint provides the necessary data for the PageDataPieCard. It calculates the total number of pages and the count of pages within each folder.
Response Body:
{
"all": 150,
"folders": [
{ "name": "Tech", "pageCount": 75 },
{ "name": "News", "pageCount": 50 },
{ "name": "Personal", "pageCount": 25 }
]
}
Sources: packages/web/src/components/page-data-pie-card.tsx:15-27
GET /api/data/r2-usage (Inferred)
This endpoint provides statistics about the R2 storage bucket. It likely interacts with the R2 binding to retrieve object counts and total size.
Response Body:
{
"count": 1234,
"size": 567890123
}