Skip to content

WOOA7S-1506: Port Stats Annual highlights widget#50155

Draft
kangzj wants to merge 2 commits into
trunkfrom
add/wooa7s-1506-annual-highlights
Draft

WOOA7S-1506: Port Stats Annual highlights widget#50155
kangzj wants to merge 2 commits into
trunkfrom
add/wooa7s-1506-annual-highlights

Conversation

@kangzj

@kangzj kangzj commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Fixes WOOA7S-1506

Proposed changes

  • Port the Jetpack Stats Annual highlights card into a registered Premium Analytics widget (jpa/annual-highlights).
  • Renders a CSS-grid of metric tiles for the most recent year's totals — posts, words, likes, comments, and images — sourced from the existing useStatsInsights data hook. Each tile is a <Text> label plus MetricWithComparison (value only, useMultipliers/decimals: 0).
  • The insights endpoint is not period-scoped and has no comparison period, so tiles show bare counts; WidgetRoot still receives host attributes so injected reportParams are preserved.
  • Adds the three-story Storybook template (Default, WithComparison, WidgetDashboardWithWidget) with registerReportMocks() plus a story-scoped apiFetch middleware mocking stats/insights (not covered by the shared report mocks). WithComparison renders identically to Default by design, and the story docs note this.
  • No changes to packages/data, packages/widgets-toolkit, @automattic/charts, or projects.js (the widgets root was already registered).

Related product discussion/links

Does this pull request change what data or activity we track or use?

No. It surfaces existing Jetpack Stats insights data already fetched through the useStatsInsights hook; no new tracking.

Testing instructions

  • Live-dashboard verification pending — handled centrally; Storybook + audit + eslint + build pass locally.
  • Storybook: run the premium-analytics Storybook and open Packages/Premium Analytics/Widgets/AnnualHighlights — verify Default, WithComparison, and WidgetDashboardWithWidget all render a populated grid of year totals.
  • Local gates run: /widget-audit annual-highlights (clean), eslint (clean), stylelint (clean), tsc --noEmit (0 errors), jetpack build packages/premium-analytics --deps (success).

Add the Annual highlights Premium Analytics widget: a grid of metric tiles
showing the most recent year's totals (posts, words, likes, comments, images),
sourced from the useStatsInsights hook. The insights module is not
period-scoped and has no comparison period, so tiles render bare counts.

Includes the three-story Storybook template with a story-scoped apiFetch
middleware mocking the stats/insights endpoint (not covered by the shared
report mocks).
@github-actions

github-actions Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

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:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@github-actions github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jul 2, 2026
@jp-launch-control

Copy link
Copy Markdown

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report

…ts mock

Rename the widget CSS module to the post-#50112 style.module.css convention and
update the import. Replace the story-scoped apiFetch middleware with a central
stats/insights handler in routeStatsReport() backed by a data/insights.ts
fixture, matching the search-terms reference. Drop the now-unused api-fetch
devDependency.
@kangzj

kangzj commented Jul 2, 2026

Copy link
Copy Markdown
Contributor Author

Live dashboard verification — Annual highlights

Rendered on the connected Premium Analytics dashboard (Insights tab, raven env, blog 254382195) with real data and zero console errors.

Annual highlights

@kangzj kangzj marked this pull request as ready for review July 2, 2026 07:34
@kangzj kangzj requested review from a team as code owners July 2, 2026 07:34
@kangzj kangzj marked this pull request as draft July 2, 2026 07:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Premium Analytics [Status] In Progress [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant