feat: compare download charts with sparklines

[graphieros]

Resolves #2270

This implements an additional view for the download charts of the compare page, to address a11y issues related to color vision deficiency, and display each series on a separate sparkline chart. @Adebesin-Cell also co-authored this PR with:

• Persisting compare view (table or bars) and chart view (combined line or sparklines) in URL
• tab component

A toggle allows to switch from the 'Combined view' to the 'Split view'.

Dark mode	Light mode

Hovering a sparkline chart syncs the selected index on all charts to ease comparison:

Long package names are ellipsed to avoid any Y offset that a wrap would cause.

Other:

• colours for sparkline use either predefined package colours or default to vue-data-ui's internal palette. If the number of compared series turns out to be higher than the number of palette colours, the assigned colours will loop the palette (same as the combined line chart does internally).
• bump vue-data-ui to 3.16.5 (dashed segments on sparklines)
• show estimation segments on the sparklines of the compare page:

Notes:

• there is no printing feature yet for the split view, this could be part of a future iteration.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 27, 2026 10:48am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 27, 2026 10:48am
npmx-lunaria	Ignored		Mar 27, 2026 10:48am

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

[coderabbitai]

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

📝 Walkthrough

Walkthrough

Adds a new Vue 3 component app/components/Chart/SplitSparkline.vue that renders a grid of per-unit sparklines from a provided dataset and dates, pairing missing values with 0, providing per-series colours and dash indices, i18n-driven accessibility text, light/dark mode styling, hover/selection handling and custom hint/skeleton slots, and wraps each chart in ClientOnly. Updates app/components/Package/TrendsChart.vue to add an accessible two-option tab UI and a reactive isSparklineLayout toggle to switch between the combined VueUiXy chart and the split-sparkline layout. Adds i18n keys/schema entries, accessibility tests, and bumps vue-data-ui to 3.16.3.

Possibly related PRs

• fix: only show estimation segment in last datapoint #1338 — Modifies TrendsChart chart dataset handling and last-datapoint estimation logic used when preparing data for split/combined chart renderers.
• chore: bump vue-data-ui from 3.16.0 to 3.16.1 #2259 — Bumps vue-data-ui and adjusts selected-index/hover behaviour in chart components, which relates to SplitSparkline’s reliance on VueUiSparkline hover/selection semantics.
• chore: add generic type annotations to chart components #1615 — Changes TrendsChart.vue (type annotations and rendering guards) affecting multi-series rendering paths consumed by the split-sparkline layout.

Suggested reviewers

• danielroe
• knowler

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR fully implements the objective from #2270: a split view option displaying each series in individual sparklines with synchronized interaction for cross-series comparison.
Out of Scope Changes check	✅ Passed	All changes are within scope: new split sparkline component, toggle UI, i18n translations, a11y tests, and the necessary vue-data-ui version bump align with the stated objectives.
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing the implementation of a split view for download charts with accessibility improvements and sparkline visualization.

_{✏️ 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 2270-line-charts-multiple-series---propose-a-split-view-option-to-display-series-in-individual-sparklines

---

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

[codecov]

Codecov Report

❌ Patch coverage is 91.59664% with 10 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	58.33%	5 Missing ⚠️
app/components/Chart/SplitSparkline.vue	91.66%	4 Missing ⚠️
app/components/Tab/Panel.vue	90.90%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

test/nuxt/a11y.spec.ts (1)

946-999: Please add a PackageTrendsChart split-view a11y case as well.

These assertions only mount ChartSplitSparkline in isolation. The user-facing behaviour added by the PR also includes the toggle and conditional render path in PackageTrendsChart, so wiring bugs there can still slip through without a multi-package integration case that switches to split view.

app/components/Package/TrendsChart.vue (1)

1649-1649: Keep the new buttons on the shared focus-visible rule.

These are plain <button> elements, so the inline focus-visible:outline-accent/70 will drift from the project's global button focus styling. Please rely on the shared rule instead of reintroducing per-element focus utilities here.

Based on learnings, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } is applied globally in app/assets/main.css.

Also applies to: 1668-1668

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ae693dfe-6e50-4022-b706-c16d24fb6a81

📥 Commits

Reviewing files that changed from the base of the PR and between eced357 and 1407af3.

📒 Files selected for processing (6)

• app/components/Chart/SplitSparkline.vue
• app/components/Package/TrendsChart.vue
• i18n/locales/en.json
• i18n/locales/fr-FR.json
• i18n/schema.json
• test/nuxt/a11y.spec.ts

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

app/components/Package/TrendsChart.vue (1)

1645-1649: ⚠️ Potential issue | 🟠 Major

Tab keyboard semantics are still broken

For role="tab", the selected tab should be keyboard-focusable and arrow keys should switch tabs. Here, Line 1648 and Line 1667 invert the expected tabindex state, and there is no arrow-key handling, so keyboard users can get stuck.

Suggested fix (proper tabs behaviour)

-        :tabindex="isSparklineLayout ? 0 : -1"
+        :tabindex="isSparklineLayout ? -1 : 0"
+        `@keydown.right.prevent`="isSparklineLayout = true"
+        `@keydown.left.prevent`="isSparklineLayout = false"
+        `@keydown.home.prevent`="isSparklineLayout = false"
+        `@keydown.end.prevent`="isSparklineLayout = true"
@@
-        :tabindex="!isSparklineLayout ? 0 : -1"
+        :tabindex="!isSparklineLayout ? -1 : 0"
+        `@keydown.right.prevent`="isSparklineLayout = true"
+        `@keydown.left.prevent`="isSparklineLayout = false"
+        `@keydown.home.prevent`="isSparklineLayout = false"
+        `@keydown.end.prevent`="isSparklineLayout = true"

Also applies to: 1664-1668

🧹 Nitpick comments (1)

app/components/Package/TrendsChart.vue (1)

1649-1649: Remove per-button focus-visible utility classes

These button classes should rely on the project’s global button:focus-visible styling instead of inline focus-visible:* utilities.

Suggested class cleanup

- class="... transition-colors duration-150 focus-visible:outline-accent/70"
+ class="... transition-colors duration-150"

Based on learnings: focus-visible styling for button/select elements is globally defined in app/assets/main.css; per-element focus-visible utilities should be avoided.

Also applies to: 1668-1668

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 30ac90a1-5f0d-4c6a-8cf5-16f3dc351218

📥 Commits

Reviewing files that changed from the base of the PR and between 1407af3 and d395997.

📒 Files selected for processing (1)

• app/components/Package/TrendsChart.vue

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: da1bb4f0-f563-45cd-83a7-50356a4ef1af

📥 Commits

Reviewing files that changed from the base of the PR and between d395997 and 08ace72.

📒 Files selected for processing (4)

• app/components/Package/TrendsChart.vue
• i18n/locales/en.json
• i18n/locales/fr-FR.json
• i18n/schema.json

✅ Files skipped from review due to trivial changes (2)

• i18n/locales/en.json
• i18n/schema.json

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

• i18n/locales/fr-FR.json

[Adebesin-Cell]

All previous errors are resolved now 🚀

[graphieros]

All previous errors are resolved now 🚀

These are great improvements, thanks :)

[MatteoGabriele]

Looking good! I've only pointed out a few minor details that, if you want you can skip

[MatteoGabriele]

Awesome! Thank you for checking those changes ❤️