premium-analytics: Add device types pie chart to dashboard (mock data) by dognose24 · Pull Request #30 · dognose24/jetpack

dognose24 · 2026-05-14T14:45:38Z

Fixes #

Proposed changes

Add PieChartUnresponsive from @automattic/charts to the Analytics dashboard with three mock device-type segments: Desktop (5400), Mobile (3800), Tablet (800)
Add @automattic/charts as a dependency to both projects/packages/premium-analytics/package.json and routes/dashboard/package.json
Unskip pie-chart-tooltip.spec.ts Playwright spec (was a placeholder pending this chart landing)

Related product discussion/links

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

No — mock data only, no tracking or data collection.

Testing instructions

Go to wp-admin/admin.php?page=jetpack-premium-analytics in a site with the premium-analytics plugin active
Verify the dashboard renders: "Analytics" heading, welcome paragraph, "Device Types" heading, and a pie chart with three labelled segments (Desktop, Mobile, Tablet)
Verify chart height is stable (no infinite growth on repeated loads)
Verify no uncaught JS exceptions in the browser console

Automated verification (wp-verify):

# Inside jetpack-ai-sandbox
CI=true pnpm --filter='@automattic/jetpack-premium-analytics' build
NODE_PATH=$(npm root -g) playwright test --config tools/ai-sandbox/wp-verify/playwright.config.ts
# Expected: 4 passed (0 skipped)

Agent Session Report

Scope respected: yes
Escalations triggered: 0
Contract violations: none
Human rework needed: none

Screenshot

Add PieChartUnresponsive with mock device-type data (Desktop/Mobile/Tablet) to the analytics dashboard. Unskip the hover/tooltip Playwright spec now that the chart is present. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-05-14T14:46:22Z

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 add/premium-analytics-pie-chart branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/premium-analytics-pie-chart

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/premium-analytics-pie-chart

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 · 2026-05-14T14:46:26Z

@copilot review

github-actions · 2026-05-14T14:46:44Z

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!

dognose24 · 2026-05-14T14:54:19Z

@claude please review this PR.

claude · 2026-05-14T14:54:42Z

Claude finished @dognose24's task in 1m 5s —— View job

PR Review

Gather context from PR metadata
Read changed files
Analyze code quality and correctness
Post review findings

Overall this is a clean, well-scoped implementation that respects the Phase 1 boundary (UI-only, mock data). A couple of things worth addressing before merge:

Issues

1. Chart labels are not i18n-wrapped — Medium

stage.tsx lines 6–8: the label values passed to PieChartUnresponsive are plain string literals that get rendered in the chart and in the tooltip popup, both of which are visible to end users. They should go through __() like the rest of the copy in this file.

// current
const DEVICE_TYPES: DataPointPercentage[] = [
    { label: 'Desktop', value: 5400 },
    { label: 'Mobile', value: 3800 },
    { label: 'Tablet', value: 800 },
];

// suggested
const DEVICE_TYPES: DataPointPercentage[] = [
    { label: __( 'Desktop', 'jetpack-premium-analytics' ), value: 5400 },
    { label: __( 'Mobile', 'jetpack-premium-analytics' ), value: 3800 },
    { label: __( 'Tablet', 'jetpack-premium-analytics' ), value: 800 },
];

Fix this →

2. Duplicate @automattic/charts dependency — Low

@automattic/charts is declared in both:

projects/packages/premium-analytics/package.json
projects/packages/premium-analytics/routes/dashboard/package.json

The import is in routes/dashboard/stage.tsx, so the route-level package.json is the correct owner. The parent package.json entry is redundant and could cause confusion. Unless there's a specific reason the parent package needs to re-export or depend on it directly (e.g. another future module at the top level), the entry in projects/packages/premium-analytics/package.json should be removed.

Looks Good

Fixed dimensions (width={360} height={360}) with PieChartUnresponsive is the right call — avoids the infinite-resize loop that a responsive wrapper would cause in this context.
withTooltips prop correctly enables the tooltip that the Playwright spec tests for.
CSS import (@automattic/charts/style.css) is present — easy to forget, good that it's here.
Test unskip: the spec matches what's implemented — hover a segment, assert .visx-tooltip is visible and contains Desktop|Mobile|Tablet. The page.mouse.move() approach is the right pattern for SVG event handling (as documented in the spec comments).
Changelog entry is present and correctly uses patch + added significance.
Phase 1 boundary is respected — no data fetching, no new endpoints, no shared stores.

Address review: wrap 'Desktop', 'Mobile', 'Tablet' labels with __() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dognose24 · 2026-05-14T15:09:10Z

Addressed review feedback:

Issue #1 (i18n labels) — fixed in 33b445a. The Desktop, Mobile, Tablet label strings are now wrapped with __().

Issue #2 (duplicate @automattic/charts dep) — both entries are intentional. The task spec explains: pnpm workspace globs only register projects/*/* top-level package directories, so the projects/packages/premium-analytics/package.json entry is what makes workspace resolution succeed. The route-level entry exists for bundler/dependency-graph metadata. Omitting either has caused module-resolution or build failures in prior runs. Keeping both per spec.

dognose24 · 2026-05-14T15:14:16Z

@claude please re-review.

Changes since last review:

Fixed: i18n-wrapped Desktop, Mobile, Tablet labels with __() (commit 33b445a)
Not changed: both @automattic/charts dependency entries are intentional — workspace resolution requires the top-level entry

claude · 2026-05-14T15:14:37Z

Claude finished @dognose24's task in 48s —— View job

Re-review

Gather context from PR metadata
Read updated files (stage.tsx, package.json files, test spec)
Verify i18n fix (commit 33b445a)
Assess duplicate dependency rationale
Post updated review findings

Both issues from the previous review have been handled. Here's the verdict on each:

Issue #1 — i18n labels: ✅ Fixed

stage.tsx lines 6–8 now correctly wrap all three labels with __() using the 'jetpack-premium-analytics' text domain, consistent with the rest of the file. No issues here.

Issue #2 — Duplicate @automattic/charts dependency: ✅ Accepted

The explanation holds up. In this pnpm workspace, projects/*/* is the glob for top-level package discovery, so projects/packages/premium-analytics/package.json is the workspace-registered entry point. The route-level package.json in routes/dashboard/ carries the dependency for bundler/dep-graph purposes, while the top-level entry is what pnpm uses for workspace resolution. Keeping both is correct for this setup.

Everything else looks good

stage.tsx is clean and minimal — 20 lines, no dead code.
PieChartUnresponsive with fixed width={360} height={360} correctly avoids any resize-observer loop.
withTooltips is present so the Playwright tooltip assertion can fire.
CSS import (@automattic/charts/style.css) is in place.
The Playwright spec is well-commented, uses the correct page.mouse.move() pattern for SVG hover, and the .visx-tooltip selector is scoped appropriately.
Changelog entry uses correct patch + added significance.
Phase 1 boundary respected — no data fetching, no new endpoints, no shared stores.

This PR is ready to merge. No further changes needed.

dognose24 · 2026-05-14T15:14:45Z

CI Note: The 'Check' workflow fails with 'token not supplied' — this is the pr-review-cycle.yml workflow that needs an ANTHROPIC_API_KEY secret not configured in this fork. Unrelated to code changes; safe to ignore for review purposes.

dognose24 · 2026-05-14T15:25:36Z

Review Cycle Summary

Rounds completed: 2 (kickoff + 1 review round)

Addressed comments:

i18n labels (claude[bot], round 2) — wrapped Desktop, Mobile, Tablet labels in __() in DEVICE_TYPES array. Commit 33b445a926.
Duplicate dep rationale (claude[bot], round 2) — explained in PR comment: both package.json entries are intentional for pnpm workspace resolution. No code change needed.

CI status: No required checks for this fork. One non-blocking failure: pr-review-cycle.yml missing token secret (infrastructure config, not code-related).

Resolved inline threads: 0

Unaddressed human reviewer comments: 0

AI re-review (round 3): ✅ Claude confirmed both issues resolved. "This PR is ready to merge."

🤖 Automated review cycle completed. Ready for human merge decision.

Copilot

Pull request overview

Adds a mock “Device Types” pie chart to the Premium Analytics dashboard and enables the previously-placeholder Playwright coverage for chart tooltips/hover behavior.

Changes:

Render PieChartUnresponsive on the dashboard with mock device-type data and tooltips enabled.
Add @automattic/charts as a dependency for the premium-analytics package and the dashboard route package.
Unskip the wp-verify Playwright spec covering pie-chart tooltip behavior.

Reviewed changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tools/ai-sandbox/wp-verify/tests/pie-chart-tooltip.spec.ts	Unskips the pie-chart tooltip interaction Playwright spec.
projects/packages/premium-analytics/routes/dashboard/stage.tsx	Adds “Device Types” heading plus a fixed-size pie chart using mock data.
projects/packages/premium-analytics/routes/dashboard/package.json	Adds `@automattic/charts` dependency for the dashboard route bundle.
projects/packages/premium-analytics/package.json	Adds `@automattic/charts` dependency for the overall premium-analytics package build.
projects/packages/premium-analytics/changelog/add-premium-analytics-pie-chart	Adds a patch “added” changelog entry for the new dashboard chart.
pnpm-lock.yaml	Updates lockfile for the new workspace dependency (and associated metadata).

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

tools/ai-sandbox/wp-verify/tests/pie-chart-tooltip.spec.ts:31

Now that this suite is unskipped, the test name says the tooltip should include both the segment label and value, but the assertions only check for the label (Desktop/Mobile/Tablet). Either assert the expected value formatting as well, or rename the test to match what it actually verifies to avoid false confidence.

test.describe( 'Pie chart interactions', () => {
	test( 'hover on a segment reveals tooltip with the segment label and value', async ( {
		page,
	} ) => {
		await page.goto( ANALYTICS_URL );

@@ -1,10 +1,20 @@
+import { PieChartUnresponsive, type DataPointPercentage } from '@automattic/charts';


…task skill Step 5's local-only regression injection leaves no durable trace by design — the post-revert filesystem state is identical whether Step 5 ran clean or was silently skipped. RSM-3269 / the dashboard-pie-chart sandbox run surfaced this: Step 5 actually ran correctly but PR #30 had no way to prove it; the only evidence lived in the agent's session log. This change closes the evidence gap: * Step 5 sub-step 8 — append a structured outcome block to `/tmp/dod-report.md` for each DoD item executed: edit applied, expected failing spec, actual failure observation, other specs status, revert + re-run summary. `/tmp/` location matches the RSM-3254 state-file pattern (outside `.claude/`, no commit pollution). * Step 8 — after push + PR open/update, if `/tmp/dod-report.md` exists post its contents as a PR comment under the `## DoD verification` heading, then delete the buffer. Reviewers see the verification result in the PR conversation thread. * HARD rule — Step 5 in scope without a corresponding `## DoD verification` comment = task failed. Forces agent to leave evidence; no longer optional. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dognose24 and others added 2 commits May 14, 2026 14:44

chore: add wp-verify screenshot for add-premium-analytics-pie-chart

52b753d

dognose24 added the [Status] Needs Review label May 14, 2026

dognose24 self-assigned this May 14, 2026

github-actions Bot added [Package] Premium Analytics [Tests] Includes Tests Docs labels May 14, 2026

fix(premium-analytics): i18n-wrap device type labels in DEVICE_TYPES

33b445a

Address review: wrap 'Desktop', 'Mobile', 'Tablet' labels with __() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dognose24 mentioned this pull request May 14, 2026

tools: move pr-review-state.json out of .claude/ to /tmp/ #31

Merged

dognose24 requested a review from Copilot May 14, 2026 15:39

Copilot started reviewing on behalf of dognose24 May 14, 2026 15:39 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

Comment thread projects/packages/premium-analytics/routes/dashboard/stage.tsx

@@ -1,10 +1,20 @@

import { PieChartUnresponsive, type DataPointPercentage } from '@automattic/charts';

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

premium-analytics: Add device types pie chart to dashboard (mock data)#30

premium-analytics: Add device types pie chart to dashboard (mock data)#30
dognose24 wants to merge 3 commits into
trunkfrom
add/premium-analytics-pie-chart

dognose24 commented May 14, 2026

Uh oh!

github-actions Bot commented May 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

claude Bot commented May 14, 2026 •

edited

Loading

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

claude Bot commented May 14, 2026 •

edited

Loading

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1,10 +1,20 @@
		import { PieChartUnresponsive, type DataPointPercentage } from '@automattic/charts';

Conversation

dognose24 commented May 14, 2026

Proposed changes

Related product discussion/links

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

Testing instructions

Agent Session Report

Screenshot

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

claude Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review

Issues

Looks Good

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

claude Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Re-review

Everything else looks good

Uh oh!

dognose24 commented May 14, 2026

Uh oh!

dognose24 commented May 14, 2026

Review Cycle Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented May 14, 2026 •

edited

Loading

claude Bot commented May 14, 2026 •

edited

Loading

claude Bot commented May 14, 2026 •

edited

Loading