Add support for left-aligned Sankey nodes#6568
Conversation
WalkthroughAdds an Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (6)
📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (2)www/**📄 CodeRabbit inference engine (DEVELOPING.md)
Files:
src/**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-10-25T07:36:02.229ZApplied to files:
🧬 Code graph analysis (1)src/chart/Sankey.tsx (1)
🔇 Additional comments (6)
Comment |
|
Thanks for the PR @dbnl-renaud , I would like to see at least 1 screenshot test please, check out the test-vr directory for examples. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
www/src/docs/api/SankeyChart.ts (1)
224-233: Clarify the description for both alignment modes.The description for
'left'mode only mentions start nodes, leaving the behavior of end nodes and intermediate nodes unclear. Consider expanding the description to provide a complete picture of both modes.For example:
- 'justify': Distributes nodes across the full width—start nodes align to the left edge, end nodes to the right edge, and intermediate nodes are spaced between them.
- 'left': All nodes align based on their computed depth from the start, resulting in a left-aligned layout where end nodes may not reach the right edge.
This will help users understand the visual difference and choose the appropriate mode for their use case.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
www/src/docs/api/SankeyChart.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
www/**
📄 CodeRabbit inference engine (DEVELOPING.md)
Use the www directory to add and commit examples for the documentation website (recharts.github.io)
Files:
www/src/docs/api/SankeyChart.ts
🧠 Learnings (1)
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility
Applied to files:
www/src/docs/api/SankeyChart.ts
|
@PavelVanecek I added some screenshot test and updated the documentation. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
test-vr/tests/SankeyChart.spec-vr.tsx (1)
1-19: LGTM! Well-structured test data and imports.The imports are minimal and correct, and the data structure appropriately represents a user journey flow suitable for testing both alignment modes.
Consider typing the data object for better type safety:
+import type { SankeyData } from '../../src'; + -const data = { +const data: SankeyData = { nodes: [However, this is a minor refinement and not critical for VR tests.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
test-vr/__snapshots__/tests/SankeyChart.spec-vr.tsx-snapshots/Sankey-align-justify-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/SankeyChart.spec-vr.tsx-snapshots/Sankey-align-justify-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/SankeyChart.spec-vr.tsx-snapshots/Sankey-align-justify-1-webkit-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/SankeyChart.spec-vr.tsx-snapshots/Sankey-align-left-1-chromium-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/SankeyChart.spec-vr.tsx-snapshots/Sankey-align-left-1-firefox-linux.pngis excluded by!**/*.pngtest-vr/__snapshots__/tests/SankeyChart.spec-vr.tsx-snapshots/Sankey-align-left-1-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (1)
test-vr/tests/SankeyChart.spec-vr.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)
Applied to files:
test-vr/tests/SankeyChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to test-vr/__snapshots__/** : Commit newly recorded or updated visual regression snapshot files under test-vr/__snapshots__ to the repository
Applied to files:
test-vr/tests/SankeyChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Applies to test/**/*.test.{ts,tsx} : When testing selectors, verify render counts using the spy and rerenderSameComponent from createSelectorTestCase
Applied to files:
test-vr/tests/SankeyChart.spec-vr.tsx
📚 Learning: 2025-10-25T07:35:46.188Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.188Z
Learning: Write unit tests using Vitest and React Testing Library
Applied to files:
test-vr/tests/SankeyChart.spec-vr.tsx
🔇 Additional comments (2)
test-vr/tests/SankeyChart.spec-vr.tsx (2)
21-28: Excellent test coverage for default justify alignment.This test correctly validates the existing default behavior with a screenshot, directly addressing the reviewer's request for visual regression testing.
30-37: Perfect coverage for the new left alignment feature.This test validates the new
align="left"functionality with a screenshot. Together with the justify test, you've provided complete visual coverage of both alignment modes as requested by the reviewer.The test structure is clean and consistent. The code duplication between the two tests is appropriate for VR tests, as it maintains clarity and makes each test independently understandable.
4142f89 to
4f463e0
Compare
Bundle ReportChanges will increase total bundle size by 123 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-cjsAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6568 +/- ##
=======================================
Coverage 91.27% 91.27%
=======================================
Files 490 490
Lines 40911 40928 +17
Branches 4581 4581
=======================================
+ Hits 37341 37358 +17
Misses 3554 3554
Partials 16 16 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Description
Add support for left-aligned Sankey nodes.
Related Issue
#6567
Motivation and Context
This helps with user-journey like diagrams by aligning all nodes with the same logical depth.
How Has This Been Tested?
Tested locally with Storybook.
Screenshots (if appropriate):
justify(default)leftTypes of changes
Checklist:
Summary by CodeRabbit
alignprop enables 'left' mode (nodes aligned to the left edge) or 'justify' mode (start nodes aligned left, end nodes aligned right) for customizable node positioning.