[charts] Improve the management of the text (legend only)

[alexfauquette]

Fix #9743

The target is to get access to the text size (height and width) to be able to place them nicely.

For now, the new <Text /> component allows to get its size and to support multiline texts.

It's used for

• axes ticks and labels, but it does not allow customization and does not use the size computation for now
• legend to allow it to wrap. Here it uses size computation and allows style customization

Discussion

Style

The placement of the legend has changed unintentionally. It now sticks to the border of the SVG instead of the border of the drawing area. Not a big deal, but I don't see one being better than the other

I changed a bit the default styling of legend text. I'm open to suggestions on this topic.

DevExp

For me the legend is much better now, but it opens the question about how to pass style the its labels. I went with labelStyle props. So you can do the following.

slotProps={{
  legend: {
    labelStyle: { fill: 'red',  fontSize: 50 }
  }
}}

But it could be done with other options to be able to manage states. But it feels overengineered. I don't know if you have ideas

slotProps={{
  legend: {
    styles: { 
      label: {fill: 'red',  fontSize: 50},
      outlinedLabel: {fill: 'red',  fontSize: 50},
      hiddenLabel: {fill: 'red',  fontSize: 50},
      mark: { ... },
    }
  }
}}

Todo

• In the legend let texts pick the width they need without having to provide a fixed width
• In the axis adapt the number of ticks to label size
• Support characters \n
• Fix docs spacing
• Make sure no more CSS is applied to text in the docs

Todo next PRs

• Allow to override legend marks
• Allow to customize texts for axes
• Avoid axes ticks overflow

Trade-offs

There are a lot of styled components in axes, and most of their style will be useless with this <Text/> component. I removed all of them and only kept the root one. The default styling is done by CSS classes

Preview is available in the demo of Legend docs page

Changelog

Breaking changes

The charts have a new text display mechanism.
It adds line break support and avoids overlapping text in the legend.
This comes with some breaking changes.

• The DOM structure is modified. An intermediary <tspan /> element has been added. This can impact how your style is applied.

  - <text>The label</text>
  + <text><tspan>The label</tspan></text>

• The top margin has been reduced from 100 to 50 to benefit form the denser legend.

• To accurately compute the text size and then place it, styling should be provided as a JS object. For example, to set the legend font size, you should do:

  <PieChart
    {/** ... */}
    slotProps={{
      legend: {
        labelStyle: {
          fontSize: 16,
        },
      },
    }}
  />

  Support for other text elements (axis labels and tick labels) will be implemented in follow-up PR.

[mui-bot]

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

Updated pages:

• docs/data/charts/legend/legend.md

Generated by 🚫 dangerJS against 309945b

[github-actions]

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

[alexfauquette]

All the text alignments are moved from this CSS to the <Text/> props

[alexfauquette]

It is not implemented yet. It will mostly be helpful for axes ticks

[noraleonte]

Great improvement! 🎉 Much better DX, 💙 the docs improvements
I left a few suggestions for the phrasing in the docs 🙈
About the reduced label font size, I agree that they are a bit too small. I would personally go with a middle ground of 14px. WDYT?

[LukasTy]

Looks great! 💯
Leaving some comments. 😉
The label vertical alignment is the culprit for not approving the PR yet as it seems like it would be a regression as compared to the current version. 🙈

[LukasTy]

Looks great! 💯
Approving based on: #10138 (comment)
The few left nitpicks are just that - minor improvements.