[Lens][Agg based Gauge & Goal] Convert to Lens Agg based Gauge and Goal.

src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.ts

@@ -231,6 +231,7 @@ export const gaugeFunction = (): GaugeExpressionFunctionDefinition => ({
             (handlers.variables?.embeddableTitle as string) ??
             handlers.getExecutionContext?.()?.description,
         },
+        canNavigateToLens: Boolean(handlers?.variables?.canNavigateToLens),
       },
     };
   },

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

@@ -62,6 +62,7 @@ export type GaugeInput = Datatable;
 export interface GaugeExpressionProps {
   data: Datatable;
   args: GaugeArguments;
+  canNavigateToLens: boolean;
 }
 
 export interface GaugeRender {

src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx

@@ -94,6 +94,7 @@ describe('GaugeComponent', function () {
 
   beforeAll(async () => {
     wrapperProps = {
+      canNavigateToLens: false,
       data: createData(),
       chartsThemeService,
       args,

src/plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx

@@ -57,9 +57,11 @@ export const gaugeRenderer: (
       const visualizationType = extractVisualizationType(executionContext);
 
       if (containerType && visualizationType) {
-        plugins.usageCollection?.reportUiCounter(containerType, METRIC_TYPE.COUNT, [
+        const events = [
           `render_${visualizationType}_${type}`,
-        ]);
+          config.canNavigateToLens ? `render_${visualizationType}_${type}_convertable` : undefined,
+        ].filter<string>((event): event is string => Boolean(event));
+        plugins.usageCollection?.reportUiCounter(containerType, METRIC_TYPE.COUNT, events);
       }
 
       handlers.done();

src/plugins/vis_types/gauge/kibana.json

@@ -4,13 +4,26 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
-  "requiredBundles": ["visDefaultEditor"],
-  "optionalPlugins": ["expressionGauge"],
-  "extraPublicDirs": ["common/index"],
+  "requiredPlugins": [
+    "charts",
+    "data",
+    "expressions",
+    "visualizations",
+    "dataViews"
+  ],
+  "requiredBundles": [
+    "visDefaultEditor",
+    "kibanaUtils"
+  ],
+  "optionalPlugins": [
+    "expressionGauge"
+  ],
+  "extraPublicDirs": [
+    "common/index"
+  ],
   "owner": {
     "name": "Vis Editors",
     "githubTeam": "kibana-vis-editors"
   },
   "description": "Contains the gauge chart implementation using the elastic-charts library. The goal is to eventually deprecate the old implementation and keep only this. Until then, the library used is defined by the Legacy charts library advanced setting."
-}
+}

src/plugins/vis_types/gauge/public/convert_to_lens/configurations/gauge.test.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ColorSchemas } from '@kbn/charts-plugin/common';
+import { CustomPaletteParams, PaletteOutput } from '@kbn/coloring';
+import { getConfiguration } from './gauge';
+import { GaugeVisParams } from '../../types';
+
+const params: GaugeVisParams = {
+  addTooltip: false,
+  addLegend: false,
+  isDisplayWarning: true,
+  gauge: {
+    type: 'meter',
+    orientation: 'vertical',
+    alignment: 'automatic',
+    gaugeType: 'Arc',
+    scale: {
+      color: 'rgba(105,112,125,0.2)',
+      labels: false,
+      show: false,
+    },
+    gaugeStyle: 'Full',
+    extendRange: false,
+    backStyle: 'Full',
+    percentageMode: false,
+    percentageFormatPattern: '',
+    colorSchema: ColorSchemas.Greys,
+    colorsRange: [
+      { type: 'range', from: 0, to: 100 },
+      { type: 'range', from: 100, to: 200 },
+    ],
+    labels: {},
+    invertColors: false,
+    style: {
+      bgFill: '',
+      bgColor: false,
+      labelColor: false,
+      subText: '',
+      fontSize: 10,
+    },
+  },
+  type: 'gauge',
+};
+
+describe('getConfiguration', () => {
+  const palette = {
+    name: 'custom',
+    params: { name: 'custom' },
+    type: 'palette',
+  } as PaletteOutput<CustomPaletteParams>;
+
+  test('shourd return correct configuration', () => {
+    const layerId = 'layer-id';
+    const metricAccessor = 'metric-id';
+    const minAccessor = 'min-accessor';
+    const maxAccessor = 'max-accessor';
+    expect(
+      getConfiguration(layerId, params, palette, {
+        metricAccessor,
+        minAccessor,
+        maxAccessor,
+      })
+    ).toEqual({
+      colorMode: 'palette',
+      labelMajorMode: 'none',
+      labelMinor: undefined,
+      layerId: 'layer-id',
+      layerType: 'data',
+      maxAccessor: 'max-accessor',
+      metricAccessor: 'metric-id',
+      minAccessor: 'min-accessor',
+      palette: { name: 'custom', params: { name: 'custom' }, type: 'palette' },
+      shape: 'horizontalBullet',
+      ticksPosition: 'bands',
+    });
+  });
+});

src/plugins/vis_types/gauge/public/convert_to_lens/configurations/gauge.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CustomPaletteParams, PaletteOutput } from '@kbn/coloring';
+import { GaugeVisConfiguration } from '@kbn/visualizations-plugin/common';
+import { GaugeVisParams } from '../../types';
+
+export const getConfiguration = (
+  layerId: string,
+  params: GaugeVisParams,
+  palette: PaletteOutput<CustomPaletteParams> | undefined,
+  {
+    metricAccessor,
+    minAccessor,
+    maxAccessor,
+  }: {
+    metricAccessor: string;
+    minAccessor: string;
+    maxAccessor: string;
+  }
+): GaugeVisConfiguration => {
+  const showLabels = Boolean(params.gauge.labels.show);
+  return {
+    layerId,
+    layerType: 'data',
+    palette,
+    metricAccessor,
+    minAccessor,
+    maxAccessor,
+    shape: 'horizontalBullet',
+    ticksPosition: 'bands',
+    labelMajorMode: showLabels ? 'auto' : 'none',
+    colorMode: palette ? 'palette' : 'none',
+    labelMinor: showLabels ? params.gauge.style.subText : undefined,
+  };
+};

src/plugins/vis_types/gauge/public/convert_to_lens/configurations/goal.test.ts

@@ -0,0 +1,84 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ColorSchemas } from '@kbn/charts-plugin/common';
+import { CustomPaletteParams, PaletteOutput } from '@kbn/coloring';
+import { GaugeVisParams } from '../../types';
+import { getConfiguration } from './goal';
+
+const params: GaugeVisParams = {
+  addTooltip: false,
+  addLegend: false,
+  isDisplayWarning: true,
+  gauge: {
+    type: 'meter',
+    orientation: 'vertical',
+    alignment: 'automatic',
+    gaugeType: 'Arc',
+    scale: {
+      color: 'rgba(105,112,125,0.2)',
+      labels: false,
+      show: false,
+    },
+    gaugeStyle: 'Full',
+    extendRange: false,
+    backStyle: 'Full',
+    percentageMode: false,
+    percentageFormatPattern: '',
+    colorSchema: ColorSchemas.Greys,
+    colorsRange: [
+      { type: 'range', from: 0, to: 100 },
+      { type: 'range', from: 100, to: 200 },
+    ],
+    labels: {},
+    invertColors: false,
+    style: {
+      bgFill: '',
+      bgColor: false,
+      labelColor: false,
+      subText: '',
+      fontSize: 10,
+    },
+  },
+  type: 'gauge',
+};
+
+describe('getConfiguration', () => {
+  const palette = {
+    name: 'custom',
+    params: { name: 'custom' },
+    type: 'palette',
+  } as PaletteOutput<CustomPaletteParams>;
+
+  test('shourd return correct configuration', () => {
+    const layerId = 'layer-id';
+    const metricAccessor = 'metric-id';
+    const breakdownByAccessor = 'bucket-id';
+    const metrics = [metricAccessor];
+    const buckets = [breakdownByAccessor];
+    const maxAccessor = 'max-accessor-id';
+    const collapseFn = 'sum';
+    expect(
+      getConfiguration(layerId, params, palette, {
+        metrics,
+        buckets,
+        maxAccessor,
+        columnsWithoutReferenced: [],
+        bucketCollapseFn: { [metricAccessor]: collapseFn },
+      })
+    ).toEqual({
+      breakdownByAccessor,
+      collapseFn,
+      layerId,
+      layerType: 'data',
+      maxAccessor,
+      metricAccessor,
+      palette,
+    });
+  });
+});