[Lens][Metric] Fix progress bars to show correct default color (elastic#270282)

## Summary

Fixes Lens Metric progress bars staying uncolored when setting a maximum
value (regression from elastic#265772).


<img width="962" height="528" alt="Screenshot 2026-05-21 at 09 14 21"
src="https://github.com/user-attachments/assets/af7104ff-a08d-454e-b64e-748eee2c2b23"
/>

We fix the too strict condition on `tileColor` that needed an
`applyColorTo` property to be defined. This was not the base for
progress bars that still use `tileColor` to color the bar. We move the
`applyColorTo` check to only be done when in Metric with number, without
trend line and without progress bar.

**Before:**


https://github.com/user-attachments/assets/77abb14b-6ed0-4bee-aa95-4662edb2a215

**After:**


https://github.com/user-attachments/assets/9d201882-b867-4a55-bdf4-624caa908199



#### Testing

[metric-test.ndjson.zip](https://github.com/user-attachments/files/28084971/metric-test.ndjson.zip)

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.


- [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
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: biamalveiro

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.tsx

@@ -181,12 +181,9 @@ export const MetricVis = ({
       : primaryMetricColumn.name;
     const subtitle = breakdownByColumn ? primaryMetricColumn.name : config.metric.subtitle;
 
-    let tileColor = defaultColor;
-
-    if (config.metric.applyColorTo) {
-      if (config.metric.palette?.params && typeof value === 'number') {
-        tileColor =
-          getColor(
+    const paletteColor =
+      config.metric.palette?.params && typeof value === 'number'
+        ? getColor(
             value,
             config.metric.palette,
             {
@@ -196,11 +193,10 @@ export const MetricVis = ({
             },
             data,
             rowIdx
-          ) ?? defaultColor;
-      } else {
-        tileColor = config.metric.color ?? defaultColor;
-      }
-    }
+          ) ?? defaultColor
+        : undefined;
+
+    const tileColor = paletteColor ?? config.metric.color ?? defaultColor;
 
     let secondaryMetricProps: SecondaryMetricProps | undefined;
     const { secondaryMetric } = config.dimensions;
@@ -288,9 +284,11 @@ export const MetricVis = ({
     return {
       ...baseMetric,
       // Override the background and main value color when the color is applied to the value
-      ...(config.metric.applyColorTo === 'value'
-        ? { color: defaultColor, valueColor: tileColor }
-        : { color: tileColor, valueColor: undefined }),
+      ...(config.metric.applyColorTo === 'value' && { color: defaultColor, valueColor: tileColor }),
+      ...(config.metric.applyColorTo === 'background' && {
+        color: tileColor,
+        valueColor: undefined,
+      }),
     };
   });
 

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

@@ -12,6 +12,8 @@ import type {
   ExpressionAstExpression,
   ExpressionAstFunction,
 } from '@kbn/expressions-plugin/common';
+// Static EUI token values for assertions
+// eslint-disable-next-line @elastic/eui/no-restricted-eui-imports
 import { euiThemeVars } from '@kbn/ui-theme';
 import { LayerTypes } from '@kbn/expression-xy-plugin/public';
 import type { FrameMock } from '../../mocks';
@@ -1055,6 +1057,7 @@ describe('metric visualization', () => {
             visualization.toExpression(
               {
                 ...fullState,
+                applyColorTo: undefined,
                 showBar: true,
                 color: undefined,
               },

x-pack/platform/plugins/shared/lens/test/scout/ui/parallel_tests/metric_progress_bar.spec.ts

@@ -0,0 +1,235 @@
+/*
+ * 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 { spaceTest, tags } from '@kbn/scout';
+import { expect } from '@kbn/scout/ui';
+import type { KbnClient } from '@kbn/scout';
+import { testData } from '../fixtures';
+
+const DASHBOARD_API_PATH = '/api/dashboards';
+const DASHBOARD_API_VERSION = '2023-10-31';
+
+const LOGSTASH_TIME_RANGE = {
+  from: '2015-09-19T06:31:44.000Z',
+  to: '2015-09-23T18:31:44.000Z',
+};
+
+function withSpace(path: string, spaceId: string): string {
+  return `/s/${spaceId}${path}`;
+}
+
+async function createDashboard(client: KbnClient, body: unknown, spaceId: string): Promise<string> {
+  const response = await client.request<unknown>({
+    method: 'POST',
+    path: withSpace(DASHBOARD_API_PATH, spaceId),
+    body,
+    headers: { 'elastic-api-version': DASHBOARD_API_VERSION },
+  });
+
+  if (response.status !== 201) {
+    throw new Error(
+      `Expected dashboard create status 201, got ${response.status}: ${JSON.stringify(
+        response.data
+      )}`
+    );
+  }
+
+  const { id } = response.data as Record<string, unknown>;
+  if (typeof id !== 'string' || id.length === 0) {
+    throw new Error('Dashboard create response: expected a non-empty string id');
+  }
+  return id;
+}
+
+spaceTest.describe(
+  'Lens metric progress bar on dashboard (DSL)',
+  { tag: tags.stateful.classic },
+  () => {
+    let storedDataViewId: string | undefined;
+
+    spaceTest.beforeAll(async ({ scoutSpace, apiServices }) => {
+      await scoutSpace.uiSettings.set({
+        defaultIndex: testData.DATA_VIEW_ID.LOGSTASH,
+        'dateFormat:tz': 'UTC',
+        'timepicker:timeDefaults': JSON.stringify({
+          from: testData.LOGSTASH_IN_RANGE_DATES.from,
+          to: testData.LOGSTASH_IN_RANGE_DATES.to,
+        }),
+      });
+
+      const { data: dataView } = await apiServices.dataViews.create({
+        title: testData.DATA_VIEW_ID.LOGSTASH,
+        name: `scout-metric-progress-bar-dv-${Date.now()}`,
+        timeFieldName: '@timestamp',
+        spaceId: scoutSpace.id,
+      });
+      storedDataViewId = dataView.id;
+    });
+
+    spaceTest.afterAll(async ({ scoutSpace, apiServices }) => {
+      if (storedDataViewId) {
+        await apiServices.dataViews.delete(storedDataViewId, scoutSpace.id);
+      }
+      await scoutSpace.uiSettings.unset('defaultIndex', 'dateFormat:tz', 'timepicker:timeDefaults');
+      await scoutSpace.savedObjects.cleanStandardList();
+    });
+
+    spaceTest(
+      'renders vertical progress bar on dashboard',
+      async ({ browserAuth, kbnClient, page, pageObjects, scoutSpace }) => {
+        spaceTest.fail(!storedDataViewId, 'Stored data view was not created in beforeAll');
+
+        const dashboardId = await createDashboard(
+          kbnClient,
+          {
+            title: 'Metric progress bar vertical',
+            time_range: LOGSTASH_TIME_RANGE,
+            panels: [
+              {
+                type: 'vis',
+                grid: { x: 0, y: 0, w: 12, h: 8 },
+                config: {
+                  type: 'metric',
+                  title: 'Average bytes with progress bar',
+                  data_source: {
+                    type: 'data_view_reference',
+                    ref_id: storedDataViewId!,
+                  },
+                  metrics: [
+                    {
+                      type: 'primary',
+                      operation: 'average',
+                      field: 'bytes',
+                      background_chart: {
+                        type: 'bar',
+                        max_value: { operation: 'max', field: 'bytes' },
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+          scoutSpace.id
+        );
+
+        await browserAuth.loginAsPrivilegedUser();
+        await pageObjects.dashboard.openDashboardWithId(dashboardId);
+        await pageObjects.dashboard.waitForPanelsToLoad(1);
+        await expect(page.testSubj.locator('embeddableError')).toHaveCount(0);
+
+        const metricVis = page.getByTestId('mtrVis');
+        await expect(metricVis).toBeVisible();
+
+        await expect(page.locator('.echSingleMetricProgress--vertical')).toBeVisible();
+
+        await expect(page.getByRole('meter')).toBeVisible();
+      }
+    );
+
+    spaceTest(
+      'renders horizontal progress bar on dashboard',
+      async ({ browserAuth, kbnClient, page, pageObjects, scoutSpace }) => {
+        spaceTest.fail(!storedDataViewId, 'Stored data view was not created in beforeAll');
+
+        const dashboardId = await createDashboard(
+          kbnClient,
+          {
+            title: 'Metric progress bar horizontal',
+            time_range: LOGSTASH_TIME_RANGE,
+            panels: [
+              {
+                type: 'vis',
+                grid: { x: 0, y: 0, w: 12, h: 8 },
+                config: {
+                  type: 'metric',
+                  title: 'Average bytes horizontal bar',
+                  data_source: {
+                    type: 'data_view_reference',
+                    ref_id: storedDataViewId!,
+                  },
+                  metrics: [
+                    {
+                      type: 'primary',
+                      operation: 'average',
+                      field: 'bytes',
+                      background_chart: {
+                        type: 'bar',
+                        orientation: 'horizontal',
+                        max_value: { operation: 'max', field: 'bytes' },
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+          scoutSpace.id
+        );
+
+        await browserAuth.loginAsPrivilegedUser();
+        await pageObjects.dashboard.openDashboardWithId(dashboardId);
+        await pageObjects.dashboard.waitForPanelsToLoad(1);
+        await expect(page.testSubj.locator('embeddableError')).toHaveCount(0);
+
+        const metricVis = page.getByTestId('mtrVis');
+        await expect(metricVis).toBeVisible();
+
+        await expect(page.locator('.echSingleMetricProgress--horizontal')).toBeVisible();
+
+        await expect(page.getByRole('meter')).toBeVisible();
+      }
+    );
+
+    spaceTest(
+      'does not render progress bar when max value is not configured',
+      async ({ browserAuth, kbnClient, page, pageObjects, scoutSpace }) => {
+        spaceTest.fail(!storedDataViewId, 'Stored data view was not created in beforeAll');
+
+        const dashboardId = await createDashboard(
+          kbnClient,
+          {
+            title: 'Metric without progress bar',
+            time_range: LOGSTASH_TIME_RANGE,
+            panels: [
+              {
+                type: 'vis',
+                grid: { x: 0, y: 0, w: 12, h: 8 },
+                config: {
+                  type: 'metric',
+                  title: 'Average bytes only',
+                  data_source: {
+                    type: 'data_view_reference',
+                    ref_id: storedDataViewId!,
+                  },
+                  metrics: [
+                    {
+                      type: 'primary',
+                      operation: 'average',
+                      field: 'bytes',
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+          scoutSpace.id
+        );
+
+        await browserAuth.loginAsPrivilegedUser();
+        await pageObjects.dashboard.openDashboardWithId(dashboardId);
+        await pageObjects.dashboard.waitForPanelsToLoad(1);
+        await expect(page.testSubj.locator('embeddableError')).toHaveCount(0);
+
+        const metricVis = page.getByTestId('mtrVis');
+        await expect(metricVis).toBeVisible();
+        await expect(page.locator('.echSingleMetricProgress')).toHaveCount(0);
+        await expect(page.getByRole('meter')).toHaveCount(0);
+      }
+    );
+  }
+);