[charts] Add line animation

[alexfauquette]

How animation works

Animating a line means modifying a lot of points. To avoid modifying too many data point, I took the approach of Nivo which is:

Have a value animated from 0 to 1 and then perform an interpolation of the path between it previous d value to its next one.

In addition, each element is wrapped with a clip path that goes from left to right when the component is created

Tricks

1. The marks reuse the line clip path. I did not wanted to introduce a new intermediate component for Marks, so all marks are render at once, which makes it impossible to create a clipPath per series. So I just reused the one of the line chart with the idea that the mark plot will never be used without the line plot
2. I reversed the area order. That's to avoid the following issue where area overflow each over while they are transitioning to their final position. what you see is not an interpolation bug, it's just that the top area is on to of the middle one which is on top of the bottom one. And lines are on top of all areas.

3. I introduce a chartId that I store with the drawing area. This id is used to define clip path ids. Otherwise, two charts with same series ids would have same clipPath id which will lead to inconsistent behavior.

changelog

The line chart now have animation by default.
You can disable them with skipAnimation prop.
See next.mui.com/x/react-charts/lines/#animation for more information.

[mui-bot]

Deploy preview: https://deploy-preview-11620--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/lines/lines.md

Generated by 🚫 dangerJS against 6fa4b07

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[alexfauquette]

That's an extraction of the data computation to keep props propagation as clean as possible.

The initial reason was a debugging session, where I suspected to have a forgotten props somwhere

[LukasTy]

Great work! 👍 💯
LGTM, leaving some suggestion and nitpicks. 🙈

By the way, do you really think that it is worth treating it as a breaking change? 🤔
Is there something that will no longer work or be completely different after this change?

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[alexfauquette]

Is there something that will no longer work or be completely different after this change?

The slot was getting the animated path. So d was not a string but a string interpolation made by spring.

I modified the code to avoid this modification. THe adventage is that if you don't want the animation, you could use the slots.line to replace AnimatedLine by a path and it should work

• LinePlot
  • LineElement
    • AnimatedLine (New element that can be replaced by a slot)
      • animated.path