[Lens] move gauge to chart expression plugin (elastic#120623)

* gauge_expression

* fix

* CI fix

* make plugin required to use its methods

* move non-types from types

* share icon

* bundle, plugin

* load gaugeComponent async

* fix types

* async heatmap

* don't use d3

* optimizations

* feedback

* types

* adjusting the tests to the new max

Co-authored-by: Kibana Machine <[email protected]>

.github/CODEOWNERS

@@ -39,6 +39,7 @@
 /src/plugins/chart_expressions/expression_tagcloud/ @elastic/kibana-vis-editors
 /src/plugins/chart_expressions/expression_metric/ @elastic/kibana-vis-editors
 /src/plugins/chart_expressions/expression_heatmap/ @elastic/kibana-vis-editors
+/src/plugins/chart_expressions/expression_gauge/ @elastic/kibana-vis-editors
 /src/plugins/url_forwarding/ @elastic/kibana-vis-editors
 /packages/kbn-tinymath/ @elastic/kibana-vis-editors
 /x-pack/test/functional/apps/lens @elastic/kibana-vis-editors

.i18nrc.json

@@ -29,6 +29,7 @@
     "expressionRevealImage": "src/plugins/expression_reveal_image",
     "expressionShape": "src/plugins/expression_shape",
     "expressionHeatmap": "src/plugins/chart_expressions/expression_heatmap",
+    "expressionGauge": "src/plugins/chart_expressions/expression_gauge",
     "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
     "expressionMetricVis": "src/plugins/chart_expressions/expression_metric",
     "inputControl": "src/plugins/input_control_vis",

docs/developer/plugin-list.asciidoc

@@ -94,6 +94,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |Expression Error plugin adds an error renderer to the expression plugin. The renderer will display the error image.
 
 
+|{kib-repo}blob/{branch}/src/plugins/chart_expressions/expression_gauge[expressionGauge]
+|WARNING: Missing README.
+
+
 |{kib-repo}blob/{branch}/src/plugins/chart_expressions/expression_heatmap[expressionHeatmap]
 |WARNING: Missing README.
 

packages/kbn-optimizer/limits.yml

@@ -118,3 +118,4 @@ pageLoadAssetSize:
   reporting: 57003
   visTypeHeatmap: 25340
   screenshotting: 17017
+  expressionGauge: 25000

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const EXPRESSION_GAUGE_NAME = 'gauge';
+export const GAUGE_FUNCTION_RENDERER_NAME = 'gauge_renderer';
+
+export const GaugeShapes = {
+  horizontalBullet: 'horizontalBullet',
+  verticalBullet: 'verticalBullet',
+} as const;
+
+export const GaugeTicksPositions = {
+  auto: 'auto',
+  bands: 'bands',
+} as const;
+
+export const GaugeLabelMajorModes = {
+  auto: 'auto',
+  custom: 'custom',
+  none: 'none',
+} as const;
+
+export const GaugeColorModes = {
+  palette: 'palette',
+  none: 'none',
+} as const;

src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.test.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { gaugeFunction } from './gauge_function';
+import type { GaugeArguments } from '..';
+import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
+import { Datatable } from '../../../../expressions/common/expression_types/specs';
+
+describe('interpreter/functions#gauge', () => {
+  const fn = functionWrapper(gaugeFunction());
+  const context: Datatable = {
+    type: 'datatable',
+    rows: [{ 'col-0-1': 0 }],
+    columns: [
+      { id: 'col-0-1', name: 'Count', meta: { type: 'number' } },
+      { id: 'col-1-2', name: 'Dest', meta: { type: 'string' } },
+    ],
+  };
+  const args: GaugeArguments = {
+    ticksPosition: 'auto',
+    labelMajorMode: 'custom',
+    labelMajor: 'title',
+    shape: 'horizontalBullet',
+    colorMode: 'none',
+    minAccessor: 'col-1-2',
+    metricAccessor: 'col-0-1',
+  };
+
+  it('returns an object with the correct structure', () => {
+    const actual = fn(context, args, undefined);
+    expect(actual).toMatchSnapshot();
+  });
+});

src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.ts

@@ -0,0 +1,107 @@
+/*
+ * 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 { GaugeExpressionFunctionDefinition } from '../types';
+import { EXPRESSION_GAUGE_NAME } from '../constants';
+
+export const gaugeFunction = (): GaugeExpressionFunctionDefinition => ({
+  name: EXPRESSION_GAUGE_NAME,
+  type: 'render',
+  inputTypes: ['datatable'],
+  help: i18n.translate('expressionGauge.functions.help', {
+    defaultMessage: 'Gauge visualization',
+  }),
+  args: {
+    shape: {
+      types: ['string'],
+      options: ['horizontalBullet', 'verticalBullet'],
+      help: i18n.translate('expressionGauge.functions.shape.help', {
+        defaultMessage: 'Type of gauge chart',
+      }),
+    },
+    metricAccessor: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions.metricAccessor.help', {
+        defaultMessage: 'Current value',
+      }),
+    },
+    minAccessor: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions.minAccessor.help', {
+        defaultMessage: 'Minimum value',
+      }),
+    },
+    maxAccessor: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions.maxAccessor.help', {
+        defaultMessage: 'Maximum value',
+      }),
+    },
+    goalAccessor: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions.goalAccessor.help', {
+        defaultMessage: 'Goal Value',
+      }),
+    },
+    colorMode: {
+      types: ['string'],
+      default: 'none',
+      options: ['none', 'palette'],
+      help: i18n.translate('expressionGauge.functions.colorMode.help', {
+        defaultMessage: 'If set to palette, the palette colors will be applied to the bands',
+      }),
+    },
+    palette: {
+      types: ['palette'],
+      help: i18n.translate('expressionGauge.functions..metric.palette.help', {
+        defaultMessage: 'Provides colors for the values',
+      }),
+    },
+    ticksPosition: {
+      types: ['string'],
+      options: ['auto', 'bands'],
+      help: i18n.translate('expressionGauge.functions..gaugeChart.config.ticksPosition.help', {
+        defaultMessage: 'Specifies the placement of ticks',
+      }),
+      required: true,
+    },
+    labelMajor: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions..gaugeChart.config.labelMajor.help', {
+        defaultMessage: 'Specifies the labelMajor of the gauge chart displayed inside the chart.',
+      }),
+      required: false,
+    },
+    labelMajorMode: {
+      types: ['string'],
+      options: ['none', 'auto', 'custom'],
+      help: i18n.translate('expressionGauge.functions..gaugeChart.config.labelMajorMode.help', {
+        defaultMessage: 'Specifies the mode of labelMajor',
+      }),
+      required: true,
+    },
+    labelMinor: {
+      types: ['string'],
+      help: i18n.translate('expressionGauge.functions..gaugeChart.config.labelMinor.help', {
+        defaultMessage: 'Specifies the labelMinor of the gauge chart',
+      }),
+      required: false,
+    },
+  },
+  fn(data, args) {
+    return {
+      type: 'render',
+      as: EXPRESSION_GAUGE_NAME,
+      value: {
+        data,
+        args,
+      },
+    };
+  },
+});

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { gaugeFunction } from './gauge_function';

src/plugins/chart_expressions/expression_gauge/common/index.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.
+ */
+
+export const PLUGIN_ID = 'expressionGauge';
+export const PLUGIN_NAME = 'expressionGauge';
+
+export type {
+  GaugeExpressionProps,
+  FormatFactory,
+  GaugeRenderProps,
+  CustomPaletteParams,
+  ColorStop,
+  RequiredPaletteParamTypes,
+  GaugeArguments,
+  GaugeShape,
+  GaugeLabelMajorMode,
+  GaugeTicksPosition,
+  GaugeState,
+} from './types';
+
+export { gaugeFunction } from './expression_functions';
+
+export {
+  EXPRESSION_GAUGE_NAME,
+  GaugeShapes,
+  GaugeColorModes,
+  GaugeTicksPositions,
+  GaugeLabelMajorModes,
+} from './constants';

src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 {
+  Datatable,
+  ExpressionFunctionDefinition,
+  ExpressionValueRender,
+} from '../../../../expressions';
+import { CustomPaletteState, PaletteOutput } from '../../../../charts/common';
+import {
+  EXPRESSION_GAUGE_NAME,
+  GAUGE_FUNCTION_RENDERER_NAME,
+  GaugeShapes,
+  GaugeTicksPositions,
+  GaugeLabelMajorModes,
+  GaugeColorModes,
+} from '../constants';
+import { CustomPaletteParams } from '.';
+
+export type GaugeType = 'gauge';
+export type GaugeColorMode = keyof typeof GaugeColorModes;
+export type GaugeShape = keyof typeof GaugeShapes;
+export type GaugeLabelMajorMode = keyof typeof GaugeLabelMajorModes;
+export type GaugeTicksPosition = keyof typeof GaugeTicksPositions;
+
+export interface GaugeState {
+  metricAccessor?: string;
+  minAccessor?: string;
+  maxAccessor?: string;
+  goalAccessor?: string;
+  ticksPosition: GaugeTicksPosition;
+  labelMajorMode: GaugeLabelMajorMode;
+  labelMajor?: string;
+  labelMinor?: string;
+  colorMode?: GaugeColorMode;
+  palette?: PaletteOutput<CustomPaletteParams>;
+  shape: GaugeShape;
+}
+
+export type GaugeArguments = GaugeState & {
+  shape: GaugeShape;
+  colorMode: GaugeColorMode;
+  palette?: PaletteOutput<CustomPaletteState>;
+};
+
+export type GaugeInput = Datatable;
+
+export interface GaugeExpressionProps {
+  data: Datatable;
+  args: GaugeArguments;
+}
+
+export interface GaugeRender {
+  type: 'render';
+  as: typeof GAUGE_FUNCTION_RENDERER_NAME;
+  value: GaugeExpressionProps;
+}
+
+export type GaugeExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  typeof EXPRESSION_GAUGE_NAME,
+  GaugeInput,
+  GaugeArguments,
+  ExpressionValueRender<GaugeExpressionProps>
+>;