adds metric_vis_renderer (#57694)

src/plugins/expressions/common/ast/build_function.test.ts

@@ -79,6 +79,11 @@ describe('buildExpressionFunction()', () => {
     `);
   });
 
+  test('ignores any args in initial state which value is undefined', () => {
+    const fn = buildExpressionFunction('hello', { world: undefined });
+    expect(fn.arguments).not.toHaveProperty('world');
+  });
+
   test('returns all expected properties', () => {
     const fn = buildExpressionFunction('hello', { world: [true] });
     expect(Object.keys(fn)).toMatchInlineSnapshot(`
@@ -264,6 +269,18 @@ describe('buildExpressionFunction()', () => {
       `);
     });
 
+    test('does not add new argument if the value is undefined', () => {
+      const fn = buildExpressionFunction('hello', { world: [true] });
+      fn.addArgument('foo', undefined);
+      expect(fn.toAst().arguments).toMatchInlineSnapshot(`
+        Object {
+          "world": Array [
+            true,
+          ],
+        }
+      `);
+    });
+
     test('mutates a function already associated with an expression', () => {
       const fn = buildExpressionFunction('hello', { world: [true] });
       const exp = buildExpression([fn]);

src/plugins/expressions/common/ast/build_function.ts

@@ -183,8 +183,10 @@ export function buildExpressionFunction<
       acc[key] = value.map((v) => {
         return isExpressionAst(v) ? buildExpression(v) : v;
       });
-    } else {
+    } else if (value !== undefined) {
       acc[key] = isExpressionAst(value) ? [buildExpression(value)] : [value];
+    } else {
+      delete acc[key];
     }
     return acc;
   }, initialArgs as FunctionBuilderArguments<FnDef>);
@@ -195,10 +197,12 @@ export function buildExpressionFunction<
     arguments: args,
 
     addArgument(key, value) {
-      if (!args.hasOwnProperty(key)) {
-        args[key] = [];
+      if (value !== undefined) {
+        if (!args.hasOwnProperty(key)) {
+          args[key] = [];
+        }
+        args[key].push(value);
       }
-      args[key].push(value);
       return this;
     },
 

src/plugins/vis_type_metric/kibana.json

@@ -4,6 +4,6 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["data", "visualizations", "charts","expressions"],
+  "requiredPlugins": ["data", "visualizations", "charts", "expressions"],
   "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }

src/plugins/vis_type_metric/public/components/metric_vis_component.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { MetricVisComponent, MetricVisComponentProps } from './metric_vis_component';
-import { ExprVis } from '../../../visualizations/public';
 
 jest.mock('../services', () => ({
   getFormatService: () => ({
@@ -41,29 +40,30 @@ const baseVisData = {
 } as any;
 
 describe('MetricVisComponent', function () {
-  const vis: ExprVis = {
-    params: {
-      metric: {
-        colorSchema: 'Green to Red',
-        colorsRange: [{ from: 0, to: 1000 }],
-        style: {},
-        labels: {
-          show: true,
-        },
-      },
-      dimensions: {
-        metrics: [{ accessor: 0 }],
-        bucket: null,
+  const visParams = {
+    type: 'metric',
+    addTooltip: false,
+    addLegend: false,
+    metric: {
+      colorSchema: 'Green to Red',
+      colorsRange: [{ from: 0, to: 1000 }],
+      style: {},
+      labels: {
+        show: true,
       },
     },
-  } as any;
+    dimensions: {
+      metrics: [{ accessor: 0 } as any],
+      bucket: undefined,
+    },
+  };
 
   const getComponent = (propOverrides: Partial<Props> = {} as Partial<Props>) => {
     const props: Props = {
-      vis,
-      visParams: vis.params as any,
+      visParams: visParams as any,
       visData: baseVisData,
       renderComplete: jest.fn(),
+      fireEvent: jest.fn(),
       ...propOverrides,
     };
 
@@ -88,9 +88,9 @@ describe('MetricVisComponent', function () {
         rows: [{ 'col-0': 182, 'col-1': 445842.4634666484 }],
       },
       visParams: {
-        ...vis.params,
+        ...visParams,
         dimensions: {
-          ...vis.params.dimensions,
+          ...visParams.dimensions,
           metrics: [{ accessor: 0 }, { accessor: 1 }],
         },
       },

src/plugins/vis_type_metric/public/components/metric_vis_component.tsx

@@ -27,13 +27,13 @@ import { KibanaDatatable } from '../../../expressions/public';
 import { getHeatmapColors } from '../../../charts/public';
 import { VisParams, MetricVisMetric } from '../types';
 import { getFormatService } from '../services';
-import { SchemaConfig, ExprVis } from '../../../visualizations/public';
+import { SchemaConfig } from '../../../visualizations/public';
 import { Range } from '../../../expressions/public';
 
 export interface MetricVisComponentProps {
   visParams: VisParams;
   visData: Input;
-  vis: ExprVis;
+  fireEvent: (event: any) => void;
   renderComplete: () => void;
 }
 
@@ -166,10 +166,17 @@ export class MetricVisComponent extends Component<MetricVisComponentProps> {
       return;
     }
     const table = this.props.visData;
-    this.props.vis.API.events.filter({
-      table,
-      column: dimensions.bucket.accessor,
-      row: metric.rowIndex,
+    this.props.fireEvent({
+      name: 'filterBucket',
+      data: {
+        data: [
+          {
+            table,
+            column: dimensions.bucket.accessor,
+            row: metric.rowIndex,
+          },
+        ],
+      },
     });
   };
 
@@ -199,6 +206,6 @@ export class MetricVisComponent extends Component<MetricVisComponentProps> {
       const metrics = this.processTableGroups(this.props.visData);
       metricsHtml = metrics.map(this.renderMetric);
     }
-    return <div className="mtrVis">{metricsHtml}</div>;
+    return metricsHtml;
   }
 }

src/plugins/vis_type_metric/public/metric_vis_fn.ts

@@ -53,12 +53,14 @@ interface RenderValue {
   params: any;
 }
 
-export const createMetricVisFn = (): ExpressionFunctionDefinition<
+export type MetricVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
   'metricVis',
   Input,
   Arguments,
   Render<RenderValue>
-> => ({
+>;
+
+export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
   name: 'metricVis',
   type: 'render',
   inputTypes: ['kibana_datatable'],
@@ -175,7 +177,7 @@ export const createMetricVisFn = (): ExpressionFunctionDefinition<
 
     return {
       type: 'render',
-      as: 'visualization',
+      as: 'metric_vis',
       value: {
         visData: input,
         visType,