Animate plugin

[iddan]

When working with React we don't update data manually but pass it through the props. Is there a way to activate animated updates? like:

chart.animateData(newData, { duration: 1000 });

Maybe an animated prop can suit this case?

[bleachdugu]

@iddan you need to add a state or a parameter for your component to store the previously changed newData, then pass the previous changed data to dataProvider in amchart config.

and pass the latest newData to chart.animateData(newData, { duration: 1000 }); things is this animation api need the temp data stored in your component to trigger the anim

[iddan]

Storing chart's data in a component state is obvious. The thing is unless I use ref I can't access the chart's methods (i.e animteData()). So I'm trying to figure if it's possible to use some kind of attribute to make it work or, if you will, provide a HOC to do so.

[RahavLussato]

@iddan i added animate support to my PR #30

you'll need to :

1. import 'amcharts3-animate';.
2. add newDataProvider to the config.
3. add isAnimate={true} to props of AmCharts.React

[iddan]

@RahavLussato You are genuinely amazing. I would refactor to animated or animate prop name. Tip: JSX it's better writing: <MyComponent prop /> than <MyComponent prop={true} />.

[RahavLussato]

@iddan thanks. i agree with your tip but it also depends on your's eslint config :)

[iddan]

Would you mind refactor @RahavLussato?

[RahavLussato]

@iddan done, changed to animated.

[Pauan]

@iddan I'm sorry for the delay. I plan to make some changes to the animate plugin which will allow for a declarative API.

In the meantime, you can use the solution created by @RahavLussato, or alternatively you can use the init event to store the chart object, allowing you to call all of the AmCharts methods:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};

    this.chart = null;
  }

  render() {
    let config = {
      "listeners": [{
        "event": "init",
        "method": (e) => {
          this.chart = e.chart;
        }
      }]
    };

    return <AmCharts.React {...config} />;
  }

  animateData(newData) {
    if (this.chart !== null) {
      this.chart.animateData(newData, { duration: 1000 });
    }
  }
}

[iddan]

@Pauan yeah I figured out but it will be good to have an official declarative API. I'll be looking up for it