StaticGraph paths and AnimatedGraph paths aren't consistent

[Hanif Leoputera Lim]

Hi, I recently upgraded to v0.3.0, and noticed that the StaticGraphs and AnimatedGraphs are not consistent.

Reproducible demo

data = [{"date": 2022-09-07T22:15:00.000Z, "value": 156.06}, {"date": 2022-09-07T22:20:00.000Z, "value": 156.08}, {"date": 2022-09-07T22:25:00.000Z, "value": 156.02}, {"date": 2022-09-07T22:30:00.000Z, "value": 156}, {"date": 2022-09-07T22:35:00.000Z, "value": 155.99}, {"date": 2022-09-07T22:40:00.000Z, "value": 155.95}, {"date": 2022-09-07T22:45:00.000Z, "value": 155.93}, {"date": 2022-09-07T22:50:00.000Z, "value": 155.96}, {"date": 2022-09-07T22:55:00.000Z, "value": 156.02}, {"date": 2022-09-07T23:00:00.000Z, "value": 155.97}, {"date": 2022-09-07T23:05:00.000Z, "value": 155.98}, {"date": 2022-09-07T23:10:00.000Z, "value": 156}, {"date": 2022-09-07T23:15:00.000Z, "value": 156.04}, {"date": 2022-09-07T23:20:00.000Z, "value": 155.96}, {"date": 2022-09-07T23:25:00.000Z, "value": 155.96}, {"date": 2022-09-07T23:30:00.000Z, "value": 155.93}, {"date": 2022-09-07T23:35:00.000Z, "value": 155.88}, {"date": 2022-09-07T23:40:00.000Z, "value": 155.88}, {"date": 2022-09-07T23:45:00.000Z, "value": 155.93}, {"date": 2022-09-07T23:50:00.000Z, "value": 155.91}, {"date": 2022-09-07T23:55:00.000Z, "value": 156.04}, {"date": 2022-09-08T08:00:00.000Z, "value": 155.64}, {"date": 2022-09-08T08:05:00.000Z, "value": 155.74}, {"date": 2022-09-08T08:10:00.000Z, "value": 155.8}, {"date": 2022-09-08T08:15:00.000Z, "value": 155.87}, {"date": 2022-09-08T08:20:00.000Z, "value": 155.8}, {"date": 2022-09-08T08:25:00.000Z, "value": 155.71}, {"date": 2022-09-08T08:30:00.000Z, "value": 155.9}, {"date": 2022-09-08T08:35:00.000Z, "value": 155.94}, {"date": 2022-09-08T08:40:00.000Z, "value": 156}, {"date": 2022-09-08T08:50:00.000Z, "value": 156.02}, {"date": 2022-09-08T08:55:00.000Z, "value": 156.08}, {"date": 2022-09-08T09:00:00.000Z, "value": 156.15}, {"date": 2022-09-08T09:05:00.000Z, "value": 156.07}, {"date": 2022-09-08T09:10:00.000Z, "value": 156.07}, {"date": 2022-09-08T09:15:00.000Z, "value": 156}, {"date": 2022-09-08T09:20:00.000Z, "value": 156}, {"date": 2022-09-08T09:30:00.000Z, "value": 155.9}, {"date": 2022-09-08T09:40:00.000Z, "value": 156.01}, {"date": 2022-09-08T09:50:00.000Z, "value": 156.02}, {"date": 2022-09-08T09:55:00.000Z, "value": 156.07}, {"date": 2022-09-08T10:00:00.000Z, "value": 156.14}, {"date": 2022-09-08T10:05:00.000Z, "value": 156}, {"date": 2022-09-08T10:20:00.000Z, "value": 156.13}, {"date": 2022-09-08T10:25:00.000Z, "value": 156.11}, {"date": 2022-09-08T10:35:00.000Z, "value": 156.08}, {"date": 2022-09-08T10:40:00.000Z, "value": 156.14}, {"date": 2022-09-08T10:45:00.000Z, "value": 156.29}, {"date": 2022-09-08T10:50:00.000Z, "value": 156.38}, {"date": 2022-09-08T10:55:00.000Z, "value": 156.33}, {"date": 2022-09-08T11:00:00.000Z, "value": 156.38}, {"date": 2022-09-08T11:05:00.000Z, "value": 156}, {"date": 2022-09-08T11:10:00.000Z, "value": 156.28}, {"date": 2022-09-08T11:15:00.000Z, "value": 156.06}, {"date": 2022-09-08T11:20:00.000Z, "value": 155.95}, {"date": 2022-09-08T11:25:00.000Z, "value": 156}, {"date": 2022-09-08T11:30:00.000Z, "value": 155.69}, {"date": 2022-09-08T11:35:00.000Z, "value": 155.6}, {"date": 2022-09-08T11:40:00.000Z, "value": 155.5}, {"date": 2022-09-08T11:45:00.000Z, "value": 155.35}, {"date": 2022-09-08T11:50:00.000Z, "value": 155.45}, {"date": 2022-09-08T11:55:00.000Z, "value": 155.6}, {"date": 2022-09-08T12:00:00.000Z, "value": 155.6}, {"date": 2022-09-08T12:05:00.000Z, "value": 155.59}, {"date": 2022-09-08T12:10:00.000Z, "value": 155.62}, {"date": 2022-09-08T12:15:00.000Z, "value": 155.3822}, {"date": 2022-09-08T12:20:00.000Z, "value": 155.5}, {"date": 2022-09-08T12:25:00.000Z, "value": 155.29}, {"date": 2022-09-08T12:30:00.000Z, "value": 154.9}, {"date": 2022-09-08T12:35:00.000Z, "value": 154.85}, {"date": 2022-09-08T12:40:00.000Z, "value": 154.8}, {"date": 2022-09-08T12:45:00.000Z, "value": 154.81}, {"date": 2022-09-08T12:50:00.000Z, "value": 154.76}, {"date": 2022-09-08T12:55:00.000Z, "value": 154.71}, {"date": 2022-09-08T13:00:00.000Z, "value": 154.629}, {"date": 2022-09-08T13:05:00.000Z, "value": 154.6}, {"date": 2022-09-08T13:10:00.000Z, "value": 154.45}, {"date": 2022-09-08T13:15:00.000Z, "value": 154.6}, {"date": 2022-09-08T13:20:00.000Z, "value": 154.65}, {"date": 2022-09-08T13:25:00.000Z, "value": 154.65}, {"date": 2022-09-08T13:30:00.000Z, "value": 154.3996}, {"date": 2022-09-08T13:35:00.000Z, "value": 154.83}, {"date": 2022-09-08T13:40:00.000Z, "value": 155.18}, {"date": 2022-09-08T13:45:00.000Z, "value": 155.38}, {"date": 2022-09-08T13:50:00.000Z, "value": 155.56}, {"date": 2022-09-08T13:55:00.000Z, "value": 155.39}, {"date": 2022-09-08T14:00:00.000Z, "value": 154.72}, {"date": 2022-09-08T14:05:00.000Z, "value": 154.88}, {"date": 2022-09-08T14:10:00.000Z, "value": 154.5798}, {"date": 2022-09-08T14:15:00.000Z, "value": 155.09}, {"date": 2022-09-08T14:20:00.000Z, "value": 154.7673}, {"date": 2022-09-08T14:25:00.000Z, "value": 154.92}, {"date": 2022-09-08T14:30:00.000Z, "value": 155.145}, {"date": 2022-09-08T14:35:00.000Z, "value": 155.5475}, {"date": 2022-09-08T14:40:00.000Z, "value": 155.675}, {"date": 2022-09-08T14:45:00.000Z, "value": 155.375}, {"date": 2022-09-08T14:50:00.000Z, "value": 155.4}, {"date": 2022-09-08T14:55:00.000Z, "value": 155.76}, {"date": 2022-09-08T15:00:00.000Z, "value": 156.0234}, {"date": 2022-09-08T15:05:00.000Z, "value": 156.1812}, {"date": 2022-09-08T15:10:00.000Z, "value": 156.14}, {"date": 2022-09-08T15:15:00.000Z, "value": 156.18}, {"date": 2022-09-08T15:20:00.000Z, "value": 156.1847}, {"date": 2022-09-08T15:25:00.000Z, "value": 155.99}, {"date": 2022-09-08T15:30:00.000Z, "value": 156.14}, {"date": 2022-09-08T15:35:00.000Z, "value": 155.6793}, {"date": 2022-09-08T15:40:00.000Z, "value": 155.69}, {"date": 2022-09-08T15:45:00.000Z, "value": 155.56}, {"date": 2022-09-08T15:50:00.000Z, "value": 155.79}, {"date": 2022-09-08T15:55:00.000Z, "value": 155.52}, {"date": 2022-09-08T16:00:00.000Z, "value": 154.58}, {"date": 2022-09-08T16:05:00.000Z, "value": 153.88}, {"date": 2022-09-08T16:10:00.000Z, "value": 153.39}, {"date": 2022-09-08T16:15:00.000Z, "value": 153.0199}, {"date": 2022-09-08T16:20:00.000Z, "value": 152.985}, {"date": 2022-09-08T16:25:00.000Z, "value": 153.1499}, {"date": 2022-09-08T16:30:00.000Z, "value": 153.3901}, {"date": 2022-09-08T16:35:00.000Z, "value": 153.16}, {"date": 2022-09-08T16:40:00.000Z, "value": 153.586}, {"date": 2022-09-08T16:45:00.000Z, "value": 153.29}, {"date": 2022-09-08T16:50:00.000Z, "value": 153.2092}, {"date": 2022-09-08T16:55:00.000Z, "value": 153.182}, {"date": 2022-09-08T17:00:00.000Z, "value": 152.879}, {"date": 2022-09-08T17:05:00.000Z, "value": 152.97}, {"date": 2022-09-08T17:10:00.000Z, "value": 153.65}, {"date": 2022-09-08T17:15:00.000Z, "value": 153.82}, {"date": 2022-09-08T17:20:00.000Z, "value": 153.77}, {"date": 2022-09-08T17:25:00.000Z, "value": 153.7335}, {"date": 2022-09-08T17:30:00.000Z, "value": 153.67}, {"date": 2022-09-08T17:35:00.000Z, "value": 153.87}, {"date": 2022-09-08T17:40:00.000Z, "value": 154.01}, {"date": 2022-09-08T17:45:00.000Z, "value": 154.0691}, {"date": 2022-09-08T17:50:00.000Z, "value": 153.81}, {"date": 2022-09-08T17:55:00.000Z, "value": 153.55}, {"date": 2022-09-08T18:00:00.000Z, "value": 153.7}, {"date": 2022-09-08T18:05:00.000Z, "value": 153.635}, {"date": 2022-09-08T18:10:00.000Z, "value": 153.52}, {"date": 2022-09-08T18:15:00.000Z, "value": 153.77}, {"date": 2022-09-08T18:20:00.000Z, "value": 153.74}, {"date": 2022-09-08T18:25:00.000Z, "value": 153.79}, {"date": 2022-09-08T18:30:00.000Z, "value": 154.155}, {"date": 2022-09-08T18:35:00.000Z, "value": 154.33}, {"date": 2022-09-08T18:40:00.000Z, "value": 154.09}, {"date": 2022-09-08T18:45:00.000Z, "value": 153.98}, {"date": 2022-09-08T18:50:00.000Z, "value": 154.105}, {"date": 2022-09-08T18:55:00.000Z, "value": 153.8}, {"date": 2022-09-08T19:00:00.000Z, "value": 153.6826}, {"date": 2022-09-08T19:05:00.000Z, "value": 153.635}, {"date": 2022-09-08T19:10:00.000Z, "value": 154}, {"date": 2022-09-08T19:15:00.000Z, "value": 154.0397}, {"date": 2022-09-08T19:20:00.000Z, "value": 154.08}, {"date": 2022-09-08T19:25:00.000Z, "value": 154.11}, {"date": 2022-09-08T19:30:00.000Z, "value": 154.0073}, {"date": 2022-09-08T19:35:00.000Z, "value": 153.98}, {"date": 2022-09-08T19:40:00.000Z, "value": 153.7}, {"date": 2022-09-08T19:45:00.000Z, "value": 153.88}, {"date": 2022-09-08T19:50:00.000Z, "value": 154.25}, {"date": 2022-09-08T19:55:00.000Z, "value": 154.47}, {"date": 2022-09-08T20:00:00.000Z, "value": 154.56}, {"date": 2022-09-08T20:05:00.000Z, "value": 154.37}, {"date": 2022-09-08T20:10:00.000Z, "value": 154.32}, {"date": 2022-09-08T20:15:00.000Z, "value": 154.35}, {"date": 2022-09-08T20:20:00.000Z, "value": 154.44}, {"date": 2022-09-08T20:25:00.000Z, "value": 154.44}, {"date": 2022-09-08T20:30:00.000Z, "value": 154.38}, {"date": 2022-09-08T20:35:00.000Z, "value": 154.43}, {"date": 2022-09-08T20:40:00.000Z, "value": 154.47}, {"date": 2022-09-08T20:45:00.000Z, "value": 154.49}, {"date": 2022-09-08T20:50:00.000Z, "value": 154.4901}, {"date": 2022-09-08T20:55:00.000Z, "value": 154.45}, {"date": 2022-09-08T21:00:00.000Z, "value": 154.5}, {"date": 2022-09-08T21:05:00.000Z, "value": 154.46}, {"date": 2022-09-08T21:10:00.000Z, "value": 154.47}, {"date": 2022-09-08T21:15:00.000Z, "value": 154.45}, {"date": 2022-09-08T21:20:00.000Z, "value": 154.44}, {"date": 2022-09-08T21:25:00.000Z, "value": 154.46}, {"date": 2022-09-08T21:30:00.000Z, "value": 154.4}, {"date": 2022-09-08T21:35:00.000Z, "value": 154.49}, {"date": 2022-09-08T21:40:00.000Z, "value": 154.47}, {"date": 2022-09-08T21:45:00.000Z, "value": 154.48}, {"date": 2022-09-08T21:50:00.000Z, "value": 154.49}, {"date": 2022-09-08T21:55:00.000Z, "value": 154.49}, {"date": 2022-09-08T22:00:00.000Z, "value": 154.45}]

<LineGraph
        points={data}
        animated={true}
        color="#960018"
        enablePanGesture={true}
/>
<LineGraph
        points={data}
        animated={false}
        color="#960018"
/>

The output of the static graph is

while for animated graph is

As you can see from the animated graph, the lines on this graph is a little mangled up somehow.

Another dataset also yield to other mangled animatedGraphs

data = [{"date": 2022-08-08T04:00:00.000Z, "value": 164.87}, {"date": 2022-08-09T04:00:00.000Z, "value": 164.92}, {"date": 2022-08-10T04:00:00.000Z, "value": 169.24}, {"date": 2022-08-11T04:00:00.000Z, "value": 168.49}, {"date": 2022-08-12T04:00:00.000Z, "value": 172.1}, {"date": 2022-08-15T04:00:00.000Z, "value": 173.19}, {"date": 2022-08-16T04:00:00.000Z, "value": 173.03}, {"date": 2022-08-17T04:00:00.000Z, "value": 174.55}, {"date": 2022-08-18T04:00:00.000Z, "value": 174.15}, {"date": 2022-08-19T04:00:00.000Z, "value": 171.52}, {"date": 2022-08-22T04:00:00.000Z, "value": 167.57}, {"date": 2022-08-23T04:00:00.000Z, "value": 167.23}, {"date": 2022-08-24T04:00:00.000Z, "value": 167.53}, {"date": 2022-08-25T04:00:00.000Z, "value": 170.03}, {"date": 2022-08-26T04:00:00.000Z, "value": 163.62}, {"date": 2022-08-29T04:00:00.000Z, "value": 161.38}, {"date": 2022-08-30T04:00:00.000Z, "value": 158.91}, {"date": 2022-08-31T04:00:00.000Z, "value": 157.22}, {"date": 2022-09-01T04:00:00.000Z, "value": 157.96}, {"date": 2022-09-02T04:00:00.000Z, "value": 155.81}, {"date": 2022-09-06T04:00:00.000Z, "value": 154.53}, {"date": 2022-09-07T04:00:00.000Z, "value": 155.96}, {"date": 2022-09-08T04:00:00.000Z, "value": 154.46}]
<LineGraph
        points={data}
        animated={true}
        color="#960018"
        enablePanGesture={true}
/>
<LineGraph
        points={data}
        animated={false}
        color="#960018"
/>

Static:

Animated:

@chrispader This may be related to the recent PR pushed.

[Christoph Pader]

Will investigate this soon. I think i already know what could be the issue...