fix: improve score breakdown chart layout after repo increase

[graphieros]

• asc sort
• tooltip
• font sizes and bar height

Enregistrement.de.l.ecran.2026-07-01.a.11.44.39.mov

Summary by CodeRabbit

• New Features

  • Improved chart tooltips with clearer, custom-styled content, including a percentage pill with text color that adapts for readability.
  • Updated chart styling to use theme-based colors for better visual consistency.

• Bug Fixes

  • Enhanced tooltip contrast to improve legibility across different background colors.
  • Adjusted chart layout and sizing for a cleaner, more balanced display.

[coderabbitai]

📝 Walkthrough

Walkthrough

The FeaturedPackageHealthRanking.vue chart configuration was updated to use theme-derived colors, adjusted bar sort order, label sizing, and tooltip/highlighter styling. A custom #tooltip slot was added that renders a percentage pill with text color computed via adaptColorToBackground.

Changes

Featured Package Health Ranking chart update

Layer / File(s)	Summary
Themed chart config and layout adjustments app/components/Chart/FeaturedPackageHealthRanking.vue	Chart background and label text now use theme colors, bar sort order switches from desc to asc, component height increases, and highlighter/tooltip opacity and border/background settings are adjusted.
Custom tooltip slot with adaptive text color app/components/Chart/FeaturedPackageHealthRanking.vue	Imports adaptColorToBackground and replaces default bar tooltip behavior with a custom #tooltip slot showing the datapoint name and a colored percentage pill with dynamically computed text color.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• MatteoGabriele/agentscan#146: Introduces the horizontal bar chart component in FeaturedPackageHealthRanking.vue that this PR further styles and updates.

Suggested reviewers: MatteoGabriele

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title is concise and matches the main change: chart layout and tooltip styling updates after repo growth.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

app/components/Chart/FeaturedPackageHealthRanking.vue (1)

39-39: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Hardcoded colors amid themed config.

rowColor: '#FFFFFF00' and underlayerColor: '#FFFFFF' are hardcoded while sibling properties (backgroundColor, dataLabels.color, nameLabels.color, highlighter.color, tooltip.*) all derive from colors.value.*. This will look inconsistent if the theme (e.g., dark mode) changes.

♻️ Suggested consistency fix

-            rowColor: '`#FFFFFF00`',
+            rowColor: colors.value.bgSubtle ?? '`#FFFFFF00`',
...
-            underlayerColor: '`#FFFFFF`',
+            underlayerColor: colors.value.bg,

Also applies to: 50-50

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/Chart/FeaturedPackageHealthRanking.vue` at line 39, The chart
styling in FeaturedPackageHealthRanking.vue mixes hardcoded row and underlayer
colors with theme-derived colors, which can break consistency across themes.
Update the rowColor and underlayerColor settings in the chart config to use the
existing colors.value palette, following the same pattern used by
backgroundColor, dataLabels.color, nameLabels.color, highlighter.color, and
tooltip fields so the component stays theme-aware.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/components/Chart/FeaturedPackageHealthRanking.vue`:
- Line 39: The chart styling in FeaturedPackageHealthRanking.vue mixes hardcoded
row and underlayer colors with theme-derived colors, which can break consistency
across themes. Update the rowColor and underlayerColor settings in the chart
config to use the existing colors.value palette, following the same pattern used
by backgroundColor, dataLabels.color, nameLabels.color, highlighter.color, and
tooltip fields so the component stays theme-aware.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 61324d25-47ae-4484-a28d-cf726e4c187e

📥 Commits

Reviewing files that changed from the base of the PR and between d4cd302 and 57424a2.

📒 Files selected for processing (1)

• app/components/Chart/FeaturedPackageHealthRanking.vue