feat: add watermark on chart SVG and PNG prints

[graphieros]

Closes #1197

• bump vue-data-ui to 3.14.10 (exposing svg and img print status to the #svg slot)
• inject watermark with npmx logo and tagline during the print process
• recreate the legend and inject it for the SVG print
• add horizontal scale lines
• add time labels

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 9, 2026 11:46am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 9, 2026 11:46am
npmx-lunaria	Ignored		Feb 9, 2026 11:46am

[codecov]

Codecov Report

❌ Patch coverage is 18.51852% with 22 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/DownloadAnalytics.vue	18.51%	18 Missing and 4 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates the DownloadAnalytics component to add SVG/PNG export helpers (print legend and npmx watermark), adjust chart rendering and layout (bottom padding, horizontal grid lines, x‑axis label modulo, yearly/monthly overlays), bind minimap visibility to series length, switch to a single‑series legend in non‑multi‑package mode, extend CSS variable usage (adding --fg-muted), and add print‑specific CSS overrides. It also injects the legend and watermark into the SVG/PNG export flow and bumps vue-data-ui from 3.14.9 to 3.14.10.

Possibly related PRs

• feat: add downloads estimations on large charts #1177: Overlapping changes to DownloadAnalytics.vue affecting legend rendering and SVG/chart export/overlay logic.
• feat: add charts to compare page #846: Related edits to chart/legend handling and export/minimap visibility within DownloadAnalytics.vue.

Suggested reviewers

• danielroe
• garthdw
• shuuji3

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing specific enhancements including watermark injection, legend recreation, horizontal lines, and time labels.
Linked Issues check	✅ Passed	All coding requirements from issue #1197 are met: watermark with npmx logo added [#1197], horizontal grid lines implemented [#1197], and additional x-axis time labels included [#1197].
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue objectives: chart export enhancements, watermark addition, legend recreation, grid lines, and time labels are all within scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/components/Package/DownloadAnalytics.vue (1)

1483-1485: Consider dynamic modulo based on granularity.

The hardcoded modulo: 12 shows labels every 12 datapoints, which works well for monthly data (yearly intervals) but may be less intuitive for daily granularity (every 12 days).

💡 Optional: Dynamic modulo based on granularity

 xAxisLabels: {
   show: true,
   showOnlyAtModulo: true,
-  modulo: 12,
+  modulo: displayedGranularity.value === 'daily' ? 7 : 12,

This would show daily labels weekly (every 7 days) while keeping the 12-interval for other granularities.