fix: move tooltips to the sides on line charts to free the view

[graphieros]

This small improvement moves chart tooltips to the left or right side of the client position to free up the view on line charts and allow a better vision of the selected datapoints.

The tooltip is moved to the left side when the client hovers the right side of the chart area, and vice-versa.

Hovering on the left side	Hovering on the right side

Only the line charts were updated with this feature:

• Downloads chart (in the modal of the package page, and the line chart of the compare page)
• Timeline

Other:

• update vue-data-ui to latest, with new offset features for tooltips

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 7, 2026 10:28pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 7, 2026 10:28pm
npmx-lunaria	Ignored		May 7, 2026 10:28pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2dd4facf-06ec-48dd-afbb-8ec4407938fc

📥 Commits

Reviewing files that changed from the base of the PR and between 4a67d00 and 5fb29b7.

📒 Files selected for processing (2)

• app/composables/useChartTooltipPosition.ts
• test/unit/app/composables/use-chart-tooltip-position.spec.ts

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

• app/composables/useChartTooltipPosition.ts

---

📝 Walkthrough

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced chart tooltip positioning across Timeline and Trends visualisations with improved dynamic placement.

• Tests

  • Added unit test coverage for the new tooltip positioning system.

• Chores

  • Updated data visualisation library dependency.

Walkthrough

Adds a composable that computes chart tooltip placement from mouse position, integrates it into TimelineChart and TrendsChart (wiring a chartRef), adds unit tests, and bumps vue-data-ui to 3.19.4.

Changes

Dynamic Chart Tooltip Positioning

Layer / File(s)	Summary
Tooltip Position Composable app/composables/useChartTooltipPosition.ts	New composable resolves chart DOM target and uses useMouseInElement to compute `'left'
TimelineChart Integration app/components/Package/TimelineChart.vue	Imports composable, initialises tooltipPosition = useChartTooltipPosition(chartRef), and sets chart tooltip position to tooltipPosition.value with offsetX: 24.
TrendsChart Integration app/components/Package/TrendsChart.vue	Adds chartRef template ref, invokes useChartTooltipPosition(chartRef), updates chartConfig.tooltip.position to the computed value (retaining multi-package offset logic), and wires ref="chartRef" on VueUiXy.
Dependency Update package.json	Bumps vue-data-ui from 3.19.3 to 3.19.4.
Test Suite test/unit/app/composables/use-chart-tooltip-position.spec.ts	Unit tests cover centre/left/right outcomes, zero-width and outside edge cases, and target resolution for component $el, HTMLElement, and null scenarios.

Possibly Related PRs

• npmx-dev/npmx.dev#2663: Modifies app/components/Package/TimelineChart.vue related to tooltip positioning.

Suggested Reviewers

• MatteoGabriele
• userquin
• gameroman

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: implementing dynamic tooltip positioning on line charts to improve visibility of datapoints.
Description check	✅ Passed	The description is well-related to the changeset, explaining the tooltip positioning feature, affected components, and the vue-data-ui dependency update.
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chart-tooltip-position-improvement

---

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

[github-actions]

e18e dependency analysis

No dependency warnings found.

[codecov]

Codecov Report

❌ Patch coverage is 92.85714% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useChartTooltipPosition.ts	90.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

🤖 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.
Inline comments:
In `@test/unit/app/composables/use-chart-tooltip-position.spec.ts`:
- Around line 15-17: The test stubs globals (vi.stubGlobal for 'HTMLElement',
'computed', and 'toValue') but does not restore them, causing state leak; add an
afterEach hook that calls vi.unstubAllGlobals() to restore all globals after
each test so MockHTMLElement, computed, and toValue do not persist between
tests; place the afterEach alongside the existing vi.stubGlobal calls in
use-chart-tooltip-position.spec.ts so the cleanup always runs after each test
case.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: da08de07-d34f-4dbf-8551-e921b13a5af5

📥 Commits

Reviewing files that changed from the base of the PR and between 9c703da and 4a67d00.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (5)

• app/components/Package/TimelineChart.vue
• app/components/Package/TrendsChart.vue
• app/composables/useChartTooltipPosition.ts
• package.json
• test/unit/app/composables/use-chart-tooltip-position.spec.ts