React-vis: Feature Request: Graceful handling of no data

[jkerrwilson]

I have been using this lib for a project which allows user data selections, eg. date range selection, data filtering, and I have noticed that if the data object passed to an XYPlot is empty it simply doesn't render.

I think a relatively simple and very convenient feature would be to provide an option for graceful handling of empty data, something like a simple graying out of the plot area with a customizable "No Data" message appearing in the center of the plot area.

[mcnuttandrew]

Hey @jkerrwilson,
We currently provide a not very well known prop on the XYPlot which allows for better handling of no data, dontCheckIfEmpty, (https://uber.github.io/react-vis/documentation/api-reference/xy-plot). Generally it is useful to use this if you are setting the domains of the data manually rather than letting react-vis compute it.

I think dontCheckIfEmpty should be sufficient for your use case! Rather than building in an option which will likely need to be customized a lot to fit most users displays, i'd advise building a demo of how this functionality might be built. I would strongly welcome a PR to this effect.

[jkerrwilson]

Hey!

Yes that prop does most of what I wanted. My solution effectively had the addition of a simple message indicating that there was no data to display in the case of an empty chart:

<text fontStyle={'strong'} fontSize={24} fill={'gray'}
    text-anchor="middle" x={this.props.width/2} y={this.props.height/2}>
    No data in selected range
</text>

Giving some simple feedback that the lack of graphical display was due to no shown data rather than some rendering error etc.

If I have some time later I may look into creating a PR, as if I can find the right location to put it this feature seems like it should be simple to implement as a customization prop that is triggered along with dontCheckIfEmpty.

[mcnuttandrew]

Just to be clear, I don't think this feature should be part of the main library, instead I think it should be implemented as an example. I think the way that users handle no data is highly variable, and so i don't think we should get in their way. Instead I think it would be plenty effective to give your example as above as a showcase example (maybe in the plots folder?) and place that somewhere prominent in the documentation.

[jkerrwilson]

I guess the problem is that unless the xyplot has a mechanism for providing feedback to the developer when no data is in the selected range, it is pretty meaningless to provide an example, as figuring that out is the bulk of the effort, and that would be completely different for different setups.

It seems obvious that you can throw in a conditional that shows a "No data" message once you've established that the selected xDomain is empty, but having to manually compute that outside of the plot is what I find pretty messy.

[paddotk]

Setting the dontCheckIfEmpty={true} prop just makes the entire page crash when the chart's data is an empty array (or when the plot has no chart component in it). I don't see how it can help in this case tbh..

[tommyz0123]

found the example code here: https://github.com/mcnuttandrew/react-vis/blob/0db01291f69abc88e173f17636e9c272e35ac8ac/showcase/axes/empty-chart.js