From 4340d8d102e46b3ce5655dfd16406ed40fc7e08a Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 27 Jul 2021 04:24:14 -0400 Subject: [PATCH] [Canvas] Expression metric (#104390) (#106808) * Added `expression_metric` plugin. * Update src/plugins/expression_metric/README.md Co-authored-by: Corey Robertson Co-authored-by: Yaroslav Kuznietsov Co-authored-by: Corey Robertson --- .i18nrc.json | 1 + docs/developer/plugin-list.asciidoc | 4 + packages/kbn-optimizer/limits.yml | 1 + src/dev/storybook/aliases.ts | 1 + .../__fixtures__/function_specs.ts | 12 ++ .../expression_image/__fixtures__/index.ts | 1 + .../expression_metric/.storybook/main.js | 10 ++ src/plugins/expression_metric/README.md | 9 ++ .../__fixtures__/function_specs.ts | 12 ++ .../expression_metric/__fixtures__/index.ts | 9 ++ .../expression_metric/common/constants.ts | 15 +++ .../common/expression_functions/index.ts | 13 +++ .../metric_function.test.ts | 59 ++++++---- .../expression_functions/metric_function.ts | 98 ++++++++++++++++ src/plugins/expression_metric/common/index.ts | 11 ++ .../common/types/expression_functions.ts | 24 ++++ .../common/types/expression_renderers.ts | 27 +++++ .../expression_metric/common/types/index.ts | 9 ++ src/plugins/expression_metric/jest.config.js | 13 +++ src/plugins/expression_metric/kibana.json | 9 ++ .../public/components/index.ts | 9 ++ .../public/components/metric_component.tsx | 10 +- .../__snapshots__/metric.stories.storyshot | 0 .../__stories__/metric_renderer.stories.tsx | 109 ++++++++++++++++++ .../public/expression_renderers/index.ts | 13 +++ .../expression_renderers/metric_renderer.tsx | 55 +++++++++ src/plugins/expression_metric/public/index.ts | 17 +++ .../expression_metric/public/plugin.ts | 36 ++++++ src/plugins/expression_metric/server/index.ts | 15 +++ .../expression_metric/server/plugin.ts | 34 ++++++ src/plugins/expression_metric/tsconfig.json | 22 ++++ .../common/lib/test_helpers/index.ts | 1 + .../common/lib/test_helpers/test_styles.ts | 23 ++++ .../canvas/__fixtures__/function_specs.ts | 4 +- .../functions/browser/markdown.test.js | 6 +- .../functions/common/index.ts | 2 - .../functions/common/metric.ts | 72 ------------ .../functions/common/progress.test.js | 6 +- .../functions/common/table.test.js | 6 +- .../canvas_plugin_src/renderers/core.ts | 3 +- .../canvas_plugin_src/renderers/external.ts | 4 +- .../component/__stories__/metric.stories.tsx | 85 -------------- .../renderers/metric/component/index.ts | 8 -- .../renderers/metric/index.tsx | 49 -------- .../canvas/i18n/functions/dict/metric.ts | 50 -------- .../canvas/i18n/functions/function_help.ts | 2 - x-pack/plugins/canvas/i18n/renderers.ts | 10 -- x-pack/plugins/canvas/kibana.json | 1 + .../canvas/public/functions/pie.test.js | 3 +- .../canvas/public/functions/plot.test.js | 3 +- .../functions/plot/get_font_spec.test.js | 3 +- .../shareable_runtime/supported_renderers.js | 2 +- x-pack/plugins/canvas/tsconfig.json | 1 + .../translations/translations/ja-JP.json | 14 +-- .../translations/translations/zh-CN.json | 14 +-- 55 files changed, 697 insertions(+), 333 deletions(-) create mode 100644 src/plugins/expression_image/__fixtures__/function_specs.ts create mode 100644 src/plugins/expression_metric/.storybook/main.js create mode 100755 src/plugins/expression_metric/README.md create mode 100644 src/plugins/expression_metric/__fixtures__/function_specs.ts create mode 100644 src/plugins/expression_metric/__fixtures__/index.ts create mode 100644 src/plugins/expression_metric/common/constants.ts create mode 100644 src/plugins/expression_metric/common/expression_functions/index.ts rename x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js => src/plugins/expression_metric/common/expression_functions/metric_function.test.ts (57%) create mode 100644 src/plugins/expression_metric/common/expression_functions/metric_function.ts create mode 100755 src/plugins/expression_metric/common/index.ts create mode 100644 src/plugins/expression_metric/common/types/expression_functions.ts create mode 100644 src/plugins/expression_metric/common/types/expression_renderers.ts create mode 100644 src/plugins/expression_metric/common/types/index.ts create mode 100644 src/plugins/expression_metric/jest.config.js create mode 100755 src/plugins/expression_metric/kibana.json create mode 100644 src/plugins/expression_metric/public/components/index.ts rename x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx => src/plugins/expression_metric/public/components/metric_component.tsx (76%) rename {x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component => src/plugins/expression_metric/public/expression_renderers}/__stories__/__snapshots__/metric.stories.storyshot (100%) create mode 100644 src/plugins/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx create mode 100644 src/plugins/expression_metric/public/expression_renderers/index.ts create mode 100644 src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx create mode 100755 src/plugins/expression_metric/public/index.ts create mode 100755 src/plugins/expression_metric/public/plugin.ts create mode 100755 src/plugins/expression_metric/server/index.ts create mode 100755 src/plugins/expression_metric/server/plugin.ts create mode 100644 src/plugins/expression_metric/tsconfig.json create mode 100644 src/plugins/presentation_util/common/lib/test_helpers/test_styles.ts delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.ts delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/__stories__/metric.stories.tsx delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx delete mode 100644 x-pack/plugins/canvas/i18n/functions/dict/metric.ts diff --git a/.i18nrc.json b/.i18nrc.json index 36b3777fd1f5..2709d5ad7a67 100644 --- a/.i18nrc.json +++ b/.i18nrc.json @@ -19,6 +19,7 @@ "expressions": "src/plugins/expressions", "expressionError": "src/plugins/expression_error", "expressionImage": "src/plugins/expression_image", + "expressionMetric": "src/plugins/expression_metric", "expressionRepeatImage": "src/plugins/expression_repeat_image", "expressionRevealImage": "src/plugins/expression_reveal_image", "expressionShape": "src/plugins/expression_shape", diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index d389c7e29211..3ab115a52465 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -78,6 +78,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/expression_metric/README.md[expressionMetric] +|Expression Metric plugin adds a metric renderer and function to the expression plugin. + + |{kib-repo}blob/{branch}/src/plugins/expression_repeat_image/README.md[expressionRepeatImage] |Expression Repeat Image plugin adds a repeatImage function to the expression plugin and an associated renderer. The renderer will display the given image in mutliple instances. diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 9b36e3ad796e..244d11b9e48b 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -115,4 +115,5 @@ pageLoadAssetSize: expressionError: 22127 expressionRepeatImage: 22341 expressionImage: 19288 + expressionMetric: 22238 expressionShape: 30033 diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts index b27ff8663172..965a716098f3 100644 --- a/src/dev/storybook/aliases.ts +++ b/src/dev/storybook/aliases.ts @@ -19,6 +19,7 @@ export const storybookAliases = { embeddable: 'src/plugins/embeddable/.storybook', expression_error: 'src/plugins/expression_error/.storybook', expression_image: 'src/plugins/expression_image/.storybook', + expression_metric: 'src/plugins/expression_metric/.storybook', expression_repeat_image: 'src/plugins/expression_repeat_image/.storybook', expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook', expression_shape: 'src/plugins/expression_shape/.storybook', diff --git a/src/plugins/expression_image/__fixtures__/function_specs.ts b/src/plugins/expression_image/__fixtures__/function_specs.ts new file mode 100644 index 000000000000..2117a8fc4b72 --- /dev/null +++ b/src/plugins/expression_image/__fixtures__/function_specs.ts @@ -0,0 +1,12 @@ +/* + * 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 { imageFunction } from '../common/expression_functions'; +import { ExpressionFunction } from '../../../../src/plugins/expressions'; + +export const functionSpecs = [imageFunction].map((fn) => new ExpressionFunction(fn())); diff --git a/src/plugins/expression_image/__fixtures__/index.ts b/src/plugins/expression_image/__fixtures__/index.ts index 279e8d87446b..b1087597ec17 100644 --- a/src/plugins/expression_image/__fixtures__/index.ts +++ b/src/plugins/expression_image/__fixtures__/index.ts @@ -6,4 +6,5 @@ * Side Public License, v 1. */ +export { functionSpecs } from './function_specs'; export { imageFunction } from '../common/expression_functions'; diff --git a/src/plugins/expression_metric/.storybook/main.js b/src/plugins/expression_metric/.storybook/main.js new file mode 100644 index 000000000000..742239e638b8 --- /dev/null +++ b/src/plugins/expression_metric/.storybook/main.js @@ -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. + */ + +// eslint-disable-next-line import/no-commonjs +module.exports = require('@kbn/storybook').defaultConfig; diff --git a/src/plugins/expression_metric/README.md b/src/plugins/expression_metric/README.md new file mode 100755 index 000000000000..ae02ebd51256 --- /dev/null +++ b/src/plugins/expression_metric/README.md @@ -0,0 +1,9 @@ +# expressionMetric + +Expression Metric plugin adds a `metric` renderer and function to the expression plugin. + +--- + +## Development + +See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment. diff --git a/src/plugins/expression_metric/__fixtures__/function_specs.ts b/src/plugins/expression_metric/__fixtures__/function_specs.ts new file mode 100644 index 000000000000..3d36840b47e0 --- /dev/null +++ b/src/plugins/expression_metric/__fixtures__/function_specs.ts @@ -0,0 +1,12 @@ +/* + * 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 { metricFunction } from '../common/expression_functions'; +import { ExpressionFunction } from '../../../../src/plugins/expressions'; + +export const functionSpecs = [metricFunction].map((fn) => new ExpressionFunction(fn())); diff --git a/src/plugins/expression_metric/__fixtures__/index.ts b/src/plugins/expression_metric/__fixtures__/index.ts new file mode 100644 index 000000000000..048c916b21b2 --- /dev/null +++ b/src/plugins/expression_metric/__fixtures__/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 * from './function_specs'; diff --git a/src/plugins/expression_metric/common/constants.ts b/src/plugins/expression_metric/common/constants.ts new file mode 100644 index 000000000000..62753ac728c4 --- /dev/null +++ b/src/plugins/expression_metric/common/constants.ts @@ -0,0 +1,15 @@ +/* + * 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 = 'expressionMetric'; +export const PLUGIN_NAME = 'expressionMetric'; + +export const FONT_FAMILY = '`font-family`'; +export const FONT_WEIGHT = '`font-weight`'; +export const CSS = 'CSS'; +export const NUMERALJS = 'Numeral pattern'; diff --git a/src/plugins/expression_metric/common/expression_functions/index.ts b/src/plugins/expression_metric/common/expression_functions/index.ts new file mode 100644 index 000000000000..53dd9c731168 --- /dev/null +++ b/src/plugins/expression_metric/common/expression_functions/index.ts @@ -0,0 +1,13 @@ +/* + * 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 { metricFunction } from './metric_function'; + +export const functions = [metricFunction]; + +export { metricFunction }; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js b/src/plugins/expression_metric/common/expression_functions/metric_function.test.ts similarity index 57% rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js rename to src/plugins/expression_metric/common/expression_functions/metric_function.test.ts index 3f2d0ad2cb76..88249728526d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js +++ b/src/plugins/expression_metric/common/expression_functions/metric_function.test.ts @@ -1,39 +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; you may not use this file except in compliance with the Elastic License - * 2.0. + * 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 { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; -import { fontStyle } from './__fixtures__/test_styles'; -import { metric } from './metric'; +import { ExecutionContext } from 'src/plugins/expressions'; +import { functionWrapper, fontStyle } from '../../../presentation_util/common/lib'; +import { metricFunction } from './metric_function'; describe('metric', () => { - const fn = functionWrapper(metric); + const fn = functionWrapper(metricFunction); it('returns a render as metric', () => { - const result = fn(null); + const result = fn(null, {}, {} as ExecutionContext); expect(result).toHaveProperty('type', 'render'); expect(result).toHaveProperty('as', 'metric'); }); it('sets the metric to context', () => { - const result = fn('2'); + const result = fn('2', {}, {} as ExecutionContext); expect(result.value).toHaveProperty('metric', '2'); }); it(`defaults metric to '?' when context is missing`, () => { - const result = fn(null); + const result = fn(null, {}, {} as ExecutionContext); expect(result.value).toHaveProperty('metric', '?'); }); describe('args', () => { describe('label', () => { it('sets the label of the metric', () => { - const result = fn(null, { - label: 'My Label', - }); + const result = fn( + null, + { + label: 'My Label', + }, + {} as ExecutionContext + ); expect(result.value).toHaveProperty('label', 'My Label'); }); @@ -41,9 +46,13 @@ describe('metric', () => { describe('metricFont', () => { it('sets the font style for the metric', () => { - const result = fn(null, { - metricFont: fontStyle, - }); + const result = fn( + null, + { + metricFont: fontStyle, + }, + {} as ExecutionContext + ); expect(result.value).toHaveProperty('metricFont', fontStyle); }); @@ -54,9 +63,13 @@ describe('metric', () => { describe('labelFont', () => { it('sets the font style for the label', () => { - const result = fn(null, { - labelFont: fontStyle, - }); + const result = fn( + null, + { + labelFont: fontStyle, + }, + {} as ExecutionContext + ); expect(result.value).toHaveProperty('labelFont', fontStyle); }); @@ -67,9 +80,13 @@ describe('metric', () => { describe('metricFormat', () => { it('sets the number format of the metric value', () => { - const result = fn(null, { - metricFormat: '0.0%', - }); + const result = fn( + null, + { + metricFormat: '0.0%', + }, + {} as ExecutionContext + ); expect(result.value).toHaveProperty('metricFormat', '0.0%'); }); diff --git a/src/plugins/expression_metric/common/expression_functions/metric_function.ts b/src/plugins/expression_metric/common/expression_functions/metric_function.ts new file mode 100644 index 000000000000..184ef37834e0 --- /dev/null +++ b/src/plugins/expression_metric/common/expression_functions/metric_function.ts @@ -0,0 +1,98 @@ +/* + * 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 { openSans } from '../../../expressions/common/fonts'; +import { FONT_FAMILY, FONT_WEIGHT, CSS, NUMERALJS } from '../constants'; +import { ExpressionMetricFunction } from '../types'; + +export const strings = { + help: i18n.translate('expressionMetric.functions.metricHelpText', { + defaultMessage: 'Displays a number over a label.', + }), + args: { + label: i18n.translate('expressionMetric.functions.metric.args.labelHelpText', { + defaultMessage: 'The text describing the metric.', + }), + labelFont: i18n.translate('expressionMetric.functions.metric.args.labelFontHelpText', { + defaultMessage: + 'The {CSS} font properties for the label. For example, {FONT_FAMILY} or {FONT_WEIGHT}.', + values: { + CSS, + FONT_FAMILY, + FONT_WEIGHT, + }, + }), + metricFont: i18n.translate('expressionMetric.functions.metric.args.metricFontHelpText', { + defaultMessage: + 'The {CSS} font properties for the metric. For example, {FONT_FAMILY} or {FONT_WEIGHT}.', + values: { + CSS, + FONT_FAMILY, + FONT_WEIGHT, + }, + }), + // TODO: Find a way to generate the docs URL here + metricFormat: i18n.translate('expressionMetric.functions.metric.args.metricFormatHelpText', { + defaultMessage: 'A {NUMERALJS} format string. For example, {example1} or {example2}.', + values: { + example1: '`"0.0a"`', + example2: '`"0%"`', + NUMERALJS, + }, + }), + }, +}; + +export const metricFunction: ExpressionMetricFunction = () => { + const { help, args: argHelp } = strings; + + return { + name: 'metric', + aliases: [], + type: 'render', + inputTypes: ['number', 'string', 'null'], + help, + args: { + label: { + types: ['string'], + aliases: ['_', 'text', 'description'], + help: argHelp.label, + default: '""', + }, + labelFont: { + types: ['style'], + help: argHelp.labelFont, + default: `{font size=14 family="${openSans.value}" color="#000000" align=center}`, + }, + metricFont: { + types: ['style'], + help: argHelp.metricFont, + default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`, + }, + metricFormat: { + types: ['string'], + aliases: ['format'], + help: argHelp.metricFormat, + }, + }, + fn: (input, { label, labelFont, metricFont, metricFormat }) => { + return { + type: 'render', + as: 'metric', + value: { + metric: input === null ? '?' : input, + label, + labelFont, + metricFont, + metricFormat, + }, + }; + }, + }; +}; diff --git a/src/plugins/expression_metric/common/index.ts b/src/plugins/expression_metric/common/index.ts new file mode 100755 index 000000000000..1b7668c49def --- /dev/null +++ b/src/plugins/expression_metric/common/index.ts @@ -0,0 +1,11 @@ +/* + * 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 './constants'; +export * from './types'; +export * from './expression_functions'; diff --git a/src/plugins/expression_metric/common/types/expression_functions.ts b/src/plugins/expression_metric/common/types/expression_functions.ts new file mode 100644 index 000000000000..69573eec26b8 --- /dev/null +++ b/src/plugins/expression_metric/common/types/expression_functions.ts @@ -0,0 +1,24 @@ +/* + * 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 { ExpressionFunctionDefinition, ExpressionValueRender, Style } from '../../../expressions'; + +export type Input = number | string | null; + +export interface Arguments { + label: string; + metricFont: Style; + metricFormat: string; + labelFont: Style; +} + +export type ExpressionMetricFunction = () => ExpressionFunctionDefinition< + 'metric', + Input, + Arguments, + ExpressionValueRender +>; diff --git a/src/plugins/expression_metric/common/types/expression_renderers.ts b/src/plugins/expression_metric/common/types/expression_renderers.ts new file mode 100644 index 000000000000..0f8635edd7f9 --- /dev/null +++ b/src/plugins/expression_metric/common/types/expression_renderers.ts @@ -0,0 +1,27 @@ +/* + * 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 { Style } from '../../../expressions/common'; + +export interface MetricRendererConfig { + /** The text to display under the metric */ + label: string; + /** Font settings for the label */ + labelFont: Style; + /** Value of the metric to display */ + metric: string | number | null; + /** Font settings for the metric */ + metricFont: Style; + /** NumeralJS format string */ + metricFormat: string; +} + +export interface NodeDimensions { + width: number; + height: number; +} diff --git a/src/plugins/expression_metric/common/types/index.ts b/src/plugins/expression_metric/common/types/index.ts new file mode 100644 index 000000000000..ec934e7affe8 --- /dev/null +++ b/src/plugins/expression_metric/common/types/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 * from './expression_functions'; +export * from './expression_renderers'; diff --git a/src/plugins/expression_metric/jest.config.js b/src/plugins/expression_metric/jest.config.js new file mode 100644 index 000000000000..517409460895 --- /dev/null +++ b/src/plugins/expression_metric/jest.config.js @@ -0,0 +1,13 @@ +/* + * 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/expression_metric'], +}; diff --git a/src/plugins/expression_metric/kibana.json b/src/plugins/expression_metric/kibana.json new file mode 100755 index 000000000000..c83a3fcb2668 --- /dev/null +++ b/src/plugins/expression_metric/kibana.json @@ -0,0 +1,9 @@ +{ + "id": "expressionMetric", + "version": "1.0.0", + "kibanaVersion": "kibana", + "server": true, + "ui": true, + "requiredPlugins": ["expressions", "presentationUtil"], + "optionalPlugins": [] +} diff --git a/src/plugins/expression_metric/public/components/index.ts b/src/plugins/expression_metric/public/components/index.ts new file mode 100644 index 000000000000..cb7865e5f0b8 --- /dev/null +++ b/src/plugins/expression_metric/public/components/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 * from './metric_component'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx b/src/plugins/expression_metric/public/components/metric_component.tsx similarity index 76% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx rename to src/plugins/expression_metric/public/components/metric_component.tsx index b0e2266c6a36..9955dc5fa99f 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx +++ b/src/plugins/expression_metric/public/components/metric_component.tsx @@ -1,8 +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; you may not use this file except in compliance with the Elastic License - * 2.0. + * 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 React, { FunctionComponent, CSSProperties } from 'react'; @@ -21,7 +22,7 @@ interface Props { metricFormat?: string; } -export const Metric: FunctionComponent = ({ +const Metric: FunctionComponent = ({ label, metric, labelFont, @@ -39,3 +40,6 @@ export const Metric: FunctionComponent = ({ )} ); + +// eslint-disable-next-line import/no-default-export +export { Metric as default }; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/__stories__/__snapshots__/metric.stories.storyshot b/src/plugins/expression_metric/public/expression_renderers/__stories__/__snapshots__/metric.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/__stories__/__snapshots__/metric.stories.storyshot rename to src/plugins/expression_metric/public/expression_renderers/__stories__/__snapshots__/metric.stories.storyshot diff --git a/src/plugins/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx b/src/plugins/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx new file mode 100644 index 000000000000..0e04c32f52ba --- /dev/null +++ b/src/plugins/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx @@ -0,0 +1,109 @@ +/* + * 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 React, { CSSProperties } from 'react'; +import { storiesOf } from '@storybook/react'; +import { Style } from 'src/plugins/expressions'; +import { metricRenderer } from '../metric_renderer'; +import { Render } from '../../../../presentation_util/public/__stories__'; +import { MetricRendererConfig } from '../../../common'; + +const labelFontSpec: CSSProperties = { + fontFamily: "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif", + fontWeight: 'normal', + fontStyle: 'italic', + textDecoration: 'none', + textAlign: 'center', + fontSize: '24px', + lineHeight: '1', + color: '#000000', +}; + +const metricFontSpec: CSSProperties = { + fontFamily: + "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif", + fontWeight: 'bold', + fontStyle: 'normal', + textDecoration: 'none', + textAlign: 'center', + fontSize: '48px', + lineHeight: '1', + color: '#b83c6f', +}; + +storiesOf('renderers/Metric', module) + .add('with null metric', () => { + const config: MetricRendererConfig = { + metric: null, + metricFont: {} as Style, + labelFont: {} as Style, + label: '', + metricFormat: '', + }; + return ; + }) + .add('with number metric', () => { + const config: MetricRendererConfig = { + metric: '12345.6789', + metricFont: metricFontSpec as Style, + labelFont: {} as Style, + label: '', + metricFormat: '', + }; + return ; + }) + .add('with string metric', () => { + const config: MetricRendererConfig = { + metric: '$12.34', + metricFont: metricFontSpec as Style, + labelFont: labelFontSpec as Style, + label: '', + metricFormat: '', + }; + return ; + }) + .add('with label', () => { + const config: MetricRendererConfig = { + metric: '$12.34', + metricFont: metricFontSpec as Style, + labelFont: labelFontSpec as Style, + label: 'Average price', + metricFormat: '', + }; + return ; + }) + .add('with number metric and a specified format', () => { + const config: MetricRendererConfig = { + metric: '-0.0024', + metricFont: metricFontSpec as Style, + labelFont: labelFontSpec as Style, + label: 'Average price', + metricFormat: '0.00%', + }; + return ; + }) + .add('with formatted string metric and a specified format', () => { + const config: MetricRendererConfig = { + metric: '$10000000.00', + metricFont: metricFontSpec as Style, + labelFont: labelFontSpec as Style, + label: 'Total Revenue', + metricFormat: '$0a', + }; + return ; + }) + .add('with invalid metricFont', () => { + const config: MetricRendererConfig = { + metric: '$10000000.00', + metricFont: metricFontSpec as Style, + labelFont: labelFontSpec as Style, + label: 'Total Revenue', + metricFormat: '$0a', + }; + return ; + }); diff --git a/src/plugins/expression_metric/public/expression_renderers/index.ts b/src/plugins/expression_metric/public/expression_renderers/index.ts new file mode 100644 index 000000000000..b77e0bb76f1f --- /dev/null +++ b/src/plugins/expression_metric/public/expression_renderers/index.ts @@ -0,0 +1,13 @@ +/* + * 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 { metricRenderer } from './metric_renderer'; + +export const renderers = [metricRenderer]; + +export { metricRenderer }; diff --git a/src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx b/src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx new file mode 100644 index 000000000000..02c910640ede --- /dev/null +++ b/src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx @@ -0,0 +1,55 @@ +/* + * 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 React, { CSSProperties, lazy } from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions'; +import { i18n } from '@kbn/i18n'; +import { withSuspense } from '../../../presentation_util/public'; +import { MetricRendererConfig } from '../../common/types'; + +const strings = { + getDisplayName: () => + i18n.translate('expressionMetric.renderer.metric.displayName', { + defaultMessage: 'Metric', + }), + getHelpDescription: () => + i18n.translate('expressionMetric.renderer.metric.helpDescription', { + defaultMessage: 'Render a number over a label', + }), +}; + +const LazyMetricComponent = lazy(() => import('../components/metric_component')); +const MetricComponent = withSuspense(LazyMetricComponent); + +export const metricRenderer = (): ExpressionRenderDefinition => ({ + name: 'metric', + displayName: strings.getDisplayName(), + help: strings.getHelpDescription(), + reuseDomNode: true, + render: async ( + domNode: HTMLElement, + config: MetricRendererConfig, + handlers: IInterpreterRenderHandlers + ) => { + handlers.onDestroy(() => { + unmountComponentAtNode(domNode); + }); + + render( + , + domNode, + () => handlers.done() + ); + }, +}); diff --git a/src/plugins/expression_metric/public/index.ts b/src/plugins/expression_metric/public/index.ts new file mode 100755 index 000000000000..cd3eacaba04a --- /dev/null +++ b/src/plugins/expression_metric/public/index.ts @@ -0,0 +1,17 @@ +/* + * 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 { ExpressionMetricPlugin } from './plugin'; + +export type { ExpressionMetricPluginSetup, ExpressionMetricPluginStart } from './plugin'; + +export function plugin() { + return new ExpressionMetricPlugin(); +} + +export * from './expression_renderers'; diff --git a/src/plugins/expression_metric/public/plugin.ts b/src/plugins/expression_metric/public/plugin.ts new file mode 100755 index 000000000000..c11a5a4cdcad --- /dev/null +++ b/src/plugins/expression_metric/public/plugin.ts @@ -0,0 +1,36 @@ +/* + * 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 { CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public'; +import { metricFunction } from '../common/expression_functions'; +import { metricRenderer } from './expression_renderers'; + +interface SetupDeps { + expressions: ExpressionsSetup; +} + +interface StartDeps { + expression: ExpressionsStart; +} + +export type ExpressionMetricPluginSetup = void; +export type ExpressionMetricPluginStart = void; + +export class ExpressionMetricPlugin + implements + Plugin { + public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionMetricPluginSetup { + expressions.registerFunction(metricFunction); + expressions.registerRenderer(metricRenderer); + } + + public start(core: CoreStart): ExpressionMetricPluginStart {} + + public stop() {} +} diff --git a/src/plugins/expression_metric/server/index.ts b/src/plugins/expression_metric/server/index.ts new file mode 100755 index 000000000000..0caafe1b6926 --- /dev/null +++ b/src/plugins/expression_metric/server/index.ts @@ -0,0 +1,15 @@ +/* + * 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 { ExpressionMetricPlugin } from './plugin'; + +export type { ExpressionMetricPluginSetup, ExpressionMetricPluginStart } from './plugin'; + +export function plugin() { + return new ExpressionMetricPlugin(); +} diff --git a/src/plugins/expression_metric/server/plugin.ts b/src/plugins/expression_metric/server/plugin.ts new file mode 100755 index 000000000000..81c87f5c0558 --- /dev/null +++ b/src/plugins/expression_metric/server/plugin.ts @@ -0,0 +1,34 @@ +/* + * 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 { CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { ExpressionsServerStart, ExpressionsServerSetup } from '../../expressions/server'; +import { metricFunction } from '../common'; + +interface SetupDeps { + expressions: ExpressionsServerSetup; +} + +interface StartDeps { + expression: ExpressionsServerStart; +} + +export type ExpressionMetricPluginSetup = void; +export type ExpressionMetricPluginStart = void; + +export class ExpressionMetricPlugin + implements + Plugin { + public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionMetricPluginSetup { + expressions.registerFunction(metricFunction); + } + + public start(core: CoreStart): ExpressionMetricPluginStart {} + + public stop() {} +} diff --git a/src/plugins/expression_metric/tsconfig.json b/src/plugins/expression_metric/tsconfig.json new file mode 100644 index 000000000000..5fab51496c97 --- /dev/null +++ b/src/plugins/expression_metric/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "composite": true, + "outDir": "./target/types", + "emitDeclarationOnly": true, + "declaration": true, + "declarationMap": true, + "isolatedModules": true + }, + "include": [ + "common/**/*", + "public/**/*", + "server/**/*", + "__fixtures__/**/*", + ], + "references": [ + { "path": "../../core/tsconfig.json" }, + { "path": "../presentation_util/tsconfig.json" }, + { "path": "../expressions/tsconfig.json" }, + ] +} diff --git a/src/plugins/presentation_util/common/lib/test_helpers/index.ts b/src/plugins/presentation_util/common/lib/test_helpers/index.ts index a6ea8da6ac6e..486df287bf16 100644 --- a/src/plugins/presentation_util/common/lib/test_helpers/index.ts +++ b/src/plugins/presentation_util/common/lib/test_helpers/index.ts @@ -7,3 +7,4 @@ */ export * from './function_wrapper'; +export * from './test_styles'; diff --git a/src/plugins/presentation_util/common/lib/test_helpers/test_styles.ts b/src/plugins/presentation_util/common/lib/test_helpers/test_styles.ts new file mode 100644 index 000000000000..99b7ce6c38d2 --- /dev/null +++ b/src/plugins/presentation_util/common/lib/test_helpers/test_styles.ts @@ -0,0 +1,23 @@ +/* + * 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 fontStyle = { + type: 'style', + spec: { + fontFamily: 'Chalkboard, serif', + fontWeight: 'bolder', + fontStyle: 'normal', + textDecoration: 'underline', + color: 'pink', + textAlign: 'center', + fontSize: '14px', + lineHeight: '21px', + }, + css: + 'font-family:Chalkboard, serif;font-weight:bolder;font-style:normal;text-decoration:underline;color:pink;text-align:center;font-size:14px;line-height:21px', +}; diff --git a/x-pack/plugins/canvas/__fixtures__/function_specs.ts b/x-pack/plugins/canvas/__fixtures__/function_specs.ts index ff6c56439208..a307d420e888 100644 --- a/x-pack/plugins/canvas/__fixtures__/function_specs.ts +++ b/x-pack/plugins/canvas/__fixtures__/function_specs.ts @@ -9,8 +9,10 @@ import { functions as browserFns } from '../canvas_plugin_src/functions/browser' import { ExpressionFunction } from '../../../../src/plugins/expressions'; import { initFunctions } from '../public/functions'; import { functionSpecs as shapeFunctionSpecs } from '../../../../src/plugins/expression_shape/__fixtures__'; +import { functionSpecs as imageFunctionSpecs } from '../../../../src/plugins/expression_image/__fixtures__'; +import { functionSpecs as metricFunctionSpecs } from '../../../../src/plugins/expression_metric/__fixtures__'; export const functionSpecs = browserFns .concat(...(initFunctions({} as any) as any)) .map((fn) => new ExpressionFunction(fn())) - .concat(...shapeFunctionSpecs); + .concat(...shapeFunctionSpecs, ...imageFunctionSpecs, ...metricFunctionSpecs); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js index dcb6035dbb68..823ee074a9dd 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js @@ -5,9 +5,11 @@ * 2.0. */ -import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; +import { + functionWrapper, + fontStyle, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from '../common/__fixtures__/test_tables'; -import { fontStyle } from '../common/__fixtures__/test_styles'; import { markdown } from './markdown'; describe('markdown', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts index 3de3275ebb23..a34930a5d18a 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts @@ -33,7 +33,6 @@ import { joinRows } from './join_rows'; import { lt } from './lt'; import { lte } from './lte'; import { mapCenter } from './map_center'; -import { metric } from './metric'; import { neq } from './neq'; import { ply } from './ply'; import { progress } from './progress'; @@ -82,7 +81,6 @@ export const functions = [ lte, joinRows, mapCenter, - metric, neq, ply, progress, diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.ts deleted file mode 100644 index 3b9d5216dd76..000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.ts +++ /dev/null @@ -1,72 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { openSans } from '../../../common/lib/fonts'; -import { Render, Style, ExpressionFunctionDefinition } from '../../../types'; -import { getFunctionHelp } from '../../../i18n'; - -type Input = number | string | null; - -interface Arguments { - label: string; - metricFont: Style; - metricFormat: string; - labelFont: Style; -} - -export function metric(): ExpressionFunctionDefinition< - 'metric', - Input, - Arguments, - Render -> { - const { help, args: argHelp } = getFunctionHelp().metric; - - return { - name: 'metric', - aliases: [], - type: 'render', - inputTypes: ['number', 'string', 'null'], - help, - args: { - label: { - types: ['string'], - aliases: ['_', 'text', 'description'], - help: argHelp.label, - default: '""', - }, - labelFont: { - types: ['style'], - help: argHelp.labelFont, - default: `{font size=14 family="${openSans.value}" color="#000000" align=center}`, - }, - metricFont: { - types: ['style'], - help: argHelp.metricFont, - default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`, - }, - metricFormat: { - types: ['string'], - aliases: ['format'], - help: argHelp.metricFormat, - }, - }, - fn: (input, { label, labelFont, metricFont, metricFormat }) => { - return { - type: 'render', - as: 'metric', - value: { - metric: input === null ? '?' : input, - label, - labelFont, - metricFont, - metricFormat, - }, - }; - }, - }; -} diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js index 5f44428abf03..567421a969d9 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js @@ -6,10 +6,12 @@ */ import expect from '@kbn/expect'; -import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; +import { + functionWrapper, + fontStyle, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { getFunctionErrors } from '../../../i18n'; import { progress } from './progress'; -import { fontStyle } from './__fixtures__/test_styles'; const errors = getFunctionErrors().progress; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js index 42e5150b0363..e04b4a4cc146 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js @@ -5,9 +5,11 @@ * 2.0. */ -import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib'; +import { + functionWrapper, + fontStyle, +} from '../../../../../../src/plugins/presentation_util/common/lib'; import { testTable } from './__fixtures__/test_tables'; -import { fontStyle } from './__fixtures__/test_styles'; import { table } from './table'; describe('table', () => { diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts index 80ca5e68860b..5ec2af8d7773 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts @@ -6,13 +6,12 @@ */ import { markdown } from './markdown'; -import { metric } from './metric'; import { pie } from './pie'; import { plot } from './plot'; import { progress } from './progress'; import { text } from './text'; import { table } from './table'; -export const renderFunctions = [markdown, metric, pie, plot, progress, table, text]; +export const renderFunctions = [markdown, pie, plot, progress, table, text]; export const renderFunctionFactories = []; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts index eab3b88b0fe2..57d5ae69c99b 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts @@ -6,16 +6,18 @@ */ import { imageRenderer } from '../../../../../src/plugins/expression_image/public'; +import { metricRenderer } from '../../../../../src/plugins/expression_metric/public'; import { errorRenderer, debugRenderer } from '../../../../../src/plugins/expression_error/public'; import { repeatImageRenderer } from '../../../../../src/plugins/expression_repeat_image/public'; import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public'; import { shapeRenderer } from '../../../../../src/plugins/expression_shape/public'; export const renderFunctions = [ - revealImageRenderer, debugRenderer, errorRenderer, imageRenderer, + metricRenderer, + revealImageRenderer, shapeRenderer, repeatImageRenderer, ]; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/__stories__/metric.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/__stories__/metric.stories.tsx deleted file mode 100644 index e12701841116..000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/__stories__/metric.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { storiesOf } from '@storybook/react'; -import React, { CSSProperties } from 'react'; -import { Metric } from '../metric'; - -const labelFontSpec: CSSProperties = { - fontFamily: "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif", - fontWeight: 'normal', - fontStyle: 'italic', - textDecoration: 'none', - textAlign: 'center', - fontSize: '24px', - lineHeight: '1', - color: '#000000', -}; - -const metricFontSpec: CSSProperties = { - fontFamily: - "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif", - fontWeight: 'bold', - fontStyle: 'normal', - textDecoration: 'none', - textAlign: 'center', - fontSize: '48px', - lineHeight: '1', - color: '#b83c6f', -}; - -storiesOf('renderers/Metric', module) - .addDecorator((story) => ( -
- {story()} -
- )) - .add('with null metric', () => ) - .add('with number metric', () => ( - - )) - .add('with string metric', () => ( - - )) - .add('with label', () => ( - - )) - .add('with number metric and a specified format', () => ( - - )) - .add('with formatted string metric and a specified format', () => ( - - )) - .add('with invalid metricFont', () => ( - - )); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts deleted file mode 100644 index a69e0358d69c..000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -export { Metric } from './metric'; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx deleted file mode 100644 index b3c0830c3849..000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React, { CSSProperties } from 'react'; -import ReactDOM from 'react-dom'; -import { RendererFactory, Style } from '../../../types'; -import { RendererStrings } from '../../../i18n'; -import { Metric } from './component/metric'; - -const { metric: strings } = RendererStrings; - -export interface Config { - /** The text to display under the metric */ - label: string; - /** Font settings for the label */ - labelFont: Style; - /** Value of the metric to display */ - metric: string | number | null; - /** Font settings for the metric */ - metricFont: Style; - /** NumeralJS format string */ - metricFormat: string; -} - -export const metric: RendererFactory = () => ({ - name: 'metric', - displayName: strings.getDisplayName(), - help: strings.getHelpDescription(), - reuseDomNode: true, - render(domNode, config, handlers) { - ReactDOM.render( - , - domNode, - () => handlers.done() - ); - - handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode)); - }, -}); diff --git a/x-pack/plugins/canvas/i18n/functions/dict/metric.ts b/x-pack/plugins/canvas/i18n/functions/dict/metric.ts deleted file mode 100644 index 44b9311fb354..000000000000 --- a/x-pack/plugins/canvas/i18n/functions/dict/metric.ts +++ /dev/null @@ -1,50 +0,0 @@ -/* - * 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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { i18n } from '@kbn/i18n'; -import { metric } from '../../../canvas_plugin_src/functions/common/metric'; -import { FunctionHelp } from '../function_help'; -import { FunctionFactory } from '../../../types'; -import { FONT_FAMILY, FONT_WEIGHT, CSS, NUMERALJS } from '../../constants'; - -export const help: FunctionHelp> = { - help: i18n.translate('xpack.canvas.functions.metricHelpText', { - defaultMessage: 'Displays a number over a label.', - }), - args: { - label: i18n.translate('xpack.canvas.functions.metric.args.labelHelpText', { - defaultMessage: 'The text describing the metric.', - }), - labelFont: i18n.translate('xpack.canvas.functions.metric.args.labelFontHelpText', { - defaultMessage: - 'The {CSS} font properties for the label. For example, {FONT_FAMILY} or {FONT_WEIGHT}.', - values: { - CSS, - FONT_FAMILY, - FONT_WEIGHT, - }, - }), - metricFont: i18n.translate('xpack.canvas.functions.metric.args.metricFontHelpText', { - defaultMessage: - 'The {CSS} font properties for the metric. For example, {FONT_FAMILY} or {FONT_WEIGHT}.', - values: { - CSS, - FONT_FAMILY, - FONT_WEIGHT, - }, - }), - // TODO: Find a way to generate the docs URL here - metricFormat: i18n.translate('xpack.canvas.functions.metric.args.metricFormatHelpText', { - defaultMessage: 'A {NUMERALJS} format string. For example, {example1} or {example2}.', - values: { - example1: '`"0.0a"`', - example2: '`"0%"`', - NUMERALJS, - }, - }), - }, -}; diff --git a/x-pack/plugins/canvas/i18n/functions/function_help.ts b/x-pack/plugins/canvas/i18n/functions/function_help.ts index b0389f6b93b1..f2ca1da1576a 100644 --- a/x-pack/plugins/canvas/i18n/functions/function_help.ts +++ b/x-pack/plugins/canvas/i18n/functions/function_help.ts @@ -46,7 +46,6 @@ import { help as lt } from './dict/lt'; import { help as lte } from './dict/lte'; import { help as mapCenter } from './dict/map_center'; import { help as markdown } from './dict/markdown'; -import { help as metric } from './dict/metric'; import { help as neq } from './dict/neq'; import { help as pie } from './dict/pie'; import { help as plot } from './dict/plot'; @@ -203,7 +202,6 @@ export const getFunctionHelp = (): FunctionHelpDict => ({ lte, mapCenter, markdown, - metric, neq, pie, plot, diff --git a/x-pack/plugins/canvas/i18n/renderers.ts b/x-pack/plugins/canvas/i18n/renderers.ts index faa43fe03817..03e0ab3a19ae 100644 --- a/x-pack/plugins/canvas/i18n/renderers.ts +++ b/x-pack/plugins/canvas/i18n/renderers.ts @@ -69,16 +69,6 @@ export const RendererStrings = { }, }), }, - metric: { - getDisplayName: () => - i18n.translate('xpack.canvas.renderer.metric.displayName', { - defaultMessage: 'Metric', - }), - getHelpDescription: () => - i18n.translate('xpack.canvas.renderer.metric.helpDescription', { - defaultMessage: 'Render a number over a label', - }), - }, pie: { getDisplayName: () => i18n.translate('xpack.canvas.renderer.pie.displayName', { diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json index acede1c9c2aa..263284564de8 100644 --- a/x-pack/plugins/canvas/kibana.json +++ b/x-pack/plugins/canvas/kibana.json @@ -12,6 +12,7 @@ "embeddable", "expressionError", "expressionImage", + "expressionMetric", "expressionRepeatImage", "expressionRevealImage", "expressionShape", diff --git a/x-pack/plugins/canvas/public/functions/pie.test.js b/x-pack/plugins/canvas/public/functions/pie.test.js index f1ce8786f2c6..ef180181701c 100644 --- a/x-pack/plugins/canvas/public/functions/pie.test.js +++ b/x-pack/plugins/canvas/public/functions/pie.test.js @@ -6,9 +6,8 @@ */ import { testPie } from '../../canvas_plugin_src/functions/common/__fixtures__/test_pointseries'; -import { functionWrapper } from '../../../../../src/plugins/presentation_util/public'; +import { functionWrapper, fontStyle } from '../../../../../src/plugins/presentation_util/public'; import { - fontStyle, grayscalePalette, seriesStyle, } from '../../canvas_plugin_src/functions/common/__fixtures__/test_styles'; diff --git a/x-pack/plugins/canvas/public/functions/plot.test.js b/x-pack/plugins/canvas/public/functions/plot.test.js index a2eef889aa07..b354c4c02b2f 100644 --- a/x-pack/plugins/canvas/public/functions/plot.test.js +++ b/x-pack/plugins/canvas/public/functions/plot.test.js @@ -5,10 +5,9 @@ * 2.0. */ -import { functionWrapper } from '../../../../../src/plugins/presentation_util/public'; +import { functionWrapper, fontStyle } from '../../../../../src/plugins/presentation_util/public'; import { testPlot } from '../../canvas_plugin_src/functions/common/__fixtures__/test_pointseries'; import { - fontStyle, grayscalePalette, yAxisConfig, xAxisConfig, diff --git a/x-pack/plugins/canvas/public/functions/plot/get_font_spec.test.js b/x-pack/plugins/canvas/public/functions/plot/get_font_spec.test.js index e795ce82e234..7a142a02412c 100644 --- a/x-pack/plugins/canvas/public/functions/plot/get_font_spec.test.js +++ b/x-pack/plugins/canvas/public/functions/plot/get_font_spec.test.js @@ -4,8 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ - -import { fontStyle } from '../../../canvas_plugin_src/functions/common/__fixtures__/test_styles'; +import { fontStyle } from '../../../../../../src/plugins/presentation_util/common/lib'; import { defaultSpec, getFontSpec } from './get_font_spec'; describe('getFontSpec', () => { diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js index 9b86ebddbd9b..0217351af9cb 100644 --- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js +++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js @@ -6,7 +6,6 @@ */ import { markdown } from '../canvas_plugin_src/renderers/markdown'; -import { metric } from '../canvas_plugin_src/renderers/metric'; import { pie } from '../canvas_plugin_src/renderers/pie'; import { plot } from '../canvas_plugin_src/renderers/plot'; import { progress } from '../canvas_plugin_src/renderers/progress'; @@ -20,6 +19,7 @@ import { import { repeatImageRenderer as repeatImage } from '../../../../src/plugins/expression_repeat_image/public'; import { revealImageRenderer as revealImage } from '../../../../src/plugins/expression_reveal_image/public'; import { shapeRenderer as shape } from '../../../../src/plugins/expression_shape/public'; +import { metricRenderer as metric } from '../../../../src/plugins/expression_metric/public'; /** * This is a collection of renderers which are bundled with the runtime. If diff --git a/x-pack/plugins/canvas/tsconfig.json b/x-pack/plugins/canvas/tsconfig.json index 6d57aee565c8..384a7716657f 100644 --- a/x-pack/plugins/canvas/tsconfig.json +++ b/x-pack/plugins/canvas/tsconfig.json @@ -33,6 +33,7 @@ { "path": "../../../src/plugins/expressions/tsconfig.json" }, { "path": "../../../src/plugins/expression_error/tsconfig.json" }, { "path": "../../../src/plugins/expression_image/tsconfig.json" }, + { "path": "../../../src/plugins/expression_metric/tsconfig.json" }, { "path": "../../../src/plugins/expression_repeat_image/tsconfig.json" }, { "path": "../../../src/plugins/expression_reveal_image/tsconfig.json" }, { "path": "../../../src/plugins/expression_shape/tsconfig.json" }, diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index dabfc072ca2c..b50796410277 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -6727,11 +6727,11 @@ "xpack.canvas.functions.markdown.args.fontHelpText": "コンテンツの {CSS} フォントプロパティです。たとえば、{fontFamily} または {fontWeight} です。", "xpack.canvas.functions.markdown.args.openLinkHelpText": "新しいタブでリンクを開くためのtrue/false値。デフォルト値は「false」です。「true」に設定するとすべてのリンクが新しいタブで開くようになります。", "xpack.canvas.functions.markdownHelpText": "{MARKDOWN} テキストをレンダリングするエレメントを追加します。ヒント：単一の数字、メトリック、テキストの段落には {markdownFn} 関数を使います。", - "xpack.canvas.functions.metric.args.labelFontHelpText": "ラベルの {CSS} フォントプロパティです。例：{FONT_FAMILY} または {FONT_WEIGHT}。", - "xpack.canvas.functions.metric.args.labelHelpText": "メトリックを説明するテキストです。", - "xpack.canvas.functions.metric.args.metricFontHelpText": "メトリックの {CSS} フォントプロパティです。例：{FONT_FAMILY} または {FONT_WEIGHT}。", - "xpack.canvas.functions.metric.args.metricFormatHelpText": "{NUMERALJS} 形式の文字列。例：{example1} または {example2}。", - "xpack.canvas.functions.metricHelpText": "ラベルの上に数字を表示します。", + "expressionMetric.functions.metric.args.labelFontHelpText": "ラベルの {CSS} フォントプロパティです。例：{FONT_FAMILY} または {FONT_WEIGHT}。", + "expressionMetric.functions.metric.args.labelHelpText": "メトリックを説明するテキストです。", + "expressionMetric.functions.metric.args.metricFontHelpText": "メトリックの {CSS} フォントプロパティです。例：{FONT_FAMILY} または {FONT_WEIGHT}。", + "expressionMetric.functions.metric.args.metricFormatHelpText": "{NUMERALJS} 形式の文字列。例：{example1} または {example2}。", + "expressionMetric.functions.metricHelpText": "ラベルの上に数字を表示します。", "xpack.canvas.functions.neq.args.valueHelpText": "{CONTEXT} と比較される値です。", "xpack.canvas.functions.neqHelpText": "{CONTEXT} が引数と等しくないかを戻します。", "xpack.canvas.functions.pie.args.fontHelpText": "ラベルの {CSS} フォントプロパティです。例：{FONT_FAMILY} または {FONT_WEIGHT}。", @@ -6963,8 +6963,8 @@ "expressionImage.renderer.image.helpDescription": "画像をレンダリングします", "xpack.canvas.renderer.markdown.displayName": "マークダウン", "xpack.canvas.renderer.markdown.helpDescription": "{MARKDOWN} インプットを使用して {HTML} を表示", - "xpack.canvas.renderer.metric.displayName": "メトリック", - "xpack.canvas.renderer.metric.helpDescription": "ラベルの上に数字をレンダリングします", + "expressionMetric.renderer.metric.displayName": "メトリック", + "expressionMetric.renderer.metric.helpDescription": "ラベルの上に数字をレンダリングします", "xpack.canvas.renderer.pie.displayName": "円グラフ", "xpack.canvas.renderer.pie.helpDescription": "データから円グラフをレンダリングします", "xpack.canvas.renderer.plot.displayName": "座標プロット", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3607fce88b98..595bbab73250 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -6768,11 +6768,11 @@ "xpack.canvas.functions.markdown.args.fontHelpText": "内容的 {CSS} 字体属性。例如 {fontFamily} 或 {fontWeight}。", "xpack.canvas.functions.markdown.args.openLinkHelpText": "用于在新标签页中打开链接的 true 或 false 值。默认值为 `false`。设置为 `true` 时将在新标签页中打开所有链接。", "xpack.canvas.functions.markdownHelpText": "添加呈现 {MARKDOWN} 文本的元素。提示：将 {markdownFn} 函数用于单个数字、指标和文本段落。", - "xpack.canvas.functions.metric.args.labelFontHelpText": "标签的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。", - "xpack.canvas.functions.metric.args.labelHelpText": "描述指标的文本。", - "xpack.canvas.functions.metric.args.metricFontHelpText": "指标的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。", - "xpack.canvas.functions.metric.args.metricFormatHelpText": "{NUMERALJS} 格式字符串。例如 {example1} 或 {example2}。", - "xpack.canvas.functions.metricHelpText": "在标签上显示数字。", + "expressionMetric.functions.metric.args.labelFontHelpText": "标签的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。", + "expressionMetric.functions.metric.args.labelHelpText": "描述指标的文本。", + "expressionMetric.functions.metric.args.metricFontHelpText": "指标的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。", + "expressionMetric.functions.metric.args.metricFormatHelpText": "{NUMERALJS} 格式字符串。例如 {example1} 或 {example2}。", + "expressionMetric.functions.metricHelpText": "在标签上显示数字。", "xpack.canvas.functions.neq.args.valueHelpText": "与 {CONTEXT} 比较的值。", "xpack.canvas.functions.neqHelpText": "返回 {CONTEXT} 是否不等于参数。", "xpack.canvas.functions.pie.args.fontHelpText": "标签的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。", @@ -7004,8 +7004,8 @@ "expressionImage.renderer.image.helpDescription": "呈现图像", "xpack.canvas.renderer.markdown.displayName": "Markdown", "xpack.canvas.renderer.markdown.helpDescription": "使用 {MARKDOWN} 输入呈现 {HTML}", - "xpack.canvas.renderer.metric.displayName": "指标", - "xpack.canvas.renderer.metric.helpDescription": "在标签上呈现数字", + "expressionMetric.renderer.metric.displayName": "指标", + "expressionMetric.renderer.metric.helpDescription": "在标签上呈现数字", "xpack.canvas.renderer.pie.displayName": "饼图", "xpack.canvas.renderer.pie.helpDescription": "根据您的数据呈现饼图", "xpack.canvas.renderer.plot.displayName": "坐标图",