search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.08k stars 1.02k forks source link

Add pagination to Nivo Charts #2063

Closed mariela-plaza closed 2 years ago

mariela-plaza commented 2 years ago

Hello there,

I am currently working on an app that receives genomic data from our backend and renders said data in table format, using the react-data-grid library. Right now, we want to represent said data in other types of visualizations that are more dynamic and user friendly, like the charts that Nivo offers.

Since each request has a lot of entries, I need to implement pagination alongside the Nivo Charts in the app.

Before trying to implement this in the company's project, I decided to try out some ideas by creating a pet project and installing the Nivo Charts I wanted to use and a pagination library (react-pagination) to work alongside them.

So far, I've only implemented the Radar component and, although from the outside everything seems to be working, when I open the developer tools I find the following errors each time I change the pagination:

nivo-pagination-error-messages

Here are some snapshots of the RadarChart component and a video of how the pet project is working on localhost:

RadarChart component: RadarChart_component1 RadarChart_component2

https://user-images.githubusercontent.com/24737923/177160778-a238d244-81d3-4e13-ac23-296c179826f6.mp4

I think it would be ideal if the Nivo Charts already came with an option to work with pagination, but since this is not the case for the time being, I came up with this solution but it is not working the way I expected.

If anyone has any feedback or suggestions as to what I could do to avoid these errors from happening and/or improve my implementation, I would appreciate it very much.

Thank you for everything in advance, have a nice day!

vikrantsingh47 commented 2 years ago

@mariela-plaza is this project dead? there are no replies to any of the opened issues recently

plouc commented 2 years ago

@vikrantsingh47, it's not dead but I had very little time for the project lately.

vikrantsingh47 commented 2 years ago

@plouc oh ok.. i hope there can be some dedicated contributors for this project as this is one of the best libraries available and now as issues are piling up, it could get seriously outdated/unusable where heavy customization is required. for eg: https://github.com/plouc/nivo/issues/2061

mariela-plaza commented 2 years ago

@vikrantsingh47 Hi there! Thankfully, I was able to integrate pagination with another graph (the HeatMap graph) so I've been able to implement some nivo graphs in my app.

For the time being I will not use the Radar graph, but I hope that other types of graphic will work well alongside pagination.

I hope your problem is soon fixed! Have a nice day :)

plouc commented 2 years ago

Paginating charts should work out of the box, as it means handling a new dataset, which is supported, regarding having this embedded in the library, that's not something I'm willing to do at the moment, and depending on the chart type, we might want to use a different approach such as pan/zoom, it would be hard to find a solution that suits every use case.