feat: add quadrant chart to compare page

[graphieros]

Resolves#2387

This adds a quadrant chart to the compare page, to visualise comparisons along 2 axes:

• X: adoption
• Y: package efficiency

The chart is displayed below the bar charts, and includes:

• png, svg exports
• alt text copy feature

Dark mode	Light mode

• A tooltip explains how the data is processed:

• Hovering datapoints reveals facets ordered through both axes of the quadrant:

Data processing:

• log scaled to handle large disparities: downloads, likes, install size, dependencies, package size
• adoption score: mostly driven by downloads, with small contributions from freshness and npmx likes
• efficiency score: based on install size, dependencies, vulnerabilities, TS support, deprecation

Some signals are inverted (so lower is better): size, deps, vulnerabilities
Deprecation is a hard override and forces min efficiency

The weights I have chosen can be subject to discussion, because of their arbitrary nature:

constWEIGHTS={adoption: {downloads: 0.75,// dominant signal because they best reflect real-world adoption (in the data we have through facets currently)freshness: 0.15,// small correction so stale packages are slightly likes: 0.1,// might be pumped up in the future when ./npmx likes are more mainstream},efficiency: {installSize: 0.3,// weighted highest because it best reflects consumer footprint// dependency weights are already measured in install size in some way, but still useful knobs to find the sweet spotdependencies: 0.05,// direct deps capture architectural and supply-chain complexitytotalDependencies: 0.2,// same for total depspackageSize: 0.1,vulnerabilities: 0.2,// penalize security burdentypes: 0.2,// TS support// Note: the 'deprecated' metric is not weighed because it just forces a -1 evaluation},}/* Fixed logarithmic ceilings to normalize metrics onto a stable [-1, 1] scale.* This avoids dataset-relative min/max normalization, which would shift scores depending* on which packages are being compared. Ceilings act as reference points for what is* considered 'high' for each metric, ensuring consistent positioning across different* datasets while preserving meaningful differences via log scaling. */constLOG_CEILINGS={downloads: 100_000_000,likes: 1000,// might be pumped up in the future when ./npmx likes are more mainstreaminstallSize: 25_000_000,dependencies: 100,totalDependencies: 1_000,packageSize: 15_000_000,}constVULNERABILITY_PENALTY_MULTIPLIER=2

Other

• Bump vue-data-ui to 3.17.11 with updates for the quadrant chart component, and other fixes to prevent errors in tests related to Teleport when legends are disabled.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 6, 2026 8:52pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 6, 2026 8:52pm
npmx-lunaria	Ignored		Apr 6, 2026 8:52pm

[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 ignoreKeywords 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.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a quadrant comparison chart to the Compare page: a new Vue <script setup> component FacetQuadrantChart.vue that maps incoming package data to a normalized quadrant dataset via createQuadrantDataset, computes adoption/efficiency scores (including freshness, vulnerability penalty, types/deprecation handling), assigns quadrants, and renders with VueUiQuadrant. Implements themed styling, responsive tooltips, PNG/SVG export handlers, alt-text generation/copy, print watermark sizing options, i18n entries/schema updates (EN/FR), a vue-data-ui dependency bump, and accompanying unit and a11y tests.

Possibly related PRs

• feat: add charts to compare page #846: Introduces framework utilities (e.g. getFrameworkColor / isListedFramework) that the new quadrant chart uses for framework-based colouring.
• feat(a11y): use seeded patterns in bar charts #2157: Modifies the same chart utilities and compare/bar chart components, overlapping with changes to app/utils/charts.ts and FacetBarChart.vue.
• feat: generate alt text in charts #1644: Adds alt-text generation and altCopy support for charts and updates chart utilities/types leveraged by the quadrant alt-text helpers.

Suggested labels

front, a11y

Suggested reviewers

• danielroe
• alexdln
• ghostdevv

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR contains one minor out-of-scope change: FacetBarChart.vue colour adjustment from fgSubtle to fg, unrelated to quadrant chart feature.	Consider separating the FacetBarChart.vue styling change into a separate PR or clarify its relationship to the quadrant chart feature.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR implements the quadrant chart feature resolving issue #2387, with all core requirements met including chart display, exports, alt-text, and scoring methodology.
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the quadrant chart feature, data processing methodology, scoring weights, and supporting changes.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch compare-quadrant-chart

---

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 and usage tips.}

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Compare/FacetQuadrantChart.vue	66.33%	28 Missing and 6 partials ⚠️
app/utils/charts.ts	0.00%	22 Missing and 5 partials ⚠️
app/composables/useChartWatermark.ts	0.00%	8 Missing and 1 partial ⚠️
app/utils/compare-quadrant-chart.ts	94.52%	2 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 7

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: be4b4196-422e-437b-89ff-c11f23cf7b05

📥 Commits

Reviewing files that changed from the base of the PR and between 5324b96 and 11fd407.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (11)

• app/components/Compare/FacetQuadrantChart.vue
• app/composables/useChartWatermark.ts
• app/pages/compare.vue
• app/utils/charts.ts
• app/utils/compare-quadrant-chart.ts
• i18n/locales/en.json
• i18n/locales/fr-FR.json
• i18n/schema.json
• package.json
• test/nuxt/a11y.spec.ts
• test/unit/app/utils/compare-quadrant-chart.spec.ts