[Lens] Add gauges visualization

x-pack/plugins/lens/common/expressions/gauge_chart/gauge_chart.ts

@@ -0,0 +1,134 @@
+/*
+ * 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 type { ExpressionFunctionDefinition } from '../../../../../../src/plugins/expressions/common';
+import type { LensMultiTable } from '../../types';
+import { GaugeExpressionArgs, GAUGE_FUNCTION, GAUGE_FUNCTION_RENDERER } from './types';
+
+export interface GaugeExpressionProps {
+  data: LensMultiTable;
+  args: GaugeExpressionArgs;
+}
+export interface GaugeRender {
+  type: 'render';
+  as: typeof GAUGE_FUNCTION_RENDERER;
+  value: GaugeExpressionProps;
+}
+
+export const gauge: ExpressionFunctionDefinition<
+  typeof GAUGE_FUNCTION,
+  LensMultiTable,
+  GaugeExpressionArgs,
+  GaugeRender
+> = {
+  name: GAUGE_FUNCTION,
+  type: 'render',
+  help: i18n.translate('xpack.lens.gauge.expressionHelpLabel', {
+    defaultMessage: 'Gauge renderer',
+  }),
+  args: {
+    title: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gauge.title.help', {
+        defaultMessage: 'Saved gauge title',
+      }),
+    },
+    shape: {
+      types: ['string'],
+      options: ['horizontalBullet', 'verticalBullet'],
+      help: i18n.translate('xpack.lens.gauge.shape.help', {
+        defaultMessage: 'Type of gauge chart',
+      }),
+    },
+    description: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gauge.description.help', {
+        defaultMessage: 'Saved gauge description',
+      }),
+    },
+    metricAccessor: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gauge.metricAccessor.help', {
+        defaultMessage: 'Current value',
+      }),
+    },
+    minAccessor: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gauge.minAccessor.help', {
+        defaultMessage: 'Minimum value',
+      }),
+    },
+    maxAccessor: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gauge.maxAccessor.help', {
+        defaultMessage: 'Maximum value',
+      }),
+    },
+    goalAccessor: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gauge.goalAccessor.help', {
+        defaultMessage: 'Goal Value',
+      }),
+    },
+    colorMode: {
+      types: ['string'],
+      default: 'none',
+      options: ['none', 'palette'],
+      help: i18n.translate('xpack.lens.gauge.colorMode.help', {
+        defaultMessage: 'Which part of gauge to color',
+      }),
+    },
+    palette: {
+      types: ['palette'],
+      help: i18n.translate('xpack.lens.metric.palette.help', {
+        defaultMessage: 'Provides colors for the values',
+      }),
+    },
+    ticksPosition: {
+      types: ['string'],
+      options: ['auto', 'bands'],
+      help: i18n.translate('xpack.lens.gaugeChart.config.ticksPosition.help', {
+        defaultMessage: 'Specifies the placement of ticks',
+      }),
+      required: true,
+    },
+    labelMajor: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.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('xpack.lens.gaugeChart.config.labelMajorMode.help', {
+        defaultMessage: 'Specifies the mode of labelMajor',
+      }),
+      required: true,
+    },
+    labelMinor: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.gaugeChart.config.labelMinor.help', {
+        defaultMessage: 'Specifies the labelMinor of the gauge chart',
+      }),
+      required: false,
+    },
+  },
+  inputTypes: ['lens_multitable'],
+  fn(data: LensMultiTable, args: GaugeExpressionArgs) {
+    return {
+      type: 'render',
+      as: GAUGE_FUNCTION_RENDERER,
+      value: {
+        data,
+        args,
+      },
+    };
+  },
+};

x-pack/plugins/lens/common/expressions/gauge_chart/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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './gauge_chart';
+export * from './types';

x-pack/plugins/lens/common/expressions/gauge_chart/types.ts

@@ -0,0 +1,73 @@
+/*
+ * 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 type {
+  PaletteOutput,
+  CustomPaletteState,
+} from '../../../../../../src/plugins/charts/common';
+import type { CustomPaletteParams, LayerType } from '../../types';
+
+export const GAUGE_FUNCTION = 'lens_gauge';
+export const GAUGE_FUNCTION_RENDERER = 'lens_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;
+
+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 SharedGaugeLayerState {
+  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 GaugeLayerState = SharedGaugeLayerState & {
+  layerId: string;
+  layerType: LayerType;
+};
+
+export type GaugeVisualizationState = GaugeLayerState & {
+  shape: GaugeShape;
+};
+
+export type GaugeExpressionArgs = SharedGaugeLayerState & {
+  title?: string;
+  description?: string;
+  shape: GaugeShape;
+  colorMode: GaugeColorMode;
+  palette?: PaletteOutput<CustomPaletteState>;
+};

x-pack/plugins/lens/common/expressions/index.ts

@@ -11,6 +11,7 @@ export * from './rename_columns';
 export * from './merge_tables';
 export * from './time_scale';
 export * from './datatable';
+export * from './gauge_chart';
 export * from './metric_chart';
 export * from './pie_chart';
 export * from './xy_chart';

x-pack/plugins/lens/public/assets/chart_gauge.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { EuiIconProps } from '@elastic/eui';
+import React from 'react';
+
+export const LensIconChartGaugeHorizontal = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    width="30"
+    height="22"
+    viewBox="0 0 30 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      className="lensChartIcon__subdued"
+      d="M1 13a1 1 0 00-1 1v2a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-1h5v1a1 1 0 102 0v-2a1 1 0 00-1-1H1z"
+    />
+    <path
+      className="lensChartIcon__accent"
+      d="M0 6a1 1 0 011-1h24a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V6z"
+    />
+  </svg>
+);
+
+export const LensIconChartGaugeVertical = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    width="30"
+    height="22"
+    viewBox="0 0 30 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      className="lensChartIcon__accent"
+      d="M16 22a1 1 0 01-1-1V4a1 1 0 011-1h4a1 1 0 011 1v17a1 1 0 01-1 1h-4z"
+    />
+    <path
+      className="lensChartIcon__subdued"
+      d="M10 0h2a1 1 0 011 1v20a1 1 0 01-1 1h-2a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1v-3h-1a1 1 0 110-2h1V7h-1a1 1 0 010-2h1V2h-1a1 1 0 010-2z"
+    />
+  </svg>
+);

x-pack/plugins/lens/public/async_services.ts

@@ -24,6 +24,8 @@ export * from './xy_visualization/xy_visualization';
 export * from './xy_visualization';
 export * from './heatmap_visualization/heatmap_visualization';
 export * from './heatmap_visualization';
+export * from './visualizations/gauge/gauge_visualization';
+export * from './visualizations/gauge';
 
 export * from './indexpattern_datasource/indexpattern';
 export * from './indexpattern_datasource';

x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx

@@ -138,6 +138,36 @@ describe('Datatable Visualization', () => {
       expect(suggestions.length).toBeGreaterThan(0);
     });
 
+    it('should reject suggestion with static value', () => {
+      function staticValueCol(columnId: string): TableSuggestionColumn {
+        return {
+          columnId,
+          operation: {
+            dataType: 'number',
+            label: `Static value: ${columnId}`,
+            isBucketed: false,
+            isStaticValue: true,
+          },
+        };
+      }
+      const suggestions = datatableVisualization.getSuggestions({
+        state: {
+          layerId: 'first',
+          layerType: layerTypes.DATA,
+          columns: [{ columnId: 'col1' }],
+        },
+        table: {
+          isMultiRow: true,
+          layerId: 'first',
+          changeType: 'initial',
+          columns: [staticValueCol('col1'), strCol('col2')],
+        },
+        keptLayerIds: [],
+      });
+
+      expect(suggestions).toHaveLength(0);
+    });
+
     it('should retain width and hidden config from existing state', () => {
       const suggestions = datatableVisualization.getSuggestions({
         state: {

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -105,7 +105,8 @@ export const getDatatableVisualization = ({
     if (
       keptLayerIds.length > 1 ||
       (keptLayerIds.length && table.layerId !== keptLayerIds[0]) ||
-      (state && table.changeType === 'unchanged')
+      (state && table.changeType === 'unchanged') ||
+      table.columns.some((col) => col.operation.isStaticValue)
     ) {
       return [];
     }