elastic · alexwizp · Nov 22, 2021 · Nov 5, 2021 · Nov 10, 2021 · Nov 11, 2021
@@ -49,7 +49,7 @@ export const pie: ExpressionFunctionDefinition<
     },
     shape: {
       types: ['string'],
-      options: ['pie', 'donut', 'treemap'],
+      options: ['pie', 'donut', 'treemap', 'mosaic'],
       help: '',
     },
     hideLabels: {

@@ -8,6 +8,8 @@
 import type { PaletteOutput } from '../../../../../../src/plugins/charts/common';
 import type { LensMultiTable, LayerType } from '../../types';
 
+export type PieChartTypes = 'donut' | 'pie' | 'treemap' | 'mosaic';
+
 export interface SharedPieLayerState {
   groups: string[];
   metric?: string;
@@ -27,15 +29,15 @@ export type PieLayerState = SharedPieLayerState & {
 };
 
 export interface PieVisualizationState {
-  shape: 'donut' | 'pie' | 'treemap';
+  shape: PieChartTypes;
   layers: PieLayerState[];
   palette?: PaletteOutput;
 }
 
 export type PieExpressionArgs = SharedPieLayerState & {
   title?: string;
   description?: string;
-  shape: 'pie' | 'donut' | 'treemap';
+  shape: PieChartTypes;
   hideLabels: boolean;
   palette: PaletteOutput;
 };

@@ -0,0 +1,31 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartMosaic = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    viewBox="0 0 30 22"
+    width={30}
+    height={22}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId} /> : null}
+    <path
+      className="lensChartIcon__subdued"
+      d="M2 0a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1H2zM2 14a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1v-6a1 1 0 00-1-1H2zM11 13a1 1 0 011-1h6a1 1 0 011 1v8a1 1 0 01-1 1h-6a1 1 0 01-1-1v-8zM12 0a1 1 0 100 2h6a1 1 0 100-2h-6zM21 15a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-6a1 1 0 01-1-1v-6zM22 0a1 1 0 00-1 1v4a1 1 0 001 1h6a1 1 0 001-1V1a1 1 0 00-1-1h-6z"
+    />
+    <path
+      className="lensChartIcon__accent"
+      d="M11 5a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1V5zM1 7a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1V7zM22 8a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V9a1 1 0 00-1-1h-6z"
+    />
+  </svg>
+);
@@ -227,6 +227,39 @@ describe('LayerPanel', () => {
       expect(group).toHaveLength(1);
     });
 
+    it('should render the required warning when only one group is configured (with minDimensions)', async () => {
+      mockVisualization.getConfiguration.mockReturnValue({
+        groups: [
+          {
+            groupLabel: 'A',
+            groupId: 'a',
+            accessors: [{ columnId: 'x' }],
+            filterOperations: () => true,
+            supportsMoreColumns: false,
+            dataTestSubj: 'lnsGroup',
+          },
+          {
+            groupLabel: 'B',
+            groupId: 'b',
+            accessors: [{ columnId: 'y' }],
+            filterOperations: () => true,
+            supportsMoreColumns: true,
+            dataTestSubj: 'lnsGroup',
+            required: true,
+            minDimensions: 2,
+          },
+        ],
+      });
+
+      const { instance } = await mountWithProvider(<LayerPanel {...getDefaultProps()} />);
+
+      const group = instance
+        .find(EuiFormRow)
+        .findWhere((e) => e.prop('error') === 'Required dimension');
+
+      expect(group).toHaveLength(1);
+    });
+
     it('should render the datasource and visualization panels inside the dimension container', async () => {
       mockVisualization.getConfiguration.mockReturnValueOnce({
         groups: [

@@ -388,7 +388,10 @@ export function LayerPanel(
           </header>
 
           {groups.map((group, groupIndex) => {
-            const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0;
+            const isMissing =
+              !isEmptyLayer && group.required && group.minDimensions
+                ? group.accessors.length < group.minDimensions
+                : group.accessors.length === 0;
 
             return (
               <EuiFormRow

@@ -6,9 +6,11 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { PartitionLayout } from '@elastic/charts';
 import { LensIconChartDonut } from '../assets/chart_donut';
 import { LensIconChartPie } from '../assets/chart_pie';
 import { LensIconChartTreemap } from '../assets/chart_treemap';
+import { LensIconChartMosaic } from '../assets/chart_mosaic';
 
 const groupLabel = i18n.translate('xpack.lens.pie.groupLabel', {
   defaultMessage: 'Proportion',
@@ -20,22 +22,31 @@ export const CHART_NAMES = {
     label: i18n.translate('xpack.lens.pie.donutLabel', {
       defaultMessage: 'Donut',
     }),
+    partitionType: PartitionLayout.sunburst,
     groupLabel,
   },
   pie: {
     icon: LensIconChartPie,
     label: i18n.translate('xpack.lens.pie.pielabel', {
       defaultMessage: 'Pie',
     }),
-
+    partitionType: PartitionLayout.sunburst,
     groupLabel,
   },
   treemap: {
     icon: LensIconChartTreemap,
     label: i18n.translate('xpack.lens.pie.treemaplabel', {
       defaultMessage: 'Treemap',
     }),
-
+    partitionType: PartitionLayout.treemap,
+    groupLabel,
+  },
+  mosaic: {
+    icon: LensIconChartMosaic,
+    label: i18n.translate('xpack.lens.pie.mosaiclabel', {
+      defaultMessage: 'Mosaic',
+    }),
+    partitionType: PartitionLayout.mosaic,
     groupLabel,
   },
 };

@@ -16,7 +16,6 @@ import {
   Partition,
   PartitionConfig,
   PartitionLayer,
-  PartitionLayout,
   PartitionFillLabel,
   RecursivePartial,
   Position,
@@ -39,6 +38,7 @@ import {
 } from '../../../../../src/plugins/charts/public';
 import { LensIconChartDonut } from '../assets/chart_donut';
 import { getLegendAction } from './get_legend_action';
+import type { PieChartTypes } from '../../common/expressions/pie_chart/types';
 
 declare global {
   interface Window {
@@ -51,6 +51,8 @@ declare global {
 
 const EMPTY_SLICE = Symbol('empty_slice');
 
+const isTreemapOrMosaic = (shape: PieChartTypes) => ['treemap', 'mosaic'].includes(shape);
+
 export function PieComponent(
   props: PieExpressionProps & {
     formatFactory: FormatFactory;
@@ -140,7 +142,7 @@ export function PieComponent(
             tempParent = tempParent.parent;
           }
 
-          if (shape === 'treemap') {
+          if (isTreemapOrMosaic(shape)) {
             // Only highlight the innermost color of the treemap, as it accurately represents area
             if (layerIndex < bucketColumns.length - 1) {
               // Mind the difference here: the contrast computation for the text ignores the alpha/opacity
@@ -171,7 +173,7 @@ export function PieComponent(
   });
 
   const config: RecursivePartial<PartitionConfig> = {
-    partitionLayout: shape === 'treemap' ? PartitionLayout.treemap : PartitionLayout.sunburst,
+    partitionLayout: CHART_NAMES[shape].partitionType,
     fontFamily: chartTheme.barSeriesStyle?.displayValue?.fontFamily,
     outerSizeRatio: 1,
     specialFirstInnermostSector: true,
@@ -191,7 +193,7 @@ export function PieComponent(
     sectorLineWidth: 1.5,
     circlePadding: 4,
   };
-  if (shape === 'treemap') {
+  if (isTreemapOrMosaic(shape)) {
     if (hideLabels || categoryDisplay === 'hide') {
       config.fillLabel = { textColor: 'rgba(0,0,0,0)' };
     }
@@ -295,7 +297,9 @@ export function PieComponent(
           showLegend={
             !hideLabels &&
             (legendDisplay === 'show' ||
-              (legendDisplay === 'default' && bucketColumns.length > 1 && shape !== 'treemap'))
+              (legendDisplay === 'default' &&
+                bucketColumns.length > 1 &&
+                !isTreemapOrMosaic(shape)))
           }
           legendPosition={legendPosition || Position.Right}
           legendMaxDepth={nestedLegend ? undefined : 1 /* Color is based only on first layer */}

@@ -721,4 +721,170 @@ describe('suggestions', () => {
       );
     });
   });
+
+  describe('mosaic', () => {
+    it('should reject when currently active and unchanged data', () => {
+      expect(
+        suggestions({
+          table: {
+            layerId: 'first',
+            isMultiRow: true,
+            columns: [],
+            changeType: 'unchanged',
+          },
+          state: {
+            shape: 'mosaic',
+            layers: [
+              {
+                layerId: 'first',
+                layerType: layerTypes.DATA,
+                groups: [],
+                metric: 'a',
+
+                numberDisplay: 'hidden',
+                categoryDisplay: 'default',
+                legendDisplay: 'default',
+              },
+            ],
+          },
+          keptLayerIds: ['first'],
+        })
+      ).toHaveLength(0);
+    });
+
+    it('mosaic type should be added only in case of 2 groups', () => {
+      expect(
+        suggestions({
+          table: {
+            layerId: 'first',
+            isMultiRow: true,
+            columns: [
+              {
+                columnId: 'a',
+                operation: { label: 'Top 5', dataType: 'string' as DataType, isBucketed: true },
+              },
+              {
+                columnId: 'b',
+                operation: { label: 'Top 6', dataType: 'string' as DataType, isBucketed: true },
+              },
+              {
+                columnId: 'c',
+                operation: { label: 'Count', dataType: 'number' as DataType, isBucketed: false },
+              },
+            ],
+            changeType: 'unchanged',
+          },
+          state: {
+            shape: 'treemap',
+            layers: [
+              {
+                layerId: 'first',
+                layerType: layerTypes.DATA,
+                groups: ['a', 'b'],
+                metric: 'c',
+
+                numberDisplay: 'hidden',
+                categoryDisplay: 'inside',
+                legendDisplay: 'show',
+                percentDecimals: 0,
+                legendMaxLines: 1,
+                truncateLegend: true,
+                nestedLegend: true,
+              },
+            ],
+          },
+          keptLayerIds: ['first'],
+        }).filter(({ hide, state }) => !hide && state.shape === 'mosaic')
+      ).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "hide": false,
+            "previewIcon": "bullseye",
+            "score": 0.7999999999999999,
+            "state": Object {
+              "layers": Array [
+                Object {
+                  "categoryDisplay": "default",
+                  "groups": Array [
+                    "a",
+                    "b",
+                  ],
+                  "layerId": "first",
+                  "layerType": "data",
+                  "legendDisplay": "show",
+                  "legendMaxLines": 1,
+                  "metric": "c",
+                  "nestedLegend": true,
+                  "numberDisplay": "hidden",
+                  "percentDecimals": 0,
+                  "truncateLegend": true,
+                },
+              ],
+              "palette": undefined,
+              "shape": "mosaic",
+            },
+            "title": "As Mosaic",
+          },
+        ]
+      `);
+    });
+
+    it('mosaic type should be added only in case of 2 groups (negative test)', () => {
+      const meta: Parameters<typeof suggestions>[0] = {
+        table: {
+          layerId: 'first',
+          isMultiRow: true,
+          columns: [
+            {
+              columnId: 'a',
+              operation: { label: 'Top 5', dataType: 'string' as DataType, isBucketed: true },
+            },
+            {
+              columnId: 'c',
+              operation: { label: 'Count', dataType: 'number' as DataType, isBucketed: false },
+            },
+          ],
+          changeType: 'unchanged',
+        },
+        state: {
+          shape: 'pie',
+          layers: [
+            {
+              layerId: 'first',
+              layerType: layerTypes.DATA,
+              groups: ['a', 'b'],
+              metric: 'c',
+
+              numberDisplay: 'hidden',
+              categoryDisplay: 'inside',
+              legendDisplay: 'show',
+              percentDecimals: 0,
+              legendMaxLines: 1,
+              truncateLegend: true,
+              nestedLegend: true,
+            },
+          ],
+        },
+        keptLayerIds: ['first'],
+      };
+
+      expect(
+        suggestions(meta).filter(({ hide, state }) => !hide && state.shape === 'mosaic')
+      ).toMatchInlineSnapshot(`Array []`);
+
+      meta.table.columns.push({
+        columnId: 'b',
+        operation: { label: 'Top 6', dataType: 'string' as DataType, isBucketed: true },
+      });
+
+      meta.table.columns.push({
+        columnId: 'c',
+        operation: { label: 'Top 7', dataType: 'string' as DataType, isBucketed: true },
+      });
+
+      expect(
+        suggestions(meta).filter(({ hide, state }) => !hide && state.shape === 'mosaic')
+      ).toMatchInlineSnapshot(`Array []`);
+    });
+  });
 });