feat: add copy PNG buttons to charts - #3132
Conversation
- Copy chart PNG exports directly to the clipboard - Preserve chart watermarks during clipboard export
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Hello! Thank you for opening your first PR to npmx, @BlankParticle! 🚀 Here’s what will happen next:
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR adds PNG clipboard copying for compare and package charts. It adds shared copy logic, an accessible copy button, watermark support during PNG generation, localisation, and accessibility tests. ChangesPNG chart copy
Sequence Diagram(s)sequenceDiagram
participant ChartComponent
participant useCopyChartPng
participant ChartWithImageExport
participant ClipboardAPI
ChartComponent->>useCopyChartPng: copyChartPng()
useCopyChartPng->>ChartWithImageExport: generate PNG data
ChartWithImageExport-->>useCopyChartPng: return data URI
useCopyChartPng->>ClipboardAPI: write PNG ClipboardItem
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/Chart/CopyPngButton.vue`:
- Around line 10-22: Update the successful copy flow in CopyPngButton, using
useCommandPalette().announce(message) to announce a localized copy-success
message after the clipboard operation completes successfully. Keep the existing
copied icon state and accessible button label unchanged, and do not announce
failed copies.
In `@app/composables/useCopyChartPng.ts`:
- Around line 23-32: Update copyChartPng to return immediately when
isCopyingPng.value is already true, before setting the flag or awaiting
nextTick, so concurrent getImage and clipboard operations cannot overlap.
Preserve the existing flag reset in the getImage completion path.
- Around line 27-38: Update copyChartPng so it creates the ClipboardItem
synchronously and calls copy immediately with a promise-valued PNG Blob,
preserving the user activation through the clipboard write; perform
chart.getImage() and data-URI decoding inside that promise. Add a fallback for
browsers that reject promise-valued ClipboardItems, while retaining the existing
isCopyingPng cleanup behavior.
🪄 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 Plus
Run ID: c3d8afb5-78ad-451a-84b6-64e485000e28
📒 Files selected for processing (11)
app/components/Chart/CopyPngButton.vueapp/components/Compare/FacetBarChart.vueapp/components/Compare/FacetScatterChart.vueapp/components/Package/TimelineChart.vueapp/components/Package/TimelineChartDepSizeSvgSlot.vueapp/components/Package/TimelineChartXySvgSlot.vueapp/components/Package/TrendsChart.vueapp/components/Package/VersionDistribution.vueapp/composables/useCopyChartPng.tsi18n/locales/en.jsoni18n/schema.json
gameroman
left a comment
gameroman
left a comment
There was a problem hiding this comment.
I'd use cursor-pointer
Also while it's copying, there is no visual feedback
I'd use some "loading" icon while it's copying
There was a problem hiding this comment.
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/composables/useCopyChartPng.ts`:
- Around line 20-47: The guard clause in copyChartPng currently only checks
isSupported.value, which does not guarantee ClipboardItem is available, causing
the new ClipboardItem constructor call to throw. Add a separate check for typeof
ClipboardItem === 'undefined' to the existing early return guard alongside the
checks for chart, isSupported.value, and isCopyingPng.value to ensure
ClipboardItem is defined before attempting to instantiate it.
🪄 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 Plus
Run ID: f3602d8b-09b2-4cfa-91c9-d3f420f2ead5
📒 Files selected for processing (8)
app/components/Chart/CopyPngButton.vueapp/components/Compare/FacetBarChart.vueapp/components/Compare/FacetScatterChart.vueapp/components/Package/TimelineChart.vueapp/components/Package/TrendsChart.vueapp/components/Package/VersionDistribution.vueapp/composables/useCopyChartPng.tstest/nuxt/a11y.spec.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- test/nuxt/a11y.spec.ts
- app/components/Package/TrendsChart.vue
- app/components/Compare/FacetBarChart.vue
- app/components/Package/TimelineChart.vue
- app/components/Package/VersionDistribution.vue
- app/components/Compare/FacetScatterChart.vue
|
I have updated and simplified the button, now it shows a matching tooltip and has a loading state |
gameroman
left a comment
gameroman
left a comment
There was a problem hiding this comment.
Very nice! Lets see what others think
|
Thanks for your first contribution, @BlankParticle! 👏 We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role. |
3 participants
copy chart PNG exports directly to the clipboard with the watermark preserved
🔗 Linked issue
fixes #2325
🧭 Context
I wanted a to directly copy the chart to my clipboard to post on discord/twitter
📚 Description
Adds a copy button to all the charts, this temporarily enables the watermark, renders the image as png and copies it to the clipboard.
I don't know how to write vue or what patterns are normally used, so that part was written by Claude Fable with what I asked for, I and other models have reviewed this and it looks like the patterns people normally use in vue. I have verified the runtime functionality.