Premium Analytics: add Total views and Total visitors widgets

[chihsuan]

Proposed changes

Add the two single-metric Insights widgets from the prototype: Total views and Total visitors. Each shows the selected period's summary total above an area sparkline, with loading, empty, and error states.

• Keep them as separate widgets because widget titles and icons are static.
• Request views,visitors together with a fixed daily period so both widgets share one stats/visits query and cache entry. Daily buckets also keep visitor data consistent across dashboard intervals; the help text clarifies that returning visitors are counted once per day.
• Remove comparison parameters because these widgets show no delta, avoiding an unused comparison request affecting their loading or error state.
• Re-export Sparkline through the externals and widgets toolkit packages for use by the widgets.

Related product discussion/links

• WOOA7S-1847

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

No. It reuses the stats/visits proxy endpoint the dashboard already calls.

Testing instructions

Storybook

• Run cd projects/js-packages/storybook && pnpm run storybook:dev.
• Open http://localhost:50240/iframe.html?id=packages-premium-analytics-widgets-totalviews--widget-dashboard-with-widget&viewMode=story and the same for totalvisitors.
• Confirm the total renders in full (not clipped at the top) with an 8px gap above the sparkline, and that the sparkline fills the card's remaining height.
• Widen the card and confirm the sparkline keeps growing — it should not stop at 1200px.
• Check the Loading, Empty, Error, and ErrorRetryable stories. Error shows "You don't have access to this data." with no Retry; ErrorRetryable shows a Retry button.

Screen.Recording.2026-08-05.at.5.24.09.PM.mov

Dashboard

• Build with jetpack build packages/premium-analytics, then open the Stats dashboard.
• Add both widgets from the picker: they appear under Stats with the eye and people glyphs.
• Confirm each card's header title, icon, and info popover (the popover carries the description and a Learn more link).
• Change the dashboard date range and confirm both the number and the sparkline update.
• With comparison on, confirm in the network panel that only the primary stats/visits request fires for these cards.
• Switch to Last 90 days and Last 12 months and confirm the request still uses unit=day, and that Total visitors never drops below the shorter range's figure.

Screen.Recording.2026-08-05.at.5.25.02.PM.mov

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the wooa7s-1847-total-views-visitors branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack wooa7s-1847-total-views-visitors

bin/jetpack-downloader test jetpack-mu-wpcom-plugin wooa7s-1847-total-views-visitors

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

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!

[jp-launch-control]

Code Coverage Summary

5 files are newly checked for coverage.

File	Coverage
projects/packages/premium-analytics/packages/widgets-toolkit/src/helpers/without-comparison.ts	6/6 (100.00%) 💚
projects/packages/premium-analytics/widgets/total-views/render.tsx	13/13 (100.00%) 💚
projects/packages/premium-analytics/widgets/total-visitors/render.tsx	13/13 (100.00%) 💚
projects/packages/premium-analytics/widgets/total-views/widget.ts	0/0 (—%) 🤷

Full summary · PHP report · JS report