Pass Serie to SymbolShape, SliceTooltip

[jamesarosen]

For accessibility reasons, I'd like to use a different symbol shape for each series in my chart. With the current APIs, that looks something like this:

function MySymbolShape({ id, ...rest }) {
  if (id === 'foo') return <SymbolCircle {...rest} />
  if (id === 'bar') return <SymbolTriangle {...rest} />
  if (id === 'baz') return <SymbolSquare {...rest} />
  return <SymbolDiamond {...rest} />
} satisfies FC<SymbolProps>

<Line symbolShape={MySymbolShape} ... />

I don't love that I have to define the lookup centrally. I'd prefer to attach the shape information to each Serie:

function MySymbolShape({ serie, ...rest }) {
  if ('symbolShape' in serie) return serie.symbolShape(rest);
  return <SymbolDiamond {...rest} />
} satisfies FC<SymbolProps>

<Line
  symbolShape={MySymbolShape}
  data={[
    { id: 'foo', symbolShape: SymbolCircle, data: [...] },
    { id: 'bar', symbolShape: SymbolTriangle, data: [...] },
    { id: 'baz', symbolShape: SymbolSquare, data: [...] },
  ]}
/>

Since SliceTooltip also needs to render the symbols in its table, it should also receive the full Serie[] (just like a CustomLayer does):

function MySliceTooltip({ slice }) {
  return (
    <div class='three-column-grid'>
      {
        slice.points.map((point) => (
          <Fragment key={point.serie.id}>
            <span><MySymbolShape serie={point.serie} width={14} height={14} fill={point.serieColor} /></span>
            <span>{point.serie.id}</span>
            <span>{point.data.yFormatted}</span>
          </Fragment>
        ))
      }
    </div>
  )
} satisfies FC<SliceTooltipProps>