[XY] Order by metric/custom metric doesn't work well for split chart

src/plugins/chart_expressions/expression_partition_vis/public/components/chart_split.tsx

@@ -9,12 +9,10 @@
 import React from 'react';
 import { Accessor, AccessorFn, GroupBy, SmallMultiples } from '@elastic/charts';
 import { Predicate } from '@elastic/charts/dist/common/predicate';
-import { DatatableColumn } from '../../../../expressions/public';
 
 interface ChartSplitProps {
   splitColumnAccessor?: Accessor | AccessorFn;
   splitRowAccessor?: Accessor | AccessorFn;
-  splitDimension?: DatatableColumn;
 }
 
 const CHART_SPLIT_ID = '__pie_chart_split__';

src/plugins/vis_types/xy/public/chart_split.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { Accessor, AccessorFn, GroupBy, SmallMultiples } from '@elastic/charts';
+import { Predicate } from '@elastic/charts/dist/common/predicate';
+
+interface ChartSplitProps {
+  splitColumnAccessor?: Accessor | AccessorFn;
+  splitRowAccessor?: Accessor | AccessorFn;
+}
+
+const CHART_SPLIT_ID = '__chart_split__';
+
+export const ChartSplit = ({ splitColumnAccessor, splitRowAccessor }: ChartSplitProps) => {
+  if (!splitColumnAccessor && !splitRowAccessor) return null;
+
+  return (
+    <>
+      <GroupBy
+        id={CHART_SPLIT_ID}
+        by={(spec, datum) => {
+          const splitTypeAccessor = splitColumnAccessor || splitRowAccessor;
+          if (splitTypeAccessor) {
+            return typeof splitTypeAccessor === 'function'
+              ? splitTypeAccessor(datum)
+              : datum[splitTypeAccessor];
+          }
+          return spec.id;
+        }}
+        sort={Predicate.DataIndex}
+      />
+      <SmallMultiples
+        splitVertically={splitRowAccessor ? CHART_SPLIT_ID : undefined}
+        splitHorizontally={splitColumnAccessor ? CHART_SPLIT_ID : undefined}
+      />
+    </>
+  );
+};

src/plugins/vis_types/xy/public/vis_component.tsx

@@ -57,7 +57,7 @@ import {
   getComplexAccessor,
   getSplitSeriesAccessorFnMap,
 } from './utils/accessors';
-import { ChartSplitter } from './chart_splitter';
+import { ChartSplit } from './chart_split';
 
 export interface VisComponentProps {
   visParams: VisParams;
@@ -338,12 +338,6 @@ const VisComponent = (props: VisComponentProps) => {
     [getSeriesName, legendPosition, props.uiState, setColor, visParams.palette.name]
   );
 
-  const splitChartDimension = visParams.dimensions.splitColumn
-    ? visData.columns[visParams.dimensions.splitColumn[0].accessor]
-    : visParams.dimensions.splitRow
-    ? visData.columns[visParams.dimensions.splitRow[0].accessor]
-    : undefined;
-
   return (
     <div className="xyChart__container" data-test-subj="visTypeXyChart">
       <LegendToggle
@@ -352,10 +346,9 @@ const VisComponent = (props: VisComponentProps) => {
         legendPosition={legendPosition}
       />
       <Chart size="100%" ref={chartRef}>
-        <ChartSplitter
+        <ChartSplit
           splitColumnAccessor={splitChartColumnAccessor}
           splitRowAccessor={splitChartRowAccessor}
-          splitDimension={splitChartDimension}
         />
         <XYSettings
           {...config}