feat: show timeline chart with steps instead of spline

[graphieros]

🔗 Linked issue

Resolves #2953

🧭 Context

The size / deps change isn't gradual but happens on release.

📚 Description

Show steps instead of a spline on the timeline chart:

Dark mode	Light mode

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 23, 2026 2:37pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored		Jun 23, 2026 2:37pm
npmx-lunaria	Ignored		Jun 23, 2026 2:37pm

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

Release Notes

• Style
  • Updated timeline chart visualisation to display data using step-based line rendering instead of smooth curves for improved readability across all datasets.

Walkthrough

The package timeline chart changes two line series, totalSize and dependencyCount, from smooth curves to stepped rendering in the existing chart configuration.

Changes

Timeline chart rendering

Layer / File(s)	Summary
Stepped series configuration app/components/Package/TimelineChart.vue	The totalSize and dependencyCount line datasets replace smooth: true with useStepper: true in the chart series configuration.

Possibly related PRs

• npmx-dev/npmx.dev#2663: Also changes app/components/Package/TimelineChart.vue line-series rendering behaviour and appears directly related to this chart configuration update.

Suggested reviewers

• userquin
• gameroman

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: replacing spline interpolation with step visualization in the timeline chart.
Description check	✅ Passed	The description is directly related to the changeset, explaining the context and showing visual comparisons of the updated chart in both themes.
Linked Issues check	✅ Passed	The code changes directly implement the requirement from #2953 by replacing smooth spline rendering with step-based visualization on the timeline chart.
Out of Scope Changes check	✅ Passed	All changes are scoped to the timeline chart visualization configuration, directly addressing the linked issue with no extraneous modifications.

_{✏️ 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 2953-timeline-stepper

---

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

[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!

[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 `@app/components/Package/TimelineChart.vue`:
- Line 190: The useStepper property set to true in the TimelineChart.vue
component is not supported in vue-data-ui version 3.22.0 and will be ignored by
the library. Remove the useStepper: true lines from the configuration objects
where they appear (around lines 190 and 203) since stepped line rendering is not
currently implemented in vue-data-ui. This will clean up the code by removing
unsupported properties that have no effect.

🪄 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: 6250bae9-5d11-4c26-8b13-901b5a59c1db

📥 Commits

Reviewing files that changed from the base of the PR and between a11045f and e9452c6.

📒 Files selected for processing (1)

• app/components/Package/TimelineChart.vue

[ghostdevv]

oh, will wait for James' review 👀

[graphieros]

oh, will wait for James' review 👀

He said it looked good to him on the design channel, but there is a pro/con debate going on, so I'll wait a bit

[gameroman]

I like it