Improve chart tooltips

[graphieros]

This small improvement moves chart tooltips to the ideal side 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 9:59pm

2 Skipped Deployments

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

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 166e9faf-14a4-46db-8e0e-2de1e006c525

📥 Commits

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

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (16)

• app/components/Package/TimelineChart.vue
• app/components/Package/TrendsChart.vue
• app/components/SkeletonBlock.vue
• app/components/Tab/Item.vue
• app/composables/useChartTooltipPosition.ts
• app/composables/useSettings.ts
• app/pages/package-timeline/[[org]]/[packageName].vue
• app/utils/charts.ts
• i18n/locales/en.json
• i18n/locales/fr-FR.json
• i18n/schema.json
• package.json
• server/api/registry/timeline/[...pkg].get.ts
• test/nuxt/a11y.spec.ts
• test/unit/app/composables/use-chart-tooltip-position.spec.ts
• test/unit/app/utils/charts.spec.ts

---

📝 Walkthrough

Summary by CodeRabbit

Release Notes

• New Features

  • Added Timeline Chart to visualize package installation size and dependency count changes over time, with interactive version selection and highlighting.
  • Added dynamic tooltip positioning for improved chart readability.
  • Added configurable chart settings for zero-based axis scaling and zoom controls.

• Chores

  • Updated vue-data-ui dependency to version 3.19.4.

Walkthrough

This PR introduces a new TimelineChart component for visualising package installation size and dependency count trends across versions. The feature includes a custom Vue composable for dynamic tooltip positioning, utility functions for alt-text generation, internationalised UI labels, and comprehensive test coverage. The timeline page is updated to support version selection highlighting, and supporting components (SkeletonBlock, TabItem, TrendsChart) are enhanced for improved functionality.

Changes

Timeline Chart Feature

Layer / File(s)	Summary
Data Types and Contracts app/utils/charts.ts	Introduces TimelineSizeCacheValue, ConvertedTimelineSizeCacheEntry, EnrichedTimelineSizeCacheEntry, and TimelineChartConfig types for timeline chart data flow.
Server API Types server/api/registry/timeline/[...pkg].get.ts	Exports SubEvent interface defining version event metadata with key, positive, icon, and text fields.
Chart Utility Functions app/utils/charts.ts	Adds createAltTextForTimelineChart and copyAltTextForTimelineChart for generating localised accessibility descriptions of timeline data.
Settings and Configuration app/composables/useSettings.ts	Extends AppSettings with timelineChart group containing isZeroBased and showZoom toggles.
Core TimelineChart Component app/components/Package/TimelineChart.vue	Renders interactive dual-metric line chart with metric tabs, settings toggles, custom tooltips, SVG overlays (watermark and event markers), export options, and version selection highlighting.
Tooltip Positioning Composable app/composables/useChartTooltipPosition.ts	New composable computing dynamic tooltip horizontal position ('left', 'right', or 'centre') based on mouse location relative to chart bounds.
Supporting Component Updates app/components/SkeletonBlock.vue, app/components/Tab/Item.vue, app/components/Package/TrendsChart.vue	SkeletonBlock now supports content projection via <slot />; TabItem gains optional controlsPanel prop for conditional ARIA labelling; TrendsChart uses useChartTooltipPosition for dynamic tooltip placement.
Timeline Page Integration app/pages/package-timeline/[[org]]/[packageName].vue	Page updated with version selection handlers (mouse/focus enter/leave), stable package request snapshot to prevent stale cache updates, and SubEvent type import from API.
Internationalisation i18n/locales/en.json, i18n/locales/fr-FR.json, i18n/schema.json	Adds translation keys under package.timeline.chart for UI labels (metric selection, zoom controls), ARIA attributes, and alt-text templates with placeholders for metric, version range, progress percentage, and event descriptions.
Dependencies package.json	Bumps vue-data-ui from 3.18.2 to 3.19.4.
Tests and Accessibility test/unit/app/composables/use-chart-tooltip-position.spec.ts, test/unit/app/utils/charts.spec.ts, test/nuxt/a11y.spec.ts	Comprehensive unit tests for tooltip position composable (mouse edge cases, ref resolution), chart utility functions (alt-text generation, translation calls), and accessibility audit for TimelineChart component.

Possibly related PRs

• npmx-dev/npmx.dev#2663: Directly related—implements the same timeline chart feature with identical component, types, utilities, translations, and tests.
• npmx-dev/npmx.dev#2633: Related via TrendsChart modifications and vue-data-ui integration changes affecting shared chart infrastructure.

Suggested reviewers

• MatteoGabriele
• userquin

✨ 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 improve-chart-tooltips

---

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]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.