[Lens] "Compare to" badge for Metric chart

src/platform/packages/shared/kbn-palettes/constants.ts

@@ -57,6 +57,7 @@ const gradient = {
   Temperature: 'temperature' as const,
   Complementary: 'complementary' as const,
   Status: 'status' as const,
+  CompareTo: 'compare_to' as const,
 };
 
 /**

src/platform/plugins/shared/chart_expressions/expression_metric/public/__mocks__/theme_service.ts → src/platform/packages/shared/kbn-palettes/palettes/gradient/compare_to.ts

@@ -7,8 +7,16 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export const getThemeService = () => {
-  return {
-    useChartsBaseTheme: () => ({ metric: { minHeight: 64 } }),
-  };
-};
+import { i18n } from '@kbn/i18n';
+import { KbnColorFnPalette } from '../../classes/color_fn_palette';
+import { KbnPalette } from '../../constants';
+
+export const compareToPalette = new KbnColorFnPalette({
+  id: KbnPalette.CompareTo,
+  name: i18n.translate('palettes.compareTo.name', {
+    defaultMessage: 'Trend',
+  }),
+  colorFn: () => ['#F6726A', '#ECF1F9', '#24C292'],
+  standalone: true,
+  type: 'gradient',
+});

src/platform/packages/shared/kbn-palettes/palettes/gradient/index.ts

@@ -15,3 +15,4 @@ export * from './warm';
 export * from './temperature';
 export * from './complementary';
 export * from './status';
+export * from './compare_to';

src/platform/packages/shared/kbn-palettes/palettes/index.ts

@@ -11,6 +11,7 @@ import { KbnPalettes } from '../classes/palettes';
 import { elasticPalette, getNeutralPalette } from './categorical';
 import { elasticClassicPalette, kibana4Palette, kibana7Palette } from './legacy/categorical';
 import {
+  compareToPalette,
   complementaryPalette,
   coolPalette,
   grayPalette,
@@ -37,6 +38,7 @@ const darkKbnPalettes = new KbnPalettes(
     temperaturePalette,
     warmPalette,
     elasticClassicPalette,
+    compareToPalette,
   ],
   elasticPalette
 );
@@ -56,6 +58,7 @@ const lightKbnPalettes = new KbnPalettes(
     temperaturePalette,
     warmPalette,
     elasticClassicPalette,
+    compareToPalette,
   ],
   elasticPalette
 );

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

@@ -142,6 +142,35 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       multi: false,
       default: 'default',
     },
+    secondaryColor: {
+      types: ['string'],
+      help: i18n.translate('expressionMetricVis.function.secondaryColor.help', {
+        defaultMessage: 'A static color to use for the secondary metric',
+      }),
+      required: false,
+    },
+    secondaryTrendVisuals: {
+      types: ['string'],
+      help: i18n.translate('expressionMetricVis.function.secondaryTrend.visuals.help', {
+        defaultMessage: 'Specifies the mode for the secondary metric trend value',
+      }),
+      required: false,
+    },
+    secondaryTrendBaseline: {
+      types: ['string', 'number'],
+      help: i18n.translate('expressionMetricVis.function.secondaryTrend.baseline.help', {
+        defaultMessage: 'Specifies the baseline used for the secondary metric trend',
+      }),
+      required: false,
+    },
+    secondaryTrendPalette: {
+      types: ['string'],
+      help: i18n.translate('expressionMetricVis.function.secondaryTrend.palette.help', {
+        defaultMessage: 'Specifies the palette used for the secondary metric trend',
+      }),
+      multi: true,
+      required: false,
+    },
   },
   fn(input, args, handlers) {
     validateAccessor(args.metric, input.columns);
@@ -221,6 +250,12 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
             maxCols: args.maxCols,
             minTiles: args.minTiles,
             trends: args.trendline?.trends,
+            secondaryColor: args.secondaryColor,
+            secondaryTrend: {
+              visuals: args.secondaryTrendVisuals,
+              baseline: args.secondaryTrendBaseline,
+              palette: args.secondaryTrendPalette,
+            },
           },
           dimensions: {
             metric: args.metric,

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

@@ -40,6 +40,10 @@ export interface MetricArguments {
   trendline?: TrendlineResult;
   subtitle?: string;
   secondaryPrefix?: string;
+  secondaryColor?: string;
+  secondaryTrendVisuals?: string;
+  secondaryTrendBaseline?: number | string;
+  secondaryTrendPalette?: [string, string, string];
   progressDirection?: LayoutDirection;
   titlesTextAlign: MetricStyle['titlesTextAlign'];
   valuesTextAlign: MetricStyle['valuesTextAlign'];

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

@@ -25,6 +25,12 @@ export interface DimensionsVisParam {
 export interface MetricVisParam {
   subtitle?: string;
   secondaryPrefix?: string;
+  secondaryColor?: string;
+  secondaryTrend: {
+    visuals?: string;
+    baseline?: number | string;
+    palette?: [string, string, string];
+  };
   color?: string;
   icon?: string;
   palette?: PaletteOutput<CustomPaletteState>;

src/platform/plugins/shared/chart_expressions/expression_metric/jest.config.js

@@ -17,4 +17,5 @@ module.exports = {
   collectCoverageFrom: [
     '<rootDir>/src/platform/plugins/shared/chart_expressions/expression_metric/{common,public,server}/**/*.{ts,tsx}',
   ],
+  setupFiles: ['jest-canvas-mock'],
 };

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

@@ -0,0 +1,44 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/**
+ *  A set of chart mocks useful to test Elastic Charts with RTL
+ * in particular the chart lifecycle requires the ResizeObserver to trigger a first event
+ * in order to bootstrap the chart rendering, so here's a minimal ResizeObserverMock to help
+ */
+class ResizeObserverMock {
+  private cb: Function | undefined;
+  constructor(cb: Function) {
+    this.cb = cb;
+  }
+  observe() {
+    setTimeout(() => {
+      this.cb?.([{ contentRect: { width: 500, height: 500 } }]);
+    }, 0);
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    // do nothing
+  }
+}
+
+let roPrevious: typeof global.ResizeObserver | undefined;
+
+export function setupChartMocks() {
+  roPrevious = global.ResizeObserver;
+  global.ResizeObserver = ResizeObserverMock;
+}
+
+export function cleanChartMocks() {
+  if (roPrevious) {
+    global.ResizeObserver = roPrevious;
+  }
+}