feat(legend): expose sorting function

[markov00]

Summary

The ability to sort the legend programmatically is exposed through Settings.legendSort.
The function will be used the same way as the sort compare function in JS where the two values (a, b) passed are the SeriesIdentifiers.

Details

See the storybook story for an usage example

// the sorting value can be part of the dataset or externally defined
  const categoricalIndex: Array<unknown> = ['Apple', 'Orange', 'Banana'];
  const legendSort = (a: SeriesIdentifier, b: SeriesIdentifier) => {
    // extract the value from the accessors to identify the current selected series
    // the SeriesIdentifier can be casted to the chart type specific one
    const categoryA = (a as XYChartSeriesIdentifier)?.splitAccessors?.get(1) ?? '';
    const categoryB = (b as XYChartSeriesIdentifier)?.splitAccessors?.get(1) ?? '';
    // find the index of each series
    const catAIndex = categoricalIndex.indexOf(categoryA);
    const catBIndex = categoricalIndex.indexOf(categoryB);
    // compare the indices and return the order
    return catAIndex - catBIndex;
  };
  return (
    <Chart>
      <Settings showLegend baseTheme={useBaseTheme()} legendSort={legendSort} />

related to elastic/kibana#86184 elastic/kibana#122329

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• New public API exports have been added to packages/charts/src/index.ts
• Unit tests have been added or updated to match the most common scenarios
• The proper documentation and/or storybook story has been added or updated