feat: add dependency size chart to timeline by 43081j · Pull Request #2979 · npmx-dev/npmx.dev

43081j · 2026-07-01T12:07:43Z

🔗 Linked issue

N/A

🧭 Context

The timeline charts currently show the overall package size, but showing the segmented dependency sizes would be useful too.

📚 Description

Does what it says on the tin! Shows a nice new 3rd chart that has the segmented install size (i.e. each significant dependency is a segment in the bar).

vercel · 2026-07-01T12:07:49Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 1, 2026 2:03pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 1, 2026 2:03pm
npmx-lunaria	Ignored		Jul 1, 2026 2:03pm

github-actions · 2026-07-01T12:08:48Z

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.

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.

socket-security · 2026-07-01T12:09:01Z

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

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vue-data-ui@3.22.3

View full report

codecov · 2026-07-01T12:09:38Z

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Package/TimelineChart.vue	38.67%	42 Missing and 23 partials ⚠️
app/utils/charts.ts	63.63%	9 Missing and 11 partials ⚠️

📢 Thoughts on this report? Let us know!

github-actions · 2026-07-01T12:10:32Z

e18e dependency analysis

No dependency warnings found.

coderabbitai · 2026-07-01T12:11:30Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

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: 229dcdc0-f9c8-4fa4-9343-0ec3a41affbf

📥 Commits

Reviewing files that changed from the base of the PR and between 65fd762 and 01d0759.

📒 Files selected for processing (1)

app/components/Package/TimelineChart.vue

🚧 Files skipped from review as they are similar to previous changes (1)

app/components/Package/TimelineChart.vue

📝 Walkthrough

Summary by CodeRabbit

New Features
- Added a “Dependency Size” metric to package timeline charts with stacked breakdown (top dependencies, Other, and self size).
- Improved accessibility with metric-aware export filenames and enhanced stack chart alt-text/copy.
- Updated annotator controls to use dynamically generated icons.
Bug Fixes
- Improved metric tab switching with throttled animations and more dependable zoom-reset behaviour (including reduced-motion support).
Backend/API
- Extended the timeline size endpoint to include self size and per-dependency sizes (limited to 30), with a cache version bump.
Tests / Chores
- Added unit tests for stack chart alt-text/copy and expanded i18n strings; updated the chart UI library version.

Walkthrough

Adds a dependencySize timeline stackbar view backed by dependency breakdown data, with client cache updates, chart utility support, alt-text handling, and matching translation, schema, and dependency updates.

Changes

Dependency size timeline stackbar feature

Layer / File(s)	Summary
Server dependency breakdown response and caching `server/api/registry/timeline/sizes/[...pkg].get.ts`	Returns `selfSize` and dependency breakdown data for each timeline version, limits dependency entries to 30, and bumps the cache key to `v2`.
Client-side timeline size cache typing `app/pages/package-timeline/[[org]]/[packageName].vue`	Types `sizeCache` with `TimelineSizeCacheValue` and stores `selfSize` plus `dependencies` in cached size entries.
Chart utility types and stackbar configuration `app/utils/charts.ts`	Adds dependency breakdown types, expands chart metric/config types for `dependencySize`, and introduces stackbar total and percentage helpers.
Stackbar alt-text generation and annotator helpers `app/utils/charts.ts`, `test/unit/app/utils/charts.spec.ts`	Adds stackbar alt-text copy helpers and annotator slot icon/style helpers, with unit tests covering stackbar alt-text output and copy forwarding.
TimelineChart.vue stackbar rendering and data computation `app/components/Package/TimelineChart.vue`	Computes dependency segments and stackbar datasets/config, adds the `dependencySize` tab, and renders `VueUiStackbar` with custom tooltip and overlay logic.
Translations, schema, and dependency updates `i18n/locales/en.json`, `i18n/schema.json`, `nuxt.config.ts`, `package.json`	Adds translation keys and schema fields for the new stackbar copy, pre-bundles `vue-ui-stackbar`, and bumps `vue-data-ui`.

Possibly related PRs

npmx-dev/npmx.dev#2663: Extends the same timeline chart and chart utility code paths with the dependencySize stackbar view.
npmx-dev/npmx.dev#2918: Also changes TimelineChart.vue animation and transition handling during chart interactions.
npmx-dev/npmx.dev#2728: Modifies TimelineChart.vue data and tooltip/export behaviour in a closely related area.

Suggested reviewers: ghostdevv, gameroman, serhalp

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarises the main change: adding a dependency size chart to the timeline.
Description check	✅ Passed	The description matches the changeset and explains the new segmented dependency size chart.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch jg/timeline-dep-sizes

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

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`:
- Around line 139-145: The watcher on orderedConvertedData in TimelineChart.vue
checks chartRef.value for resetZoom before awaiting nextTick, but chartRef can
change during the await. Re-check chartRef.value and confirm resetZoom exists
after nextTick, then call it only on the current ref; use the existing watch
callback and chartRef symbol to keep the guard aligned with the latest component
instance.

🪄 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: c6839898-b73c-47a4-955f-bcdd623bba6a

📥 Commits

Reviewing files that changed from the base of the PR and between 492c907 and 137f2bb.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (9)

app/components/Package/TimelineChart.vue
app/pages/package-timeline/[[org]]/[packageName].vue
app/utils/charts.ts
i18n/locales/en.json
i18n/schema.json
nuxt.config.ts
package.json
server/api/registry/timeline/sizes/[...pkg].get.ts
test/unit/app/utils/charts.spec.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

graphieros

;)

gameroman

Love it!

The animation when toggling "stable only" is a bit weird/laggy though

graphieros · 2026-07-01T13:56:05Z

Love it!

The animation when toggling "stable only" is a bit weird/laggy though

I used the same ease-out function as for the transitions in the line charts. Maybe they can be slightly faster for bars, as bars are... heavy by definition.

gameroman · 2026-07-01T13:56:02Z

+  const reference = data.at(-1)
+  if (!reference) return []
+
+  const topNames = reference.dependencies.slice(0, DEP_SEGMENT_COUNT).map(dep => dep.name)
+  const topNameSet = new Set(topNames)


What does reference do?

the last version in the data is taken as reference to pick which dependencies are part of the segmentation throughout the timeline

graphieros · 2026-07-01T14:03:53Z

The animation when toggling "stable only" is a bit weird/laggy though
@gameroman wdyt now ?

gameroman · 2026-07-01T14:07:06Z

The animation when toggling "stable only" is a bit weird/laggy though

@gameroman wdyt now ?

Still feels kinda off. Maybe we can try without animation at all?

graphieros · 2026-07-01T14:09:53Z

Still feels kinda off. Maybe we can try without animation at all?

I'd prefer to keep the transition as it is now, users will often toggle legend items, and transitions are nice in this case

43081j and others added 7 commits June 29, 2026 18:33

feat: add dependency size breakdown chart to timeline

3b13ed5

chore(deps): bump vue-data-ui from 3.22.0 to 3.22.3

fc650a1

chore: add library component to optimizeDeps

709e442

feat: add utilities for the stackbar chart

dbbf88b

chore: add translations

81d3c38

feat: improve stackbar config, layout and slot usage

a3180c8

chore: drop one non-nullable

137f2bb

vercel Bot deployed to Preview – npmx.dev July 1, 2026 12:08 View deployment

43081j changed the title ~~Add dependency size chart to timeline~~ feat: add dependency size chart to timeline Jul 1, 2026

test: fix charts assertions

c0787b7

vercel Bot deployed to Preview – npmx.dev July 1, 2026 12:17 View deployment

coderabbitai Bot reviewed Jul 1, 2026

View reviewed changes

Comment thread app/components/Package/TimelineChart.vue

fix: apply coderabbit suggestion

ff70065

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

vercel Bot had a problem deploying to Preview – npmx.dev July 1, 2026 13:08 Failure

fix: bad merge

65fd762

vercel Bot deployed to Preview – npmx.dev July 1, 2026 13:13 View deployment

graphieros approved these changes Jul 1, 2026

View reviewed changes

gameroman approved these changes Jul 1, 2026

View reviewed changes

gameroman reviewed Jul 1, 2026

View reviewed changes

fix: speed up bar transitions

01d0759

vercel Bot deployed to Preview – npmx.dev July 1, 2026 14:03 View deployment

graphieros added the needs review This PR is waiting for a review from a maintainer label Jul 2, 2026

Uh oh!

Uh oh!

Conversation

43081j commented Jul 1, 2026

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

socket-security Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Jul 1, 2026

e18e dependency analysis

Uh oh!

coderabbitai Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

gameroman left a comment

Choose a reason for hiding this comment

Uh oh!

graphieros commented Jul 1, 2026

Uh oh!

gameroman Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

graphieros Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

graphieros commented Jul 1, 2026

Uh oh!

gameroman commented Jul 1, 2026

Uh oh!

graphieros commented Jul 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Jul 1, 2026 •

edited

Loading

github-actions Bot commented Jul 1, 2026 •

edited

Loading

socket-security Bot commented Jul 1, 2026 •

edited

Loading

codecov Bot commented Jul 1, 2026 •

edited

Loading

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading