Skip to content

fix: add date in chart tooltip#1831

Merged
graphieros merged 4 commits intonpmx-dev:mainfrom
RYGRIT:fix/add-date-in-chart-tooltip
Mar 2, 2026
Merged

fix: add date in chart tooltip#1831
graphieros merged 4 commits intonpmx-dev:mainfrom
RYGRIT:fix/add-date-in-chart-tooltip

Conversation

@RYGRIT
Copy link
Contributor

@RYGRIT RYGRIT commented Mar 2, 2026

🔗 Linked issue

resolves #1815

🧭 Context

📚 Description

before after
image image

@vercel
Copy link

vercel bot commented Mar 2, 2026

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

Project Deployment Actions Updated (UTC)
docs.npmx.dev Ready Ready Preview, Comment Mar 2, 2026 4:37pm
npmx.dev Ready Ready Preview, Comment Mar 2, 2026 4:37pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
npmx-lunaria Ignored Ignored Mar 2, 2026 4:37pm

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 2, 2026

📝 Walkthrough

Walkthrough

Adds a cached date formatter for tooltips, keyed by locale and displayed granularity. Extends the tooltip customFormat callback signature to accept an absoluteIndex parameter ({ datapoint: items, absoluteIndex }). When multiple datasets are present the code uses absoluteIndex with the cached formatter to produce a formatted date string and injects that string as a top line in the tooltip content. The formatted date line is also injected in single-dataset scenarios when applicable.

Suggested reviewers

  • danielroe
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description check ✅ Passed The PR description is minimal but relates to the changeset: it references issue #1815 and includes before/after screenshots demonstrating the feature implementation.
Linked Issues check ✅ Passed The PR implements the requested feature from #1815 by adding a cached date formatter and extending the customFormat callback to inject the formatted date into the tooltip content.
Out of Scope Changes check ✅ Passed All changes are scoped to the TrendsChart.vue component and directly address the objective of embedding the hovered date within the tooltip box.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


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.

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


ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b94aff5 and e7e55cd.

📒 Files selected for processing (1)
  • app/components/Package/TrendsChart.vue

@codecov
Copy link

codecov bot commented Mar 2, 2026

Codecov Report

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

Files with missing lines Patch % Lines
app/components/Package/TrendsChart.vue 12.50% 5 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

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


ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e7e55cd and 6f17a8b.

📒 Files selected for processing (1)
  • app/components/Package/TrendsChart.vue


// Format date for compare page (multi-package mode, not in modal)
let formattedDate = ''
if (!props.inModal && hasMultipleItems && absoluteIndex !== undefined) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I think just checking if hasMultipleItems and valid absoluteIndex is enough. You never know in the future if we display this chart for multiple series in a modal.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, you're right. I need to rest now. I'll fix it later.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh please do rest :)
I'll do it

@graphieros graphieros self-requested a review March 2, 2026 16:31
Copy link
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.

🧹 Nitpick comments (1)
app/components/Package/TrendsChart.vue (1)

1619-1619: Consider showing the date for single-dataset scenarios as well.

Based on prior feedback, the hasMultipleItems condition could be relaxed to show the formatted date even when viewing a single package chart. This would provide a consistent tooltip experience across all views. The current implementation correctly addresses the linked issue (#1815) for compare graphs, so this is entirely optional.

♻️ Optional: Remove hasMultipleItems requirement
-          if (hasMultipleItems && absoluteIndex !== undefined) {
+          if (absoluteIndex !== undefined) {

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f17a8b and 98aa4c5.

📒 Files selected for processing (1)
  • app/components/Package/TrendsChart.vue

@graphieros graphieros added this pull request to the merge queue Mar 2, 2026
Merged via the queue into npmx-dev:main with commit 43252c6 Mar 2, 2026
17 checks passed
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.

Compare: add date in chart tooltip

2 participants