Premium Analytics: add the shared report-page framework and /reports/$report route#50304
Open
Nikschavan wants to merge 5 commits into
Open
Premium Analytics: add the shared report-page framework and /reports/$report route#50304Nikschavan wants to merge 5 commits into
Nikschavan wants to merge 5 commits into
Conversation
Adds the report-page layout, performance-chart, and records-table components, the metric-series builder, types, stories, and README/barrel extensions on top of the extracted shared tab machinery (branch add/pa-shared-section-tabs).
DataViews pads its own toolbar, first/last table cells, and footer at the same 24px inset the section card adds, so the card padding stacked with it and the table sat doubly inset. Drop the card padding for the table section and clip children to the card's rounded corners.
This was referenced Jul 8, 2026
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
github-actions
Bot
added
the
[Status] Needs Author Reply
Contributor
There was a problem hiding this comment.
Pull request overview
Adds the foundational framework for Premium Analytics “view all” report pages, including a new dynamic /reports/$report route with a registry-based dispatcher, plus shared Widgets Toolkit components (layout, performance chart, records table) and supporting utilities/tests.
Changes:
- Introduce a new
/reports/$reportroute withbeforeLoadguards (connection/sync), registry validation, and URL seeding/normalization. - Add shared report-page framework components to
widgets-toolkit(layout/sections, performance chart, DataViews-based records table) plusbuildReportMetricSeries(+ unit tests) and Storybook stories/docs. - Export new types/utilities via package indexes and add a Premium Analytics changelog entry.
Reviewed changes
Copilot reviewed 22 out of 23 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/packages/premium-analytics/routes/reports/style-imports.d.ts | Adds TS module declarations for CSS/SCSS imports in the reports route. |
| projects/packages/premium-analytics/routes/reports/stage.tsx | Implements the /reports/$report dispatcher that lazy-loads report page modules. |
| projects/packages/premium-analytics/routes/reports/stage.module.scss | Styles the centered loading spinner for lazy-loaded report pages. |
| projects/packages/premium-analytics/routes/reports/route.ts | Adds route beforeLoad guards and URL seeding/normalization for reports. |
| projects/packages/premium-analytics/routes/reports/registry.ts | Introduces the report registry contract and lookup helper (currently empty). |
| projects/packages/premium-analytics/routes/reports/README.md | Documents how to add a report and the URL/search-param contract. |
| projects/packages/premium-analytics/routes/reports/package.json | Declares the new route module and its dependencies. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/index.ts | Re-exports new report-page components/types/utils from the toolkit root. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/utils/build-report-metric-series.ts | Adds series-building utility for the multi-metric performance chart (incl. single-metric comparison overlay behavior). |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/utils/build-report-metric-series.test.ts | Adds unit tests for buildReportMetricSeries. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/types.ts | Defines ReportChartMetric type for chart metric configuration. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/stories/report-page.stories.tsx | Adds Storybook stories demonstrating composed report-page usage. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-records-table.tsx | Adds a DataViews-based records table section with client-side search/sort/pagination. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-records-table.module.scss | Adds DataViews styling + layout fixes for auto-height embedding. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.tsx | Adds the performance chart section (metric toggles, interval selector, collapse toggle, comparison overlay support). |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.module.scss | Styles the performance chart section and loading-overlay container. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.tsx | Adds the report-page scaffold (ReportPageLayout) and section wrapper (ReportPageSection). |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.module.scss | Styles the report-page scaffold, header, filters row, and section cards. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/README.md | Updates documentation to cover the full report-page framework and composition contract. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/index.ts | Exports new report-page framework components/types/utils from the report-page barrel. |
| projects/packages/premium-analytics/packages/widgets-toolkit/src/components/index.ts | Re-exports the report-page framework from the components index. |
| projects/packages/premium-analytics/packages/data/src/index.ts | Re-exports IntervalType from the data package root. |
| projects/packages/premium-analytics/changelog/add-wooa7s-1620-traffic-module-report-pages | Adds a changelog entry for the report-page framework introduction. |
Comment on lines
+100
to
+104
| ...normalizeReportParams( | ||
| currentSearch as Parameters< typeof normalizeReportParams >[ 0 ] | ||
| ), | ||
| ...( resolvedSection ? { section: resolvedSection } : {} ), | ||
| }; |
| Significance: minor | ||
| Type: added | ||
|
|
||
| Widgets Toolkit: add the shared report-page framework components (ReportPageLayout, ReportPerformanceChart, ReportRecordsTable) for the second-level module report pages. |
The /reports/$report stage now provides React Query, global errors, and the chart theme for every report page, mirroring how WidgetRoot provides them for widgets. ReportPerformanceChart stops mounting GlobalChartsProvider and draws the chart directly via useSeriesStyles + ComparativeLineChart.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of WOOA7S-1614 / WOOA7S-1620
Stack 2/3 — base:
add/pa-shared-section-tabs(#50303). Replaces #50170.Proposed changes
This adds the framework for second-level "view all" report pages (Posts & Pages, Referrers, Locations, …), following the dynamic-route + registry approach we agreed on (matching what WooCommerce Analytics did). It ships unconsumed — the registry is empty until the first report lands in the next PR of the stack — so there are no shipped behavior changes.
Framework components (widgets-toolkit,
components/report-page/):ReportPageLayout/ReportPageSection— page scaffold: breadcrumb header with an actions slot, optional tabs slot, filters row, and stacked bordered sections.ReportPerformanceChart— the multi-metric visits chart (Views / Visitors / Comments / Likes) with a metric show/hide menu, time-bucket selector, and collapse toggle. With exactly one visible metric and comparison data, the previous period draws as a dashed overlay.buildReportMetricSeries(+ tests) does the series mapping.ReportRecordsTable— a Core DataViews table over the report's summarized rows; search, sorting, column config, and pagination run client-side viafilterSortAndPaginate. The section card contributes no padding of its own — DataViews pads its own toolbar/cells/footer, and the two would stack.The dynamic route (
routes/reports/):/reports/$reportwith a wc-admin-style report registry: adding a report is oneREPORTSentry (id,getTitle, optionalgetDescription/resolveSection,load: () => import( './<report>/page' )) plus a page module — no new route, no router wiring.beforeLoadguard: connection/sync redirects,$reportvalidated against the registry (unknown ids redirect to the dashboard), and date params seeded/normalized via a redirect-to-self so every report lands with a complete, valid date range in the URL.React.lazy-loads the page module under a Suspense spinner, keyed by report id so switching reports remounts cleanly.Does this pull request change what data or activity we track or use?
No.
Testing instructions
The registry is empty in this PR, so the route can only be exercised negatively; the components are testable in Storybook:
cd projects/packages/premium-analytics && pnpm run build, then open…?page=jetpack-premium-analytics#/reports/anything— you should be redirected to the dashboard (unknown report id), not crash.jetpack storybook→ Packages / Premium Analytics / Report Page — check the layout, chart (metric menu, interval selector, single-metric comparison overlay), and records table stories.pnpm run test— includes thebuildReportMetricSeriestests.