[Chart expressions] new metric vis expression (elastic#135461)

.i18nrc.json

@@ -29,6 +29,7 @@
     "expressionImage": "src/plugins/expression_image",
     "expressionMetric": "src/plugins/expression_metric",
     "expressionMetricVis": "src/plugins/chart_expressions/expression_metric",
+    "expressionLegacyMetricVis": "src/plugins/chart_expressions/expression_legacy_metric",
     "expressionPartitionVis": "src/plugins/chart_expressions/expression_partition_vis",
     "expressionXY": "src/plugins/chart_expressions/expression_xy",
     "expressionRepeatImage": "src/plugins/expression_repeat_image",
@@ -57,10 +58,7 @@
     "kibana-react": "src/plugins/kibana_react",
     "kibanaOverview": "src/plugins/kibana_overview",
     "lists": "packages/kbn-securitysolution-list-utils/src",
-    "management": [
-      "src/legacy/core_plugins/management",
-      "src/plugins/management"
-    ],
+    "management": ["src/legacy/core_plugins/management", "src/plugins/management"],
     "monaco": "packages/kbn-monaco/src",
     "navigation": "src/plugins/navigation",
     "newsfeed": "src/plugins/newsfeed",
@@ -74,13 +72,8 @@
     "sharedUXPackages": "packages/shared-ux",
     "coloring": "packages/kbn-coloring/src",
     "statusPage": "src/legacy/core_plugins/status_page",
-    "telemetry": [
-      "src/plugins/telemetry",
-      "src/plugins/telemetry_management_section"
-    ],
-    "timelion": [
-      "src/plugins/vis_types/timelion"
-    ],
+    "telemetry": ["src/plugins/telemetry", "src/plugins/telemetry_management_section"],
+    "timelion": ["src/plugins/vis_types/timelion"],
     "uiActions": "src/plugins/ui_actions",
     "uiActionsEnhanced": "src/plugins/ui_actions_enhanced",
     "uiActionsExamples": "examples/ui_action_examples",

docs/developer/plugin-list.asciidoc

@@ -114,6 +114,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |Expression Image plugin adds an image renderer to the expression plugin. The renderer will display the given image.
 
 
+|{kib-repo}blob/{branch}/src/plugins/chart_expressions/expression_legacy_metric/README.md[expressionLegacyMetricVis]
+|Expression MetricVis plugin adds a metric renderer and function to the expression plugin. The renderer will display the metric chart.
+
+
 |{kib-repo}blob/{branch}/src/plugins/expression_metric/README.md[expressionMetric]
 |Expression Metric plugin adds a metric renderer and function to the expression plugin.
 

packages/kbn-optimizer/limits.yml

@@ -96,6 +96,7 @@ pageLoadAssetSize:
   securitySolution: 273763
   customIntegrations: 28810
   expressionMetricVis: 23121
+  expressionLegacyMetricVis: 23121
   expressionHeatmap: 27505
   visTypeMetric: 23332
   bfetch: 22837

src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json

@@ -0,0 +1,6 @@
+{
+  "prefix": "expressionLegacyMetricVis",
+  "paths": {
+    "expressionLegacyMetricVis": "."
+  }
+}

src/plugins/chart_expressions/expression_legacy_metric/.storybook/main.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { defaultConfig } from '@kbn/storybook';
+import webpackMerge from 'webpack-merge';
+import { resolve } from 'path';
+
+const mockConfig = {
+  resolve: {
+    alias: {
+      '../../../expression_legacy_metric/public/services': resolve(
+        __dirname,
+        '../public/__mocks__/services.ts'
+      ),
+    },
+  },
+};
+
+module.exports = {
+  ...defaultConfig,
+  webpackFinal: (config) => webpackMerge(config, mockConfig),
+};

src/plugins/chart_expressions/expression_legacy_metric/README.md

@@ -0,0 +1,9 @@
+# expressionLegacyMetricVis
+
+Expression MetricVis plugin adds a `metric` renderer and function to the expression plugin. The renderer will display the `metric` chart.
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/main/CONTRIBUTING.md) for instructions setting up your development environment.

src/plugins/chart_expressions/expression_legacy_metric/common/constants.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+export const EXPRESSION_METRIC_NAME = 'legacyMetricVis';
+
+export const LabelPosition = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+} as const;

src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { metricVisFunction } from './metric_vis_function';

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

@@ -0,0 +1,206 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import {
+  prepareLogTable,
+  Dimension,
+  validateAccessor,
+} from '@kbn/visualizations-plugin/common/utils';
+import { ColorMode } from '@kbn/charts-plugin/common';
+import { visType } from '../types';
+import { MetricVisExpressionFunctionDefinition } from '../types';
+import { EXPRESSION_METRIC_NAME, LabelPosition } from '../constants';
+
+const errors = {
+  severalMetricsAndColorFullBackgroundSpecifiedError: () =>
+    i18n.translate(
+      'expressionLegacyMetricVis.function.errors.severalMetricsAndColorFullBackgroundSpecified',
+      {
+        defaultMessage:
+          'Full background coloring cannot be applied to a visualization with multiple metrics.',
+      }
+    ),
+  splitByBucketAndColorFullBackgroundSpecifiedError: () =>
+    i18n.translate(
+      'expressionLegacyMetricVis.function.errors.splitByBucketAndColorFullBackgroundSpecified',
+      {
+        defaultMessage:
+          'Full background coloring cannot be applied to visualizations that have a bucket specified.',
+      }
+    ),
+};
+
+export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
+  name: EXPRESSION_METRIC_NAME,
+  type: 'render',
+  inputTypes: ['datatable'],
+  help: i18n.translate('expressionLegacyMetricVis.function.help', {
+    defaultMessage: 'Metric visualization',
+  }),
+  args: {
+    percentageMode: {
+      types: ['boolean'],
+      default: false,
+      help: i18n.translate('expressionLegacyMetricVis.function.percentageMode.help', {
+        defaultMessage: 'Shows metric in percentage mode. Requires colorRange to be set.',
+      }),
+    },
+    colorMode: {
+      types: ['string'],
+      default: `"${ColorMode.None}"`,
+      options: [ColorMode.None, ColorMode.Labels, ColorMode.Background],
+      help: i18n.translate('expressionLegacyMetricVis.function.colorMode.help', {
+        defaultMessage: 'Which part of metric to color',
+      }),
+      strict: true,
+    },
+    colorFullBackground: {
+      types: ['boolean'],
+      default: false,
+      help: i18n.translate('expressionLegacyMetricVis.function.colorFullBackground.help', {
+        defaultMessage: 'Applies the selected background color to the full visualization container',
+      }),
+    },
+    palette: {
+      types: ['palette'],
+      help: i18n.translate('expressionLegacyMetricVis.function.palette.help', {
+        defaultMessage: 'Provides colors for the values, based on the bounds.',
+      }),
+    },
+    showLabels: {
+      types: ['boolean'],
+      default: true,
+      help: i18n.translate('expressionLegacyMetricVis.function.showLabels.help', {
+        defaultMessage: 'Shows labels under the metric values.',
+      }),
+    },
+    font: {
+      types: ['style'],
+      help: i18n.translate('expressionLegacyMetricVis.function.font.help', {
+        defaultMessage: 'Font settings.',
+      }),
+      default: `{font size=60 align="center"}`,
+    },
+    labelFont: {
+      types: ['style'],
+      help: i18n.translate('expressionLegacyMetricVis.function.labelFont.help', {
+        defaultMessage: 'Label font settings.',
+      }),
+      default: `{font size=24 align="center"}`,
+    },
+    labelPosition: {
+      types: ['string'],
+      options: [LabelPosition.BOTTOM, LabelPosition.TOP],
+      help: i18n.translate('expressionLegacyMetricVis.function.labelPosition.help', {
+        defaultMessage: 'Label position',
+      }),
+      default: LabelPosition.BOTTOM,
+      strict: true,
+    },
+    metric: {
+      types: ['string', 'vis_dimension'],
+      help: i18n.translate('expressionLegacyMetricVis.function.metric.help', {
+        defaultMessage: 'metric dimension configuration',
+      }),
+      required: true,
+      multi: true,
+    },
+    bucket: {
+      types: ['string', 'vis_dimension'],
+      help: i18n.translate('expressionLegacyMetricVis.function.bucket.help', {
+        defaultMessage: 'bucket dimension configuration',
+      }),
+    },
+    autoScale: {
+      types: ['boolean'],
+      help: i18n.translate('expressionLegacyMetricVis.function.autoScale.help', {
+        defaultMessage: 'Enable auto scale',
+      }),
+      required: false,
+    },
+  },
+  fn(input, args, handlers) {
+    if (args.percentageMode && !args.palette?.params) {
+      throw new Error('Palette must be provided when using percentageMode');
+    }
+
+    // currently we can allow colorize full container only for one metric
+    if (args.colorFullBackground) {
+      if (args.bucket) {
+        throw new Error(errors.splitByBucketAndColorFullBackgroundSpecifiedError());
+      }
+
+      if (args.metric.length > 1 || input.rows.length > 1) {
+        throw new Error(errors.severalMetricsAndColorFullBackgroundSpecifiedError());
+      }
+    }
+
+    args.metric.forEach((metric) => validateAccessor(metric, input.columns));
+    validateAccessor(args.bucket, input.columns);
+
+    if (handlers?.inspectorAdapters?.tables) {
+      handlers.inspectorAdapters.tables.reset();
+      handlers.inspectorAdapters.tables.allowCsvExport = true;
+
+      const argsTable: Dimension[] = [
+        [
+          args.metric,
+          i18n.translate('expressionLegacyMetricVis.function.dimension.metric', {
+            defaultMessage: 'Metric',
+          }),
+        ],
+      ];
+      if (args.bucket) {
+        argsTable.push([
+          [args.bucket],
+          i18n.translate('expressionLegacyMetricVis.function.dimension.splitGroup', {
+            defaultMessage: 'Split group',
+          }),
+        ]);
+      }
+      const logTable = prepareLogTable(input, argsTable, true);
+      handlers.inspectorAdapters.tables.logDatatable('default', logTable);
+    }
+
+    return {
+      type: 'render',
+      as: EXPRESSION_METRIC_NAME,
+      value: {
+        visData: input,
+        visType,
+        visConfig: {
+          metric: {
+            palette: args.palette?.params,
+            percentageMode: args.percentageMode,
+            metricColorMode: args.colorMode,
+            labels: {
+              show: args.showLabels,
+              position: args.labelPosition,
+              style: {
+                ...args.labelFont,
+              },
+            },
+            colorFullBackground: args.colorFullBackground,
+            style: {
+              bgColor: args.colorMode === ColorMode.Background,
+              labelColor: args.colorMode === ColorMode.Labels,
+              ...args.font,
+            },
+            autoScale: args.autoScale,
+          },
+          dimensions: {
+            metrics: args.metric,
+            ...(args.bucket ? { bucket: args.bucket } : {}),
+          },
+        },
+      },
+    };
+  },
+});

src/plugins/chart_expressions/expression_legacy_metric/common/index.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+export const PLUGIN_ID = 'expressionLegacyMetricVis';
+export const PLUGIN_NAME = 'expressionLegacyMetricVis';
+
+export type {
+  MetricArguments,
+  MetricInput,
+  MetricVisRenderConfig,
+  MetricVisExpressionFunctionDefinition,
+  DimensionsVisParam,
+  MetricVisParam,
+  VisParams,
+  MetricOptions,
+} from './types';
+
+export { metricVisFunction } from './expression_functions';
+
+export { EXPRESSION_METRIC_NAME } from './constants';