null values in the data object

Hey,

First of all I want to thank you all for this amazing library!

Currently I’m trying to visualise data with null values. The data is extracted from diesel generators, and null values means the generator is either turned off at that moment, or there is no connection. I understand from this comment https://github.com/uber/react-vis/issues/109#issuecomment-248211411 that null values will be automatically converted to zeros, however in this use case that would mean the generator is turned on, but not outputting any power. Zeros are different than null’s.

An example dataset could be: const data = [{x: 0, y: 10}, {x: 1, y: 11}, {x: 2, y: null}, {x: 3, y: 13}, {x: 4, y: 14}];

Which looks like this (null is changed to 0, y-axis doesn’t scale well?):

What I’m trying to achieve is the following:

The only way I managed to accomplish this, is by changing the _renderLine function in the source code of line-series (and some other series for it to work as well, like line-mark-series) from this: line = line.x(x).y(y);

to this: line = line.x(x).y(y).defined((d) => d.y !== null);

However I’m quoting from the comment I just mentioned

We want the user to provide well structured data and deal with such corner cases as null or undefined values of objects (currently they will be treated as zeros).

What would be the best way to deal with this without changing the source code. Or is there currently no way (and would you accept such a pull request?)

Thank you very much!

[jckr]

I think the larger issue is that the lineSeries treats a series of datapoint the same way that other …Series treat a single datapoint - as the smallest atomic object. We can’t pass data per datapoint (ie stroke-dasharray, thickness, color…) and have to do this at the level of the line. What we could do is create a segmentSeries that, instead of generating a <path />, would generate a number of <line /> elements which could all be accessed and manipulated. such a series could deal with missing values.

[mcnuttandrew]

Hey @tijp

The quickest/dirtiest workaround will be for you to split your data at every null and introduce a new line series for each continuous section of data, which would be the spirit of the comment that you are highlighting. However, this is clearly not an ideal solution! We would gladly accept PR adding defined to renderLine. I’d suggest a prop on LineSeries called defined that accepts a function or a string (same pattern as curve).

(also @ericsoco there’s an open issue for accessors here at #360)