Skip to content

fix: improve compare quadrant chart labels #2416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
graphieros merged 4 commits into from
Apr 8, 2026
+36 −36
Merged

fix: improve compare quadrant chart labels #2416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1dafd2a
fix: improve compare quadrant chart labels
graphieros Apr 8, 2026
2a48d81
Merge branch 'main' into compare-quadrant-relabelling
graphieros Apr 8, 2026
5e1ffb8
fix: translations
graphieros Apr 8, 2026
ef000e0
Merge branch 'compare-quadrant-relabelling' of https://github.com/npm…
graphieros Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/components/Compare/FacetQuadrantChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,10 +376,10 @@ const config = computed<VueUiQuadrantConfig>(() => {
colors: watermarkColors,
translateFn: $t,
positioning: 'bottom',
sizeRatioTagline: 0.6,
sizeRatioTagline: 0.5,
sizeRatioLogo: 0.4,
offsetYTagline: 20,
offsetYLogo: 12,
offsetYTagline: 0,
offsetYLogo: -8,
})
"
/>
Expand Down
30 changes: 15 additions & 15 deletions i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1237,27 +1237,27 @@
"add_hint": "Add at least 2 packages to compare."
},
"quadrant_chart": {
"label_x_axis": "Adoption",
"label_y_axis": "Efficiency",
"label_top_right": "high impact",
"label_bottom_right": "popular but heavy",
"label_bottom_left": "low impact",
"label_top_left": "promising",
"title": "Adoption vs Package efficiency",
"filename": "package-adoption-vs-efficiency-matrix",
"label_x_axis": "Traction",
"label_y_axis": "Ergonomics",
"label_top_right": "Solid picks",
"label_bottom_right": "popular with tradeoffs",
"label_bottom_left": "avoid",
"label_top_left": "hidden gems",
"title": "Package traction vs ergonomics",
"filename": "package-traction-vs-ergonomics-quadrant",
"label_freshness_score": "Freshness score",
"copy_alt": {
"description": "Quadrant chart mapping adoption versus efficiency for the {packages} packages. {analysis}. {watermark}.",
"side_analysis_top_right": "The following packages are positioned on the top-right quadrant (high-impact): {packages}",
"side_analysis_top_left": "The following packages are positioned on the top-left quadrant (promising): {packages}",
"side_analysis_bottom_right": "The following packages are positioned on the bottom-right quadrant (popular but heavy): {packages}",
"side_analysis_bottom_left": "The following packages are positioned on the bottom-left quadrant (low-impact): {packages}"
"description": "Quadrant chart mapping traction versus ergonomics for the {packages} packages. {analysis}. {watermark}.",
"side_analysis_top_right": "The following packages are positioned on the top-right quadrant (solid picks): {packages}",
"side_analysis_top_left": "The following packages are positioned on the top-left quadrant (hidden gems): {packages}",
"side_analysis_bottom_right": "The following packages are positioned on the bottom-right quadrant (popular with tradeoffs): {packages}",
"side_analysis_bottom_left": "The following packages are positioned on the bottom-left quadrant (avoid): {packages}"
},
"explanation": {
"tooltip_help": "Show scoring explanation",
"introduction": "The score is calculated by combining multiple signals into two axes:",
"adoption": "Adoption: reflects usage and activity (downloads, freshness, likes)",
"efficiency": "Package efficiency: reflects footprint and quality (install size, dependencies, vulnerabilities, type support)",
"adoption": "Traction: reflects usage and activity (downloads, freshness, likes)",
"efficiency": "Ergonomics: reflects footprint and quality (install size, dependencies, vulnerabilities, type support)",
Comment on lines +1259 to +1260
Copy link
Copy Markdown
Member

@serhalp serhalp Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💭 Would it be hard to show these as tooltips on the two axis labels themselves as well? As a user I think that would be the first thing I would try to find out what the axes mean.

Copy link
Copy Markdown
Contributor Author

@graphieros graphieros Apr 8, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very good idea 💡

Probably requires to inject foreignObjects in the #svg slot, and use our tooltip thing inside, and hoping it works on Safari (and behaves correctly in print).

Will try to make it work.

"impact_details": "Each metric contributes with a different weight. Strong signals like downloads and install size have the largest impact, while others refine the result. Some signals (such as vulnerabilities or deprecation) apply penalties."
}
},
Expand Down
36 changes: 18 additions & 18 deletions i18n/locales/fr-FR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1230,28 +1230,28 @@
"add_hint": "Ajoutez au moins 2 paquets à comparer."
},
"quadrant_chart": {
"label_x_axis": "Adoption",
"label_y_axis": "Efficacité du paquet",
"label_top_right": "fort impact",
"label_bottom_right": "populaire mais lourd",
"label_bottom_left": "faible impact",
"label_top_left": "prometteur",
"title": "Adoption vs efficacité du paquet",
"filename": "matrice-adoption-vs-efficacite-paquet",
"label_x_axis": "Traction",
"label_y_axis": "Ergonomie",
"label_top_right": "Choix sûrs",
"label_bottom_right": "Populaires avec compromis",
"label_bottom_left": "À éviter",
"label_top_left": "Pépites cachées",
"title": "Popularité vs ergonomie des paquets",
"filename": "quadrant-popularite-vs-ergonomie-paquets",
"label_freshness_score": "Score de fraîcheur",
"copy_alt": {
"description": "Graphique en quadrants représentant l’adoption et l’efficacité pour les paquets {packages}. {analysis}. {watermark}.",
"side_analysis_top_right": "Les paquets suivants sont positionnés dans le quadrant en haut à droite (fort impact) : {packages}",
"side_analysis_top_left": "Les paquets suivants sont positionnés dans le quadrant en haut à gauche (prometteur) : {packages}",
"side_analysis_bottom_right": "Les paquets suivants sont positionnés dans le quadrant en bas à droite (populaires mais lourds) : {packages}",
"side_analysis_bottom_left": "Les paquets suivants sont positionnés dans le quadrant en bas à gauche (faible impact) : {packages}"
"description": "Diagramme en quadrants représentant la popularité par rapport à l’ergonomie pour les paquets {packages}. {analysis}. {watermark}.",
"side_analysis_top_right": "Les paquets suivants sont positionnés dans le quadrant supérieur droit (choix sûrs) : {packages}",
"side_analysis_top_left": "Les paquets suivants sont positionnés dans le quadrant supérieur gauche (pépites cachées) : {packages}",
"side_analysis_bottom_right": "Les paquets suivants sont positionnés dans le quadrant inférieur droit (populaires avec compromis) : {packages}",
"side_analysis_bottom_left": "Les paquets suivants sont positionnés dans le quadrant inférieur gauche (à éviter) : {packages}"
},
"explanation": {
"tooltip_help": "Afficher l'explication du score",
"introduction": "Le score est calculé en combinant plusieurs signaux selon deux axes :",
"adoption": "Adoption : reflète l’utilisation et l’activité (téléchargements, fraîcheur, likes)",
"efficiency": "Efficacité du paquet : reflète l’empreinte et la qualité (taille installée, dépendances, vulnérabilités, support TypeScript)",
"impact_details": "Chaque métrique contribue avec un poids différent. Les signaux forts comme les téléchargements et la taille installée ont le plus d’impact, tandis que les autres affinent le résultat. Certains signaux (comme les vulnérabilités ou la dépréciation) appliquent des pénalités."
"tooltip_help": "Afficher l’explication du score",
"introduction": "Le score est calculé en combinant plusieurs signaux sur deux axes :",
"adoption": "Popularité : reflète l’utilisation et l’activité (téléchargements, fraîcheur, mentions)",
"efficiency": "Ergonomie : reflète l’empreinte et la qualité (taille d’installation, dépendances, vulnérabilités, support des types)",
"impact_details": "Chaque métrique contribue avec un poids différent. Les signaux forts comme les téléchargements et la taille d’installation ont le plus d’impact, tandis que d’autres affinent le résultat. Certains signaux (comme les vulnérabilités ou l'obsolescence) appliquent des pénalités."
}
},
"no_dependency": {
Expand Down
Loading