Manual animations on website by PavelVanecek · Pull Request #7483 · recharts/recharts

PavelVanecek · 2026-06-22T11:59:35Z

Uses the new 3.9 animation controls to implement manual animation overrides on the website. Should work on all charts.

Summary by CodeRabbit

New Features
- Added manual animation control for charts, allowing users to toggle between autoplay and manual modes.
- In manual mode, users can drag to scrub the animation timeline with a visible indicator of active animation segments.
New Features
- Updated the code editor preview tooling to support manual animation toggles within the controls UI.
Bug Fixes
- Set explicit animation timing for the first area series in the AreaChart example to improve consistency.

coderabbitai · 2026-06-22T11:59:52Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9efe6022-ec4d-49ed-b65b-9576a7a08f86

📥 Commits

Reviewing files that changed from the base of the PR and between 7f1f08c and 2b82cc6.

📒 Files selected for processing (1)

www/src/components/ManualAnimationContext.tsx

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

www/src/components/ManualAnimationContext.tsx

Walkthrough

Adds a manual animation scrubbing feature to the docs playground. A new ManualAnimationContext.tsx module introduces two React contexts (MockTimeContext, RunningAnimationsContext), a ManualAnimationManager wired to AnimationController, a draggable TimeSetter overlay, and ManualAnimationControls UI. CodeEditorWithPreview is updated to always include a controls tool and wrap the preview with ManualAnimationContext. AreaChartExample gains explicit animation timing props.

Changes

Manual Animation Scrubbing in Playground

Layer / File(s)	Summary
MockTimeContext, RunningAnimationsContext, and ManualAnimationManager `www/src/components/ManualAnimationContext.tsx`	Defines `MockTimeContext` (shared mock clock) and `RunningAnimationsContext` (active animation handles), implements `ManualAnimationManager` that registers handles via `AnimationController`, ticks them from the mock clock, and cleans up on animation end; `ManualAnimationContext` conditionally wraps children with the manager.
TimeSetter interactive overlay `www/src/components/ManualAnimationContext.tsx`	`TimeSetter` converts mouse X coordinates to chart-time via `useXAxisInverseScale` and updates `MockTimeContext` on drag, rendering a red `ReferenceLine` and invisible capture layer.
ManualAnimationControls UI component `www/src/components/ManualAnimationContext.tsx`	Provides autoplay/manual radio buttons and, when manual is active, renders a vertical bar chart of animation begin/duration segments from `RunningAnimationsContext` with internal animations disabled to avoid feedback loops. Includes `TimeSetter` embedded for interactive time control and a `TypedChart` factory for type-safe visualization.
Playground wiring and example animation timing `www/src/components/CodeEditorWithPreview.tsx`, `www/src/docs/exampleComponents/AreaChart/AreaChartExample.tsx`	`CodeEditorWithPreview` gains `isManualAnimations` state; the controls tool is always included and now hosts `ManualAnimationControls` alongside conditionally rendered `Levers`; `ManualAnimationContext` wraps both `PreviewResult` and `ToolFrame`. `AreaChartExample` adds `animationBegin={200}` and `animationDuration={1300}` to the `uv` Area to expose distinct segments in the new controls.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Controls as ManualAnimationControls
  participant TimeSetter as TimeSetter
  participant Manager as ManualAnimationManager
  participant MockClock as MockTimeContext
  participant Chart as Recharts Chart

  User->>Controls: select "manual" radio
  Controls->>Manager: enabled=true wraps chart
  Chart->>Manager: animation starts → register handle
  Manager->>MockClock: tick handle with current mock time
  User->>TimeSetter: drag mouse on overlay
  TimeSetter->>MockClock: setMockTime(x → chart time)
  MockClock->>Manager: listeners replay new mock time
  Manager->>Chart: tick(newTime) → update animation progress
  Chart-->>User: re-renders at scrubbed position

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

recharts/recharts#6531: Modifies CodeEditorWithPreview.tsx controls and tool wiring, overlapping with this PR's refactor of how the controls tool is constructed.
recharts/recharts#7239: Changes how the controls tool is assembled in CodeEditorWithPreview, the same area this PR refactors to always include the controls tool with ManualAnimationControls.
recharts/recharts#7481: Refactors and exports AnimationController and AnimationHandle types that ManualAnimationManager directly consumes in this PR.

Suggested reviewers

ckifer

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is minimal and lacks required sections from the template including Related Issue, Motivation and Context, How Has This Been Tested, Screenshots, and Types of changes checklist.	Complete the PR description by adding the missing required sections: link related issue, explain motivation/context, document testing approach, and check the appropriate change type boxes.
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Manual animations on website' is concise and directly describes the main change: adding manual animation controls to the website.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch manual-animations

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 and usage tips.}

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 `@www/src/components/ManualAnimationContext.tsx`:
- Around line 151-158: The radio buttons in the animation preference section are
using `defaultChecked` which makes them uncontrolled components that won't
update when `isManualAnimationEnabled` changes externally. Replace
`defaultChecked` with `checked` for both radio buttons: the first radio button
should use `checked={!isManualAnimationEnabled}` for the Autoplay option, and
the second should use `checked={isManualAnimationEnabled}` for the Manual
Animations option. This will make them controlled components that properly
reflect the current state value.

🪄 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: 2a641a1b-d9c7-44cb-86d6-8349df9bd1c7

📥 Commits

Reviewing files that changed from the base of the PR and between c88f5f3 and 7f1f08c.

📒 Files selected for processing (3)

www/src/components/CodeEditorWithPreview.tsx
www/src/components/ManualAnimationContext.tsx
www/src/docs/exampleComponents/AreaChart/AreaChartExample.tsx

codecov · 2026-06-22T12:03:32Z

Bundle Report

Bundle size has no change ✅

chromatic-com · 2026-06-22T12:07:46Z

Tip

All tests passed and all changes approved!

🟢 UI Tests: 198 tests unchanged
🟢 UI Review: 198 stories published -- no changes
Storybook Publish: 198 stories published

codecov · 2026-06-22T12:08:55Z

Codecov Report

❌ Patch coverage is 26.86567% with 49 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.10%. Comparing base (c88f5f3) to head (2b82cc6).

Files with missing lines	Patch %	Lines
www/src/components/ManualAnimationContext.tsx	23.80%	44 Missing and 4 partials ⚠️
www/src/components/CodeEditorWithPreview.tsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7483      +/-   ##
==========================================
- Coverage   88.39%   88.10%   -0.30%     
==========================================
  Files         602      603       +1     
  Lines       13911    13975      +64     
  Branches     3514     3524      +10     
==========================================
+ Hits        12296    12312      +16     
- Misses       1432     1476      +44     
- Partials      183      187       +4

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

github-actions · 2026-06-22T12:12:51Z

Staging Deployment Details

These deployments will remain available for 30 days.

github-actions · 2026-06-22T12:47:39Z

Staging Deployment Details

These deployments will remain available for 30 days.

Manual animations on website

7f1f08c

coderabbitai Bot reviewed Jun 22, 2026

View reviewed changes

Comment thread www/src/components/ManualAnimationContext.tsx Outdated

PavelVanecek added 2 commits June 22, 2026 21:25

CSS

dd1fdc5

checked

2b82cc6

PavelVanecek merged commit a2c4171 into main Jun 22, 2026
63 of 65 checks passed

PavelVanecek deleted the manual-animations branch June 22, 2026 13:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Manual animations on website#7483

Manual animations on website#7483
PavelVanecek merged 3 commits into
mainfrom
manual-animations

PavelVanecek commented Jun 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 22, 2026 •

edited

Loading

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

codecov Bot commented Jun 22, 2026

Uh oh!

chromatic-com Bot commented Jun 22, 2026 •

edited

Loading

All tests passed and all changes approved!

Uh oh!

codecov Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

PavelVanecek commented Jun 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (2 warnings)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov Bot commented Jun 22, 2026

Bundle Report

Uh oh!

chromatic-com Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All tests passed and all changes approved!

Uh oh!

codecov Bot commented Jun 22, 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 Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

PavelVanecek commented Jun 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 22, 2026 •

edited

Loading

chromatic-com Bot commented Jun 22, 2026 •

edited

Loading

codecov Bot commented Jun 22, 2026 •

edited

Loading