[Lens] Supports icon in the new metric (#154210)

## Summary Closes #129229 Adds support for icon on the new metric. <img width="1504" alt="image" src="https://user-images.githubusercontent.com/17003240/229443928-03913111-cdb5-405f-b0af-dee291a0a8f2.png"> Also it moves the IconSelect dropdown to the shared components (from XY) as it now reused from both visualizations. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
elastic · Apr 4, 2023 · 3754d65 · 3754d65
1 parent fc2a0d7
commit 3754d65
Show file tree

Hide file tree

Showing 20 changed files with 226 additions and 6 deletions.
diff --git a/src/plugins/chart_expressions/expression_metric/common/constants.ts b/src/plugins/chart_expressions/expression_metric/common/constants.ts
@@ -15,3 +15,24 @@ export const LabelPosition = {
   BOTTOM: 'bottom',
   TOP: 'top',
 } as const;
+
+export const AvailableMetricIcons = {
+  EMPTY: 'empty',
+  SORTUP: 'sortUp',
+  SORTDOWN: 'sortDown',
+  COMPUTE: 'compute',
+  ASTERISK: 'asterisk',
+  ALERT: 'alert',
+  BELL: 'bell',
+  BOLT: 'bolt',
+  BUG: 'bug',
+  EDITOR_COMMENT: 'editorComment',
+  FLAG: 'flag',
+  HEART: 'heart',
+  MAP_MARKER: 'mapMarker',
+  PIN: 'pin',
+  STAR_EMPTY: 'starEmpty',
+  TAG: 'tag',
+  GLOBE: 'globe',
+  TEMPERATURE: 'temperature',
+} as const;
diff --git a/...ns/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts b/...ns/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
@@ -84,6 +84,12 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
         defaultMessage: 'Provides a static visualization color. Overridden by palette.',
       }),
     },
+    icon: {
+      types: ['string'],
+      help: i18n.translate('expressionMetricVis.function.icon.help', {
+        defaultMessage: 'Provides a static visualization icon.',
+      }),
+    },
     palette: {
       types: ['palette'],
       help: i18n.translate('expressionMetricVis.function.palette.help', {
@@ -181,6 +187,7 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
             subtitle: args.subtitle,
             secondaryPrefix: args.secondaryPrefix,
             color: args.color,
+            icon: args.icon,
             palette: args.palette?.params,
             progressDirection: args.progressDirection,
             maxCols: args.maxCols,

diff --git a/src/plugins/chart_expressions/expression_metric/common/index.ts b/src/plugins/chart_expressions/expression_metric/common/index.ts
@@ -19,6 +19,7 @@ export type {
   MetricVisParam,
   VisParams,
   MetricOptions,
+  AvailableMetricIcon,
 } from './types';
 
 export { metricVisFunction } from './expression_functions';

diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
@@ -8,6 +8,7 @@
 
 import type { PaletteOutput } from '@kbn/coloring';
 import { LayoutDirection, MetricWTrend } from '@elastic/charts';
+import { $Values } from '@kbn/utility-types';
 import {
   Datatable,
   ExpressionFunctionDefinition,
@@ -16,7 +17,13 @@ import {
 import { ExpressionValueVisDimension, prepareLogTable } from '@kbn/visualizations-plugin/common';
 import type { AllowedSettingsOverrides, CustomPaletteState } from '@kbn/charts-plugin/common';
 import { VisParams, visType } from './expression_renderers';
-import { EXPRESSION_METRIC_NAME, EXPRESSION_METRIC_TRENDLINE_NAME } from '../constants';
+import {
+  EXPRESSION_METRIC_NAME,
+  EXPRESSION_METRIC_TRENDLINE_NAME,
+  AvailableMetricIcons,
+} from '../constants';
+
+export type AvailableMetricIcon = $Values<typeof AvailableMetricIcons>;
 
 export interface MetricArguments {
   metric: ExpressionValueVisDimension | string;
@@ -28,6 +35,7 @@ export interface MetricArguments {
   secondaryPrefix?: string;
   progressDirection: LayoutDirection;
   color?: string;
+  icon?: string;
   palette?: PaletteOutput<CustomPaletteState>;
   maxCols: number;
   minTiles?: number;

diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
@@ -24,6 +24,7 @@ export interface MetricVisParam {
   subtitle?: string;
   secondaryPrefix?: string;
   color?: string;
+  icon?: string;
   palette?: CustomPaletteState;
   progressDirection: LayoutDirection;
   maxCols: number;

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
@@ -232,6 +232,7 @@ describe('MetricVisComponent', function () {
       metric: {
         progressDirection: 'vertical',
         maxCols: 5,
+        icon: 'empty',
       },
       dimensions: {
         metric: basePriceColumnId,
@@ -252,6 +253,7 @@ describe('MetricVisComponent', function () {
         Object {
           "color": "#f5f7fa",
           "extra": <span />,
+          "icon": [Function],
           "subtitle": undefined,
           "title": "Median products.base_price",
           "value": 28.984375,
@@ -314,6 +316,7 @@ describe('MetricVisComponent', function () {
             secondary prefix
              13.63
           </span>,
+          "icon": [Function],
           "subtitle": "subtitle",
           "title": "Median products.base_price",
           "value": 28.984375,
@@ -360,6 +363,7 @@ describe('MetricVisComponent', function () {
           "color": "#f5f7fa",
           "domainMax": 28.984375,
           "extra": <span />,
+          "icon": [Function],
           "progressBarDirection": "vertical",
           "subtitle": undefined,
           "title": "Median products.base_price",
@@ -435,6 +439,7 @@ describe('MetricVisComponent', function () {
           Object {
             "color": "#f5f7fa",
             "extra": <span />,
+            "icon": undefined,
             "subtitle": "Median products.base_price",
             "title": "Friday",
             "value": 28.984375,
@@ -443,6 +448,7 @@ describe('MetricVisComponent', function () {
           Object {
             "color": "#f5f7fa",
             "extra": <span />,
+            "icon": undefined,
             "subtitle": "Median products.base_price",
             "title": "Wednesday",
             "value": 28.984375,
@@ -451,6 +457,7 @@ describe('MetricVisComponent', function () {
           Object {
             "color": "#f5f7fa",
             "extra": <span />,
+            "icon": undefined,
             "subtitle": "Median products.base_price",
             "title": "Saturday",
             "value": 25.984375,
@@ -459,6 +466,7 @@ describe('MetricVisComponent', function () {
           Object {
             "color": "#f5f7fa",
             "extra": <span />,
+            "icon": undefined,
             "subtitle": "Median products.base_price",
             "title": "Sunday",
             "value": 25.784375,
@@ -467,6 +475,7 @@ describe('MetricVisComponent', function () {
           Object {
             "color": "#f5f7fa",
             "extra": <span />,
+            "icon": undefined,
             "subtitle": "Median products.base_price",
             "title": "Thursday",
             "value": 25.348011363636363,
@@ -595,6 +604,7 @@ describe('MetricVisComponent', function () {
             Object {
               "color": "#f5f7fa",
               "extra": <span />,
+              "icon": undefined,
               "subtitle": "Median products.base_price",
               "title": "Friday",
               "value": 28.984375,
@@ -603,6 +613,7 @@ describe('MetricVisComponent', function () {
             Object {
               "color": "#f5f7fa",
               "extra": <span />,
+              "icon": undefined,
               "subtitle": "Median products.base_price",
               "title": "Wednesday",
               "value": 28.984375,
@@ -611,6 +622,7 @@ describe('MetricVisComponent', function () {
             Object {
               "color": "#f5f7fa",
               "extra": <span />,
+              "icon": undefined,
               "subtitle": "Median products.base_price",
               "title": "Saturday",
               "value": 25.984375,
@@ -619,6 +631,7 @@ describe('MetricVisComponent', function () {
             Object {
               "color": "#f5f7fa",
               "extra": <span />,
+              "icon": undefined,
               "subtitle": "Median products.base_price",
               "title": "Sunday",
               "value": 25.784375,
@@ -627,6 +640,7 @@ describe('MetricVisComponent', function () {
             Object {
               "color": "#f5f7fa",
               "extra": <span />,
+              "icon": undefined,
               "subtitle": "Median products.base_price",
               "title": "Thursday",
               "value": 25.348011363636363,
@@ -637,6 +651,7 @@ describe('MetricVisComponent', function () {
             Object {
               "color": "#f5f7fa",
               "extra": <span />,
+              "icon": undefined,
               "subtitle": "Median products.base_price",
               "title": "Other",
               "value": 24.984375,
@@ -678,6 +693,7 @@ describe('MetricVisComponent', function () {
               "color": "#f5f7fa",
               "domainMax": 28.984375,
               "extra": <span />,
+              "icon": undefined,
               "progressBarDirection": "vertical",
               "subtitle": "Median products.base_price",
               "title": "Friday",
@@ -688,6 +704,7 @@ describe('MetricVisComponent', function () {
               "color": "#f5f7fa",
               "domainMax": 28.984375,
               "extra": <span />,
+              "icon": undefined,
               "progressBarDirection": "vertical",
               "subtitle": "Median products.base_price",
               "title": "Wednesday",
@@ -698,6 +715,7 @@ describe('MetricVisComponent', function () {
               "color": "#f5f7fa",
               "domainMax": 25.984375,
               "extra": <span />,
+              "icon": undefined,
               "progressBarDirection": "vertical",
               "subtitle": "Median products.base_price",
               "title": "Saturday",
@@ -708,6 +726,7 @@ describe('MetricVisComponent', function () {
               "color": "#f5f7fa",
               "domainMax": 25.784375,
               "extra": <span />,
+              "icon": undefined,
               "progressBarDirection": "vertical",
               "subtitle": "Median products.base_price",
               "title": "Sunday",
@@ -718,6 +737,7 @@ describe('MetricVisComponent', function () {
               "color": "#f5f7fa",
               "domainMax": 25.348011363636363,
               "extra": <span />,
+              "icon": undefined,
               "progressBarDirection": "vertical",
               "subtitle": "Median products.base_price",
               "title": "Thursday",
@@ -730,6 +750,7 @@ describe('MetricVisComponent', function () {
               "color": "#f5f7fa",
               "domainMax": 24.984375,
               "extra": <span />,
+              "icon": undefined,
               "progressBarDirection": "vertical",
               "subtitle": "Median products.base_price",
               "title": "Other",

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@@ -36,7 +36,7 @@ import type { FieldFormatConvertFunction } from '@kbn/field-formats-plugin/commo
 import { CUSTOM_PALETTE } from '@kbn/coloring';
 import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
-import { useResizeObserver, useEuiScrollBar } from '@elastic/eui';
+import { useResizeObserver, useEuiScrollBar, EuiIcon } from '@elastic/eui';
 import { AllowedSettingsOverrides } from '@kbn/charts-plugin/common';
 import { getOverridesFor } from '@kbn/chart-expressions-common';
 import { DEFAULT_TRENDLINE_NAME } from '../../common/constants';
@@ -173,6 +173,11 @@ const buildFilterEvent = (rowIdx: number, columnIdx: number, table: Datatable) =
   };
 };
 
+const getIcon =
+  (type: string) =>
+  ({ width, height, color }: { width: number; height: number; color: string }) =>
+    <EuiIcon type={type} width={width} height={height} fill={color} style={{ width, height }} />;
+
 export interface MetricVisComponentProps {
   data: Datatable;
   config: Pick<VisParams, 'metric' | 'dimensions'>;
@@ -229,6 +234,7 @@ export const MetricVis = ({
       valueFormatter: formatPrimaryMetric,
       title,
       subtitle,
+      icon: config.metric?.icon ? getIcon(config.metric?.icon) : undefined,
       extra: (
         <span>
           {secondaryPrefix}

diff --git a/...xy/xy_config_panel/shared/icon_select.tsx → ...ed_components/icon_select/icon_select.tsx b/...xy/xy_config_panel/shared/icon_select.tsx → ...ed_components/icon_select/icon_select.tsx
diff --git a/x-pack/plugins/lens/public/shared_components/index.ts b/x-pack/plugins/lens/public/shared_components/index.ts
@@ -41,3 +41,4 @@ export { DimensionEditorSection } from './dimension_section';
 export { FilterQueryInput } from './filter_query_input';
 export * from './static_header';
 export * from './vis_label';
+export { IconSelect } from './icon_select/icon_select';
diff --git a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.test.tsx b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.test.tsx
@@ -74,6 +74,7 @@ describe('dimension editor', () => {
     maxCols: 5,
     color: 'static-color',
     palette,
+    icon: 'tag',
     showBar: true,
     trendlineLayerId: 'second',
     trendlineLayerType: 'metricTrendline',

diff --git a/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx
@@ -38,6 +38,7 @@ import {
   applyPaletteParams,
   PalettePanelContainer,
   useDebouncedValue,
+  IconSelect,
 } from '../../shared_components';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import { defaultNumberPaletteParams, defaultPercentagePaletteParams } from './palette_config';
@@ -49,6 +50,7 @@ import {
 } from './visualization';
 import { CollapseSetting } from '../../shared_components/collapse_setting';
 import { DebouncedInput } from '../../shared_components/debounced_input';
+import { iconsSet } from './icon_set';
 
 export type SupportingVisType = 'none' | 'bar' | 'trendline';
 
@@ -381,6 +383,24 @@ function PrimaryMetricEditor(props: SubProps) {
           </EuiFlexGroup>
         </EuiFormRow>
       )}
+      <EuiFormRow
+        display="columnCompressed"
+        fullWidth
+        label={i18n.translate('xpack.lens.metric.icon', {
+          defaultMessage: 'Icon decoration',
+        })}
+      >
+        <IconSelect
+          customIconSet={iconsSet}
+          value={state?.icon}
+          onChange={(newIcon) => {
+            setState({
+              ...state,
+              icon: newIcon,
+            });
+          }}
+        />
+      </EuiFormRow>
     </>
   );
 }