fix(waffle): use descend sortPredicate by default (#1510)

integration/tests/waffle_stories.test.ts

@@ -0,0 +1,17 @@
+/*
+ * 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/common';
+
+describe('Waffle', () => {
+  it('should render cells in ascending order', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/waffle-alpha--simple&globals=theme:light&knob-show table for debugging=&knob-ascending sort=true',
+    );
+  });
+});

packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts

@@ -25,7 +25,7 @@ import {
   NodeSorter,
   Sorter,
 } from '../utils/group_by_rollup';
-import { isMosaic, isSunburst, isTreemap } from './viewmodel';
+import { isMosaic, isSunburst, isTreemap, isWaffle } from './viewmodel';
 
 function aggregateComparator(accessor: (v: any) => any, sorter: Sorter): NodeSorter {
   return (a, b) => sorter(accessor(a), accessor(b));
@@ -72,7 +72,7 @@ export function getHierarchyOfArrays(
 
 const sorter = (layout: PartitionLayout) => ({ sortPredicate }: Layer, i: number) =>
   sortPredicate ||
-  (isTreemap(layout) || isSunburst(layout)
+  (isTreemap(layout) || isSunburst(layout) || isWaffle(layout)
     ? descendingValueNodes
     : isMosaic(layout)
     ? i === 2

storybook/stories/waffle/1_simple.story.tsx

@@ -13,17 +13,21 @@ import { Chart, Datum, Partition, PartitionLayout, Settings, ShapeTreeNode } fro
 import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
 import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 
+import { ArrayEntry } from '../../../packages/charts/src/chart_types/partition_chart/layout/utils/group_by_rollup';
 import { useBaseTheme } from '../../use_base_theme';
-import { discreteColor, colorBrewerCategoricalStark9, productLookup } from '../utils/utils';
+import { colorBrewerCategoricalStark9, discreteColor, productLookup } from '../utils/utils';
 
 export const Example = () => {
   const showDebug = boolean('show table for debugging', false);
+  const ascendingSort = boolean('ascending sort', false);
+  // this is used to test the sorting capabilities
+  const data = mocks.pie.slice(0, 4).sort(() => (Math.random() > 0.5 ? 1 : -1));
   return (
     <Chart className="story-chart">
       <Settings baseTheme={useBaseTheme()} debug={showDebug} showLegend flatLegend showLegendExtra />
       <Partition
         id="spec_1"
-        data={mocks.pie.slice(0, 4)}
+        data={data}
         valueAccessor={(d: Datum) => d.exportVal as number}
         valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
         layers={[
@@ -33,13 +37,11 @@ export const Example = () => {
             shape: {
               fillColor: (d: ShapeTreeNode) => discreteColor(colorBrewerCategoricalStark9.slice(1))(d.sortIndex),
             },
-          },
-          {
-            groupByRollup: (d: Datum) => d.sitc1,
-            nodeLabel: (d: Datum) => productLookup[d].name,
-            shape: {
-              fillColor: (d: ShapeTreeNode) => discreteColor(colorBrewerCategoricalStark9.slice(1))(d.sortIndex),
-            },
+            sortPredicate: ascendingSort
+              ? ([, node1]: ArrayEntry, [, node2]: ArrayEntry) => {
+                  return node1.value - node2.value;
+                }
+              : undefined, // the descending sort is applied by default
           },
         ]}
         config={{