fix mosaic color syncing (#127707)

elastic · Mar 15, 2022 · 737ec83 · 737ec83
1 parent c6bcab6
commit 737ec83
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 3 deletions.
diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/layers/get_color.ts b/src/plugins/chart_expressions/expression_partition_vis/public/utils/layers/get_color.ts
@@ -167,7 +167,7 @@ export const getColor = (
   rows: DatatableRow[],
   visParams: PartitionVisParams,
   palettes: PaletteRegistry | null,
-  byDataPalette: ReturnType<typeof byDataColorPaletteMap>,
+  byDataPalette: ReturnType<typeof byDataColorPaletteMap> | undefined,
   syncColors: boolean,
   isDarkMode: boolean,
   formatter: FieldFormatsStart,
@@ -216,9 +216,13 @@ export const getColor = (
     if (layerIndex < columns.length - 1) {
       return defaultColor;
     }
-    // only use the top level series layer for coloring
+    // for treemap use the top layer for coloring, for mosaic use the second layer
     if (seriesLayers.length > 1) {
-      seriesLayers.pop();
+      if (chartType === ChartTypes.MOSAIC) {
+        seriesLayers.shift();
+      } else {
+        seriesLayers.pop();
+      }
     }
   }
 

diff --git a/...plugins/chart_expressions/expression_partition_vis/public/utils/layers/get_layers.test.ts b/...plugins/chart_expressions/expression_partition_vis/public/utils/layers/get_layers.test.ts
@@ -198,4 +198,82 @@ describe('computeColor', () => {
     );
     expect(color).toEqual('#3F6833');
   });
+
+  it('should only pass the second layer for mosaic', () => {
+    const d = {
+      dataName: 'Second level 1',
+      depth: 2,
+      sortIndex: 0,
+      parent: {
+        children: [['Second level 1'], ['Second level 2']],
+        depth: 1,
+        sortIndex: 0,
+        parent: {
+          children: [['First level']],
+          depth: 0,
+          sortIndex: 0,
+        },
+      },
+    } as unknown as ShapeTreeNode;
+    const registry = getPaletteRegistry();
+    getColor(
+      ChartTypes.MOSAIC,
+      d,
+      1,
+      true,
+      {},
+      buckets,
+      visData.rows,
+      visParams,
+      registry,
+      undefined,
+      true,
+      false,
+      dataMock.fieldFormats
+    );
+    expect(registry.get().getCategoricalColor).toHaveBeenCalledWith(
+      [expect.objectContaining({ name: 'Second level 1' })],
+      expect.anything(),
+      expect.anything()
+    );
+  });
+
+  it('should only pass the first layer for treemap', () => {
+    const d = {
+      dataName: 'Second level 1',
+      depth: 2,
+      sortIndex: 0,
+      parent: {
+        children: [['Second level 1'], ['Second level 2']],
+        depth: 1,
+        sortIndex: 0,
+        parent: {
+          children: [['First level']],
+          depth: 0,
+          sortIndex: 0,
+        },
+      },
+    } as unknown as ShapeTreeNode;
+    const registry = getPaletteRegistry();
+    getColor(
+      ChartTypes.TREEMAP,
+      d,
+      1,
+      true,
+      {},
+      buckets,
+      visData.rows,
+      visParams,
+      registry,
+      undefined,
+      true,
+      false,
+      dataMock.fieldFormats
+    );
+    expect(registry.get().getCategoricalColor).toHaveBeenCalledWith(
+      [expect.objectContaining({ name: 'First level' })],
+      expect.anything(),
+      expect.anything()
+    );
+  });
 });