Website Dashboard
Relevant source files
The following files were used as context for generating this wiki page:- src/app/(main)/websites/[websiteId]/WebsitePage.tsx
- src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
- src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
- src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
- src/components/metrics/MetricsTable.tsx
- src/queries/sql/getWebsiteStats.ts
- src/queries/sql/pageviews/getPageviewMetrics.ts
The Website Dashboard is the primary user interface for viewing detailed analytics for a single website. It serves as the central hub for understanding website traffic, user engagement, and audience demographics. The dashboard presents a high-level overview of key metrics, a time-series chart for visualizing trends, and a series of detailed data panels for in-depth analysis of pages, traffic sources, user environments, and geographic locations.
This page is composed of several distinct, reusable React components that work together to present a comprehensive view of the website's performance. Data is fetched asynchronously from the backend using dedicated React Query hooks, which ensures the UI remains responsive while loading analytics data.
Architecture
The Website Dashboard is structured around a main page component, WebsitePage, which assembles several specialized child components to build the complete view.
The following diagram illustrates the high-level component architecture of the dashboard page.
WebsitePage: The top-level container component that lays out the entire dashboard.WebsiteMetricsBar: Displays a summary of the most important website statistics.WebsiteChart: A line chart that visualizes pageviews and sessions over the selected date range.WebsitePanels: A container that organizes various detailed reports into a tabbed grid layout. It utilizes theMetricsTablecomponent to display different data breakdowns.
Sources: src/app/(main)/websites/[websiteId]/WebsitePage.tsx, src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
Core Components
The dashboard's functionality is broken down into several key React components.
WebsiteMetricsBar
This component displays a row of key performance indicators (KPIs) at the top of the dashboard, providing an at-a-glance summary of the website's performance. It fetches data using the useWebsiteStatsQuery hook.
The following metrics are displayed:
| Metric | Description | Data Source Logic |
|---|---|---|
| Visitors | The number of unique visitors (sessions). | visitors from useWebsiteStatsQuery |
| Visits | The number of unique visits. | visits from useWebsiteStatsQuery |
| Views | The total number of pageviews. | pageviews from useWebsiteStatsQuery |
| Bounce Rate | The percentage of visits with only a single pageview. | (Math.min(visits, bounces) / visits) * 100 |
| Avg. Visit Duration | The average time a user spends on the site per visit. | totaltime / visits |
Sources: src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx:20-56
WebsiteChart
This component renders a time-series line chart showing trends for pageviews and sessions over the selected date range. It uses the useWebsitePageviewsQuery hook to fetch the necessary data points. The component can also operate in a compareMode to overlay data from a comparison date range.
Sources: src/app/(main)/websites/[websiteId]/WebsiteChart.tsx:14-18
WebsitePanels
WebsitePanels is a major component that arranges several data tables and visualizations into a grid. It uses a tabbed interface to group related metrics, allowing users to switch between different views for Pages, Sources, Environment, and Location data.
The panels and their corresponding data tables are configured as follows:
| Panel Heading | Tab | MetricsTable Type |
|---|---|---|
| Pages | Path | path |
| Entry | entry | |
| Exit | exit | |
| Sources | Referrers | referrer |
| Channels | channel | |
| Environment | Browsers | browser |
| OS | os | |
| Devices | device | |
| Location | Countries | country |
| Regions | region | |
| Cities | city |
Sources: src/app/(main)/websites/[websiteId]/WebsitePanels.tsx:16-103
MetricsTable
This is a reusable component responsible for displaying a list of metrics in a table format, such as top pages or top referrers. It is highly configurable and fetches its data via the usePageviewMetricsQuery hook, which is passed a type prop (e.g., 'path', 'referrer') to determine which data to query.
Sources: src/components/metrics/MetricsTable.tsx, src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
Data Flow
Data for the dashboard is fetched from the backend using a standardized pattern involving React components, React Query hooks, and server-side query functions.
This sequence diagram shows the data flow for loading the WebsiteMetricsBar.
This flow demonstrates a clean separation of concerns:
- The Component is only responsible for rendering the UI.
- The Hook manages the data fetching lifecycle, including caching, re-fetching, and loading/error states.
- The Backend exposes an API endpoint that calls a dedicated query function.
- The Query Function contains the business logic to retrieve data from the database.
Sources: src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx:15, src/queries/sql/getWebsiteStats.ts:19-23
Backend Data Fetching
The backend provides specialized functions to query the database for the analytics data displayed on the dashboard.
Summary Statistics (getWebsiteStats)
The getWebsiteStats function is responsible for calculating the summary metrics displayed in the WebsiteMetricsBar. It returns an object matching the WebsiteStatsData interface.
// src/queries/sql/getWebsiteStats.ts:11-18
export interface WebsiteStatsData {
pageviews: number;
visitors: number;
visits: number;
bounces: number;
totaltime: number;
}
The function contains optimized queries for both relational databases (via Prisma) and ClickHouse, and the correct one is chosen at runtime. The relational query aggregates data from the website_event table to compute the totals.
Sources: src/queries/sql/getWebsiteStats.ts:11-18, src/queries/sql/getWebsiteStats.ts:25-54
Detailed Metrics (getPageviewMetrics)
The getPageviewMetrics function is a versatile query used by the MetricsTable component to fetch detailed, grouped data. It accepts a type parameter that determines which dimension to group by.
For example, calling it with type: 'country' will return a list of countries and the number of unique visitors from each. The function dynamically constructs the SQL query based on the type and any applied filters. It supports a wide range of types, including path, referrer, browser, os, device, and country.
Sources: src/queries/sql/pageviews/getPageviewMetrics.ts:31-32, src/app/(main)/websites/[websiteId]/WebsitePanels.tsx