Add new example where chart animates by scroll#7484
Merged
Conversation
Contributor
WalkthroughAdds a new ChangesScroll-Driven BarChart Animation Example
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
Bundle ReportBundle size has no change ✅ |
|
Tip All tests passed and all changes approved!🟢 UI Tests: 198 tests unchanged |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #7484 +/- ##
==========================================
- Coverage 88.10% 88.06% -0.04%
==========================================
Files 603 604 +1
Lines 13975 13994 +19
Branches 3523 3523
==========================================
+ Hits 12312 12324 +12
- Misses 1476 1483 +7
Partials 187 187 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
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 `@www/src/docs/exampleComponents/BarChart/ScrollAnimateBarChart.tsx`:
- Around line 32-45: The handleScroll function has two issues: first, when
animationFinishesAt equals zero (on non-scrollable pages), the division
scrollTop / animationFinishesAt produces NaN or Infinity; second, the
unconditional animationHandle.tick(0) call on line 43 always initializes to time
zero, even when the page loads mid-scroll. Fix this by guarding
animationFinishesAt against zero by using Math.max with a minimum fallback value
to ensure it's never zero, and replace the hardcoded tick(0) initialization with
a calculation that uses the actual current scroll position and scroll fraction,
matching the same logic used inside the handleScroll function body.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d570a3d1-f998-4dfa-846d-86f777798a4d
📒 Files selected for processing (3)
omnidoc/verifyExamples.spec.tswww/src/docs/exampleComponents/BarChart/ScrollAnimateBarChart.tsxwww/src/docs/exampleComponents/BarChart/index.tsx
💤 Files with no reviewable changes (1)
- omnidoc/verifyExamples.spec.ts
Comment on lines
+32
to
+45
| const handleScroll = () => { | ||
| const scrollTop = window.scrollY; | ||
| const docHeight = document.documentElement.scrollHeight - window.innerHeight; | ||
| const animationFinishesAt = docHeight / 2; | ||
| const scrollFraction = Math.min(Math.max(scrollTop / animationFinishesAt, 0), 1); | ||
| const animationDuration = animationHandle.getAnimationDuration(); | ||
| const currentTime = scrollFraction * animationDuration; | ||
| animationHandle.tick(currentTime); | ||
| listener(animationHandle.getInterpolated()); | ||
| }; | ||
|
|
||
| animationHandle.tick(0); | ||
|
|
||
| window.addEventListener('scroll', handleScroll); |
Contributor
There was a problem hiding this comment.
Initialize scroll-driven time from actual scroll and guard zero-height pages.
On Line 35-38, animationFinishesAt can be 0 when the page is not scrollable, so scrollTop / animationFinishesAt may become NaN/Infinity. Also, Line 43 forces tick(0) even when the page loads mid-scroll, so initial state can be wrong until the next scroll event.
Suggested fix
const scrollAnimationController: AnimationController = (
_timeoutController,
animationHandle: AnimationHandle,
listener: OnAnimationStateUpdate,
): CancelableTimeout => {
const handleScroll = () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
- const animationFinishesAt = docHeight / 2;
+ const animationFinishesAt = Math.max(docHeight / 2, 1);
const scrollFraction = Math.min(Math.max(scrollTop / animationFinishesAt, 0), 1);
const animationDuration = animationHandle.getAnimationDuration();
const currentTime = scrollFraction * animationDuration;
animationHandle.tick(currentTime);
listener(animationHandle.getInterpolated());
};
- animationHandle.tick(0);
-
window.addEventListener('scroll', handleScroll);
+ handleScroll();
return () => {
window.removeEventListener('scroll', handleScroll);
};
};🤖 Prompt for 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.
In `@www/src/docs/exampleComponents/BarChart/ScrollAnimateBarChart.tsx` around
lines 32 - 45, The handleScroll function has two issues: first, when
animationFinishesAt equals zero (on non-scrollable pages), the division
scrollTop / animationFinishesAt produces NaN or Infinity; second, the
unconditional animationHandle.tick(0) call on line 43 always initializes to time
zero, even when the page loads mid-scroll. Fix this by guarding
animationFinishesAt against zero by using Math.max with a minimum fallback value
to ensure it's never zero, and replace the hardcoded tick(0) initialization with
a calculation that uses the actual current scroll position and scroll fraction,
matching the same logic used inside the handleScroll function body.
Contributor
|
Staging Deployment Details
These deployments will remain available for 30 days. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Website example using the new animation props
Summary by CodeRabbit