[Lens] Multi metric partition charts (#143966)

docs/user/dashboard/lens.asciidoc

@@ -172,6 +172,20 @@ Compare your real-time data to the results that are offset by a time increment.
 
 For a time shift example, refer to <<compare-time-ranges>>.
 
+[float]
+[[multi-metric-partition-chart]]
+==== Build a partition chart from multiple metrics
+
+By default, partition charts (e.g. pie) are built from one or more "slice-by" dimensions to define the partitions and a single metric dimension to define their size. However, you can also build a partition chart from multiple metric dimensions.
+
+. Open the layer context menu at the top right of the layer panel.
+
+. Click *Layer settings*.
+
+. Click the switch labeled *Multiple metrics*.
+
+Note: this option is not available for mosaic charts.
+
 [float]
 [[add-annotations]]
 ==== Add annotations

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/i18n.ts

@@ -17,6 +17,10 @@ export const strings = {
     i18n.translate('expressionPartitionVis.reusable.function.args.metricHelpText', {
       defaultMessage: 'Metric dimensions config',
     }),
+  getMetricToLabelHelp: () =>
+    i18n.translate('expressionPartitionVis.metricToLabel.help', {
+      defaultMessage: 'JSON key-value pairs of column ID to label',
+    }),
   getBucketsArgHelp: () =>
     i18n.translate('expressionPartitionVis.reusable.function.args.bucketsHelpText', {
       defaultMessage: 'Buckets dimensions config',

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/mosaic_vis_function.ts

@@ -130,13 +130,14 @@ export const mosaicVisFunction = (): MosaicVisExpressionFunctionDefinition => ({
 
     const visConfig: PartitionVisParams = {
       ...args,
+      metricsToLabels: {},
       ariaLabel:
         args.ariaLabel ??
         (handlers.variables?.embeddableTitle as string) ??
         handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
-        metric: args.metric,
+        metrics: [args.metric],
         buckets: args.buckets,
         splitColumn: args.splitColumn,
         splitRow: args.splitRow,

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.test.ts

@@ -30,6 +30,7 @@ describe('interpreter/functions#pieVis', () => {
 
   const visConfig: PieVisConfig = {
     addTooltip: true,
+    metricsToLabels: JSON.stringify({}),
     legendDisplay: LegendDisplay.SHOW,
     legendPosition: 'right',
     legendSize: LegendSize.SMALL,
@@ -53,14 +54,16 @@ describe('interpreter/functions#pieVis', () => {
       truncate: 100,
       last_level: false,
     },
-    metric: {
-      type: 'vis_dimension',
-      accessor: 0,
-      format: {
-        id: 'number',
-        params: {},
+    metrics: [
+      {
+        type: 'vis_dimension',
+        accessor: 0,
+        format: {
+          id: 'number',
+          params: {},
+        },
       },
-    },
+    ],
     buckets: [
       {
         type: 'vis_dimension',

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.ts

@@ -25,10 +25,15 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
   inputTypes: ['datatable'],
   help: strings.getPieVisFunctionName(),
   args: {
-    metric: {
+    metrics: {
       types: ['vis_dimension', 'string'],
       help: strings.getMetricArgHelp(),
       required: true,
+      multi: true,
+    },
+    metricsToLabels: {
+      types: ['string'],
+      help: strings.getMetricToLabelHelp(),
     },
     buckets: {
       types: ['vis_dimension', 'string'],
@@ -137,9 +142,10 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       throw new Error(errors.splitRowAndSplitColumnAreSpecifiedError());
     }
 
-    validateAccessor(args.metric, context.columns);
+    args.metrics.forEach((accessor) => validateAccessor(accessor, context.columns));
+
     if (args.buckets) {
-      args.buckets.forEach((bucket) => validateAccessor(bucket, context.columns));
+      args.buckets.forEach((accessor) => validateAccessor(accessor, context.columns));
     }
     if (args.splitColumn) {
       args.splitColumn.forEach((splitColumn) => validateAccessor(splitColumn, context.columns));
@@ -150,13 +156,14 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
 
     const visConfig: PartitionVisParams = {
       ...args,
+      metricsToLabels: args.metricsToLabels ? JSON.parse(args.metricsToLabels) : {},
       ariaLabel:
         args.ariaLabel ??
         (handlers.variables?.embeddableTitle as string) ??
         handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
-        metric: args.metric,
+        metrics: args.metrics,
         buckets: args.buckets,
         splitColumn: args.splitColumn,
         splitRow: args.splitRow,
@@ -170,7 +177,7 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       const logTable = prepareLogTable(
         context,
         [
-          [[args.metric], strings.getSliceSizeHelp()],
+          [args.metrics, strings.getSliceSizeHelp()],
           [args.buckets, strings.getSliceHelp()],
           [args.splitColumn, strings.getColumnSplitHelp()],
           [args.splitRow, strings.getRowSplitHelp()],

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/treemap_vis_function.test.ts

@@ -34,6 +34,7 @@ describe('interpreter/functions#treemapVis', () => {
 
   const visConfig: TreemapVisConfig = {
     addTooltip: true,
+    metricsToLabels: JSON.stringify({}),
     legendDisplay: LegendDisplay.SHOW,
     legendPosition: 'right',
     nestedLegend: true,
@@ -53,14 +54,16 @@ describe('interpreter/functions#treemapVis', () => {
       truncate: 100,
       last_level: false,
     },
-    metric: {
-      type: 'vis_dimension',
-      accessor: 0,
-      format: {
-        id: 'number',
-        params: {},
+    metrics: [
+      {
+        type: 'vis_dimension',
+        accessor: 0,
+        format: {
+          id: 'number',
+          params: {},
+        },
       },
-    },
+    ],
     buckets: [
       {
         type: 'vis_dimension',