[charts] Add <ChartsReferenceLine /> component

[wascou]

• [X ] I have followed (at least) the PR section of the contributing guide.

Referencing #10351

[alexfauquette]

I've updated the PR to use x/y instead of threshold/direction.

I've kind of removed some features of the <text /> since they should be available when #10138 got merged

[mui-bot]

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

Updated pages:

• docs/data/charts/axis/axis.md
• docs/data/charts/line-demo/line-demo.md

Generated by 🚫 dangerJS against f6bd7e6

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[alexfauquette]

@wascou don't worry about CI, I can handle it

The #10138 just got merged so it will be possible to add <Text/> to easily manage multi-line text in the reference line.

After that, I think we will be good for merging. Maybe the documentation could get a bit more attention

[wascou]

I can give few examples?

[alexfauquette]

I can give few examples?

With pleasure. For consistency, I usually put two examples:

• One in the docs explanatory page with a paragraph that explains props and when to use them followed by a demo that highlight those usecases https://deploy-preview-10597--material-ui-x.netlify.app/x/react-charts/axis/#reference-line
• One example coming from recharts since it's a reference, it's nice to compare to see what needs to be improved. Would perfectly fit there: https://deploy-preview-10597--material-ui-x.netlify.app/x/react-charts/line-demo/

But for now, I would recommend to wait a bit. I'm working on adding the #10138 and its followup wihich might implies a bit more modification 🫣

[wascou]

Good.
And as you changed props structure, now, my own example does not fit:

<ReferenceLine
                direction="horizontal"
                threshold={100}
                color="red"
                lineWidth={1}
                text="Limit"
              />

[alexfauquette]

Here I think I have reached something stable.

I think it's able to the the same stuff as the initial proposal but with fewer props.

<ReferenceLine
  label="Example\nwith multi line" // the label to display
  x={10} // the reference value
  labelAlign="start" // To place the label on the start, middle, or end of the reference line
  spacing={10} // the space between the line and the text
  lineStyle={{ strokeDasharray: '10 5' }} // Every style customization of the line in a single object
  labelStyle={{ strokeColor: 'red' }} // Every style customization of the label in a single object
/>

Your example would become

 <ReferenceLine
-  direction="horizontal"
-  threshold={100}
+  y={100}
-  color="red"
-  lineWidth={1}
+  lineStyle={{ strokeWidth: 1, strokeColor: 'red' }}
-   text="Limit"
+   label="Limit"
/>

I think the was textAnchor and dominantBaseline are passed to <ChartsText/> might change again. But that's more an internal consideration

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[LukasTy]

Really nice addition! 💯
Great job! 👍
Leaving some comments for possible improvements and one functional fix that IMHO we should do. 🤔

[LukasTy]

Nitpick: Was a more proper solution considered, which would avoid the need for as any? 🤔

[alexfauquette]

It has been more complicated than expected.

Each chart has some expectations about which scale they use, but useXScale returns any type of scale.

So the next line xAxisScale(x) was failing because x could be for example a string (available if using band scale) but the axis scale returned by xAxisScale could be linear which only accepts number

On the way of experimenting, I structured a bit more the scale types to remove as much any as possible in scales type def

[LukasTy]

IMHO, we should solve this problem:

At least changing the dominantBaseline to ideographic avoids the label overlapping the ChartsXAxis.
Or maybe it would also make sense to introduce or change the spacing prop to accept the x and y prop so that the end user could tailor the result to their needs?

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[LukasTy]

This looks like a really well executed addition. Kudos to everyone involved! 👏 💯

[michelengelen]

@alexfauquette can we switch the base branch to next and possibly backport these changes to master?