[charts][RFC] Replace DefaultXxxx by the usage of hooks

[alexfauquette]

Related messages

#13209 (comment)
#13700 (comment)

Issues that could be solved with it

• [charts] Add a "seriesIndex" Property to the AxisContent Custom Charts Tooltip in an AreaPlot #13944
• [charts] "dataIndex" Property is not available to the "itemContent" Custom Charts Tooltip in an AreaPlot #13945

Current state

The initial idea of slots was to provide developers with a simple interface to plug their custom components.

For example if they want to customize the tooltip, we provide all the data needed to the slots.tooltip and then they are responsible for rendering the content of the tooltip.

But the tooltip for an axis does not require the same data as a tooltip for an item. So either we have slots.tooltip = (props: AxisTooltipProps | ItemTooltipProps) => .... Or we creat two slots.

For now, we went with

function Tooltip() {
  // .. computation
  return <slots.popper>
    {isAxis ? <AxisTooltipContent /> : <ItemTooltipContent />}
  </slots.popper>
}

function AxisTooltipContent(){
  // .. computation specific to axis tooltip
  return <slots.axisTooltip />
}

function ItemTooltipContent(){
  // .. computation specific to item tooltip
  return <slots.itemTooltip />
}

Similar issue occurs for the legend due to the introduction of color legend (we have series legend, piecewise color legend, and continuous color legend)

Issue

This current solution seems to be contrary to the idea of supporting composition. Currently to have access to the processed data, a custom tooltip should be done as follows:

<ChartsContainer >
  <ChartsTooltip slots={{ itemTooltip: MyCustomTooltipContent }} />
</ChartsContainer>

Proposal

I propose to stop this pattern and use hooks instead.

function CustomAxisTooltip(){
  const tooltipProps = useChartsTooltip();
  const { series, axis, dataIndex, axisValue } = useChartsAxisTooltipContent();

  return <ChartsTooltip {...tooltipProps}>
    <Paper>
    {sereries.map((item) => {
      // render whatever you want
    })}
    </Paper>
  </ChartsTooltip>
}

Potential issues

Will need a nice docs for discoverability

Search keywords: