Is there a way to use Visavail in React?

[isaacroldan]

I've tried to integrate Visavail in a React project without success, is there an "easy" way to do it? should any d3 react wrapper work? i've tried some (like https://github.com/skellyb/react-d3-wrap) but no luck.

Having Visavail in our React project would be really helpful 🙏

[tanganellilore]

Hi @isaacroldan ,

I'm not a React developer (I prefer Angular) but I try to create a example to integrate Visavail on React.js .

Here you can found the example.

If it's sufficient this example of integration, please update this issue and we will add to documentation for next release.

Thanks

[isaacroldan]

Awesome! Looks like it works great :)

I'm new to React and D3, but i had to add d3.select('svg').remove(); inside componentDidUpdate() to avoid rending multiple charts when updating the component. (changing the data for instance). And sometimes i see the chart duplicated for a short time when updating it, i'm working on that.

Thank you so much for the example code, it helped me a lot 🙇

[tanganellilore]

Hi @isaacroldan, you need to use the visavail function to redraw the graph inside a div without delete and reappend the graph manually.

The library have this function visavail.updateGraph(dataset) that you can call to redraw the graph with new data and without re-render the page or div.

The library delete the graph, all tooltip div and so on...if you use d3 function in your coder are still present a piece of div that library generate and this is not correct.

In the next release I try to add also this function into documentation.

I have updated the link shared before with a little pice of code to obtain what you need

[isaacroldan]

That's exactly what i needed. It works perfectly now.

Thank you so much for all the help!!

[tanganellilore]

I Update now the link with correct React.js semantic.

I will close this issue as shared by you when I update the Doc file

[isaacroldan]

One last question, is there a way to update the chart options similar to this updateGraph(dataset)? I want to dynamically change the height of the graph bars if possible

[tanganellilore]

At this moment not yet. I try to put it in the pipeline as features.

For now you can use the chart.destroy() function and after the visavail.generate(options, datasets) function for change options

[tanganellilore]

Hi @isaacroldan , I close this issue because a newer version of this library with all enhancement required is published today. Enjoy with visavail