WOOA7S-1513: Port Stats Subscriber highlights widget by chihsuan · Pull Request #50299 · Automattic/jetpack

chihsuan · 2026-07-08T06:55:29Z

Proposed changes

Ports the Stats "Subscriber highlights" section into Premium Analytics as the jpa/subscriber-highlights widget, mirroring the shipped Annual highlights widget.

New widget at widgets/subscriber-highlights/ — four metric tiles (Total / Paid / Free / Social followers), each with a per-metric visibility toggle (default on).
Reads the existing useStatsSubscribersCounts hook (subscribers/counts, already-allow-listed subscribers prefix). No new hook or proxy prefix.
The endpoint reports current totals only, so the widget shows bare counts with no comparison — same as Annual highlights.
Storybook: Default, WithComparison, WidgetDashboardWithWidget; added a subscribers/counts fixture + handler.

Related product discussion/links

WOOA7S-1513

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

No.

Testing instructions

Open Storybook → Packages / Premium Analytics / Widgets / SubscriberHighlights: the four tiles (Total / Paid / Free / Social) render populated; the metric toggles hide/show tiles; WithComparison renders the same as Default.
Smoke test against a live connected site

Screen.Recording.2026-07-08.at.4.03.35.PM.mov

)

github-actions · 2026-07-08T06:57:15Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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 · 2026-07-08T06:58:37Z

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

Copilot

Pull request overview

Ports the existing Stats “Subscriber highlights” UI into Premium Analytics as a new jpa/subscriber-highlights widget, matching the established “Annual highlights” widget patterns (framed presentation, metric tiles, per-metric visibility toggles), backed by the existing subscribers/counts Stats proxy hook.

Changes:

Added the new Subscriber highlights widget (definition, render, styles, package metadata) with per-tile visibility attributes.
Added Storybook stories and Storybook mock handling/fixture data for the subscribers/counts endpoint.
Added Jest tests for fetching and visibility-toggle behavior, plus a Premium Analytics changelog entry.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
projects/packages/premium-analytics/widgets/subscriber-highlights/widget.ts	Defines the widget type and per-metric boolean attribute schema with defaults.
projects/packages/premium-analytics/widgets/subscriber-highlights/widget.json	Declares widget metadata (name/title/description/category/presentation) for the host.
projects/packages/premium-analytics/widgets/subscriber-highlights/style.module.css	Implements the framed widget layout and responsive tile grid styling.
projects/packages/premium-analytics/widgets/subscriber-highlights/render.tsx	Fetches `subscribers/counts` via `useStatsSubscribersCounts` and renders tiles with attribute-driven visibility.
projects/packages/premium-analytics/widgets/subscriber-highlights/stories/subscriber-highlights-widget.stories.tsx	Adds Storybook stories (Default/WithComparison/Dashboard harness) with controls matching widget settings.
projects/packages/premium-analytics/widgets/subscriber-highlights/tests/subscriber-highlights.test.tsx	Adds test coverage for data fetching, tile visibility toggles, and “no metrics selected” state.
projects/packages/premium-analytics/widgets/subscriber-highlights/package.json	Adds the widget package with dependencies consistent with other Premium Analytics widgets.
projects/packages/premium-analytics/packages/widgets-toolkit/src/stories/mocks/register-report-mocks.ts	Registers a Storybook mock handler for the v2 `subscribers/counts` proxy path.
projects/packages/premium-analytics/packages/widgets-toolkit/src/stories/mocks/data/subscriber-counts.ts	Adds fixture data for the raw `subscribers/counts` response shape.
projects/packages/premium-analytics/packages/widgets-toolkit/src/stories/mocks/data/index.ts	Exports the new subscriber counts fixture for Storybook mock registration.
projects/packages/premium-analytics/changelog/add-subscriber-highlights-widget	Adds a minor “added” changelog entry for the new widget.

…paths

louwie17

Looks good and tested well! I left several comments, but they are mostly nitpicks and can also be done in follow ups. Especially the consolidation of the Widget tile work.

louwie17 · 2026-07-08T09:46:23Z

+								<Icon icon={ tile.icon } size={ 24 } className={ styles.tileIcon } />
+								<Text className={ styles.tileLabel }>{ tile.label }</Text>
+							</div>
+							<MetricWithComparison


We are using MetricWithComparison but don't support comparison on this component, unless this a future thing?

louwie17 · 2026-07-08T09:46:51Z

+export const WithComparison: Story = {
+	render: renderSubscriberHighlights,
+	args: { withComparison: true, ...ALL_METRICS_ARGS },
+	decorators: [ withWidgetCanvas ],
+};


We can remove this storybook, given we don't show comparison.

louwie17 · 2026-07-08T09:48:28Z

+		{
+			key: 'total',
+			icon: people,
+			label: __( 'Total subscribers', 'jetpack-premium-analytics' ),


We also define the names in widget.ts, maybe we should combine them? so we don't accidentally mismatch them.

louwie17 · 2026-07-08T10:02:12Z

+.grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--wpds-dimension-gap-sm, 8px);
+}
+
+.tile {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--wpds-dimension-gap-md, 12px);
+	padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-lg, 16px);
+	border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak);
+	border-radius: var(--wpds-border-radius-lg, 8px);
+}
+
+.tileHeader {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--wpds-dimension-gap-sm, 8px);
+	min-width: 0;
+	color: var(--wpds-color-foreground-content-neutral);
+}
+
+.tileIcon {
+	flex: 0 0 auto;
+}
+
+.tileLabel {
+	color: var(--wpds-color-foreground-content-neutral);
+}
+
+/* MetricValue emits the font-size token without a fallback, and the dashboard
+ * runtime does not always inject the WPDS typography tokens, so pin the metric
+ * total here with explicit fallbacks. */
+.tileValue span {
+	font-size: var(--wpds-typography-font-size-xl, 20px);
+	line-height: var(--wpds-typography-line-height-xl, 32px);
+}


We end up having identical CSS also for the Annual highlights: https://github.com/Automattic/jetpack/blob/trunk/projects/packages/premium-analytics/widgets/annual-highlights/style.module.css#L44
It may be worth having a MetricTile component?

feat: add Subscriber highlights widget to Premium Analytics (WOOA7S-1513

e8a9349

)

github-actions Bot added [Package] Premium Analytics [Status] In Progress labels Jul 8, 2026

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 8, 2026

chihsuan changed the title ~~Premium Analytics: add Subscriber highlights widget~~ WOOA7S-1513: Port Stats Subscriber highlights widget Jul 8, 2026

chihsuan requested a review from Copilot July 8, 2026 07:29

Copilot started reviewing on behalf of chihsuan July 8, 2026 07:29 View session

Copilot AI reviewed Jul 8, 2026

View reviewed changes

test: cover subscriber-highlights error, loading, and metric mapping …

0f65c04

…paths

chihsuan marked this pull request as ready for review July 8, 2026 08:06

chihsuan requested review from a team as code owners July 8, 2026 08:06

louwie17 approved these changes Jul 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

WOOA7S-1513: Port Stats Subscriber highlights widget#50299

WOOA7S-1513: Port Stats Subscriber highlights widget#50299
chihsuan wants to merge 2 commits into
trunkfrom
wooa7s-1513-port-subscriber-highlights-widget

chihsuan commented Jul 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 8, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Jul 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

louwie17 left a comment

Uh oh!

louwie17 Jul 8, 2026

Uh oh!

louwie17 Jul 8, 2026

Uh oh!

louwie17 Jul 8, 2026

Uh oh!

louwie17 Jul 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

chihsuan commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Related product discussion/links

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

Testing instructions

Uh oh!

github-actions Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Jul 8, 2026

Code Coverage Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

louwie17 left a comment

Choose a reason for hiding this comment

Uh oh!

louwie17 Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

louwie17 Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

louwie17 Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

louwie17 Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

chihsuan commented Jul 8, 2026 •

edited

Loading

github-actions Bot commented Jul 8, 2026 •

edited

Loading