add sorting

elastic · Nov 19, 2021 · 9e3e8cc · 9e3e8cc
1 parent d9070dd
commit 9e3e8cc
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 4 deletions.
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -33,6 +33,7 @@ import {
   getFilterContext,
   isTreemapOrMosaicShape,
   byDataColorPaletteMap,
+  extractUniqTermsMap,
 } from './render_helpers';
 import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
@@ -114,10 +115,8 @@ export function PieComponent(
     })
   ).length;
 
-  let byDataPalette: ReturnType<typeof byDataColorPaletteMap>;
-
   const shouldUseByDataPalette = !syncColors && ['mosaic'].includes(shape) && bucketColumns[1]?.id;
-
+  let byDataPalette: ReturnType<typeof byDataColorPaletteMap>;
   if (shouldUseByDataPalette) {
     byDataPalette = byDataColorPaletteMap(
       firstTable,
@@ -127,6 +126,11 @@ export function PieComponent(
     );
   }
 
+  let sortingMap: Record<string, number>;
+  if (shape === 'mosaic') {
+    sortingMap = extractUniqTermsMap(firstTable, bucketColumns[0].id);
+  }
+
   const layers: PartitionLayer[] = bucketColumns.map((col, layerIndex) => {
     return {
       groupByRollup: (d: Datum) => d[col.id] ?? EMPTY_SLICE,
@@ -141,6 +145,17 @@ export function PieComponent(
         return String(d);
       },
       fillLabel,
+      sortPredicate:
+        shape === 'mosaic'
+          ? ([name1, node1], [, node2]) => {
+              // Sorting for first group
+              if (bucketColumns.length === 1 || (node1.children.length && name1 in sortingMap)) {
+                return sortingMap[name1];
+              }
+              // Sorting for second group
+              return node2.value - node1.value;
+            }
+          : undefined,
       shape: {
         fillColor: (d) => {
           const seriesLayers: SeriesLayer[] = [];

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_helpers.test.ts b/x-pack/plugins/lens/public/pie_visualization/render_helpers.test.ts
@@ -8,7 +8,12 @@
 import type { Datatable } from 'src/plugins/expressions/public';
 import type { PaletteDefinition, PaletteOutput } from 'src/plugins/charts/public';
 
-import { getSliceValue, getFilterContext, byDataColorPaletteMap } from './render_helpers';
+import {
+  getSliceValue,
+  getFilterContext,
+  byDataColorPaletteMap,
+  extractUniqTermsMap,
+} from './render_helpers';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 
 describe('render helpers', () => {
@@ -204,6 +209,37 @@ describe('render helpers', () => {
     });
   });
 
+  describe('#extractUniqTermsMap', () => {
+    it('should extract map', () => {
+      const table: Datatable = {
+        type: 'datatable',
+        columns: [
+          { id: 'a', name: 'A', meta: { type: 'string' } },
+          { id: 'b', name: 'B', meta: { type: 'string' } },
+          { id: 'c', name: 'C', meta: { type: 'number' } },
+        ],
+        rows: [
+          { a: 'Hi', b: 'Two', c: 2 },
+          { a: 'Test', b: 'Two', c: 5 },
+          { a: 'Foo', b: 'Three', c: 6 },
+        ],
+      };
+      expect(extractUniqTermsMap(table, 'a')).toMatchInlineSnapshot(`
+        Object {
+          "Foo": 2,
+          "Hi": 0,
+          "Test": 1,
+        }
+      `);
+      expect(extractUniqTermsMap(table, 'b')).toMatchInlineSnapshot(`
+        Object {
+          "Three": 1,
+          "Two": 0,
+        }
+      `);
+    });
+  });
+
   describe('#byDataColorPaletteMap', () => {
     let datatable: Datatable;
     let paletteDefinition: PaletteDefinition;

diff --git a/x-pack/plugins/lens/public/pie_visualization/render_helpers.ts b/x-pack/plugins/lens/public/pie_visualization/render_helpers.ts
@@ -44,6 +44,15 @@ export const isPartitionShape = (shape: PieChartTypes | string) =>
 export const isTreemapOrMosaicShape = (shape: PieChartTypes | string) =>
   ['treemap', 'mosaic'].includes(shape);
 
+export const extractUniqTermsMap = (dataTable: Datatable, columnId: string) =>
+  [...new Set(dataTable.rows.map((item) => item[columnId]))].reduce(
+    (acc, item, index) => ({
+      ...acc,
+      [item]: index,
+    }),
+    {}
+  );
+
 export const byDataColorPaletteMap = (
   dataTable: Datatable,
   columnId: string,