[charts] Allows to connect nulls

[alexfauquette]

Follow up of #10801

Most of the files modified are demos added to reproduce the recharts examples and be sure it works as expected.

Idea

The overall idea is that if connectNulls is used by the user, instead of using the d3 function defined, we filter the data to remove all the null elements. Such that d3 sees only the valid one and then does the interpolation between them.

Test

No idea why argos fails. I copy/paste the HTML of the legend from the preview and from the master deployment. It's exactly the same 🤷‍♂️

[mui-bot]

Deploy preview: https://deploy-preview-10803--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/areas-demo/areas-demo.md
• docs/data/charts/line-demo/line-demo.md
• docs/data/charts/lines/lines.md

Generated by 🚫 dangerJS against f340d12

[LukasTy]

Great improvement! 💙 💯
Some other thoughts:

1. I'm not sure if this is the best prop name, but maybe you have already done competitor analysis and this is also used by some other libraries
2. Wouldn't having connectNulls opt-out instead of opt-in make more sense? Or are others also approaching this behavior the same? 🤔

No idea why argos fails

Just ignore those silly pixel diffs. IMHO, it's mainly a problem, because we are making quite low-quality screenshots and in this case, it's SVG, rather than regular HTML elements, maybe that has extra rendering inaccuracy issues. 🤷

[alexfauquette]

I'm not sure if this is the best prop name, but maybe you have already done competitor analysis and this is also used by some other libraries

I picked connectNulls from Rechart. For me it makes sense since it's connecting points that are set to null by the developer.

Seems echarts has the same naming: https://echarts.apache.org/en/option.html#series-line.connectNulls

Wouldn't having connectNulls opt-out instead of opt-in make more sense? Or are others also approaching this behavior the same? 🤔

From what I see others are doing the same. The reason is that if you provide null it should be visible in the graph by default.

[LukasTy]

From what I see others are doing the same. The reason is that if you provide null it should be visible in the graph by default.

Thanks for the reply.
Hearing the arguments, your chosen API makes sense. 👍 💯