Sort DataSeries

[markov00]

Is your feature request related to a problem? Please describe.
We should add the ability to sort every DataSeries created due to a splitAccessor or due to multiple specs ids.
Different sorting order can be applied to rendering, tooltip, legend.

Describe the solution you'd like
A first-class component should be built to handle such sorting. Its id can be used inside other specific props to reuse the same sorting in multiple places.

// sort the tooltip values by specId alphabetically ascenting
<Sort
  id="tooltipOrder"
  by={(spec: Spec, splitAccessorValues: string|number[], datum: Datum ) => {
    return [spec.id];
  }}
  order={['alphaAsc']}
/>
<Tooltip
order="tooltipOrder"
/>

// sort legend items: by specId alphabetically ascending, then by split accessor value numerically descending
<Sort
  id="legendOrder"
  by={(spec: Spec, splitAccessorValues: string|number[], datum: Datum ) => {
    return [spec.id, ...splitAccessorValues];
  }}
  order={['alphaAsc', 'numDesc']}
/>
<Legend
...
order="legendOrder"
/>

// sorting rendering of bars: first stacked series then non stacked series by split accessors values
<Sort
  id="renderingOrder"
  by={(spec: Spec, splitAccessorValues: string|number[], datum: Datum ) => {
    const stackKey = spec.isStacked ? 'A' : 'B';
    const stackKey = spec.isStacked ? 'A' : 'B';
    return [[stackKey, ...splitAccessorValues].join('-')];
  }}
  order={['alphaAsc']}
/>
<BarSeries
...
renderingOrder="renderingOrder"
/>

Describe alternatives you've considered
Implement this mechanism for each specific component can be too difficult to maintain in the long run and difficult to reuse across multiple chart elements

Additional context
Kibana vislib has a different rendering order than the one we currently use, the same happens for TSVB

• related to The order of the series in the tooltip does not match the legend #303 having the same order between rendering, tooltip and legend
• related to Allow greater control over layer rendering order #674 where the rendering order describe what element is rendered on top of each other

[nickofthyme]

Sort should include SeriesIdentifier and if available the given value (per elastic/kibana#46466).

[nickofthyme]

@markov00 is this closed with #924?

[markov00]

@nickofthyme the #924 doesn't cover the case requested in TSVB where we need to sort the legend by the extra value.
There is also another reason to keep this open: the API is not exposed yet

[nickofthyme]

Oh yeah I forgot it's a secret 🤫

[markov00]

@nickofthyme probably we can close also this one

[nickofthyme]

Yeah