Premium Analytics: add the Subscribers chart widget#50064
Conversation
Port the Jetpack Stats subscribers chart into a registered jpa/subscribers-chart widget: subscriber growth over time with a same-colour dashed previous-period overlay and paid subscribers, a period-over-period delta headline, and an in-body Group by (day/week/month) granularity dropdown. Fetches via the designated useStatsSubscribers hook (current + preceding window) and composes the widgets-toolkit MetricWithComparison + ComparativeLineChart primitives using the charts group + type:'comparison' pattern. Adds a stats/subscribers Storybook mock so the stories render.
|
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
After —
|
Code Coverage SummaryThis 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. 🤷 |
Replace the single headline number with one selectable card per metric (Subscribers, Paid subscribers) — each showing its value + period-over-period delta — and switch the chart to the focused metric (its current line plus the dashed previous-period overlay), following the analytics-at-a-glance pattern. Extract the metric-cards + comparative-line-chart composition into a reusable MetricTabsChart component in widgets-toolkit (owns selection, current/previous series building, and layout) so the traffic chart (WOOA7S-1504) can reuse it; the subscribers widget now just supplies per-metric data and the granularity dropdown.
Update — metric cards (analytics-at-a-glance pattern)Replaced the single headline number with one selectable card per metric. Each card shows its value + period-over-period delta; selecting a card focuses the chart on that metric (current solid line + same-colour dashed previous-period overlay). The granularity Group by dropdown stays top-right. 
This composition is the reusable |
Use the @wordpress/ui Tabs primitive (the same family the PA dashboard and analytics-at-a-glance use) for the metric cards instead of hand-rolled buttons, with the card content stacked (label over value + delta) and the selected card highlighted. Add an optional per-metric description (surfaced as the card's tooltip) and let the tab row wrap, so the component stays reusable and customizable for the traffic chart (WOOA7S-1504), which switches 4–5 metrics.
Update — metric cards on
|
Give the metric cards real padding, a hover state, and a clear filled selected state, and hide the component's underline indicator so the cards read as cards. Resolve each series' style via useSeriesStyles and pass it to ComparativeLineChart so the chart lines, legend, and tooltip glyphs all reflect the dashed previous-period pattern (the tooltip/legend glyphs were previously solid).
More screenshots + card polishPolished the metric cards (padding, hover, a clear filled selected state, hid the stray underline indicator) and fixed the legend/tooltip glyphs so the dashed previous-period pattern is reflected everywhere (via Subscribers selected Paid subscribers selected (switching focuses the chart on that metric) Tooltip glyphs now match the line pattern (solid = current, dashed = previous period) In the real |
Shared, reusable building blocks belong in widgets-toolkit/src/components (like ComparativeLineChart and ReportMetricWidget); src/widgets is for domain-specific widget compositions. Move MetricTabsChart from src/widgets to src/components and re-export it from the components barrel accordingly.
Match the components/ convention (report-metric, chart-comparative-line, …) with a component-level story exercising the reusable API: multiple metrics with selection, a single metric without a previous period, and the loading state.
Default the window end to localTZDate() (site timezone) instead of new Date() so the terminal bucket is correct regardless of the viewer's timezone, matching the other Stats widgets (e.g. top-posts).
- Drop the redundant StatsSubscribersResponse casts; useStatsSubscribers already infers the response type from the query options. - Key the loading overlay off isFetching so switching the Group by granularity shows the indicator while the new window loads, instead of leaving the placeholder (prior-granularity) series on screen with no feedback.
On short tiles the chart was forced to 260px and clipped to a sliver under the metric cards. Let the chart flex-shrink to the space under the cards, and use a ResizeObserver to drop the chart entirely below a minimum tile height so only the metric cards show (mirrors analytics-at-a-glance). Adds a Compact story.
|
@chihsuan thanks for the review! Small widget size — addressed in d6f06b6. On short tiles the chart was forced to 260px and clipped to a sliver under the cards. It now flex-shrinks to the space under the cards, and a 
Legend labels vs date range — the chart shows one metric at a time and overlays its previous period, so the legend reads |
chihsuan
left a comment
chihsuan
left a comment
There was a problem hiding this comment.
I kept the metric name because with two metrics (Subscribers vs Paid subscribers) a bare date range wouldn't say which metric the line is, and the selected card already frames it. The exact dates are in the hover tooltip
Understood. it seems more related to design, so I'll defer it to the design. 🙂
LGTM!
2 participants
Proposed changes
Ports the Jetpack Stats Subscribers chart card into a registered Premium Analytics widget,
jpa/subscribers-chart, in the Subscribers section — and extracts the metric-cards + comparative-chart composition into a reusable toolkit component.Why: WOOA7S-1458 is migrating the Jetpack Stats cards into the Premium Analytics dashboard. The legacy interval segmented control becomes an in-body Group by dropdown, and (per the redesign) the previous period is overlaid as a dashed line.
MetricTabsChart(reusable,widgets-toolkit)Following the
analytics-at-a-glancepattern: a row of selectable metric cards (each a headline value + period-over-period delta) over a comparative line chart, where selecting a card focuses the chart on that metric — its current solid line plus a same-colour dashed previous-period overlay. It owns selection, series building (current +type: 'comparison'dashed overlay with a transparent fill), and layout; consumers just supply per-metric data + headline values and an optional header control slot. Built so the traffic chart (WOOA7S-1504) can reuse it directly.jpa/subscribers-chartwidgetday/week/month, driving theunitquery param.useStatsSubscribershook (current + immediately-preceding window) in a smalluse-subscribers-chartview hook; headline value = the window's latest cumulative total, delta = period-over-period.apiFetch; no reinvented chart/helpers; no hardcoded colours (grouped series get a stable theme colour). Adds astats/subscribersStorybook mock (same pattern as the existingstats/followershandler).Related product discussion/links
Does this pull request change what data or activity we track or use?
No. It reads existing Jetpack Stats subscribers data through the established Premium Analytics proxy; no new tracking.
Testing instructions
jetpack build packages/premium-analytics, open Storybook → Packages/Premium Analytics/Widgets/SubscribersChart.WidgetDashboardas a framed "Subscribers" card.?page=jetpack-premium-analytics-wp-admin): Customize → Add widget → Subscribers in the Subscribers tab. Confirm it loads, cards switch the chart, and the console is clean./widget-audit subscribers-chart,eslint, andtsgoall pass.Latest screenshot (two-card layout) in the comment below.