test(partiton): demo first layer sorting

integration/tests/partition_stories.test.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { common } from '../page_objects';
+
+describe('Axis stories', () => {
+  it('should sort the first layer too', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/mosaic-alpha--other-slices&globals=background:white;theme:light&knob-"Other" on bottom even if not the smallest=true&knob-Alphabetical outer group sorting=true',
+    );
+  });
+  it('should sort just the first layer', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/mosaic-alpha--other-slices&globals=background:white;theme:light&knob-"Other" on bottom even if not the smallest=false&knob-Alphabetical outer group sorting=true',
+    );
+  });
+});

storybook/stories/mosaic/20_mosaic_with_other.story.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import {
@@ -40,6 +41,8 @@ const data = [
 ];
 
 export const Example = () => {
+  const alphabetical = boolean('Alphabetical outer group sorting', false);
+  const otherOnBottom = boolean('"Other" on bottom even if not the smallest', true);
   return (
     <Chart>
       <Settings baseTheme={useBaseTheme()} />
@@ -52,6 +55,15 @@ export const Example = () => {
           {
             groupByRollup: (d: Datum) => d.region,
             nodeLabel: (d) => String(d).toUpperCase(),
+            sortPredicate: alphabetical
+              ? ([name1, node1]: ArrayEntry, [name2, node2]: ArrayEntry) => {
+                  if (name1 < name2) return -1;
+                  if (name2 < name1) return 1;
+
+                  // otherwise, use the increasing value order
+                  return node1.value - node2.value;
+                }
+              : undefined,
             fillLabel: {
               valueFormatter: () => ``,
               fontWeight: 600,
@@ -63,13 +75,15 @@ export const Example = () => {
           {
             groupByRollup: (d: Datum) => d.dest,
             nodeLabel: (d: any) => countryLookup[d]?.name ?? d,
-            sortPredicate: ([name1, node1]: ArrayEntry, [name2, node2]: ArrayEntry) => {
-              if (name1 === 'Other' && name2 !== 'Other') return -1;
-              if (name2 === 'Other' && name1 !== 'Other') return 1;
+            sortPredicate: otherOnBottom
+              ? ([name1, node1]: ArrayEntry, [name2, node2]: ArrayEntry) => {
+                  if (name1 === 'Other' && name2 !== 'Other') return 1;
+                  if (name2 === 'Other' && name1 !== 'Other') return -1;
 
-              // otherwise, use the increasing value order
-              return node1.value - node2.value;
-            },
+                  // otherwise, use the increasing value order
+                  return node1.value - node2.value;
+                }
+              : undefined,
             fillLabel: {
               fontWeight: 100,
               maxFontSize: 16,