[Lens] add new metric visualization (#136567)

packages/kbn-optimizer/limits.yml

@@ -32,7 +32,7 @@ pageLoadAssetSize:
   inputControlVis: 172675
   inspector: 148711
   kibanaOverview: 56279
-  lens: 35000
+  lens: 36000
   licenseManagement: 41817
   licensing: 29004
   lists: 22900

src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts

@@ -31,13 +31,20 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       help: i18n.translate('expressionMetricVis.function.metric.help', {
         defaultMessage: 'The primary metric.',
       }),
+      required: true,
     },
     secondaryMetric: {
       types: ['vis_dimension', 'string'],
       help: i18n.translate('expressionMetricVis.function.secondaryMetric.help', {
         defaultMessage: 'The secondary metric (shown above the primary).',
       }),
     },
+    max: {
+      types: ['vis_dimension', 'string'],
+      help: i18n.translate('expressionMetricVis.function.max.help.', {
+        defaultMessage: 'The dimension containing the maximum value.',
+      }),
+    },
     breakdownBy: {
       types: ['vis_dimension', 'string'],
       help: i18n.translate('expressionMetricVis.function.breakdownBy.help', {
@@ -50,16 +57,10 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
         defaultMessage: 'The subtitle for a single metric. Overridden if breakdownBy is supplied.',
       }),
     },
-    extraText: {
+    secondaryPrefix: {
       types: ['string'],
-      help: i18n.translate('expressionMetricVis.function.extra.help', {
-        defaultMessage: 'Text to be shown above metric value. Overridden by secondaryMetric.',
-      }),
-    },
-    progressMax: {
-      types: ['vis_dimension', 'string'],
-      help: i18n.translate('expressionMetricVis.function.progressMax.help.', {
-        defaultMessage: 'The dimension containing the maximum value.',
+      help: i18n.translate('expressionMetricVis.function.secondaryPrefix.help', {
+        defaultMessage: 'Optional text to be show before secondaryMetric.',
       }),
     },
     progressDirection: {
@@ -71,6 +72,12 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       }),
       strict: true,
     },
+    color: {
+      types: ['string'],
+      help: i18n.translate('expressionMetricVis.function.color.help', {
+        defaultMessage: 'Provides a static visualization color. Overridden by palette.',
+      }),
+    },
     palette: {
       types: ['palette'],
       help: i18n.translate('expressionMetricVis.function.palette.help', {
@@ -79,7 +86,7 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
     },
     maxCols: {
       types: ['number'],
-      help: i18n.translate('expressionMetricVis.function.maxCols.help', {
+      help: i18n.translate('expressionMetricVis.function.numCols.help', {
         defaultMessage: 'Specifies the max number of columns in the metric grid.',
       }),
       default: 5,
@@ -128,9 +135,9 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
         ]);
       }
 
-      if (args.progressMax) {
+      if (args.max) {
         argsTable.push([
-          [args.progressMax],
+          [args.max],
           i18n.translate('expressionMetricVis.function.dimension.maximum', {
             defaultMessage: 'Maximum',
           }),
@@ -150,7 +157,8 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
         visConfig: {
           metric: {
             subtitle: args.subtitle,
-            extraText: args.extraText,
+            secondaryPrefix: args.secondaryPrefix,
+            color: args.color,
             palette: args.palette?.params,
             progressDirection: args.progressDirection,
             maxCols: args.maxCols,
@@ -159,8 +167,8 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
           dimensions: {
             metric: args.metric,
             secondaryMetric: args.secondaryMetric,
+            max: args.max,
             breakdownBy: args.breakdownBy,
-            progressMax: args.progressMax,
           },
         },
       },

src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts

@@ -21,11 +21,12 @@ import { EXPRESSION_METRIC_NAME } from '../constants';
 export interface MetricArguments {
   metric: ExpressionValueVisDimension | string;
   secondaryMetric?: ExpressionValueVisDimension | string;
+  max?: ExpressionValueVisDimension | string;
   breakdownBy?: ExpressionValueVisDimension | string;
   subtitle?: string;
-  extraText?: string;
-  progressMax?: ExpressionValueVisDimension | string;
+  secondaryPrefix?: string;
   progressDirection: LayoutDirection;
+  color?: string;
   palette?: PaletteOutput<CustomPaletteState>;
   maxCols: number;
   minTiles?: number;

src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts

@@ -15,13 +15,14 @@ export const visType = 'metric';
 export interface DimensionsVisParam {
   metric: ExpressionValueVisDimension | string;
   secondaryMetric?: ExpressionValueVisDimension | string;
+  max?: ExpressionValueVisDimension | string;
   breakdownBy?: ExpressionValueVisDimension | string;
-  progressMax?: ExpressionValueVisDimension | string;
 }
 
 export interface MetricVisParam {
   subtitle?: string;
-  extraText?: string;
+  secondaryPrefix?: string;
+  color?: string;
   palette?: CustomPaletteState;
   progressDirection: LayoutDirection;
   maxCols: number;