[Lens] Always show number sign when comparing to Primary metric (elastic#222824)

## Summary

Fixes elastic#221882 

This is a possible take of the enhancement request in elastic#221882.
In this scenario the chart automatically enters the `alwaysShowSign`
mode when rendering the delta difference with the Primary Metric in the
Secondary badge.

Some notes:
* The user has no control over it.
* The behaviour is disabled automatically when moving into `Static
value` mode, while it can be replicated using the `custom format` in the
`Value format` control
* The affected formats are `number`, `bytes`, `bits`, `percentage` in
any possible configuration (i.e. also compact mode)
* I've noticed that some formats change a bit when the sign is displayed
(ie Currency goes from `$ xx.xxx` to `+ xx.xx $`)

**Compare to Primary Metric**
| Default | Number | Number (compact) | Custom Format (i.e. Currency) |
Percentage | Bytes | Bits |
| ---- | ---- | ---- | ---- | ---- | ---- | ---- |
| <img width="819" alt="Screenshot 2025-06-05 at 14 41 09"
src="https://github.com/user-attachments/assets/3e836e07-a5eb-479a-96af-463069cabc35"
/> | <img width="473" alt="Screenshot 2025-06-05 at 15 40 37"
src="https://github.com/user-attachments/assets/097548c5-4c68-4041-89a7-a46af228fd7a"
/> | <img width="472" alt="Screenshot 2025-06-05 at 15 41 29"
src="https://github.com/user-attachments/assets/52943f01-c302-4631-8c2c-55fc60d91d99"
/> | <img width="480" alt="Screenshot 2025-06-05 at 15 42 33"
src="https://github.com/user-attachments/assets/b2dbbaec-4c11-4e3f-80ac-20f810511bf7"
/> | <img width="472" alt="Screenshot 2025-06-05 at 14 48 18"
src="https://github.com/user-attachments/assets/13a1b102-30dd-46b4-b8f4-52ade1e9eadb"
/> | <img width="478" alt="Screenshot 2025-06-05 at 15 44 11"
src="https://github.com/user-attachments/assets/e9acbb69-6535-4ee2-962a-f1e5446b93dd"
/> | <img width="477" alt="Screenshot 2025-06-05 at 14 47 54"
src="https://github.com/user-attachments/assets/c6bb99af-5f08-4d0d-b302-e8fbe42a764b"
/> |

When using Static value:

| Default | Number | Number (compact) | Custom format (i.e. Currency) |
Percentage | Bytes | Bits |
| ---- | --- | ---- | ---- | ---- | ---- | ---- | 
| <img width="471" alt="Screenshot 2025-06-05 at 14 56 17"
src="https://github.com/user-attachments/assets/6135823f-b644-48aa-b236-076bcc0692ff"
/> | <img width="473" alt="Screenshot 2025-06-05 at 15 49 51"
src="https://github.com/user-attachments/assets/afe492ad-c908-45ee-b831-2108553c15ce"
/> | <img width="477" alt="Screenshot 2025-06-05 at 15 46 24"
src="https://github.com/user-attachments/assets/29eaccf5-0be8-46a6-9e87-3b6f99912e26"
/> | <img width="472" alt="Screenshot 2025-06-05 at 15 52 27"
src="https://github.com/user-attachments/assets/3867b435-a1e2-4cb3-9b4d-687a33f4ff78"
/> | <img width="482" alt="Screenshot 2025-06-05 at 15 46 40"
src="https://github.com/user-attachments/assets/0e1521b3-6ed3-45e4-a913-44e4f99f027a"
/> | <img width="480" alt="Screenshot 2025-06-05 at 15 45 50"
src="https://github.com/user-attachments/assets/0343fd8c-6d22-46bb-9676-f27cad4ca9ee"
/> | <img width="473" alt="Screenshot 2025-06-05 at 15 46 05"
src="https://github.com/user-attachments/assets/072e948d-71ce-48f0-862a-6932c5c510fa"
/> |

Extra bits:
* I did notice that when rendering in Icon mode only and the secondary
raw value is `null` an empty badge was rendered. Now it should not.
* When running Jest tests a warning about a missing `act` wrapping was
shown, which was due to the `jest.advanceTimers` call. Now it is
properly wrapped
* When testing with a time shift it is very likely to encounter into
elastic#221886 and have all badges set
to `NA`. In such case close the inline editor and hit `Refresh` again to
see fresh values.

### 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

Author: dej611

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/helpers.ts

@@ -16,7 +16,16 @@ import { getColumnByAccessor, getFormatByAccessor } from '@kbn/visualizations-pl
 import { getFormatService, getPaletteService } from '../services';
 import { getDataBoundsForPalette } from '../utils';
 
-function enhanceFieldFormat(serializedFieldFormat: SerializedFieldFormat | undefined) {
+export interface FormatOverrides {
+  number?: { alwaysShowSign?: boolean };
+  percent?: { alwaysShowSign?: boolean };
+  bytes?: { alwaysShowSign?: boolean };
+}
+
+function enhanceFieldFormat(
+  serializedFieldFormat: SerializedFieldFormat | undefined,
+  formatOverrides: FormatOverrides | undefined
+): SerializedFieldFormat {
   const formatId = serializedFieldFormat?.id || 'number';
   if (formatId === 'duration' && !serializedFieldFormat?.params?.formatOverride) {
     return {
@@ -31,17 +40,28 @@ function enhanceFieldFormat(serializedFieldFormat: SerializedFieldFormat | undef
       },
     };
   }
+  if (formatOverrides && formatId in formatOverrides) {
+    return {
+      ...serializedFieldFormat,
+      params: {
+        ...serializedFieldFormat?.params,
+        ...formatOverrides[formatId as keyof FormatOverrides],
+      },
+    };
+  }
+
   return serializedFieldFormat ?? { id: formatId };
 }
 
 export const getMetricFormatter = (
   accessor: ExpressionValueVisDimension | string,
-  columns: Datatable['columns']
+  columns: Datatable['columns'],
+  formatOverrides?: FormatOverrides | undefined
 ) => {
   const type = getColumnByAccessor(accessor, columns)?.meta.type;
   const defaultFormat = type ? { id: type } : undefined;
   const serializedFieldFormat = getFormatByAccessor(accessor, columns, defaultFormat);
-  const enhancedFieldFormat = enhanceFieldFormat(serializedFieldFormat);
+  const enhancedFieldFormat = enhanceFieldFormat(serializedFieldFormat, formatOverrides);
   return getFormatService().deserialize(enhancedFieldFormat).getConverterFor('text');
 };
 

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

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { Datatable, DatatableColumn } from '@kbn/expressions-plugin/common';
 import { MetricVis, MetricVisComponentProps } from './metric_vis';
 import { MetricWTrend } from '@elastic/charts';
@@ -238,8 +238,12 @@ describe('MetricVisComponent', function () {
   });
 
   async function waitForChartToRender(renderComplete: MetricVisComponentProps['renderComplete']) {
-    // wait for 1 rAF tick (~16ms)
-    jest.advanceTimersByTime(30);
+    // Interestingly we have to wrap this into an act() call to avoid
+    // issues with the React scheduling when testing
+    await act(async () => {
+      // wait for 1 rAF tick (~16ms)
+      jest.advanceTimersByTime(30);
+    });
     // wait for render complete callback
     await waitFor(() => expect(renderComplete).toHaveBeenCalled());
   }

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

@@ -184,14 +184,13 @@ export const MetricVis = ({
         title: String(title),
         subtitle,
         icon: config.metric?.icon ? getIcon(config.metric?.icon) : undefined,
-        extra: ({ fontSize, color }) => (
+        extra: ({ color }) => (
           <SecondaryMetric
             row={row}
             config={config}
             columns={data.columns}
             getMetricFormatter={getMetricFormatter}
             color={config.metric.secondaryColor}
-            fontSize={fontSize}
             trendConfig={
               hasDynamicColoring && trendConfig
                 ? { ...trendConfig, borderColor: color }
@@ -212,14 +211,13 @@ export const MetricVis = ({
       title: String(title),
       subtitle,
       icon: config.metric?.icon ? getIcon(config.metric?.icon) : undefined,
-      extra: ({ fontSize, color }) => (
+      extra: ({ color }) => (
         <SecondaryMetric
           row={row}
           config={config}
           columns={data.columns}
           getMetricFormatter={getMetricFormatter}
           color={config.metric.secondaryColor}
-          fontSize={fontSize}
           trendConfig={
             hasDynamicColoring && trendConfig ? { ...trendConfig, borderColor: color } : trendConfig
           }

src/platform/plugins/shared/chart_expressions/expression_metric/public/components/secondary_metric.test.tsx

@@ -43,7 +43,6 @@ function renderSecondaryMetric(props: Partial<SecondaryMetricProps> = {}) {
         metric: { secondaryPrefix: '' },
       }}
       getMetricFormatter={jest.fn(() => () => formattedValue)}
-      fontSize={16}
       {...props}
     />
   );
@@ -257,9 +256,10 @@ describe('Secondary metric', () => {
         it.each(trendCombinationCompareToPrimary)(
           '[Compare to primary] should render a badge with the trend icon "$icon" and the formatted value (rawValue: $valueFinite, baseline: $baselineFinite)',
           ({ value, baseline, color, icon }) => {
+            const getMetricFormatterMock = jest.fn(() => (v: unknown) => String(v));
             renderSecondaryMetric({
               row: { [id]: value },
-              getMetricFormatter: jest.fn(() => (v: unknown) => String(v)),
+              getMetricFormatter: getMetricFormatterMock,
               trendConfig: {
                 icon: showIcon,
                 value: showValue,
@@ -280,6 +280,13 @@ describe('Secondary metric', () => {
               const el = screen.getByTitle(badgeText);
               expect(el).toBeInTheDocument();
               expect(el).toHaveStyle(`--euiBadgeBackgroundColor: ${color}`);
+              expect(getMetricFormatterMock).toHaveBeenCalledWith(
+                expect.any(String),
+                expect.any(Object),
+                expect.objectContaining({
+                  number: expect.objectContaining({ alwaysShowSign: true }),
+                })
+              );
             }
             if (showValue) {
               expect(

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

@@ -15,6 +15,7 @@ import type { DatatableColumn, DatatableRow } from '@kbn/expressions-plugin/comm
 import { type FieldFormatConvertFunction } from '@kbn/field-formats-plugin/common';
 import { type VisParams } from '@kbn/visualizations-plugin/common';
 import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
+import { FormatOverrides } from './helpers';
 
 export interface TrendConfig {
   icon: boolean;
@@ -119,14 +120,12 @@ function SecondaryMetricValue({
   formattedValue,
   trendConfig,
   color,
-  fontSize,
   formatter,
 }: {
   rawValue?: number | string;
   formattedValue?: string;
   trendConfig?: TrendConfig;
   color?: string;
-  fontSize: number;
   formatter?: FieldFormatConvertFunction;
 }) {
   const safeFormattedValue = formattedValue ?? notAvailable;
@@ -152,6 +151,15 @@ function SecondaryMetricValue({
       formatter,
       trendConfig.compareToPrimary
     );
+    // If no value is shown and no icon should be shown (i.e. N/A) then do not render the badge at all
+    if (trendConfig.icon && !trendConfig.value && !icon) {
+      return (
+        <span
+          data-test-subj={`expressionMetricVis-secondaryMetric-badge-${rawValue}`}
+          aria-label={getTrendDescription(trendConfig.value, icon != null, valueToShow, iconLabel)}
+        />
+      );
+    }
     return (
       <EuiBadge
         aria-label={
@@ -189,21 +197,43 @@ export interface SecondaryMetricProps {
   config: Pick<VisParams, 'metric' | 'dimensions'>;
   trendConfig?: TrendConfig;
   color?: string;
-  fontSize: number;
-  getMetricFormatter: (accessor: string, columns: DatatableColumn[]) => FieldFormatConvertFunction;
+  getMetricFormatter: (
+    accessor: string,
+    columns: DatatableColumn[],
+    formatOverrides?: FormatOverrides | undefined
+  ) => FieldFormatConvertFunction;
 }
 
 function getMetricColumnAndFormatter(
   columns: SecondaryMetricProps['columns'],
   config: SecondaryMetricProps['config'],
-  getMetricFormatter: SecondaryMetricProps['getMetricFormatter']
+  getMetricFormatter: SecondaryMetricProps['getMetricFormatter'],
+  formatOverrides: FormatOverrides | undefined
 ) {
   if (!config.dimensions.secondaryMetric) {
     return;
   }
   return {
     metricColumn: getColumnByAccessor(config.dimensions.secondaryMetric, columns),
-    metricFormatter: getMetricFormatter(config.dimensions.secondaryMetric, columns),
+    metricFormatter: getMetricFormatter(
+      config.dimensions.secondaryMetric,
+      columns,
+      formatOverrides
+    ),
+  };
+}
+
+function getEnhancedNumberSignFormatter(
+  trendConfig: TrendConfig | undefined
+): FormatOverrides | undefined {
+  if (!trendConfig?.compareToPrimary) {
+    return;
+  }
+  const paramsOverride = { alwaysShowSign: true };
+  return {
+    number: paramsOverride,
+    percent: paramsOverride,
+    bytes: paramsOverride,
   };
 }
 
@@ -214,10 +244,14 @@ export function SecondaryMetric({
   getMetricFormatter,
   trendConfig,
   color,
-  fontSize,
 }: SecondaryMetricProps) {
   const { metricFormatter, metricColumn } =
-    getMetricColumnAndFormatter(columns, config, getMetricFormatter) || {};
+    getMetricColumnAndFormatter(
+      columns,
+      config,
+      getMetricFormatter,
+      getEnhancedNumberSignFormatter(trendConfig)
+    ) || {};
   const prefix = config.metric.secondaryPrefix ?? metricColumn?.name;
   const value = metricColumn ? row[metricColumn.id] : undefined;
 
@@ -230,7 +264,6 @@ export function SecondaryMetric({
         formattedValue={metricFormatter?.(value)}
         trendConfig={color ? undefined : trendConfig}
         color={color}
-        fontSize={fontSize}
         formatter={metricFormatter}
       />
     </span>

src/platform/plugins/shared/field_formats/common/converters/numeral.ts

@@ -30,7 +30,9 @@ export abstract class NumeralFormat extends FieldFormat {
   abstract title: string;
 
   getParamDefaults = () => ({
-    pattern: this.getConfig!(`format:${this.id}:defaultPattern`),
+    // While this should be always defined, it is not guaranteed in testing that the function is available
+    pattern: this.getConfig?.(`format:${this.id}:defaultPattern`),
+    alwaysShowSign: false,
   });
 
   protected getConvertedValue(val: number | string | object): string {
@@ -50,7 +52,12 @@ export abstract class NumeralFormat extends FieldFormat {
       (this.getConfig && this.getConfig(FORMATS_UI_SETTINGS.FORMAT_NUMBER_DEFAULT_LOCALE)) || 'en';
     numeral.language(defaultLocale);
 
-    const formatted = numeralInst.set(val).format(this.param('pattern'));
+    let pattern: string = this.param('pattern');
+    if (pattern && this.param('alwaysShowSign')) {
+      pattern = pattern.startsWith('+') || val === 0 ? pattern : `+ ${pattern}`;
+    }
+
+    const formatted = numeralInst.set(val).format(pattern);
 
     numeral.language(previousLocale);
 

src/platform/plugins/shared/field_formats/common/converters/percent.ts

@@ -26,6 +26,7 @@ export class PercentFormat extends NumeralFormat {
   getParamDefaults = () => ({
     pattern: this.getConfig!(FORMATS_UI_SETTINGS.FORMAT_PERCENT_DEFAULT_PATTERN),
     fractional: true,
+    alwaysShowSign: false,
   });
 
   textConvert: TextContextTypeConvert = (val: string | number) => {