[Lens] Add gauges visualization (#118616)

* add gauge chart expression * excluding staticValue from suggestion for other visualizations * adding prioritized operation for visualization groups (when dropping, it should be chosen over the default) * changing the group for metric in chart switcher * only access the activeData if exists (avoids error in console) * Adding gauge chart * round nicely the maximum value * fix warnings * fixing rounding * fixing tests * suggestions tests * suggestions tbc * tests for staticValue limitations * added tests to visualization.ts * correct bands * wip * added tests * suggestions * palete fixes & tests * fix magic max * metric should not overflow * address review * [Lens] adding toolbar tests * limit domain to <min, max> * changes the order of experimental badge and dataLoss indicator * fix i18n * address feedback p1 * don't show required nor optional for max/min dimensions * fix types * tests fixed * fix types * last piece of gauge feedback * change naming from title and subtitle to labelMajor and labelMinor * fix bug with percent color bands * functional tests * metric shouldn't have static value * pass formatter to metric * fake formatter * fix css and replace emptyPlaceholder * fix tests * fix static values * name changes * breaking functional Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 7, 2021 · 5c585f5 · 5c585f5
1 parent 0071a7b
commit 5c585f5
Show file tree

Hide file tree

Showing 72 changed files with 3,795 additions and 107 deletions.
diff --git a/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/index.scss b/src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/index.scss
@@ -9,14 +9,6 @@
   padding: $euiSizeS;
 }
 
-.heatmap-chart__empty {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .heatmap-chart-icon__subdued {
   fill: $euiTextSubduedColor;
 }

diff --git a/src/plugins/charts/public/static/components/empty_placeholder.scss b/src/plugins/charts/public/static/components/empty_placeholder.scss
@@ -0,0 +1,7 @@
+.chart__empty-placeholder {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/plugins/charts/public/static/components/empty_placeholder.tsx b/src/plugins/charts/public/static/components/empty_placeholder.tsx
@@ -9,15 +9,20 @@
 import React from 'react';
 import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import './empty_placeholder.scss';
 
-export const EmptyPlaceholder = (props: { icon: IconType }) => (
+export const EmptyPlaceholder = ({
+  icon,
+  message = <FormattedMessage id="charts.noDataLabel" defaultMessage="No results found" />,
+}: {
+  icon: IconType;
+  message?: JSX.Element;
+}) => (
   <>
-    <EuiText className="heatmap-chart__empty" textAlign="center" color="subdued" size="xs">
-      <EuiIcon type={props.icon} color="subdued" size="l" />
+    <EuiText className="chart__empty-placeholder" textAlign="center" color="subdued" size="xs">
+      <EuiIcon type={icon} color="subdued" size="l" />
       <EuiSpacer size="s" />
-      <p>
-        <FormattedMessage id="charts.noDataLabel" defaultMessage="No results found" />
-      </p>
+      <p>{message}</p>
     </EuiText>
   </>
 );
diff --git a/x-pack/plugins/lens/common/expressions/gauge_chart/gauge_chart.ts b/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 { GaugeArguments, EXPRESSION_GAUGE_NAME, GAUGE_FUNCTION_RENDERER_NAME } from './types';
+
+export interface GaugeExpressionProps {
+  data: LensMultiTable;
+  args: GaugeArguments;
+}
+export interface GaugeRender {
+  type: 'render';
+  as: typeof GAUGE_FUNCTION_RENDERER_NAME;
+  value: GaugeExpressionProps;
+}
+
+export const gauge: ExpressionFunctionDefinition<
+  typeof EXPRESSION_GAUGE_NAME,
+  LensMultiTable,
+  GaugeArguments,
+  GaugeRender
+> = {
+  name: EXPRESSION_GAUGE_NAME,
+  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: GaugeArguments) {
+    return {
+      type: 'render',
+      as: GAUGE_FUNCTION_RENDERER_NAME,
+      value: {
+        data,
+        args,
+      },
+    };
+  },
+};
diff --git a/x-pack/plugins/lens/common/expressions/gauge_chart/index.ts b/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';
diff --git a/x-pack/plugins/lens/common/expressions/gauge_chart/types.ts b/x-pack/plugins/lens/common/expressions/gauge_chart/types.ts
@@ -0,0 +1,72 @@
+/*
+ * 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 EXPRESSION_GAUGE_NAME = 'lens_gauge';
+export const GAUGE_FUNCTION_RENDERER_NAME = '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 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 GaugeArguments = SharedGaugeLayerState & {
+  title?: string;
+  description?: string;
+  shape: GaugeShape;
+  colorMode: GaugeColorMode;
+  palette?: PaletteOutput<CustomPaletteState>;
+};
diff --git a/x-pack/plugins/lens/common/expressions/index.ts b/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';

diff --git a/x-pack/plugins/lens/public/assets/chart_gauge.tsx b/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>
+);
diff --git a/x-pack/plugins/lens/public/async_services.ts b/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';

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
@@ -17,7 +17,7 @@ import {
   SerializedFieldFormat,
 } from 'src/plugins/field_formats/common';
 import { VisualizationContainer } from '../../visualization_container';
-import { EmptyPlaceholder } from '../../shared_components';
+import { EmptyPlaceholder } from '../../../../../../src/plugins/charts/public';
 import { LensIconChartDatatable } from '../../assets/chart_datatable';
 import { DataContext, DatatableComponent } from './table_basic';
 import { LensMultiTable } from '../../../common';

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -18,11 +18,12 @@ import {
   EuiDataGridSorting,
   EuiDataGridStyle,
 } from '@elastic/eui';
+import { EmptyPlaceholder } from '../../../../../../src/plugins/charts/public';
 import type { LensFilterEvent, LensTableRowContextMenuEvent } from '../../types';
 import type { FormatFactory } from '../../../common';
 import type { LensGridDirection } from '../../../common/expressions';
 import { VisualizationContainer } from '../../visualization_container';
-import { EmptyPlaceholder, findMinMaxByColumnId } from '../../shared_components';
+import { findMinMaxByColumnId } from '../../shared_components';
 import { LensIconChartDatatable } from '../../assets/chart_datatable';
 import type {
   DataContextType,