fix(ui): align dependency size tooltip order with chart

[dvd233]

🔗 Linked issue

Fixes #3239

🧭 Context

The dependency-size chart and its tooltip showed the same stack in opposite orders, which made similarly colored segments difficult to match.

📚 Description

• Keep vue-data-ui's tooltip datapoint order, which already follows the visual stack from top to bottom.
• Preserve the existing delta and removed-dependency behavior in a testable helper.
• Add a regression test for ordering, deltas, and removed segments.

Screenshots

Before	After

Testing

• pnpm test -- --coverage.enabled=false — 2,919 passed, 5 skipped
• pnpm test:types
• pnpm vp run lint
• pnpm vp run test:browser:prebuilt — 266 passed, 1 skipped
• Manual verification on the @babel/core@8.0.1 dependency-size chart

[agentscanapp]

Thanks for opening this pull request! 🎉

We really appreciate you taking the time to contribute, @dvd233.

A maintainer will take a look as soon as they can. In the meantime, please make sure that:

• the description explains what changed and why
• any related issues are linked
• existing tests still pass

If anything needs adjusting we'll leave comments here. Thanks again!

[vercel]

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

Project	Deployment	Actions	Updated
npmx.dev	Ready	Preview	Sep 10, 2026 1:12pm UTC

2 Skipped Deployments

Project	Deployment	Actions	Updated
docs.npmx.dev	Ignored	Preview	Sep 10, 2026 1:12pm UTC
npmx-lunaria	Ignored		Sep 10, 2026 1:12pm UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 88d09e8f-b7b3-45cb-8074-8d135005289a

📥 Commits

Reviewing files that changed from the base of the PR and between 36d6a31 and 4330818.

📒 Files selected for processing (3)

• app/components/Package/TimelineChart.vue
• app/utils/charts.ts
• test/unit/app/utils/charts.spec.ts

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

---

📝 Summary

Summary by CodeRabbit

• Bug Fixes

  • Improved stacked timeline chart tooltips to preserve visual segment order.
  • Tooltip values now more accurately show changes between periods, including segments that have been removed.
  • Zero-sized segments are excluded from tooltip results.

• Tests

  • Added coverage for tooltip ordering, value differences and removed segments.

Walkthrough

The change extracts stackbar tooltip point conversion into a shared chart utility. The timeline chart uses the utility. Unit tests verify visual ordering, size, signed delta, and removed-segment handling.

Changes

Stackbar tooltip conversion

Layer / File(s)	Summary
Tooltip point helper and validation app/utils/charts.ts, test/unit/app/utils/charts.spec.ts	Adds createStackbarTooltipPoints and tests visual ordering, displayed size, signed delta, and removed segments.
Timeline chart integration app/components/Package/TimelineChart.vue	Replaces the local tooltip conversion logic with the shared helper.

Suggested reviewers: graphieros

Merge Risk: ⚪ Minimal · up to 43308

The dependency-size tooltip now follows the chart’s visual stack while retaining delta and removed-segment behavior. The change is limited to tooltip presentation and has no identified merge-blocking risk.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the fix: align dependency-size tooltip order with the chart.
Description check	✅ Passed	The description directly explains the tooltip ordering problem, the implementation, and the regression coverage.
Linked Issues check	✅ Passed	The changes satisfy issue #3239 by preserving the chart's visual stack order in the dependency-size tooltip. The helper also preserves delta and removed-segment behaviour, with regression tests for th…
Out of Scope Changes check	✅ Passed	All changes are within scope for issue #3239. They update tooltip ordering, extract related logic into a shared helper, and add focused tests.

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

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Package/TimelineChart.vue	0.00%	1 Missing ⚠️
app/utils/charts.ts	85.71%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[graphieros]

This can just be fixed by removing .toReversed() from stackbarTooltipPoints

[gameroman]

Fixed in #3243