ensure callback triggers on update and resize

[benzitohhh]

Hi @topicus, hope all good with you.

Unfortunately this.props.renderEnd is only triggered the first time the chart is rendered.

For the project I'm working on, we need the callback to trigger on every chart update or window resize.

Specifically, our callback renders a grey "predicted values" rectangle on top of the chart, showing the user which values are predictions. So if the data changes or the window is resized, we really need to redraw the grey rectangle.

This patch fixes the problem.

I understand that perhaps the problem should be fixed within nvd3 itself. Still, it would be really great to have this feature as a workaround for now.

Thanks,
Ben

[topicus]

I will rename the current renderEnd as onReady and bind the renderEnd properly. It seems like renderEnd in nvd3 differs across charts. I looked at that meanwhile I was solving another issue.

[benzitohhh]

ok thanks - really appreciated.

The callback we pass into nvd3's addGraph() is only called once, regardless of chart type:
https://github.com/novus/nvd3/blob/master/src/core.js#L98

[topicus]

@benzitohhh I've added this those events https://github.com/NuCivic/react-nvd3#events. Let me know if that works for you.

[benzitohhh]

Works great - thanks for the super speedy response.

[topicus]

Awesome. Closing this.

[benzitohhh]

Sorry @topicus, turns out I did not check the commit properly.

The renderEnd does not work for LineCharts. It is never called. You can see this on the /examples/lineChart:

ReactDOM.render(
    React.createElement(NVD3Chart, {
      ...
      type:'lineChart',
      datum: datum,
      ...
      renderEnd: function() { console.log('renderEnd'); } // this is never called
    }),
    document.getElementById('lineChart')
  );

Seems like the dispatch stuff is really inconsistent in nvd3.

The only way I can get this stuff to work is as in the patch I submitted before.

One workaround would be to expose a postUpdate property, and call that on update/windowResize. This would be as in my previous patch, except calling postUpdate rather than renderEnd). I added a pull request for it here: #29

What do you think?

[topicus]

@benzitohhh it's working for me in the lineChart at least. I've updated the example to demo how it works. Let me know if you still have issues with this.

[benzitohhh]

Hmmm that's really weird.

For me.... on the lineChart demo, renderEnd callback is never fired (both on change data, and on resizeWindow).

I just grabbed a fresh clone from github. Am I missing something?

[topicus]

Which browser are you using?

[benzitohhh]

Hmmm that's interesting. I've tried it on Chrome, Safari and Firefox; and also on two different machines (both OSX); but the renderEnd never fires for me.

I did an npm update to make sure I have the latest dependencies, and also updated gulp, but still no joy:

d3 v3.5.16
nvd3 v1.8.2
react v0.14.7
react-dom v0.14.7
gulp v3.9.1

I'm running the example by using gulp serve, and then naviagting to http://localhost:3000/examples/lineChart/

Any ideas?

[topicus]

I was able to reproduce it by clone the repo again. It seems like something change in the nvd3 library which causes lineChart not being animated by default.

I've pushed a workaround since it's an issue in the base library (nvd3).

In order to trigger the renderEnd event you need to set the duration property 1 at least. If duration is 0 then renderEnd is never triggered

I've updated the lineChart example.

[benzitohhh]

ok cool - thanks for looking into this