Dashboard Pages v2 by RobertJoonas · Pull Request #6262 · plausible/analytics

RobertJoonas · 2026-04-20T08:51:45Z

Instructions to reviewer(s):

I highly recommended to review this PR commit-by-commit -- I've renamed files in separate commits to give the opportunity to see the old and new component diff side by side.

Changes (code-structure oriented description)

IndexBreakdown (aka ListReport v2) - for the 9-entry breakdowns on the dashboard index page
- Caches responses via TanStack useQuery
- Disables FlipMove animations for any update that's not caused by a realtime "tick"
- Replaces the broken FadeIn component with a simple set of Tailwind classes. The animation duration is set to 300ms to make it noticeable.
DetailsBreakdown (aka BreakdownModal v2) - for details views
- uses a new usePaginatedQueryAPI hook which uses a StatsQuery object in its queryKey rather than a DashboardState.
- afterFetchData props -> onDataReady (Same as for IndexBreakdown. Instead of a separate function for next page vs initial page, the single handler now receives all pages of results which will be needed in the conversions report to determine whether revenue metrics should be displayed or not)
- Decides metric widths on its own, rather than relying on the Metric class.
Both Index and DetailsBreakdowns now use an onDataReady callback instead of afterFetchData and afterFetchNextPage -- need to fire the callback when response is read from cache too, not only after a real fetch call)
Avoid extra state for apiResponse.query and apiResponse.meta by letting TanStack query cache both as part of the response.
Both Index and DetailsBreakdowns now use a shared ColumnConfiguration for defining columns. In order to generate columns, actual data is needed. Unlike the legacy ColumnConfiguration, the new version enforces both renderLabel and renderCell as functions, therefore leaving the rendering components (BreakdownTable and IndexBreakdownRenderer) dumb about any special cases around dimension/metric values/labels.
Define metric labelling logic in metrics.ts. Note: it is already extended to components that are not yet migrated (e.g. conversions). Currently dead code but will be used soon.
Move pages / entry-pages / exit-pages to the new components (both detailed and index reports)
Add external link icon (the one that shows on row hover) to pages/entry-pages/exit-pages details views (currently only available in index-breakdowns, i.e. ListReports).

Recap of user facing changes

Add external link icon (the one that shows on row hover) to pages/entry-pages/exit-pages details views (currently only available in index-breakdowns, i.e. ListReports).
Improvements to Top Pages, Entry Pages, and Exit Pages on the dashboard index page:
- Leverage cache to avoid extra fetching and make the UX faster
- Make the fade-in animation work
- Disable FlipMove animations when update not caused by a realtime tick -- e.g. currently on production, if you change the dashboard period from 28d -> realtime, FlipMove animation triggers. This PR disables it.

Tests

Automated tests have been added

Changelog

This PR does not make a user-facing change

Documentation

Docs have been updated

Dark mode

The UI has been tested both in dark and light mode

github-actions · 2026-05-04T14:43:22Z

Preview environment👷🏼‍♀️🏗️
PR-6262

- instead of importing Metric from types/query-api.d.ts, define a Metric type in metrics.ts (including all internally available metrics) and use that as the single Metric type everywhere - add metric labelling logic in metrics.ts - move MetricValue type from fetch-main-graph.ts -> api.ts, and use it for Top Stats metric value as well

This commit introduces use-order-by-legacy.ts and use-order-by-legacy.test.ts files as copies of the current modules. The intent is to make the diff easier to review -- all components currently using the hook will use the legacy variant instead, and the actual file will change into v2 in the following commit.

* breakdown-modal.tsx -> breakdown-modal-legacy.tsx * breakdown-table.tsx -> breakdown-table-legacy.tsx * table.tsx -> table-legacy.tsx ...and use the legacy variants everywhere. The existing files will be transformed into v2 in the following commit.

- Cache whole api responses (including meta and query), not only results - AfterFetchData & afterFetchNextPage -> onDataReady. The function now also runs when fetch is a cache hit. - Avoid usePaginatedQueryAPI for IndexBreakdown. Unnecessary complexity because pagination is not needed. Instead let IndexBreakdown call useQuery directly

- add order by [dim, asc] to Index and DetailsBreakdowns - Define pagination field in StatsQuery and ReportParams

In details modals, instead of fixing the dimension cell width and leaving a gap between dimension and metric columns, distribute the empty space evenly between all columns. This is the current prod behaviour in breakdown modals.

apata · 2026-05-05T12:33:15Z

-          align={align}
+      {columns.map((col) => (
+        <td
+          key={`${col.key}_${rowKey}`}


nitpick, non-blocking: due to limit + offset pagination, the same dimension/page name can actually appear on multiple pages

apata · 2026-05-05T12:38:29Z

 } from '../../util/filters'
 import { addFilter, revenueAvailable } from '../../dashboard-state'
-import BreakdownModal from './breakdown-modal'
+import BreakdownModal from './breakdown-modal-legacy'


question: still needed?

Base automatically changed from main-graph-v2-backend to master April 20, 2026 09:17

RobertJoonas mentioned this pull request Apr 20, 2026

[WIP] Dashboard breakdowns v2 #6195

Closed

8 tasks

RobertJoonas force-pushed the v2-dashboard-pages branch from 136b190 to 05e3235 Compare April 20, 2026 11:21

RobertJoonas force-pushed the v2-dashboard-pages branch from 05e3235 to fc2c551 Compare May 4, 2026 09:48

RobertJoonas marked this pull request as ready for review May 4, 2026 14:28

RobertJoonas added the preview label May 4, 2026

RobertJoonas requested review from a team and apata May 4, 2026 14:55

RobertJoonas added 21 commits May 4, 2026 18:26

transform pages_test

95fa2c3

make total_visitors an official metric

0c59aed

Dashboard.QueryParser: add pagination and order_by

eaf2c59

prepare StatsQuery for v2 breakdowns and add usePaginatedQueryAPI hook

d4836d7

use-order-by v2

c65713c

add v2 (details) breakdown components

6078c20

rename breakdown-modal -> details-breakdown

854478d

create legacy copy of list.tsx

cbd784a

add v2 version of ListReport

6e39eca

rename list.tsx -> index-breakdown.tsx

19d8f4f

pages/entry-pages/exit-pages v2

df4c79b

destructure apiState before passing into IndexBreakdownRenderer

6daccaf

use staleTime in usePaginatedQueryAPI

a9984bd

fix IndexBreakdownRenderer

05828c2

fix NPM tests and lint

d084c99

mix format

5cac715

Fix E2E tests

87b3c80

- add order by [dim, asc] to Index and DetailsBreakdowns - Define pagination field in StatsQuery and ReportParams

RobertJoonas force-pushed the v2-dashboard-pages branch from 7968504 to 1ab079a Compare May 4, 2026 15:27

RobertJoonas added 3 commits May 4, 2026 18:33

distribute extra horizontal space evenly

9197d23

In details modals, instead of fixing the dimension cell width and leaving a gap between dimension and metric columns, distribute the empty space evenly between all columns. This is the current prod behaviour in breakdown modals.

fix (NPM) top stats test again

c03265d

fix pages_test.exs

f629618

RobertJoonas force-pushed the v2-dashboard-pages branch from 1ab079a to f629618 Compare May 4, 2026 15:33

stop rows remaining active after hover due to tooltip

915b4ba

apata reviewed May 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dashboard Pages v2#6262

Dashboard Pages v2#6262
RobertJoonas wants to merge 25 commits intomasterfrom
v2-dashboard-pages

RobertJoonas commented Apr 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

apata May 5, 2026

Uh oh!

apata May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

RobertJoonas commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes (code-structure oriented description)

Recap of user facing changes

Tests

Changelog

Documentation

Dark mode

Uh oh!

github-actions Bot commented May 4, 2026

Uh oh!

apata May 5, 2026

Choose a reason for hiding this comment

Uh oh!

apata May 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RobertJoonas commented Apr 20, 2026 •

edited

Loading