fix(xy): dataIndex keeps original data order on small multiples

packages/charts/api/charts.api.md

@@ -1047,8 +1047,6 @@ export type GroupByKeyFn<T> = (data: T) => string;
 // @alpha (undocumented)
 export type GroupByProps = Pick<GroupBySpec, 'id' | 'by' | 'sort' | 'format'>;
 
-// Warning: (ae-forgotten-export) The symbol "Predicate" needs to be exported by the entry point index.d.ts
-//
 // @alpha (undocumented)
 export type GroupBySort = Predicate;
 
@@ -1783,6 +1781,18 @@ export interface Postfixes {
     y1AccessorFormat?: string;
 }
 
+// @public (undocumented)
+export const Predicate: Readonly<{
+    NumAsc: "numAsc";
+    NumDesc: "numDesc";
+    AlphaAsc: "alphaAsc";
+    AlphaDesc: "alphaDesc";
+    DataIndex: "dataIndex";
+}>;
+
+// @public (undocumented)
+export type Predicate = $Values<typeof Predicate>;
+
 // @public
 export type PrimitiveValue = string | number | null;
 

packages/charts/src/common/predicate.ts

@@ -41,13 +41,13 @@ export function getPredicateFn<T>(predicate: Predicate, accessor?: keyof T): (a:
         const bValue = Number(accessor ? b[accessor] : b);
         return bValue - aValue;
       };
-    default:
-    case 'dataIndex':
     case 'numAsc':
       return (a: T, b: T) => {
         const aValue = Number(accessor ? a[accessor] : a);
         const bValue = Number(accessor ? b[accessor] : b);
         return aValue - bValue;
       };
+    case 'dataIndex':
+      return () => 0;
   }
 }

packages/charts/src/index.ts

@@ -113,6 +113,7 @@ export { AdditiveNumber } from './utils/accessor';
 export { FontStyle, FONT_STYLES } from './common/text_utils';
 export { Color } from './common/colors';
 export { RGB, A, RgbaTuple } from './common/color_library_wrappers';
+export { Predicate } from './common/predicate';
 
 export {
   ESCalendarInterval,

storybook/stories/small_multiples/8_sorting.story.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 { select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  ScaleType,
+  Position,
+  Chart,
+  Axis,
+  GroupBy,
+  SmallMultiples,
+  Settings,
+  BarSeries,
+  Predicate,
+} from '@elastic/charts';
+
+/**
+ * This story is used on VRTs to test the sorting logic of the dataIndex sort predicate
+ */
+export const Example = () => {
+  const data: [string, number][] = [
+    ['3', 100],
+    ['5', 80],
+    ['1', 50],
+    ['2', 30],
+    ['6', 12],
+    ['4', 10],
+    ['7', 5],
+  ];
+
+  return (
+    <Chart>
+      <Settings rotation={90} />
+      <Axis id="time" title="Day of week" position={Position.Left} />
+      <Axis id="y" title="Count of logins" position={Position.Bottom} />
+
+      <GroupBy
+        id="h_split"
+        by={(spec, datum) => {
+          return datum[0];
+        }}
+        sort={select(
+          'Chart sorting',
+          {
+            ...Predicate,
+          },
+          Predicate.DataIndex,
+        )}
+      />
+      <SmallMultiples splitVertically="h_split" />
+
+      <BarSeries
+        id="Login count"
+        name={(si) => {
+          return `#logins day ${si.smVerticalAccessorValue}`;
+        }}
+        xScaleType={ScaleType.Ordinal}
+        yScaleType={ScaleType.Linear}
+        timeZone="local"
+        xAccessor={() => ''}
+        yAccessors={[1]}
+        data={data}
+      />
+    </Chart>
+  );
+};
+Example.parameters = {
+  markdown: `You can sort your small multiples by the \`GroupBy.by\` value in ascending/descending order.
+  If the sort is configured with the \`dataIndex\` predicate the small multiples
+  will keep the order of the passed data array.`,
+};

storybook/stories/small_multiples/small_multiples.stories.tsx

@@ -18,3 +18,5 @@ export { Example as gridLines } from './3_grid_lines.story';
 export { Example as histogramBars } from './5_histogram_bars.story';
 export { Example as heterogeneous } from './6_heterogeneous_cartesians.story';
 export { Example as sunbursts } from './7_sunbursts.story';
+
+export { Example as sorting } from './8_sorting.story';