Skip to content

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

Open
graphieros wants to merge 6 commits intomainfrom
chart-tooltip-position-improvement
Open

fix: move tooltips to the sides on line charts to free the view#2688
graphieros wants to merge 6 commits intomainfrom
chart-tooltip-position-improvement

Conversation

@graphieros
Copy link
Copy Markdown
Contributor

@graphieros graphieros commented May 7, 2026

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
image image
image image

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
Copy link
Copy Markdown
Contributor

vercel Bot commented May 7, 2026

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

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

Request Review

@graphieros graphieros marked this pull request as draft May 7, 2026 22:13
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 7, 2026

Review Change Stack
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

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@graphieros graphieros changed the title Chart tooltip position improvement fix: move tooltips to the sides on line charts to free the view May 7, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 7, 2026

e18e dependency analysis

No dependency warnings found.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 7, 2026

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!

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

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

Comment thread test/unit/app/composables/use-chart-tooltip-position.spec.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant