[Canvas] Expression events.

.i18nrc.json

@@ -16,6 +16,7 @@
     "esUi": "src/plugins/es_ui_shared",
     "devTools": "src/plugins/dev_tools",
     "expressions": "src/plugins/expressions",
+    "expressionRevealImage": "src/plugins/expression_reveal_image",
     "inputControl": "src/plugins/input_control_vis",
     "inspector": "src/plugins/inspector",
     "inspectorViews": "src/legacy/core_plugins/inspector_views",

docs/developer/plugin-list.asciidoc

@@ -72,6 +72,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module.
 
 
+|{kib-repo}blob/{branch}/src/plugins/expression_reveal_image/README.md[expressionRevealImage]
+|Expression Reveal Image plugin is an extracted Canvas chart. It is registrating the revealImage chart, expression elements, functions and views to canvas and expression plugins.
+
+
 |<<kibana-expressions-plugin>>
 |Expression pipeline is a chain of functions that *pipe* its output to the
 input of the next function. Functions can be configured using arguments provided

docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md

@@ -19,6 +19,7 @@ export interface IInterpreterRenderHandlers
 |  [getRenderMode](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.getrendermode.md) | <code>() =&gt; RenderMode</code> |  |
 |  [hasCompatibleActions](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.hascompatibleactions.md) | <code>(event: any) =&gt; Promise&lt;boolean&gt;</code> |  |
 |  [isSyncColorsEnabled](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.issynccolorsenabled.md) | <code>() =&gt; boolean</code> |  |
+|  [on](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.on.md) | <code>(this: any, event: any, fn: (...args: any) =&gt; void) =&gt; void</code> |  |
 |  [onDestroy](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.ondestroy.md) | <code>(fn: () =&gt; void) =&gt; void</code> |  |
 |  [reload](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.reload.md) | <code>() =&gt; void</code> |  |
 |  [uiState](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md) | <code>unknown</code> | This uiState interface is actually <code>PersistedState</code> from the visualizations plugin, but expressions cannot know about vis or it creates a mess of circular dependencies. Downstream consumers of the uiState handler will need to cast for now. |

docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.on.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-expressions-public](./kibana-plugin-plugins-expressions-public.md) &gt; [IInterpreterRenderHandlers](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md) &gt; [on](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.on.md)
+
+## IInterpreterRenderHandlers.on property
+
+<b>Signature:</b>
+
+```typescript
+on: (this: any, event: any, fn: (...args: any) => void) => void;
+```

docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md

@@ -19,6 +19,7 @@ export interface IInterpreterRenderHandlers
 |  [getRenderMode](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.getrendermode.md) | <code>() =&gt; RenderMode</code> |  |
 |  [hasCompatibleActions](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.hascompatibleactions.md) | <code>(event: any) =&gt; Promise&lt;boolean&gt;</code> |  |
 |  [isSyncColorsEnabled](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.issynccolorsenabled.md) | <code>() =&gt; boolean</code> |  |
+|  [on](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.on.md) | <code>(this: any, event: any, fn: (...args: any) =&gt; void) =&gt; void</code> |  |
 |  [onDestroy](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.ondestroy.md) | <code>(fn: () =&gt; void) =&gt; void</code> |  |
 |  [reload](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.reload.md) | <code>() =&gt; void</code> |  |
 |  [uiState](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md) | <code>unknown</code> | This uiState interface is actually <code>PersistedState</code> from the visualizations plugin, but expressions cannot know about vis or it creates a mess of circular dependencies. Downstream consumers of the uiState handler will need to cast for now. |

docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.on.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-expressions-server](./kibana-plugin-plugins-expressions-server.md) &gt; [IInterpreterRenderHandlers](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md) &gt; [on](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.on.md)
+
+## IInterpreterRenderHandlers.on property
+
+<b>Signature:</b>
+
+```typescript
+on: (this: any, event: any, fn: (...args: any) => void) => void;
+```

packages/kbn-optimizer/limits.yml

@@ -99,7 +99,7 @@ pageLoadAssetSize:
   watcher: 43598
   runtimeFields: 41752
   stackAlerts: 29684
-  presentationUtil: 49767
+  presentationUtil: 94301
   spacesOss: 18817
   indexPatternFieldEditor: 90489
   osquery: 107090
@@ -110,4 +110,5 @@ pageLoadAssetSize:
   timelines: 28613
   screenshotMode: 17856
   visTypePie: 35583
+  expressionRevealImage: 62826
   cases: 144442

src/dev/storybook/aliases.ts

@@ -17,6 +17,7 @@ export const storybookAliases = {
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
   data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
+  expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',

src/plugins/expression_reveal_image/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "expressionRevealImage",
+  "paths": {
+    "expressionRevealImage": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

src/plugins/expression_reveal_image/.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;

src/plugins/expression_reveal_image/README.md

@@ -0,0 +1,9 @@
+# expressionRevealImage
+
+Expression Reveal Image plugin is an extracted Canvas chart. It is registrating the `revealImage` chart, expression elements, functions and views to canvas and expression plugins.   
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.

src/plugins/expression_reveal_image/common/constants.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 const PLUGIN_ID = 'expressionRevealImage';
+export const PLUGIN_NAME = 'expressionRevealImage';

src/plugins/expression_reveal_image/common/i18n/constants.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 const BASE64 = '`base64`';
+export const URL = 'URL';

x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts → src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts

@@ -1,23 +1,21 @@
 /*
  * 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 { i18n } from '@kbn/i18n';
-import { revealImage } from '../../../canvas_plugin_src/functions/common/revealImage';
-import { FunctionHelp } from '../function_help';
-import { FunctionFactory } from '../../../types';
 import { Position } from '../../../types';
 import { BASE64, URL } from '../../constants';
 
-export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
-  help: i18n.translate('xpack.canvas.functions.revealImageHelpText', {
+export const help = {
+  help: i18n.translate('expressionRevealImage.functions.revealImageHelpText', {
     defaultMessage: 'Configures an image reveal element.',
   }),
   args: {
-    image: i18n.translate('xpack.canvas.functions.revealImage.args.imageHelpText', {
+    image: i18n.translate('expressionRevealImage.functions.revealImage.args.imageHelpText', {
       defaultMessage:
         'The image to reveal. Provide an image asset as a {BASE64} data {URL}, ' +
         'or pass in a sub-expression.',
@@ -26,16 +24,19 @@ export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
         URL,
       },
     }),
-    emptyImage: i18n.translate('xpack.canvas.functions.revealImage.args.emptyImageHelpText', {
-      defaultMessage:
-        'An optional background image to reveal over. ' +
-        'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.',
-      values: {
-        BASE64,
-        URL,
-      },
-    }),
-    origin: i18n.translate('xpack.canvas.functions.revealImage.args.originHelpText', {
+    emptyImage: i18n.translate(
+      'expressionRevealImage.functions.revealImage.args.emptyImageHelpText',
+      {
+        defaultMessage:
+          'An optional background image to reveal over. ' +
+          'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.',
+        values: {
+          BASE64,
+          URL,
+        },
+      }
+    ),
+    origin: i18n.translate('expressionRevealImage.functions.revealImage.args.originHelpText', {
       defaultMessage: 'The position to start the image fill. For example, {list}, or {end}.',
       values: {
         list: Object.values(Position)
@@ -50,7 +51,7 @@ export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
 export const errors = {
   invalidPercent: (percent: number) =>
     new Error(
-      i18n.translate('xpack.canvas.functions.revealImage.invalidPercentErrorMessage', {
+      i18n.translate('expressionRevealImage.functions.revealImage.invalidPercentErrorMessage', {
         defaultMessage: "Invalid value: '{percent}'. Percentage must be between 0 and 1",
         values: {
           percent,

src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.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 { errors as revealImage } from './dict/reveal_image';
+
+export const getFunctionErrors = () => ({
+  revealImage,
+});

src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { help as revealImage } from './dict/reveal_image';
+
+/**
+ * Help text for Canvas Functions should be properly localized. This function will
+ * return a dictionary of help strings, organized by `ExpressionFunctionDefinition`
+ * specification and then by available arguments within each `ExpressionFunctionDefinition`.
+ *
+ * This a function, rather than an object, to future-proof string initialization,
+ * if ever necessary.
+ */
+export const getFunctionHelp = () => ({
+  revealImage,
+});

src/plugins/expression_reveal_image/common/i18n/expression_functions/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 './function_help';
+export * from './function_errors';

src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/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 { strings as revealImage } from './reveal_image';

src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts

@@ -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.
+ */
+import { i18n } from '@kbn/i18n';
+
+export const strings = {
+  getDisplayName: () =>
+    i18n.translate('expressionRevealImage.renderer.revealImage.displayName', {
+      defaultMessage: 'Image reveal',
+    }),
+  getHelpDescription: () =>
+    i18n.translate('expressionRevealImage.renderer.revealImage.helpDescription', {
+      defaultMessage: 'Reveal a percentage of an image to make a custom gauge-style chart',
+    }),
+};

src/plugins/expression_reveal_image/common/i18n/expression_renderers/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 './renderer_strings';

src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { revealImage } from './dict';
+
+/**
+ * Help text for Canvas Functions should be properly localized. This function will
+ * return a dictionary of help strings, organized by `ExpressionFunctionDefinition`
+ * specification and then by available arguments within each `ExpressionFunctionDefinition`.
+ *
+ * This a function, rather than an object, to future-proof string initialization,
+ * if ever necessary.
+ */
+export const getRendererStrings = () => ({
+  revealImage,
+});

src/plugins/expression_reveal_image/common/i18n/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';

src/plugins/expression_reveal_image/common/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 './constants';

src/plugins/expression_reveal_image/common/types/expression_functions.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 } from 'src/plugins/expressions';
+
+export enum Origin {
+  TOP = 'top',
+  LEFT = 'left',
+  BOTTOM = 'bottom',
+  RIGHT = 'right',
+}
+
+interface Arguments {
+  image: string | null;
+  emptyImage: string | null;
+  origin: Origin;
+}
+
+export interface Output {
+  image: string;
+  emptyImage: string;
+  origin: Origin;
+  percent: number;
+}
+
+export type ExpressionRevealImageFunction = () => ExpressionFunctionDefinition<
+  'revealImage',
+  number,
+  Arguments,
+  ExpressionValueRender<Output>
+>;
+
+export enum Position {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right',
+}

src/plugins/expression_reveal_image/common/types/expression_renderers.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.
+ */
+
+export type OriginString = 'bottom' | 'left' | 'top' | 'right';
+export interface RevealImageRendererConfig {
+  percent: number;
+  origin?: OriginString;
+  image?: string;
+  emptyImage?: string;
+}
+
+export interface NodeDimensions {
+  width: number;
+  height: number;
+}
+
+export interface HandlerEmitters {
+  resize?: (size: { height: number; width: number }) => void;
+}