fix: tweak versions chart config

[graphieros]

Follow up to the awesome #1245

• remove excess space between the chart area and scale labels
• improve the aspect ratio
• add translation labels for the context menu
• add callbacks for menu actions
• rotate x axis labels so they point towards time
• fix watermark overlap

[vercel]

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

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

2 Skipped Deployments

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

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Package/VersionDistribution.vue	0.00%	26 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces chart export functionality to the VersionDistribution component, enabling users to download charts as CSV, PNG, or SVG files with sanitized, date-range-inclusive filenames. The changes include configuration for export button titles and callbacks, conversion of chart data to downloadable blobs, and UI enhancements such as horizontal grid lines, adjusted axis label styling, and increased mobile chart height. Additionally, a minor aspect ratio adjustment was made to the modal placeholder in the Versions component to improve rendering stability during transitions.

Possibly related PRs

• feat: add charts to compare page #846: Adds chart export utilities and export configuration to enable direct file downloads, directly paralleling the export functionality introduced in this PR.
• feat(ui): community version distribution #1245: Modifies VersionDistribution.vue with chart and UI features, providing the foundational component structure that this PR extends with export capabilities.
• fix: overlapping watermark with rotated labels #1361: Updates VersionDistribution.vue's chart layout including x-axis label handling and spacing logic, affecting the same component's visual presentation.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is directly related to the changeset, detailing specific improvements to the versions chart configuration including spacing, aspect ratio, labels, and styling.

_{✏️ 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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

121-191: ⚠️ Potential issue | 🟡 Minor

Defer object URL revocation and set CSV MIME type for downloads.

The loadFile function triggers downloads asynchronously via a.click(), but object URLs are revoked immediately afterwards in both the CSV and SVG callbacks. This creates a race condition where browsers may not have begun reading the blob URL before revocation, causing downloads to fail—particularly in Safari. Additionally, the CSV Blob should explicitly specify its MIME type.

🛠️ Suggested changes

-            const blob = new Blob([
-              csvStr
-                .replace('data:text/csv;charset=utf-8,', '')
-                .replaceAll(`\n${multilineDateTemplate}`, ` ${multilineDateTemplate}`),
-            ])
+            const blob = new Blob(
+              [
+                csvStr
+                  .replace('data:text/csv;charset=utf-8,', '')
+                  .replaceAll(`\n${multilineDateTemplate}`, ` ${multilineDateTemplate}`),
+              ],
+              { type: 'text/csv;charset=utf-8' },
+            )
             const url = URL.createObjectURL(blob)
             loadFile(url, buildExportFilename('csv'))
-            URL.revokeObjectURL(url)
+            setTimeout(() => URL.revokeObjectURL(url), 0)

Apply the same setTimeout deferral to the SVG callback (line 166).