feat: use a horizontal bar chart for the version distribution

[graphieros]

🔗 Linked issue

Resolves #3280

🧭 Context

In the stats page, the current version distribution chart uses vertical bars, which was ok when the chart used to be inside a dialog and the vertical real estate was constrained. However this layout comes with serious limitations (the data is hard to read, and bars become very narrow when minors are laid out for an old package).

Since the stats page now offers vertical real estate, it is time to migrate this chart to a horizontal bar chart, which also makes it easy to display data labels next to the bars, and allows to display n number of datapoints without sacrificing on readability.

📚 Description

• Use a horizontal bar chart
• Add a settings toggle above the chart to order by downloads
• Bump vue-data-ui to latest (release notes) which fixes issues related to the VueUiHorizontalBar component used here
• Update translations

Ordered by downloads	Default (ordered by version)

[vercel]

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

Project	Deployment	Actions	Updated
npmx.dev	Ready	Preview	Sep 22, 2026 3:56pm UTC

2 Skipped Deployments

Project	Deployment	Actions	Updated
docs.npmx.dev	Ignored	Preview	Sep 22, 2026 3:56pm UTC
npmx-lunaria	Ignored		Sep 22, 2026 3:56pm UTC

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vue-data-ui@​3.25.9 ⏵ 3.25.10				+1

View full report

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: npmx-dev/npmx.dev/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 17f8c97a-d3e2-4d74-b7ed-5c90a9c40cd4

📥 Commits

Reviewing files that changed from the base of the PR and between 701900d and 1df02a4.

📒 Files selected for processing (1)

• app/components/Package/VersionDistribution.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/Package/VersionDistribution.vue

Included review availability: Your plan provides up to 8 included reviews per hour; 5 remain after this review.

---

📝 Summary

Summary by CodeRabbit

• New Features

  • Added a horizontal chart for package version download distribution.
  • Added an option to order version groups by download count.
  • Added chart tooltips, legends, print watermarks and improved copied chart descriptions.
  • Added a subtitle identifying the chart’s download metric.

• Translations

  • Added English and French labels for ordering by downloads.

• Bug Fixes

  • Improved version distribution visualisation and accessibility, including handling of missing download values.

Walkthrough

The version distribution chart now uses horizontal bars. A settings toggle can order bars by downloads. Chart rendering, export, watermark, tooltip, legend, alt-text handling, translations, tests, and the vue-data-ui version were updated.

Changes

Version distribution chart

Layer / File(s)	Summary
Chart preference and supporting contracts app/composables/useSettings.ts, i18n/locales/*, i18n/schema.json, package.json, pnpm-workspace.yaml	The settings model adds download ordering with a default of false. Locales and the schema add order_by_downloads. vue-data-ui is updated to 3.25.10.
Horizontal bar chart implementation app/components/Package/VersionDistribution.vue	The component replaces VueUiXy with VueUiHorizontalBar. It adds optional download ordering, tooltip and legend slots, and print or PNG watermark handling. Minimap, zoom, grid, gradient, and related sizing and styling logic are removed.
Horizontal bar alt text and validation app/utils/charts.ts, test/unit/app/utils/charts.spec.ts	Alt-text functions now consume VueUiHorizontalBarDatapoint[] and use datapoint names, values, indexes, and the configured package name. Tests use the new datapoint shape and cover empty, null, and undefined values.

Sequence Diagram(s)

sequenceDiagram
  participant PackageStats
  participant VersionDistribution
  participant VueUiHorizontalBar
  PackageStats->>VersionDistribution: provide version distribution data
  VersionDistribution->>VersionDistribution: build and optionally sort barDataset
  VersionDistribution->>VueUiHorizontalBar: render horizontal bars and barConfig
  VueUiHorizontalBar-->>VersionDistribution: render tooltip, legend, or watermark slots

Loading

Priority: ➖ Normal

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 1df02

The stats page now uses horizontal version bars with optional download ordering; no concrete production-impacting issue is identified, so the change is mergeable with normal checks.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: replacing the version distribution chart with a horizontal bar chart.
Description check	✅ Passed	The description directly explains the horizontal chart migration, download-order toggle, dependency update, translations, and linked issue.
Linked Issues check	✅ Passed	Issue [#3280] requires the version distribution chart to use horizontal bars, improve readability, show labels beside bars, and support any number of data points. VersionDistribution.vue replaces `V…
Out of Scope Changes check	✅ Passed	The changes remain connected to [#3280]. The ordering setting, translation keys, chart utility updates, unit-test updates, vue-data-ui update, and print or copy support support the new horizontal ch…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the tracking.ignoredKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[codecov]

Codecov Report

❌ Patch coverage is 36.36364% with 28 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	34.88%	23 Missing and 5 partials ⚠️

📢 Thoughts on this report? Let us know!

[github-actions]

e18e dependency analysis

No dependency warnings found.

[alexdln]

Looks great 🔥