Skip to content

Commit

Permalink
Fix custom Pie animation bug (#4528)
Browse files Browse the repository at this point in the history
## Description

This PR is for the issue with `PieChart` that custom animations do not
work when `isAnimationActive` is set to true

## Related Issue

[Enable CSS transition for sectors on hover in PieChart with
isAnimationActive as
true](#4216)

## Motivation and Context

After digging into the code, I found that the `key` in the `Animate`
component causes the problem. The dynamic key triggers the process of
remounting the component, which overrides the custom animation. It also
adds rendering burden: if a user sets the mouse hover animation, every
time the user hovers over one piece of the pie chart, the entire pie
chart will re-render.

## How Has This Been Tested?

Tested locally

## Screenshots (if appropriate):


https://github.com/recharts/recharts/assets/41566276/f9662c73-8985-4c85-9b78-af8d91dc7b2a


## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to
show my changes
  • Loading branch information
ForestLinSen committed May 15, 2024
1 parent 10ede6f commit 78a851e
Showing 1 changed file with 2 additions and 3 deletions.
5 changes: 2 additions & 3 deletions src/polar/Pie.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -578,9 +578,9 @@ export class Pie extends PureComponent<Props, State> {
}

renderSectorsWithAnimation() {
const { sectors, isAnimationActive, animationBegin, animationDuration, animationEasing, animationId } = this.props;
const { sectors, isAnimationActive, animationBegin, animationDuration, animationEasing } = this.props;

const { prevSectors, prevIsAnimationActive } = this.state;
const { prevSectors } = this.state;

return (
<Animate
Expand All @@ -590,7 +590,6 @@ export class Pie extends PureComponent<Props, State> {
easing={animationEasing}
from={{ t: 0 }}
to={{ t: 1 }}
key={`pie-${animationId}-${prevIsAnimationActive}`}
onAnimationStart={this.handleAnimationStart}
onAnimationEnd={this.handleAnimationEnd}
>
Expand Down

0 comments on commit 78a851e

Please sign in to comment.