From 3891aeb95fb030348807dee583e0c217a9083b7d Mon Sep 17 00:00:00 2001 From: Andrew Tate Date: Fri, 8 Jul 2022 12:07:43 -0500 Subject: [PATCH] [Chart expressions] new metric vis expression (#135461) --- .i18nrc.json | 15 +- docs/developer/plugin-list.asciidoc | 4 + packages/kbn-optimizer/limits.yml | 1 + .../expression_legacy_metric/.i18nrc.json | 6 + .../.storybook/main.js | 26 + .../expression_legacy_metric/README.md | 9 + .../common/constants.ts | 14 + .../metric_vis_function.test.ts.snap | 2 +- .../common/expression_functions/index.ts | 9 + .../metric_vis_function.test.ts | 0 .../metric_vis_function.ts | 206 ++++ .../expression_legacy_metric/common/index.ts | 25 + .../common/types/expression_functions.ts | 48 + .../common/types/expression_renderers.ts | 59 ++ .../common/types/index.ts | 10 + .../expression_legacy_metric/jest.config.js | 19 + .../expression_legacy_metric/kibana.json | 21 + .../public/__mocks__/format_service.ts | 0 .../public/__mocks__/palette_service.ts | 0 .../public/__mocks__/services.ts | 0 .../__stories__/metric_renderer.stories.tsx | 0 .../metric_component.test.tsx.snap | 2 +- .../with_auto_scale.test.tsx.snap | 0 .../public/components/metric.scss | 17 +- .../components/metric_component.test.tsx | 0 .../public/components/metric_component.tsx | 0 .../public/components/metric_value.test.tsx | 6 +- .../public/components/metric_value.tsx | 12 +- .../components/with_auto_scale.styles.ts | 0 .../components/with_auto_scale.test.tsx | 0 .../public/components/with_auto_scale.tsx | 0 .../public/expression_renderers/index.ts | 9 + .../metric_vis_renderer.tsx | 91 ++ .../public/format_service.ts | 0 .../expression_legacy_metric/public/index.ts | 13 + .../expression_legacy_metric/public/plugin.ts | 41 + .../public/services/format_service.ts | 13 + .../public/services/index.ts | 10 + .../public/services/palette_service.ts | 13 + .../public/utils/format.ts | 21 + .../public/utils/index.ts | 9 + .../public/utils/palette.ts | 41 + .../expression_legacy_metric/server/index.ts | 13 + .../expression_legacy_metric/server/plugin.ts | 40 + .../expression_legacy_metric/tsconfig.json | 23 + .../metric_vis_function.ts | 197 ++-- .../common/types/expression_functions.ts | 25 +- .../common/types/expression_renderers.ts | 34 +- .../expression_metric/kibana.json | 10 +- .../public/__mocks__/theme_service.ts | 13 + .../public/components/currency_codes.test.ts | 33 + .../public/components/currency_codes.ts | 46 + .../public/components/metric_vis.test.tsx | 905 ++++++++++++++++++ .../public/components/metric_vis.tsx | 240 +++++ .../metric_vis_renderer.tsx | 62 +- .../expression_metric/public/plugin.ts | 12 +- .../public/services/index.ts | 2 + .../public/services/theme_service.ts | 13 + .../public/services/ui_settings.ts | 13 + .../common/constants/base_formatters.ts | 2 + .../common/converters/currency.test.ts | 31 + .../common/converters/currency.ts | 23 + .../field_formats/common/converters/index.ts | 1 + src/plugins/field_formats/common/types.ts | 1 + .../public/__snapshots__/to_ast.test.ts.snap | 4 +- src/plugins/vis_types/metric/public/to_ast.ts | 2 +- .../page_objects/visualize_chart_page.ts | 2 +- .../page_objects/visualize_editor_page.ts | 2 +- .../services/dashboard/expectations.ts | 2 +- .../snapshots/baseline/combined_test3.json | 2 +- .../snapshots/baseline/final_output_test.json | 2 +- .../snapshots/baseline/metric_all_data.json | 2 +- .../snapshots/baseline/metric_empty_data.json | 2 +- .../baseline/metric_invalid_data.json | 2 +- .../baseline/metric_multi_metric_data.json | 2 +- .../baseline/metric_percentage_mode.json | 2 +- .../baseline/metric_single_metric_data.json | 2 +- .../snapshots/baseline/partial_test_2.json | 2 +- .../snapshots/baseline/step_output_test3.json | 2 +- .../snapshots/session/combined_test3.json | 2 +- .../snapshots/session/final_output_test.json | 2 +- .../snapshots/session/metric_all_data.json | 2 +- .../snapshots/session/metric_empty_data.json | 2 +- .../session/metric_multi_metric_data.json | 2 +- .../session/metric_percentage_mode.json | 2 +- .../session/metric_single_metric_data.json | 2 +- .../snapshots/session/partial_test_2.json | 2 +- .../snapshots/session/step_output_test3.json | 2 +- .../test_suites/run_pipeline/basic.ts | 4 +- .../test_suites/run_pipeline/metric.ts | 14 +- tsconfig.base.json | 2 + .../canvas_plugin_src/elements/index.ts | 3 +- .../elements/metric_vis/index.ts | 12 +- .../elements/metric_vis_legacy/index.ts | 21 + .../uis/models/metric_vis.ts | 2 +- .../i18n/elements/element_strings.test.ts | 4 +- .../canvas/i18n/elements/element_strings.ts | 10 +- .../visualization.test.ts | 2 +- .../metric_visualization/visualization.tsx | 2 +- .../translations/translations/fr-FR.json | 12 - .../translations/translations/ja-JP.json | 12 - .../translations/translations/zh-CN.json | 12 - .../time_to_visualize_security.ts | 2 +- .../apps/lens/group1/persistent_context.ts | 4 +- .../apps/lens/group2/add_to_dashboard.ts | 12 +- .../apps/lens/group2/epoch_millis.ts | 4 +- .../functional/apps/lens/group3/chart_data.ts | 2 +- .../functional/apps/lens/group3/formula.ts | 2 +- .../functional/apps/lens/group3/metrics.ts | 6 +- .../functional/apps/lens/group3/rollup.ts | 4 +- .../apps/lens/group3/tsvb_open_in_lens.ts | 2 +- .../data_visualizer/index_data_visualizer.ts | 4 +- 112 files changed, 2372 insertions(+), 343 deletions(-) create mode 100755 src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/.storybook/main.js create mode 100755 src/plugins/chart_expressions/expression_legacy_metric/README.md create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/common/constants.ts rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap (99%) create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/index.ts rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/common/expression_functions/metric_vis_function.test.ts (100%) create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts create mode 100755 src/plugins/chart_expressions/expression_legacy_metric/common/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/common/types/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/jest.config.js create mode 100755 src/plugins/chart_expressions/expression_legacy_metric/kibana.json rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/__mocks__/format_service.ts (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/__mocks__/palette_service.ts (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/__mocks__/services.ts (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/__stories__/metric_renderer.stories.tsx (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/__snapshots__/metric_component.test.tsx.snap (99%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/__snapshots__/with_auto_scale.test.tsx.snap (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/metric.scss (81%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/metric_component.test.tsx (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/metric_component.tsx (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/metric_value.test.tsx (92%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/metric_value.tsx (88%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/with_auto_scale.styles.ts (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/with_auto_scale.test.tsx (100%) rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/components/with_auto_scale.tsx (100%) create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx rename src/plugins/chart_expressions/{expression_metric => expression_legacy_metric}/public/format_service.ts (100%) create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/plugin.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/services/format_service.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/services/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/services/palette_service.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/utils/format.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/utils/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/public/utils/palette.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/server/index.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/server/plugin.ts create mode 100644 src/plugins/chart_expressions/expression_legacy_metric/tsconfig.json create mode 100644 src/plugins/chart_expressions/expression_metric/public/__mocks__/theme_service.ts create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/currency_codes.test.ts create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/currency_codes.ts create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx create mode 100644 src/plugins/chart_expressions/expression_metric/public/services/theme_service.ts create mode 100644 src/plugins/chart_expressions/expression_metric/public/services/ui_settings.ts create mode 100644 src/plugins/field_formats/common/converters/currency.test.ts create mode 100644 src/plugins/field_formats/common/converters/currency.ts create mode 100644 x-pack/plugins/canvas/canvas_plugin_src/elements/metric_vis_legacy/index.ts diff --git a/.i18nrc.json b/.i18nrc.json index 412d16930c9ac..073a413fabf80 100644 --- a/.i18nrc.json +++ b/.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", diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index c939ab2dcf690..041c0cee57359 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/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. diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 0dafe3c51b77e..0dc1e1ee4675e 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -96,6 +96,7 @@ pageLoadAssetSize: securitySolution: 273763 customIntegrations: 28810 expressionMetricVis: 23121 + expressionLegacyMetricVis: 23121 expressionHeatmap: 27505 visTypeMetric: 23332 bfetch: 22837 diff --git a/src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json b/src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json new file mode 100755 index 0000000000000..28e2d09a1a433 --- /dev/null +++ b/src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json @@ -0,0 +1,6 @@ +{ + "prefix": "expressionLegacyMetricVis", + "paths": { + "expressionLegacyMetricVis": "." + } +} diff --git a/src/plugins/chart_expressions/expression_legacy_metric/.storybook/main.js b/src/plugins/chart_expressions/expression_legacy_metric/.storybook/main.js new file mode 100644 index 0000000000000..80e65c9e371f0 --- /dev/null +++ b/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), +}; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/README.md b/src/plugins/chart_expressions/expression_legacy_metric/README.md new file mode 100755 index 0000000000000..07b830feae67d --- /dev/null +++ b/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. diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/constants.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/constants.ts new file mode 100644 index 0000000000000..54cfe41f2a3b7 --- /dev/null +++ b/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; diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap similarity index 99% rename from src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap rename to src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap index 44cc3fee09b1f..9a7a7d5a5035c 100644 --- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap +++ b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap @@ -23,7 +23,7 @@ Object { exports[`interpreter/functions#metric returns an object with the correct structure 1`] = ` Object { - "as": "metricVis", + "as": "legacyMetricVis", "type": "render", "value": Object { "visConfig": Object { diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/index.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/index.ts new file mode 100644 index 0000000000000..5eccaa62fe464 --- /dev/null +++ b/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'; diff --git a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.test.ts similarity index 100% rename from src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts rename to src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.test.ts diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts new file mode 100644 index 0000000000000..8ec638d139bff --- /dev/null +++ b/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 } : {}), + }, + }, + }, + }; + }, +}); diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/index.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/index.ts new file mode 100755 index 0000000000000..34cbdb6745312 --- /dev/null +++ b/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'; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts new file mode 100644 index 0000000000000..5ad540fc579f6 --- /dev/null +++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts @@ -0,0 +1,48 @@ +/* + * 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 type { PaletteOutput } from '@kbn/coloring'; +import { + Datatable, + ExpressionFunctionDefinition, + ExpressionValueRender, + Style, +} from '@kbn/expressions-plugin'; +import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common'; +import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common'; +import { VisParams, visType, LabelPositionType } from './expression_renderers'; +import { EXPRESSION_METRIC_NAME } from '../constants'; + +export interface MetricArguments { + percentageMode: boolean; + colorMode: ColorMode; + showLabels: boolean; + palette?: PaletteOutput; + font: Style; + labelFont: Style; + labelPosition: LabelPositionType; + metric: Array; + bucket?: ExpressionValueVisDimension | string; + colorFullBackground: boolean; + autoScale?: boolean; +} + +export type MetricInput = Datatable; + +export interface MetricVisRenderConfig { + visType: typeof visType; + visData: Datatable; + visConfig: Pick; +} + +export type MetricVisExpressionFunctionDefinition = ExpressionFunctionDefinition< + typeof EXPRESSION_METRIC_NAME, + MetricInput, + MetricArguments, + ExpressionValueRender +>; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts new file mode 100644 index 0000000000000..8c370480a7be9 --- /dev/null +++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts @@ -0,0 +1,59 @@ +/* + * 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 { $Values } from '@kbn/utility-types'; +import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common'; +import { + ColorMode, + Labels, + CustomPaletteState, + Style as ChartStyle, +} from '@kbn/charts-plugin/common'; +import { Style } from '@kbn/expressions-plugin/common'; +import { LabelPosition } from '../constants'; + +export const visType = 'metric'; + +export interface DimensionsVisParam { + metrics: Array; + bucket?: ExpressionValueVisDimension | string; +} + +export type LabelPositionType = $Values; + +export type MetricStyle = Style & Pick; + +export type LabelsConfig = Labels & { style: Style; position: LabelPositionType }; +export interface MetricVisParam { + percentageMode: boolean; + percentageFormatPattern?: string; + metricColorMode: ColorMode; + palette?: CustomPaletteState; + labels: LabelsConfig; + style: MetricStyle; + colorFullBackground: boolean; + autoScale?: boolean; +} + +export interface VisParams { + addTooltip: boolean; + addLegend: boolean; + dimensions: DimensionsVisParam; + metric: MetricVisParam; + type: typeof visType; +} + +export interface MetricOptions { + value: string; + label: string; + color?: string; + bgColor?: string; + lightText: boolean; + colIndex: number; + rowIndex: number; +} diff --git a/src/plugins/chart_expressions/expression_legacy_metric/common/types/index.ts b/src/plugins/chart_expressions/expression_legacy_metric/common/types/index.ts new file mode 100644 index 0000000000000..9c50bfab1305d --- /dev/null +++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/index.ts @@ -0,0 +1,10 @@ +/* + * 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 * from './expression_functions'; +export * from './expression_renderers'; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/jest.config.js b/src/plugins/chart_expressions/expression_legacy_metric/jest.config.js new file mode 100644 index 0000000000000..6b649ca8abadc --- /dev/null +++ b/src/plugins/chart_expressions/expression_legacy_metric/jest.config.js @@ -0,0 +1,19 @@ +/* + * 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. + */ + +module.exports = { + preset: '@kbn/test', + rootDir: '../../../../', + roots: ['/src/plugins/chart_expressions/expression_legacy_metric'], + coverageDirectory: + '/target/kibana-coverage/jest/src/plugins/chart_expressions/expression_legacy_metric', + coverageReporters: ['text', 'html'], + collectCoverageFrom: [ + '/src/plugins/chart_expressions/expression_legacy_metric/{common,public,server}/**/*.{ts,tsx}', + ], +}; diff --git a/src/plugins/chart_expressions/expression_legacy_metric/kibana.json b/src/plugins/chart_expressions/expression_legacy_metric/kibana.json new file mode 100755 index 0000000000000..0c3489ddc55d1 --- /dev/null +++ b/src/plugins/chart_expressions/expression_legacy_metric/kibana.json @@ -0,0 +1,21 @@ +{ + "id": "expressionLegacyMetricVis", + "version": "1.0.0", + "kibanaVersion": "kibana", + "owner": { + "name": "Vis Editors", + "githubTeam": "kibana-vis-editors" + }, + "description": "Adds a `metric` renderer and function to the expression plugin. The renderer will display the `legacy metric` chart.", + "server": true, + "ui": true, + "requiredPlugins": [ + "expressions", + "fieldFormats", + "charts", + "visualizations", + "presentationUtil" + ], + "requiredBundles": ["kibanaUtils", "kibanaReact"], + "optionalPlugins": [] +} diff --git a/src/plugins/chart_expressions/expression_metric/public/__mocks__/format_service.ts b/src/plugins/chart_expressions/expression_legacy_metric/public/__mocks__/format_service.ts similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/__mocks__/format_service.ts rename to src/plugins/chart_expressions/expression_legacy_metric/public/__mocks__/format_service.ts diff --git a/src/plugins/chart_expressions/expression_metric/public/__mocks__/palette_service.ts b/src/plugins/chart_expressions/expression_legacy_metric/public/__mocks__/palette_service.ts similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/__mocks__/palette_service.ts rename to src/plugins/chart_expressions/expression_legacy_metric/public/__mocks__/palette_service.ts diff --git a/src/plugins/chart_expressions/expression_metric/public/__mocks__/services.ts b/src/plugins/chart_expressions/expression_legacy_metric/public/__mocks__/services.ts similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/__mocks__/services.ts rename to src/plugins/chart_expressions/expression_legacy_metric/public/__mocks__/services.ts diff --git a/src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/__stories__/metric_renderer.stories.tsx similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx rename to src/plugins/chart_expressions/expression_legacy_metric/public/__stories__/metric_renderer.stories.tsx diff --git a/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap similarity index 99% rename from src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap index ac950f3f7f2c4..106d45bc4a87c 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap @@ -116,4 +116,4 @@ exports[`MetricVisComponent should render correct structure for single metric 1` } } /> -`; +`; \ No newline at end of file diff --git a/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss similarity index 81% rename from src/plugins/chart_expressions/expression_metric/public/components/metric.scss rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss index c99c191c57755..7adcb109bc931 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss +++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss @@ -5,7 +5,7 @@ // mtrChart__legend--small // mtrChart__legend-isLoading -.mtrVis { +.legacyMtrVis { @include euiScrollBar; height: 100%; width: 100%; @@ -17,23 +17,23 @@ overflow: auto; } -.mtrVis__value { +.legacyMtrVis__value { @include euiTextTruncate; font-weight: $euiFontWeightBold; } -.mtrVis__container { +.legacyMtrVis__container { text-align: center; padding: $euiSize; display: flex; flex-direction: column; } -.mtrVis__container--light { +.legacyMtrVis__container--light { color: $euiColorEmptyShade; } -.mtrVis__container-isfull { +.legacyMtrVis__container-isfull { min-height: 100%; min-width: max-content; display: flex; @@ -43,13 +43,14 @@ flex: 1 0 100%; } -.mtrVis__container-isFilterable { +.legacyMtrVis__container-isFilterable { cursor: pointer; transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance; transform: translate(0, 0); - &:hover, &:focus { + &:hover, + &:focus { box-shadow: none; transform: translate(0, -2px); } -} +} \ No newline at end of file diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx similarity index 100% rename from src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx similarity index 92% rename from src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx index fee24d8aa5e7f..0590faebe5f7d 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx +++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx @@ -75,7 +75,7 @@ describe('MetricVisValue', () => { /> ); component.simulate('click'); - expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(1); + expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(1); }); it('should not add -isfilterable class if onFilter is not provided', () => { @@ -88,7 +88,7 @@ describe('MetricVisValue', () => { /> ); component.simulate('click'); - expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(0); + expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(0); }); it('should call onFilter callback if provided', () => { @@ -116,6 +116,6 @@ describe('MetricVisValue', () => { labelConfig={labelConfig} /> ); - expect(component.find('.mtrVis__container-isfull').exists()).toBe(true); + expect(component.find('.legacyMtrVis__container-isfull').exists()).toBe(true); }); }); diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx similarity index 88% rename from src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx rename to src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx index 40ba0eb081564..1f9192aedc872 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx +++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx @@ -23,10 +23,10 @@ interface MetricVisValueProps { export const MetricVisValue = (props: MetricVisValueProps) => { const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props; - const containerClassName = classNames('mtrVis__container', { - 'mtrVis__container--light': metric.lightText, - 'mtrVis__container-isfilterable': onFilter, - 'mtrVis__container-isfull': !autoScale && colorFullBackground, + const containerClassName = classNames('legacyMtrVis__container', { + 'legacyMtrVis__container--light': metric.lightText, + 'legacyMtrVis__container-isfilterable': onFilter, + 'legacyMtrVis__container-isfull': !autoScale && colorFullBackground, }); useLayoutEffect(() => { @@ -41,7 +41,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => { >
{