fix(ui): improve layout of line charts

[graphieros]

This update allows to use the full real estate of the chart area for line charts.

The previous implementation used config.chart.grid.position: 'middle', which positions datapoints in the middle of x slots, resulting in empty space when there are only a few periods to show. This layout is designed to have lines and bars coexist on a same chart, but is not ideal when there is only line types.

The 3.19.8 patch fixes layout issues when config.chart.grid.position: 'start', now allowing its usage, and preventing white space on the sides.

Before	After

This change was made to the following components:

• TrendsChart (downloads modal, compare page)
• TimelineChart

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 16, 2026 9:27pm

2 Skipped Deployments

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR upgrades the vue-data-ui charting library to version 3.19.8 and configures grid positioning alignment across chart components. Layout refinements in TrendsChart increase right padding for label spacing and adjust the pending-state overlay rectangle dimensions for better coverage during data transitions.

Changes

Chart grid positioning and layout refinements

Layer / File(s)	Summary
Dependency version bump package.json	The vue-data-ui dependency is incremented from 3.19.7 to 3.19.8.
Grid positioning configuration app/components/Package/TimelineChart.vue, app/components/Package/TrendsChart.vue	Both timeline and trends chart components add explicit position: 'start' settings to their grid configurations.
TrendsChart layout and pending overlay refinements app/components/Package/TrendsChart.vue	The chart's right padding is increased from 128 to 145 to provide extra space for the last datapoint labels. The pending-state SVG overlay rectangle's x coordinate is shifted left and width is expanded to better cover the chart area during pending transitions.

Possibly related PRs

• npmx-dev/npmx.dev#2744: Both PRs bump the vue-data-ui dependency versions in sequence (3.19.7→3.19.8 in this PR; 3.19.6→3.19.7 in the earlier PR).
• npmx-dev/npmx.dev#2663: The main PR builds on the timeline chart implementation from this earlier PR by adding grid positioning configuration.

Suggested reviewers

• MatteoGabriele
• userquin
• gameroman

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Description check	✅ Passed	The PR description is directly related to the changeset, explaining the rationale for updating vue-data-ui and the layout changes made to chart components.
Title check	✅ Passed	The title 'fix(ui): improve layout of line charts' directly aligns with the main changes in the PR, which focus on adjusting grid positioning and padding in timeline and trends charts to optimise layout behaviour.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch vue-data-ui-3.19.8

---

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	semver@​7.7.4

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm markdown-it is 91.0% likely obfuscated Confidence: 0.91 Location:Package overview From:pnpm-lock.yaml → npm/markdown-it@14.1.1 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/markdown-it@14.1.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[github-actions]

e18e dependency analysis

No dependency warnings found.