[Lens] apply max-based dynamic color to metric background when no supporting vis (#172531)

## Summary

Close https://github.com/elastic/kibana/issues/139043

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

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

@@ -72,11 +72,10 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
     progressDirection: {
       types: ['string'],
       options: [LayoutDirection.Vertical, LayoutDirection.Horizontal],
-      default: LayoutDirection.Vertical,
       help: i18n.translate('expressionMetricVis.function.progressDirection.help', {
-        defaultMessage: 'The direction the progress bar should grow.',
+        defaultMessage:
+          'The direction the progress bar should grow. Must be provided to render a progress bar.',
       }),
-      strict: true,
     },
     color: {
       types: ['string'],

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

@@ -37,7 +37,7 @@ export interface MetricArguments {
   trendline?: TrendlineResult;
   subtitle?: string;
   secondaryPrefix?: string;
-  progressDirection: LayoutDirection;
+  progressDirection?: LayoutDirection;
   color?: string;
   icon?: string;
   palette?: PaletteOutput<CustomPaletteState>;

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

@@ -26,7 +26,7 @@ export interface MetricVisParam {
   color?: string;
   icon?: string;
   palette?: CustomPaletteState;
-  progressDirection: LayoutDirection;
+  progressDirection?: LayoutDirection;
   maxCols: number;
   minTiles?: number;
   trends?: TrendlineResult['trends'];

x-pack/plugins/lens/public/visualizations/metric/to_expression.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { LayoutDirection } from '@elastic/charts';
 import { CustomPaletteParams, CUSTOM_PALETTE, PaletteRegistry } from '@kbn/coloring';
 import type {
   TrendlineExpressionFunctionDefinition,
@@ -13,6 +12,7 @@ import type {
 } from '@kbn/expression-metric-vis-plugin/common';
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/common';
 import { Ast } from '@kbn/interpreter';
+import { LayoutDirection } from '@elastic/charts';
 import { CollapseArgs, CollapseFunction } from '../../../common/expressions';
 import { CollapseExpressionFunction } from '../../../common/expressions/collapse/types';
 import { DatasourceLayers } from '../../types';
@@ -140,12 +140,14 @@ export const toExpression = (
     metric: state.metricAccessor,
     secondaryMetric: state.secondaryMetricAccessor,
     secondaryPrefix: state.secondaryPrefix,
-    max: showingBar(state) ? state.maxAccessor : undefined,
+    max: state.maxAccessor,
     breakdownBy:
       state.breakdownByAccessor && !state.collapseFn ? state.breakdownByAccessor : undefined,
     trendline: trendlineExpression ? [trendlineExpression] : [],
     subtitle: state.subtitle ?? undefined,
-    progressDirection: state.progressDirection as LayoutDirection,
+    progressDirection: showingBar(state)
+      ? state.progressDirection || LayoutDirection.Vertical
+      : undefined,
     color: state.color || getDefaultColor(state, isMetricNumeric),
     icon: state.icon,
     palette:

x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts

@@ -22,6 +22,7 @@ import { GROUP_ID } from './constants';
 import { getMetricVisualization, MetricVisualizationState } from './visualization';
 import { themeServiceMock } from '@kbn/core/public/mocks';
 import { Ast } from '@kbn/interpreter';
+import { LayoutDirection } from '@elastic/charts';
 
 const paletteService = chartPluginMock.createPaletteRegistry();
 const theme = themeServiceMock.createStartContract();
@@ -318,6 +319,9 @@ describe('metric visualization', () => {
                 "inspectorTableId": Array [
                   "first",
                 ],
+                "max": Array [
+                  "max-metric-col-id",
+                ],
                 "maxCols": Array [
                   5,
                 ],
@@ -340,9 +344,6 @@ describe('metric visualization', () => {
                     "type": "expression",
                   },
                 ],
-                "progressDirection": Array [
-                  "vertical",
-                ],
                 "secondaryMetric": Array [
                   "secondary-metric-col-id",
                 ],
@@ -382,6 +383,9 @@ describe('metric visualization', () => {
                 "inspectorTableId": Array [
                   "first",
                 ],
+                "max": Array [
+                  "max-metric-col-id",
+                ],
                 "maxCols": Array [
                   5,
                 ],
@@ -407,9 +411,6 @@ describe('metric visualization', () => {
                     "type": "expression",
                   },
                 ],
-                "progressDirection": Array [
-                  "vertical",
-                ],
                 "secondaryMetric": Array [
                   "secondary-metric-col-id",
                 ],
@@ -759,6 +760,18 @@ describe('metric visualization', () => {
         ).toEqual(euiThemeVars.euiColorLightestShade);
       });
     });
+
+    it('defaults progress direction to vertical', () => {
+      const AST = visualization.toExpression(
+        {
+          ...fullState,
+          progressDirection: undefined,
+          showBar: true,
+        },
+        datasourceLayers
+      ) as ExpressionAstExpression;
+      expect(AST.chain[1].arguments.progressDirection[0]).toBe(LayoutDirection.Vertical);
+    });
   });
 
   it('clears a layer', () => {

x-pack/plugins/lens/public/visualizations/metric/visualization.tsx

@@ -526,7 +526,7 @@ export const getMetricVisualization = ({
     return state.trendlineLayerId ? [state.trendlineLayerId] : [];
   },
 
-  toExpression: (state, datasourceLayers, attributes, datasourceExpressionsByLayers) =>
+  toExpression: (state, datasourceLayers, _attributes, datasourceExpressionsByLayers) =>
     toExpression(paletteService, state, datasourceLayers, datasourceExpressionsByLayers),
 
   setDimension({ prevState, columnId, groupId }) {