[charts] Allow multiple axes in the tooltip

[alexfauquette]

This is the followup of #17039

The issue

The current behavior of Tooltip with trigger="axis" is handcrafted. The main idea was

If the default x-axis has some data we display the tooltip for it. Otherwise we look at the default y-axis

This does not scale anymore with:

1. The request to control the tooltip
2. The request to show multiple axes values in a tooltip
3. The support of rotation and radius axes.

Proposed aproach

• axes are responsible to say if they trigger the tooltip or not with triggerTooltip paprameter.
• the default value of this parameter is defined by the seriesConfig. For now bar and line set heirs x/y axies as triggering the tooltip according to their direction
• Knowing it the tooltip with axis trigger is open now resumes to look at all axes with triggerTooltip=true and test if the current point position corresponds to a value.

Needed refinement before merging

• The default render of the tooltip is not exactly the same now that we can have multiple axes. Will need to go deeper in https://www.w3.org/WAI/tutorials/tables/multi-level/
• The hook for axis tooltip signature is not the same anymore. We could add a parameter allowMultipleAxes. If this parameter is false or undefined we only return the first axis. Otherwise we return the array of axes.

Changelog

Breaking change

The tooltip DOM structure is modified to improve accessibility.
If you relied on it to apply some style or run tests, you might be impacted by this modification.

The axis tooltip displays a table per axis with the axis value in a caption.
Cells containing the series label are now th cells instead of td.

The item tooltip content is a simple p component with a span for series label and item value.

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

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

Updated pages:

• docs/data/charts/tooltip/tooltip.md
• docs/data/migration/migration-charts-v7/migration-charts-v7.md

Generated by 🚫 dangerJS against 336ec8d

[codspeed-hq]

CodSpeed Performance Report

Merging #17058 will not alter performance

_{Comparing alexfauquette:update-tooltip-axis (336ec8d) with master (b21ad19)}

Summary

✅ 8 untouched benchmarks

[bernardobelchior]

What is the "main" pointer?

[alexfauquette]

I thaught about multip pointer interaction. Since we only store one point, it's the main one. How to handle this multi-point is an open quesiton

[github-actions]

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

[github-actions]

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

[JCQuintas]

Suggested change

	disableTooltipInteraction?: boolean;
	hideTooltip?: boolean;

or

Suggested change

	disableTooltipInteraction?: boolean;
	hideTooltip?: boolean;

or simply the same as the internal value, which would be clearer imo, though we would have to treat undefined as true

Suggested change

	disableTooltipInteraction?: boolean;
	triggerTooltip?: boolean;

[alexfauquette]

What about ignoreTooltip?

[JCQuintas]

Better than disableTooltipInteraction but I'm not sure which one is better suited 😆

[alexfauquette]

The issue with hideTooltip is that it exist also in the series config, but the behavior is not exactly the same, so it might create some confusion

[bernardobelchior]

What if we invert it and call it something like showInTooltip or displayInTooltip where the default is true?

Alternatively, we could use hideFromTootip or hideInTooltip.

[JCQuintas]

There seems to be some styling inconsistency in the tooltip. Should we always align the series to the left and values to the right?

[JCQuintas]

The alignment issue is still happening.

It probably needs to fix the column widths to their min-content values

[alexfauquette]

It probably needs to fix the column widths to their min-content values

Not sure it's feasible. With a table layout it's quite hard to manipulate cells width when their is too much space available

An for most of the axis tooltip the current behavior looks good

[JCQuintas]

We could skip this entire column, which should allow us a consistent margin style across content.

This is aria-hidden anyways, useless for tabular data.

If we remove it altogether and add the contents to the labelCell

<ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)} component="th">
  <ChartsLabelMark type={markType} color={color} className={classes.mark} />{label}
</ChartsTooltipCell>

Then we would just need to update some margins and styles and everything should look as expected

[alexfauquette]

I had to add a wrapper for the tooltip mark to keep series label aligned when shapes are different, because the square has width: 13 but line has width: 16

So to simplify I dedicated 20px + theme.spacing(1.5) for the mark

[Janpot]

I'd probably just throw if it can't find the runtime version

[Janpot]

Looks good, I'd just error out instead of defaulting to a fixed versiona s that would likely silently break things.